App in a Browser

3,380 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,380
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

App in a Browser

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

×