2. iostudio
JavaScript for Web Apps
Overview of Throne of JS

3. Wait – JavaScript for Business Logic?
I know what you’re thinking.

4. How Tasty is this Donut?
• JavaScript owns the UI – sort of
• It has to query the DOM for the current UI state
• $(‗.donut‘)
• Then makes a business decision
• if $donut.is(‗.chocolate‘) { ... }
• Then reports it back to the server
• $.ajax({ data: {
id: $donut.attr(‗data-id‘)
}, ... })
• Then the server makes a business decision
• Then the server sends new HTML
• Then JavaScript updates the DOM
• $donut.append(‗<p>92% Tasty</p>‘);

6. A Better Way
• Send down a bunch of JSON data
on page load
• Set up objects and classes with
properties and methods
• Only use the server when you
must

7. Benefits: Faster
Faster DOM interaction
• Never getting, only setting
Faster server interaction
• You can make more assumptions that data sent to the server
will be successful when all your business logic lives on the
client
• User assumes things have gone right until proven otherwise
• No visible round trips to the server!

9. Enter the Frameworks
These Aren‘t Novel Concepts
• Plenty of people have invented this wheel in the past few years
After You Buy In, You Get Lots of Other Awesome Features
• Bootstrap projects to get them off the ground faster
• Cleaner code in MV* style (no more jQuery spaghetti code)
• Community tested: more stable than rolling your own
• And more depending on the robustness of your framework

10. Common Concepts — Data on the Wire
• Never send dynamic HTML down from the server
• Always send JSON and let the client decide how to render it
• The server acts as an API endpoint for retrieving and posting data

11. Common Concepts — MV*
• Separate the UI from the business logic
• Some implementations favor traditional MVC
• Some are more lenient and integrate better with the Prototypal model
• The DOM is the View; the framework provides the Model and the
interaction between them
“Ask the notes how many notes there are.
Don’t run a count of <li>s to figure it out. If
you have to start with what’s been served on
page load, you’ve already lost the battle.”

12. Common Concepts — Data Binding
• Updating a property in
your object should be
reflected everywhere in
the view …
• … without your help!
• Also called
dependency
detection, dependency
tracking, or reactivity

13. Common Concepts — Templating
• Since we‘re never receiving HTML from the server, we
need a way to quickly generate HTML from JSON
• DOM templates (data-* attributes to signify logic)
• String templates (ie, Mustache/Handlebars)

14. Common Concepts — URL Routing
• Most use HTML5 pushState with hash fallback
• Some are customizable, some aren‘t
• Makes single-page applications possible

15. Framework Face-Off: TodoMVC
Dojo
Spine
Meteor
YUI

16. Backbone.js Library
Jeremy Ashkenas, Boy Genius & Creator of CoffeeScript

17. Backbone.js Library
• Tiny – 800 lines of readable code
• Basically boilerplate code
• Around for 2 years
• Minimal but extensible
• Can use underscore‘s string templating engine or any
other

18. Ember.js Framework
• Same conventions as Rails
• ―Common problems should have
common solutions.‖
• Has everything you need to build an
ambitious web app
• Lots of abstraction, less extensibility
• Requires Handlebars.js
• Biggest filesize (42kb gzipped)

19. Angular.js Framework
• Developed by Google
• ―Polyfill for future version of ES‖
• Extensible, doesn‘t control whole page
• DOM-based templates
• Tooling: Chrome debugger plugin, E2E
• Large (76 non gzipped)

20. Knockout.js Library
• DOM-based templates by default
• No default router
• No default data storage
• Extensible
• 13kb gzipped
• Javascript or CoffeeScript
• Microsoft-backed (server-agnostic but
designed by ASP.NET MVC guys)

21. Batman.js Framework
• CoffeeScript only
• Ruby required
• So….

22. Meteor.js Framework
• Totally different from the others! (―The future‖)
• Same syntax on server and client
• Requires Node.js (installs on command line)
• Abstracts database interaction to the point that you
assume you always have direct db access
• No duplication of logic
• Web Sockets for Automatic UI Updates
• That is, refreshless hot fixes
• Standardized Syntax, not Extensible