DevCon5

Look... That's me!

The Main Room

The View

With Anna

Web RTC

RTC stands for Real Time Communications​

• WhatsApp - instant messaging
• rabb.it - watch TV together
• live.pics.io - photo sharing and voice channel

Peter Dunkley, Technical Director, Acision

People's behavior is changing

• Voicemail isn't necessary
• Leave a text
• Send IM before call

Businesses need to provide programs with BYOD (Bring Your Own Device), because people will bring their own software as well.

Examples in Industries

• Online gambling a huge industry
• online is cards vs in person is playing against the person

• Need P2P high reliability, secure, heavily encrypted...

• mhealth - mobile healthcare

RTC not just WebRTC

• Don't forget you can use the server side to perform complex routing
• Web RTC call centers

Evolution of the Mobile Web

• Presentation mostly about Web RTC
• demo.kaazing.com

Franc Greco, Director, Kaazing Corporation

Enter web sockets!

• Http was not designed for real time, event based services
• Real time bi directional connectivity
• Avoids polling and resource consumption
• Avoids meta data overhead
• Web sockets is an actual protocol
  • ​Ws://
  • ​Wss://​
• ​Nodejs/socket.io...

Things to Consider

• What happens when the connection breaks?
• How do you guarantee delivery?
• What about large amounts of data over 3g?

APIs

• Growth in apis
• BLAHaaS
• REST is an acronym!
• RPC similar to REST?
• Esb similar to isb?
• Instead of vpn?
• Kaazing is a web socket implementation?

Design Patterns for JavaScript

• Gang of Four (1994) publishes Design Patterns
• Many of these patterns have been incorporated into the languages
• Remember Uncle Ben! (from Spider Man)
  • “With Great Power Comes Great Responsibility"
• AJAX is usually really AJAJ! (JSON instead of XML)

Tiego Garcia, Tech Manager at Avenue Code/Tech Lead at Macys.com

Constructor (old hat)

• {};
• vs Object.create(Blah.prototype);
• vs new Blah();

Facade/Revealing Object

• Wrapper for apis etc (so you can swap out changeable components or to simplify an api)
• IIFE (immediately invoked function expression)  to hide the innards of a function or object

Module Loader and Dependency Injection

CommonJS

    module.exports

    import using require(dependency)

Pros

• synchronous (guaranteed order)
• simple convenient syntax
• official node.js and npm format

Cons

• doesn’t naturally work on browser (browserify and webpack to fix this)
• sequential loading of modules is slower than asynchronous
• npm dependency tree can skyrocket easily

AMD

​    widely used on browsers (not so much on server side)

Pros

• multiple modules can be loaded in parallell (asynchronous)
• works naturally with browsers
• easy to do lazy loading of modules

Cons

• Complex
• Easy to create race conditions
• Order of execution is not guaranteed
• Dependencies’ Array declaration can get bloated

AMD (cont)

• Require.js is typical declaration
• INTEROP?
• UMD, SystemsJS, and uRequire allow your code to run in both standards (although there are annoying caviats with each)
• Almond (supports amd implementation for sync and async)

ES6 Modules

• allow export each function
• will support sync and async loading
• Babel.js can be used today (as a transpiler)
• works same way on browser and server

Observer

• Event listeners
• Subject notifies listeners
• Subject has references to the observers
• How can we do better?

Mediator/Pub-Sub

• Subject talks to a mediator
• subject no longer has references to the observers (and vice versa)
• only has references to the mediator

Publishers and Subscribers (w/ mediator)

• Subscribe to a “channel"
• You publish to a “channel"
• Subscribers and Publishers do not have references to each other.  Only the mediator has references to the Pub-Subs

Other Sources

• Javascript Patterns Stoyan Stefanov
• Addy Osmani - Learning JS Design Patterns
• The mind-boggling universe of Javascript module strategies (from tiago garcia - the speakers)
• Avenue Code
• tiagorg.com/talk-design-patterns-for-javascript-featuring-modules/ 

RTS in Web and Mobile Apps

• Defining Real-time

  - Same rate

  - sometimes at the same time

   

  voice and picture don’t really travel well over a distance

  - speed

  - absorption, reflection and interference

Boris Kock, Acision

Solutions (Via Telecom)

• use right frequency
• digitized data
• global infrastructure (the internet)

Use Cases

• not as strict as the clock hanging on the wall
• but we do need to keep that clock on the wall in mind (we can’t ignore delays etc)
• all about context

Use Cases (cont)

-- voice

-- communicaiton between apps

-- across the globe vs in-room lan

- content

-- huge files vs small pictures

-- personal vs enterprise (sharing photos vs sharing medical xrays)

- perspective

-- which location you are

-- how you want your data to be presented

User Expectations on communications

- secure

- authenticated

- robust

“New" technologies available

WebSocets

- bi-directional

- switch protocols to web socets

(WeSocket, HTTP, TLS, TCP)

RTC

- RTCWeb

<RTCWeb Slide> - webrtc.org/reference/architecture

- voice/video/transport

Media flows between User Agents

Signaling happens between the servers (usually?)

OAuth 2.0

- enable a 3rd party app to obtain access to HTTP services 

Javascript Debugging

• You can add an XHR breakpoint (for network requests)!
• Break on source modification
• Watch when variable value changes
• Direct links to scripts containing methods
• Profiling section - you can see the times each function/method takes to execute (total vs self)
• UI Responsiveness (IE) / Timeline
• You can see GC in the timeline view (ideally minimize or hope it happens when ui isn’t "moving")

Sumit Amar, Director of Engineering, Electronic Arts

Memory Analysis

• Drip - for detecting memory leaks (IE) (also Memory tab)
• Heap Analysis (Chrome)
  • take snapshot from chrome Profiles tab
  • jit compiling (Just In Time compiling)
  • can be useful when browser is crashing (start by checking chrome or other browser first)

Resources (tab)

Chrome Advanced tooling

chrome://about

chrome://memory-internals (and chrome://memory

- different pid for each tab

- similar to task manager - but with a lot more data

chrome://webrtc-internals

chrome://blob-internals (saved heap snapshots)

Remote Debugging in Safari

Firebug lite on a mobile device?

More!

• Resources (tab)
• Chrome Advanced tooling
• chrome://about
• chrome://memory-internals (and chrome://memory)
• different pid for each tab
• similar to task manager - but with a lot more data
• chrome://webrtc-internals
• chrome://blob-internals (saved heap snapshots)
• Remote Debugging in Safari
• Firebug lite on a mobile device?

Discussion: Performance & Responsive Design

• Responsive vs adaptive (combo) might be better for performance
• D for P - design for performance (new thing)
• Need to design for all views, not just desktop.
• Check that the main thing of your site is rendered. Try chrome dev tool mobile device and bandwidth spoofing.
• Devs and designers pair.  Get stuff done way faster. Less waterfall.
• Think about team organization. Don't have a mobile and desktop silo.

Metrics are key from the start.

Segment.io (mvt framework?)

Eye tracking metrics from a usability testing lab.

Tweaking animations in realtime in chrome?

Make sure you know your target audience.

Leverage open source software.

Online tutorials of chrome dev tools.

Bandwidth atenurator CHROME DEV TOOLS.

Github is a breakthrough.

Bootstrap, React.

Stripe?

Forecast.io?

Google for performance...

Skack communitues are good to follow.

Radware does adaptive techniques...

• Guy pagarni acamai - adaptive - guypo

Sean Allen, Kent Alstad, Courtney Hemphill

Discussion: Performance & Responsive Design (cont)

• Metrics are key from the start.
• Segment.io (mvt framework?)
• Eye tracking metrics from a usability testing lab
• Tweaking animations in realtime in chrome?
• Make sure you know your target audience.
• Leverage open source software.
• Online tutorials of chrome dev tools.
• Bandwidth attenuator CHROME DEV TOOLS.
• ​Github is a breakthrough
• Stripe?
• Forecast.io?
• Look at Google for performance...
• Skack communitues are good to follow.

Radware does adaptive techniques...

• Guy pagarni acamai - adaptive - guypo

ES6 and Beyond

• ES6 === ES 2015
• ES7 === ES 2016
• Yearly releases for JS

Jafar Husain, Cross-Team Technical Lead, Netflix

Making async easier (main focus from the committee)

​Arrow Functions =>

•  ES 2015
• x => x+1
• (x,y) => x+y
• Code is getting simpler

Async Without Callbacks

• Blocking is easy
• Blocking means Pulling (stopping the world and pulling a value out of a function
• What if we want to wait instead of block?
• Waiting means Pushing (hand the function a value and it pushes it to you)
• This is how node works

More

• What if waiting were as simple as blocking (Promises)

• Can we make them look the same (blocking and waiting)

function* and yelid keyword

How it works

Effectively a state machine - turned into by the compiler

Fibonnacci using this is cool (can use while true with yield, will compute forever!)

Iteration

Consumer and Producer

The Consumer pulls values out of the Producer until the Producer says they are done.

If generator functions return Iterators... why are they called generators?

Made of up a generator and an observer

Can take a value out and push a value in.

Can push a value in or you can push a value or an error in or a vfinal value in.

Really interesting and powerful.

Not just a one-way flow, like an iterator.

Generators allow feeback, both directions!  Crazy!!!!!!!!

Waiting with Async Iteration

yield will evaluate to a value... not just a return statement

“Asyncronous iteration"

whatever I push back into the generator replaces the “yeild” portion... the consumer pushes the value in and gets a promise... you can use the value you got from the promise... or you can use a different value...?

Curly braces to declare tuplies

Task.js includes the spawn function (node ..........

Why should waiting be downloaded in a library

ES2016 - async functions

Light syntactic sugar

- spawn → async

- yield → await

Generators are coming in ES 2015

Symmetrical support for blocking and waiting

What’s the difference between an event and a collection...?

It doesn’t have to be that way (they are really the same).. 

Events are just collections pushed at as...

Anything you can do to arrays or iterators, are things you can do with collection...

We can be more sophisticated than a bunch of callbacks

ES 2015 is used by netflix in prod by using transpilers

Babel - ES 2015 is totally safe (ES 2016 are not yet fully baked)

Browsers will let you debug in core technology

ES Feature Maturity Stages

0. Strawman

1. Proposal

2. Draft

3. Candidate

4. Finished

https://babeljs.io/

The await keyword is great if you want to wait on one value...

increasingly dealing with streams of data (waiting on multiple data)

ES 2015 - all collections are iterable

New for loops (for of loop

for(var x of [123,123,234234]) {

     ...

}

Future version (might see)

for...on (might be able to “wait on” this)

a loop that waits on values pushing at you

large majorities of code won’t need callbacks at all

The web has NO standard of watching apis?

introducing Observable

- swapped arguments and return type of Iterable

- accepts a generator and returns nothing

- iteration in reverse

Anything you can do in iteration... you can do in observation

Imagin writing sql queries over events...

Declaratively writing queries over 

.observer({

     regular()

     done()

     failure()

});

     .forEach(regular()).

     .then( done(), failure())

ADDING SUGAR TO OBSERVATION SLIDE ^^^^

For loop over an async dom stream

...what should an async function* return?

FUNCTION TYPES RETURN TABLE.... OBSERVABLE IS THE ANSWER... NOT GOING TO MAKE IT IN ES 2016... MIGHT HAVE TO WAIT FOR 2017

PUSH AND PULL ARE SYMMETRICAL (NETFLIX USES IT EVERYWHERE) - THINK OF THEM AS STREAMS OF DATA - USE MAP/FILTER/REDUCE

JHUSAIN/ASYNCGENERATOR

HE WILL TWEET A LINK FOR NEXT JAVSCRIPT

ASYNC AWAIT

RESOURCES

GO GET A TRANSPILER (YOU NEED A BUILD STEP FOR YOUR WEBSITE) - YOU NEED A BUILD STEP FOR YOUR WEBSITE

CODE TO THE TRANSPILER... YOU DON’T NEED OT WAIT

var {x, y} = {x: “hi”, y: “blah”}

Someone asked about typescript (a transpiler ++ and give you optional type stuff)

https://babeljs.io/docs/learn-es2015/

Destructuring

Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object lookup foo["bar"], producing undefined values when not found.

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

Generator Function (most powerful and most mis-understood)

function* getNumbers() {

     yield 42;

     yield 32;

     return 19;

}

var iterator = getNumbers();

iterator.next(); // {value: 42; done: false};

iterator.next(); // {value: 32; done: false};

iterator.next(); // {value: 19; done: true};

“Returns power back to the user"

“Resumes right in the middle of a function"

How it works

• Effectively a state machine - turned into by the compiler
• Fibonnacci using this is cool (can use while true with yield, will compute forever!)

Iteration

Consumer and Producer

The Consumer pulls values out of the Producer until the Producer says they are done.

If generator functions return Iterators... why are they called generators?

• Made of up a generator and an observer
• Can take a value out and push a value in.
• Can push a value in or you can push a value or an error in or a final value in.
• Really interesting and powerful.
• Not just a one-way flow, like an iterator.
• Generators allow feedack, both directions! 

Waiting with Async Iteration

• yield will evaluate to a value... not just a return statement
• “Asyncronous iteration"
• whatever I push back into the generator replaces the “yeild” portion... the consumer pushes the value in and gets a promise... you can use the value you got from the promise... or you can use a different value...?

Curly braces to declare tuplies

• Task.js includes the spawn function (node ..........

Why should waiting be downloaded in a library

(ES2016 - async functions)

Light syntactic sugar

•  spawn → async
• yield → await

Generators are coming in ES 2015

Symmetrical support for blocking and waiting

What’s the difference between an event and a collection...?

It doesn’t have to be that way (they are really the same).. 

Events are just collections pushed at as...

Anything you can do to arrays or iterators, are things you can do with collection...

We can be more sophisticated than a bunch of callbacks

Use Now?

ES 2015 is used by netflix in prod by using transpilers

Babel - ES 2015 is totally safe (ES 2016 are not yet fully baked)

Browsers will let you debug in core technology

https://babeljs.io/

ES Feature Maturity Stages

0. Strawman

1. Proposal

2. Draft

3. Candidate

4. Finished

Oh, geeze... more!

• The await keyword is great if you want to wait on one value...

• increasingly dealing with streams of data (waiting on multiple data)
• ES 2015 - all collections are iterable
• New for loops for of loop 

for(var x of [123,123,234234]) {

     ...

}

... and more...

Future version (might see):

• for...on (might be able to “wait on” this)
• a loop that waits on values pushing at you
• large majorities of code won’t need callbacks at all

... and more... and more...

The web has NO standard of watching apis?

Introducing Observable

- swapped arguments and return type of Iterable

- accepts a generator and returns nothing

- iteration in reverse

... and more... and more...

Anything you can do in iteration... you can do in observation

Imagin writing sql queries over events...

Declaratively writing queries over 

.observer({

     regular()

     done()

     failure()

});

.forEach(regular()).

.then( done(), failure())

... and more... and more...

ADDING SUGAR TO OBSERVATION SLIDE ^^^^

For loop over an async dom stream

...what should an async function* return?

FUNCTION TYPES RETURN TABLE.... OBSERVABLE IS THE ANSWER... NOT GOING TO MAKE IT IN ES 2016... MIGHT HAVE TO WAIT FOR 2017

PUSH AND PULL ARE SYMMETRICAL (NETFLIX USES IT EVERYWHERE) - THINK OF THEM AS STREAMS OF DATA - USE MAP/FILTER/REDUCE

JHUSAIN/ASYNCGENERATOR

HE WILL TWEET A LINK FOR NEXT JAVSCRIPT

ASYNC AWAIT

RESOURCES

GO GET A TRANSPILER (YOU NEED A BUILD STEP FOR YOUR WEBSITE) - YOU NEED A BUILD STEP FOR YOUR WEBSITE

CODE TO THE TRANSPILER... YOU DON’T NEED OT WAIT

var {x, y} = {x: “hi”, y: “blah”}

Someone asked about typescript (a transpiler ++ and give you optional type stuff)

https://babeljs.io/docs/learn-es2015/

Destructuring

Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object lookup foo["bar"], producing undefined values when not found.

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()

... and more... and more...

• JHUSAIN/ASYNCGENERATOR
• ASYNC AWAIT
• RESOURCES
• GO GET A TRANSPILER (YOU NEED A BUILD STEP FOR YOUR WEBSITE) - YOU NEED A BUILD STEP FOR YOUR WEBSITE
• CODE TO THE TRANSPILER... YOU DON’T NEED OT WAIT

https://babeljs.io/docs/learn-es2015/

Destructing

Destructuring allows binding using pattern matching, with support for matching arrays and objects. Destructuring is fail-soft, similar to standard object lookup foo["bar"], producing undefined values when not found.

// list matching
var [a, , b] = [1,2,3];

// object matching
var { op: a, lhs: { op: b }, rhs: c }
       = getASTNode()

// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()