1. ASYNC JAVASCRIPT
best practices
Rajasekharan Vengalil
bit.ly/avranju | @avranju
Developer Evangelist
Microsoft

2. Agenda
• Why async?
• Problems with async development today
• Promises
• Building a “promise” framework
• Demo
• Support for promises in jQuery
• An introduction to RxJS
• What is RxJS?
• The Basics
• Demo – RxJS in action

3. WHY IS THIS IMPORTANT?

4. Why async?
• No more free lunch!
• Fast, fluid interfaces make for compelling UX
• Most HTML5 APIs expose async interfaces
• Leverage multiple core CPUs
• Delegate I/O and CPU intensive tasks to
background processes

5. Problems with async development today
• Tends to turn control flow “inside-out”
• Don’t call me, I’ll call you
• Managing state can get tricky even with
closures
• Handling errors correctly very hard to do
• Code easily gets lost in nested callback
madness

6. JAVASCRIPT “PROMISES”
Building a mini async JS framework

7. AN INTRODUCTION TO
RXJS
A composable events framework

8. What is RxJS?
• RxJS is a framework that takes the idea of
“promises” to the next level
• Stands for “Reactive Extensions for JavaScript”
• Available for .NET and C# as well
• Ships with support for jQuery, Dojo, Ext etc.
• Provides an elegant mechanism for composing
operations on observable sequences
• Includes a suite of “combinator” routines that
cater to a wide range of scenarios

9. RxJS – The Basics
• Event sources are abstracted as “Observables” – things
that can be observed
• Event consumers are “Observers” – things that want to be
notified of stuff
Observable Subscribes Observer
Event Notifies Your
Source Code

10. RXJS IN ACTION
Let’s look at some code

11. Some Resources
• IE blog post on JavaScript • Shameless plug
“Promises” - bit.ly/q7Q9EP
• My blog – bit.ly/avranju
• jQuery documentation on
• Twitter – @avranju
“Deferred” objects -
bit.ly/nOhvPl • Email – rajave@microsoft.com
• Erik Meijer’s talk on RxJS -
bit.ly/pENZ4I
• Matthew Podwysocki’s
excellent blog post series on
RxJS - bit.ly/o4ZoaG