Your SlideShare is downloading. ×
App in a Browser
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

App in a Browser

1,625

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
1,625
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×