Zero to Real-Time EmberJS in 60 Seconds

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://ﬂapmmo.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) <script src='http://code.jquery.com/jquery-1.10.1.min.js'></script>! <script src='https://cdn.pubnub.com/pubnub.js'></script>! <script src='http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-1.0.0.js'></script>! <script
src='http://builds.emberjs.com/release/ember.js'></script>! <script src='http://pubnub.github.io/pubnub-ember/lib/pubnub-ember.js'></script>! <link href='//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css' rel='stylesheet'> • include jQuery • include PubNub data stream network • include Handlebars library • include EmberJS library • include PubNub/EmberJS library • include Bootstrap styles (optional)

the html (2) <html><body>! <script data-template-name='application'  type='text/x-handlebars'>! <div class="container">! ...!
</div>! </script>! </body></html> • Create the Application Template • (You may set up your templates /  components seperately)

the html (3) <h4>Online Users</h4>! <ul>! {{#each user in users}}!
<li>{{user}}</li>! {{/each}}! </ul> • Display a dynamic list of users

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

the html (5) <div class="well">! <ul>! {{#each message in messages}}!
<li>{{message}}</li>! {{/each}}! </ul>! </div> • 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 deﬁning 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

Zero to Real-Time EmberJS in 60 Seconds

Zero to Real-Time EmberJS in 60 Seconds

Sunny Gleason

More Decks by Sunny Gleason

Other Decks in Technology

Featured

Transcript