app in a browser

@jdsharp

App in a Browser

jQuery Conference 2010Boston, Massachusetts

Monday, October 18, 2010

Who am I?


Started developing for the web in 1996

AOL was a popular browser of choice2400bps modem


T H E j O U E R Y C O M P A N Y

9 employees, 3 contractors, 9 states

Co-founded appendTo in October 2009


Cowboy after 5PM M-F & weekends


How many of you are integrators?


Ready for a challenge?


you’ve got to grab hold...

Flickr @evilerin


...with even more enthusiasmFlickr @ prasoonpics


App in a Browser


Where we’ll be today

There’s a spectrum of development...

Server Client

Server SidePost back

Client SideAjax

GmailParty like it’s 1998


The app boot process...- Download resources

- Execute scripts- Wait for the DOM


We think of client side development in a DOM centric approach because that’s our

roots


How do we organize this?


?

Once again it’s a spectrum...

Server Client

Server generated

Client generated

? ?Monday, October 18, 2010

Integration driven approach


Web developers are integrators, they have to work with a variety of

layers, tools and technologies


Integration is the core attribute of a successful

web developer


How do you integrate successfully?


Discrete components...


Server

Request Manager

Core Application

View Manager

Pub / Sub

Other Services

Data HTML, CSS, JavaScript


Components that...- consume/sync data- control flow- display/present data


How do components communicate / interface?

This is key to a holistic approach to an applications

lifecycle


Server

Request Manager

Core Application

View Manager

Pub / Sub

Other Services



The data{ “name” : “Jonathan Sharp”, “phone” : “402-000-0000”, “notes” : “Delta Flight 2022 @ 2PM”}


The request

amplify.request.define(“contacts”, “ajax”, { “url” : “/restful/api”, “method” : “POST”, “dataType” : “json”});

amplify.request(“contacts”, args, function(json){ ...});

Abstract the endpoint and transport


Server

Request Manager

Core Application

View Manager

Pub / Sub

Other Services



Protect the global scopeProvide architecture for new functionality

Core Application

// App core(function(app) { app.bus = amplify.bus; app.request = amplify.request; app.ui = {}; app.init = function() { // Load any scripts/resources(Async).. // Then initialize our components app.bus.trigger(“component.init”); }; app.init();})(window.app = window.app || {});


Core Application// Component(function(app) { app.contacts = {}; app.contacts.load = function() { app.bus.publish(“contacts.ui.load”);

// Request our initial payload app.request(“contacts”, function(data) { app.bus.publish(“contacts.list”, data); }); }; app.bus.subscribe( “component.init”, app.contacts.load);})(window.app);


Server

Request Manager

Core Application

View Manager

Pub / Sub

Other Services



The View

// Canvas manager(function(app) { app.ui.canvas = { add: function(panel) { var id = $(panel).attr(“id”) || randomId(); $(panel).appendTo(“#panels”); app.bus.publish( “ui.canvas.added”, {“id”:id}); return id; } };})(window.app);


The View

// Panel(function(app) { app.ui.panel = { create: function(options) { var dom = $(“<div>...</div>”); dom.bind(“updateContacts”, function(e,data){ // Update the DOM with new contact data ... }); return dom; } };})(window.app);


The View// UI Controller(function(app) { app.ui.manager = { init: function init() { var p = app.ui.panel.create({...}); app.ui.canvas.add(p); app.bus.subscribe( “contact.list”, function(data) { p.trigger(‘updateContacts’, data); }); } }; app.bus.subscribe( “contacts.ui.load”, app.ui.manager.init);})(window.app);


What have we done?- Protected data sources- Protected the DOM- Testing is easier- Scales to teams- Front-end backend balance


So remember...- Discrete components- “I’m an integrator”- and as such think about the APIs


appendTo will be releasing amplify as open source


Flickr @ martinvirtualtours

...yee haw!


@jdsharp

App in a Browser

jQuery Conference 2010Boston, Massachusetts


app in a browser

Technology

request app

app boot process

view panel functionapp

view ui controller functionapp

var dom

function init

server datahtml

displaypresent data