Build

Ember.js 101: From Zero to Ember in PubNub Seconds

5 min read • Michael Carroll on Sep 30, 2014

EmberJS and PubNubTranslation: How to get a real-time app working with PubNub and Ember.js in 60 seconds or less

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.

The result is a sample application that fits into 99 lines of HTML, of which less than 60 is JavaScript. If you’re used to coding your JavaScript in CoffeeScript, you can expect that to easily cut in half.

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)
  • pubnub.min.js: the main PubNub communication library for JavaScript
  • 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 messages array.

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 messages object.

Not too shabby! But you may ask, how does it all work? Let’s check out the JavaScript!

Step 3: JavaScript – Where the Magic Happens

Let’s walk through the JavaScript and see how it’s all put together.

Let’s take this piece by piece:

  • We create a normal script tag 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_id for our application (your app will probably do something different).
  • We then initialize a PubNubEmber service that will be our bridge into the PubNub world.

ember.jsOf course, for your application, you should initialize the service with your own publish and subscribe keys from your PubNub account.

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:main object within the controller using Ember’s needskeyword

This is the magic that lets us access the PubNub service within our application.

The 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.

One major thing I should highlight is use of the Ember.js ArrayProxy class instead of regular JavaScript arrays. For simple/primitive properties like Strings and Numbers, Ember.js is already set to auto-update the view. Arrays need a little more magic. By using Ember.js ArrayProxy instances, we can use live data binding within our view knowing that when those arrays change in the controller, the changes will be instantly reflected in the view.

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 pn.on(pn.emPrsEv(theChannel) ....

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 pn.on(pn.emMsgEv(theChannel) ....

And we’re done! We hope you found this useful, please keep in touch and reach out if you have ideas. Or, if you need a hand!

Get Started
Sign up for free and use PubNub to power your
Ember.js app!

0