App in a Browser

App in a Browser jQuery Conference 2010 Boston, Massachusetts @jdsharp Monday, October 18, 2010

Who am I? Monday, October 18, 2010

Started developing for the web in 1996 AOL was a popular browser of choice 2400bps modem Monday, October 18, 2010

Monday, October 18, 2010

THE jOUERY COMPANY Co-founded appendTo in October 2009 9 employees, 3 contractors, 9 states Monday, October 18, 2010

Cowboy after 5PM M-F & weekends Monday, October 18, 2010

How many of you are integrators? Monday, October 18, 2010

Ready for a challenge? Monday, October 18, 2010

you’ve got to grab hold... Flickr @evilerin Monday, October 18, 2010

Flickr @ prasoonpics ...with even more enthusiasm Monday, October 18, 2010

App in a Browser Monday, October 18, 2010

There’s a spectrum of development... Party like it’s 1998 Gmail Server Client Server Side Client Side Post back Ajax Where we’ll be today Monday, October 18, 2010

The app boot process... - Download resources - Execute scripts - Wait for the DOM Monday, October 18, 2010

We think of client side development in a DOM centric approach because that’s our roots Monday, October 18, 2010

How do we organize this? Monday, October 18, 2010

Once again it’s a spectrum... Server Client Server Client generated generated ? ? ? Monday, October 18, 2010

Integration driven approach Monday, October 18, 2010

Web developers are integrators, they have to work with a variety of layers, tools and technologies Monday, October 18, 2010

Integration is the core attribute of a successful web developer Monday, October 18, 2010

How do you integrate successfully? Monday, October 18, 2010

Discrete components... Monday, October 18, 2010

Server Data HTML, CSS, JavaScript Request Core Other Manager Application Services Pub / Sub View Manager Monday, October 18, 2010

Components that... - consume/sync data - control ﬂow - display/present data Monday, October 18, 2010

How do components communicate / interface? This is key to a holistic approach to an applications lifecycle Monday, October 18, 2010

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

The request Abstract the endpoint and transport amplify.request.define(“contacts”, “ajax”, { “url” : “/restful/api”, “method” : “POST”, “dataType” : “json” }); amplify.request(“contacts”, args, function(json){ ... }); Monday, October 18, 2010

Core Application Protect the global scope Provide architecture for new functionality // 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 || {}); Monday, October 18, 2010

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); Monday, October 18, 2010

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); Monday, October 18, 2010

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); Monday, October 18, 2010

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); Monday, October 18, 2010

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

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

appendTo will be releasing amplify as open source Monday, October 18, 2010

...yee haw! Flickr @ martinvirtualtours Monday, October 18, 2010

App in a Browser jQuery Conference 2010 Boston, Massachusetts @jdsharp Monday, October 18, 2010

App in a Browser

by Jonathan Sharp on Oct 18, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 10

Statistics

App in a Browser — Presentation Transcript

http://speakerrate.com	8
http://coderwall.com	2