Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

hello codepen (this is the 60 seconds part)

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

applications should must be 
 customer-focused 
 responsive Ǎ 
 live updating

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

what does it do?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

the html (3)

Online Users

!
    ! {{#each user in users}}!
  • {{user}}
  • ! {{/each}}!
• Display a dynamic list of users

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

the html (5)
!
    ! {{#each message in messages}}!
  • {{message}}
  • ! {{/each}}!
!
• Display a dynamic list of messages

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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’

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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!

Slide 22

Slide 22 text

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)

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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