Zero to Real-Time
 EmberJS in
 60 Seconds Sunny Gleason Boston EmberJS Meetup October 9, 2014 http://goo.gl/7mVKpJ 

var self = this; • Sunny Gleason, All-Stack Engineer • Previous: Amazon (web services), Ning, Startup(1..N) • Current: SunnyCloud • Short Story: A-Team you can call on to help you build (or rescue) cloud services, web & mobile applications • Longer Story: Network of developers aiming to change the way businesses build applications 

take these… Codepen (single) http://goo.gl/f9hpnu Codepen (sectional) http://goo.gl/0KjGDZ Blog Entry http://goo.gl/TcksSL PubNub Trial http://goo.gl/oJnTpv 

hello codepen (this is the 60 seconds part) 

why is real-time important? source http://www.gamasutra.com/view/feature/1499/the_history_of_zork.php 

why is real-time important? source http://flapmmo.com/ 

applications should must be 
 customer-focused 
 responsive Ǎ 
 live updating 

our demo application real-time chat user presence  message history
 
 … in 99 lines of HTML/JS 

what does it do? 
 į subscribe to a real-time channel display a list of online users show the list of recent messages publish messages to the channel 

what does it do? 

the html (1) ! ! ! ! ! • include jQuery • include PubNub data stream network • include Handlebars library • include EmberJS library • include PubNub/EmberJS library • include Bootstrap styles (optional) 

the html (2) ! ! <div class="container">! ...! </div>! ! • Create the Application Template • (You may set up your templates /
 components seperately) 

the html (3)

Online Users

!

! {{#each user in users}}!
• {{user}}
! {{/each}}!

• Display a dynamic list of users 

the html (4) ! {{input type="text" value=new_message placeholder="Enter a message"}}! ! • Create a form • Bind a text input as chat message input • Bind form submission to ‘publish()’ action 

the html (5) • Display a dynamic list of messages 

the js (1) window.Mini = Ember.Application.create();! var user_id = "User " + Math.round(Math.random() * 1000);! 
 Mini.PubNub = PubNubEmber.extend({! cfg: {! subscribe_key: 'demo',! publish_key: 'demo',! uuid: user_id! }! }); • Create an EmberJS application • Create a random user id • Initialize the PubNub service 

the js (2) Mini.ApplicationController = Ember.Controller.extend({! needs:['pubnub:main'],! channel: 'The EmberJS Channel',! new_message: '',! user_id: user_id,! ... • Create our ApplicationController • Declare dependency on PubNub service • Initialize channel name, new_message and user_id 

the js (3) // Ember Dynamic collection for messages list! messages: Ember.ArrayProxy.create({
 content: Ember.A(['Welcome to The EmberJS Channel']) }),! 
 // Ember Dynamic collection for user list! users: Ember.ArrayProxy.create({
 content: Ember.A([]) }), • Initialize EmberJS dynamic collections
 for messages and user list 

the js (4) init: function() {! var pn = this.get('pubnub'); // PubNub service instance! var chan = this.get('channel'); // channel name! var self = this; // reference to 'this'
 // (for callbacks)
 ... • Start defining the init() function • Store PubNub instance in ‘pn’ • Store channel name in ‘chan’ • Keep a reference to ‘this’ in ‘self’ 

the js (5) // Subscribe to the Channel! pn.emSubscribe({ channel: chan }); • Subscribe to “The EmberJS Channel” channel • Enable EmberJS events in the background
 for messages and presence events 

the js (6) // Register for message events! pn.on(pn.emMsgEv(chan), function(payload){! self.get('messages').pushObject(payload.message);! }); • Register a callback for message events • Push the message into the messages list • Thank you, Ember.A dynamic list! 

the js (7) // Register for presence events! pn.on(pn.emPrsEv(chan), function(payload){! self.get('users').set('content',
 pn.emListPresence(chan));! }); • Register a callback for presence events • Get the list of users from the PubNub service • Update the users list (content of Ember.A) 

the js (8) // Pre-Populate the user list (optional)! pn.emHereNow({ channel: chan });! ! // Populate message history (optional)! pn.emHistory({! channel: chan,! count: 500! }); • Call the emHereNow() function to trigger an initial presence event • Call the emHistory() function to trigger historical message events 

the js (9) actions: {! // set up an Ember Action to publish a message! publish: function() {! this.get('pubnub').emPublish({! channel: this.get('channel'),! message: "[" + this.get('user_id') + "] " +
 this.get('new_message') ! });! this.set('new_message', '');! }! } • Create a “publish()” action: • Call the PubNub emPublish() method • Reset the ‘newMessage’ property 

… and you’re done! questions? thank you! 

interesting tidbits services in emberjs events vs. callbacks wrap vs. raw internal bookkeeping promises vs. callbacks or return values