javascript for wep apps

23

Upload: michael-puckett

Post on 05-Jul-2015

554 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Javascript for Wep Apps
Page 2: Javascript for Wep Apps

JavaScript for Web AppsOverview of Throne of JS

iostudio

Page 3: Javascript for Wep Apps

Wait – JavaScript for Business Logic?

I know what you’re thinking.

Page 4: Javascript for Wep Apps

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

Page 5: Javascript for Wep Apps
Page 6: Javascript for Wep Apps

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

Page 7: Javascript for Wep Apps

Benefits: Faster

Faster DOM interaction

Faster server interaction

• Never getting, only setting

• 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!

Page 8: Javascript for Wep Apps
Page 9: Javascript for Wep Apps

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

Page 10: Javascript for Wep Apps

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

Page 11: Javascript for Wep Apps

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

Page 12: Javascript for Wep Apps

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

Page 13: Javascript for Wep Apps

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)

Page 14: Javascript for Wep Apps

Common Concepts — URL Routing

• Most use HTML5 pushState with hash fallback

• Some are customizable, some aren‘t

• Makes single-page applications possible

Page 15: Javascript for Wep Apps

Framework Face-Off: TodoMVC

Meteor

Spine

YUI

Dojo

Page 16: Javascript for Wep Apps

Backbone.jsLibrary

Jeremy Ashkenas, Boy Genius & Creator of CoffeeScript

Page 17: Javascript for Wep Apps

Backbone.jsLibrary

• 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

Page 18: Javascript for Wep Apps

Ember.jsFramework

• 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)

Page 19: Javascript for Wep Apps

Angular.jsFramework

• 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)

Page 20: Javascript for Wep Apps

Knockout.jsLibrary

• 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)

Page 21: Javascript for Wep Apps

Batman.jsFramework

• CoffeeScript only

• Ruby required

• So….

Page 22: Javascript for Wep Apps

Meteor.jsFramework

• 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

Page 23: Javascript for Wep Apps