Ember.js 101: From Zero to Ember in PubNub Seconds
Here at PubNub, we’ve been paying attention to the incredible ascent of Ember.js. In the short time it’s been around, it has amassed a huge following and changed the way we build web applications.
We thought it would be kind of cool to put together the smallest possible (but still interesting) sample application showcasing PubNub and Ember.js.
Here are the goodies:
We’ll walk you through the HTML section by section.
Step 1: Get Your Includes On
To get started, we’ll need to set up the script includes for PubNub and Ember.js, as well as an optional stylesheet for Bootstrap styles.
For folks who are familiar with Bower, you’ll probably start by bringing in
pubnub-ember package using:
Whether you use Bower or not, your HTML includes will end up looking something like this:
What does all this stuff do?
jquery-1.10.1.min.js: bring in some JQuery (used by Ember.js)
handlebars-1.0.0.js: bring in some Handlebars (used by Ember.js)
ember.js: that Ember.js goodness we all know and love
pubnub-ember.js: bring in the official PubNub SDK for Ember.js
bootstrap.min.css: bring in the bootstrap styles
Once these are all set, you’re good to start coding!
Step 2: Set Up Your HTML Layout and Dynamic Content
Let’s get the HTML set up as an application template:
Ember.js needs to be able to find your app’s view. To make that happen, we use an inline script of type
text/x-handlebars containing the div element we want to Ember.js-ify. When Ember.js tries to display our application, it’ll look for the handlebars template named “application”.
Wow, how awesome is that? We can create a dynamic list of users simply by using a
ul element and an
li element that’s set up to iterate over all of the items in the
users property of the controller. For the purposes of this demo, each user object is a simple string that comes from the channel’s presence list.
Just a header. Nothing to see here. One thing that’s kind of nifty is that we substitute in the length attribute from the controller’s
This is the first interactive feature – a simple text box that binds its content to the
new_message property of the controller, and a submit button for the form. The form submit function is bound to the
publish action in the scope. What does it do? We’ll find out soon!
Now that you’re already an Ember.js and PubNub expert, you can see that this is just a dynamic collection of messages from the controller’s
Let’s take this piece by piece:
- We create a normal
scripttag in the body – that’s easy enough. You may keep your JS in a separate file – that’s totally cool.
- The next part is defining an Ember.js application where all of this lives.
- We set up a random
user_idfor our application (your app will probably do something different).
- We then initialize a
PubNubEmberservice that will be our bridge into the PubNub world.
You’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. Once you have, clone the GitHub repository, and enter your unique PubNub keys on the PubNub initialization.
It’s important to initialize the PubNub only once during the course of the application. The UUID is the globally unique user ID you’d like to use for identifying the user.
- We start initializing an ApplicationController that will hold all of our application logic
- First, we declare an Ember.js dependency on the
pubnub:mainobject within the controller using Ember’s
This is the magic that lets us access the PubNub service within our application.
controller object is an Ember.js controller – that’s the place where all of the data and functions for our application will live. Again, notice how we’re injecting the PubNub service into our controller – that’s how we get access to all of the Real-Time goodness that PubNub provides.
Let’s take a look at the body of the controller object:
These are pretty self-explanatory – just settings up variables we’ll use for the application.
I bet you can’t tell what that does! You’re right – it calls the
emSubscribe function which creates a new channel subscription for our app. The channel name is specified in the variables above. It’s also possible to subscribe to multiple channels, and PubNub does all the work to make it easy.
Ok, now that we’ve subscribed, how does our app know about messages coming in?
Here we bind an event handler to listen for message events. The PubNub Ember.js library receives all of those events coming from the channel and transforms them into Ember.js
Evented events. Here we’re saying that when a message comes in, push it into the controller’s
messages collection. Since it’s not easy for Ember.js to detect an array push call, we use the special ArrayProxy
pushObject method to make sure that Ember.js updates the view properly.
If you’d like your app to display contents of the dynamic user list, we try to keep it easy with the Ember.js library. In the code snippet above, we register an event listener for presence events that will update the controller’s
users collection with the user list that the Ember.js library is keeping track of for us. This applies to join and leave events. Pretty nifty!
If you’d like to bring in the user list, just add the call above – it’ll fire off a presence event, which will be handled by the presence handler we registered above using
If you’d like to bring in message persistence, just add the call above – it’ll fire all of the message events, which will be handled by the event handler we registered above using