Javascript for Wep Apps

iostudio

JavaScript for Web Apps
Overview of Throne of JS

Wait – JavaScript for Business Logic?

I know what you’re thinking.

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>‘);

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

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!

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

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

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.”

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

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)

Common Concepts — URL Routing

• Most use HTML5 pushState with hash fallback
• Some are customizable, some aren‘t
• Makes single-page applications possible

Framework Face-Off: TodoMVC

Dojo

Spine

Meteor
YUI

Backbone.js Library

Jeremy Ashkenas, Boy Genius & Creator of CoffeeScript

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

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)

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)

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)

Batman.js Framework

• CoffeeScript only
• Ruby required
• So….

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

Javascript for Wep Apps

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Javascript for Wep Apps (20)

Recently uploaded (20)

Javascript for Wep Apps

Editor's Notes