Zero to Real-Time EmberJS in 60 Seconds

Zero to Real-Time EmberJS in 60 Seconds

The way we build web & mobile applications is rapidly changing. As EmberJS developers, we're already familiar with the powerful shift from fine-grained server-side pages to single-page web applications and REST APIs. Now, we're starting to see a potentially even more powerful advance as applications transition from blindly "pulling" content to receiving immediate "push" content in web and mobile applications using technologies like WebSocket.

In this talk, I'll present a chat application I built in 99 lines of HTML & JavaScript using EmberJS and the PubNubEmberJS API. The examples live in codepen.io so everyone will be able to fiddle with the example as we go. Along the way,we'll also talk about some of the patterns and nifty tricks we used to adapt a callback-oriented JavaScript API into the world of EmberJS controllers, services, actions and events.

Bio:
Sunny is founder and Cloud Guy at SunnyCloud, a company that provides Cloud, Web & Mobile application development, hosting and operations to businesses in the cloud. He specializes in real-time protocols and scalable persistence solutions. Before all that, Sunny was a Platform Engineer developing Cloud Computing solutions at Ning and Amazon.com.

Ac1a1d449af259bfb7191105db5212a2?s=128

Sunny Gleason

October 09, 2014
Tweet

Transcript

  1. Zero to Real-Time
 EmberJS in
 60 Seconds Sunny Gleason Boston

    EmberJS Meetup October 9, 2014 http://goo.gl/7mVKpJ
  2. 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
  3. 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
  4. hello codepen (this is the 60 seconds part)

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

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

  7. applications should must be 
 customer-focused 
 responsive Ǎ 


    live updating
  8. our demo application real-time chat user presence  message history


    
 … in 99 lines of HTML/JS
  9. 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
  10. what does it do?

  11. 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)
  12. 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)
  13. the html (3) <h4>Online Users</h4>! <ul>! {{#each user in users}}!

    <li>{{user}}</li>! {{/each}}! </ul> • Display a dynamic list of users
  14. 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
  15. the html (5) <div class="well">! <ul>! {{#each message in messages}}!

    <li>{{message}}</li>! {{/each}}! </ul>! </div> • Display a dynamic list of messages
  16. 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
  17. 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
  18. 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
  19. 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’
  20. 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
  21. 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!
  22. 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)
  23. 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
  24. 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
  25. … and you’re done! questions? thank you!

  26. interesting tidbits services in emberjs events vs. callbacks wrap vs.

    raw internal bookkeeping promises vs. callbacks or return values