app in a browser
TRANSCRIPT
![Page 1: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/1.jpg)
@jdsharp
App in a Browser
jQuery Conference 2010Boston, Massachusetts
Monday, October 18, 2010
![Page 2: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/2.jpg)
Who am I?
Monday, October 18, 2010
![Page 3: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/3.jpg)
Started developing for the web in 1996
AOL was a popular browser of choice2400bps modem
Monday, October 18, 2010
![Page 4: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/4.jpg)
Monday, October 18, 2010
![Page 5: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/5.jpg)
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
Monday, October 18, 2010
![Page 6: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/6.jpg)
Cowboy after 5PM M-F & weekends
Monday, October 18, 2010
![Page 7: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/7.jpg)
How many of you are integrators?
Monday, October 18, 2010
![Page 8: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/8.jpg)
Ready for a challenge?
Monday, October 18, 2010
![Page 9: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/9.jpg)
you’ve got to grab hold...
Flickr @evilerin
Monday, October 18, 2010
![Page 10: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/10.jpg)
...with even more enthusiasmFlickr @ prasoonpics
Monday, October 18, 2010
![Page 11: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/11.jpg)
App in a Browser
Monday, October 18, 2010
![Page 12: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/12.jpg)
Where we’ll be today
There’s a spectrum of development...
Server Client
Server SidePost back
Client SideAjax
GmailParty like it’s 1998
Monday, October 18, 2010
![Page 13: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/13.jpg)
The app boot process...- Download resources
- Execute scripts- Wait for the DOM
Monday, October 18, 2010
![Page 14: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/14.jpg)
We think of client side development in a DOM centric approach because that’s our
roots
Monday, October 18, 2010
![Page 15: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/15.jpg)
How do we organize this?
Monday, October 18, 2010
![Page 16: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/16.jpg)
?
Once again it’s a spectrum...
Server Client
Server generated
Client generated
? ?Monday, October 18, 2010
![Page 17: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/17.jpg)
Integration driven approach
Monday, October 18, 2010
![Page 18: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/18.jpg)
Web developers are integrators, they have to work with a variety of
layers, tools and technologies
Monday, October 18, 2010
![Page 19: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/19.jpg)
Integration is the core attribute of a successful
web developer
Monday, October 18, 2010
![Page 20: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/20.jpg)
How do you integrate successfully?
Monday, October 18, 2010
![Page 21: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/21.jpg)
Discrete components...
Monday, October 18, 2010
![Page 22: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/22.jpg)
Server
Request Manager
Core Application
View Manager
Pub / Sub
Other Services
Data HTML, CSS, JavaScript
Monday, October 18, 2010
![Page 23: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/23.jpg)
Components that...- consume/sync data- control flow- display/present data
Monday, October 18, 2010
![Page 24: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/24.jpg)
How do components communicate / interface?
This is key to a holistic approach to an applications
lifecycle
Monday, October 18, 2010
![Page 25: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/25.jpg)
Server
Request Manager
Core Application
View Manager
Pub / Sub
Other Services
Data HTML, CSS, JavaScript
Monday, October 18, 2010
![Page 26: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/26.jpg)
The data{ “name” : “Jonathan Sharp”, “phone” : “402-000-0000”, “notes” : “Delta Flight 2022 @ 2PM”}
Monday, October 18, 2010
![Page 27: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/27.jpg)
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
Monday, October 18, 2010
![Page 28: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/28.jpg)
Server
Request Manager
Core Application
View Manager
Pub / Sub
Other Services
Data HTML, CSS, JavaScript
Monday, October 18, 2010
![Page 29: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/29.jpg)
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 || {});
Monday, October 18, 2010
![Page 30: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/30.jpg)
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
![Page 31: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/31.jpg)
Server
Request Manager
Core Application
View Manager
Pub / Sub
Other Services
Data HTML, CSS, JavaScript
Monday, October 18, 2010
![Page 32: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/32.jpg)
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
![Page 33: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/33.jpg)
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
![Page 34: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/34.jpg)
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
![Page 35: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/35.jpg)
What have we done?- Protected data sources- Protected the DOM- Testing is easier- Scales to teams- Front-end backend balance
Monday, October 18, 2010
![Page 36: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/36.jpg)
So remember...- Discrete components- “I’m an integrator”- and as such think about the APIs
Monday, October 18, 2010
![Page 37: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/37.jpg)
appendTo will be releasing amplify as open source
Monday, October 18, 2010
![Page 38: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/38.jpg)
Flickr @ martinvirtualtours
...yee haw!
Monday, October 18, 2010
![Page 39: App in a Browser](https://reader034.vdocument.in/reader034/viewer/2022052619/5558be80d8b42aa52a8b50cb/html5/thumbnails/39.jpg)
@jdsharp
App in a Browser
jQuery Conference 2010Boston, Massachusetts
Monday, October 18, 2010