The JS Bin also loads can.js, which is a script that includes all of CanJS core under a
single global can namespace.

Generally speaking, you should not use the global can script, but instead you
should import things directly with a module loader like StealJS,
WebPack or Browserify. In a real app, your code will look like:

When complete, you should be able to toggle between the two pages. If you type:

window.location.hash

in JS Bin’s console tab after clicking a new page, you will be able to see the hash change between !# and #!chat.

This step sets up basic routing between different “pages” in an application.
CanJS’s routing is based on the properties in the application view model. When
those properties change, different content is shown.

When complete, you will be able to create messages and have them appear in the list.

This step sets up a form to create a Message on the server.
Notice that the new Message automatically appears in the list of messages. This
is because can-connect/can/super-map/super-map adds the real-time behavior. The
real-time behavior automatically inserts newly created messages into
lists that they belong within. This is one of CanJS’s best features — automatic list management.

Key take-away: CanJS will add, remove, and update lists for you automatically.

Real Time

In this section, we will:

Listen to messages created by other users and add them to the list of messages.

When complete, you can open up the same JS Bin in another window, create a
message, and it will appear in the first JS Bin’s messages list.

This step connects to a WebSocket API
that pushes messages when Messages are created, updated or destroyed. By calling the
real-time methods when these events happen, CanJS will automatically
update the messages list.