Single Page Applications

  • 1,036 views
Uploaded on

Why should you care about Single Page Applications and how to get help from Backbone.js

Why should you care about Single Page Applications and how to get help from Backbone.js

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,036
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
50
Comments
0
Likes
5

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. Single PageApplicationsWhy and how of modern front-end developmentthrough the lens of Backbonewww.dotnettoscana.org#jsfullMassimo Iacolare@iacowareinfo@massimoiacolare.itTuesday, April 23, 13
  • 2. Thanks to our sponsorTuesday, April 23, 13
  • 3. SPA - Definition“A Single Page Application is a web appthat fits on a single page with a goal ofproviding a more fluid user experience”from wikipedia“... is a web app in which the majority ofinteractions are handled on the pagewithout the need to reach a server ...”meTuesday, April 23, 13
  • 4. ContextWeb Apps Web Sitesnotmeans javascript is on and gracefuldegradation doesn’t matterTuesday, April 23, 13
  • 5. Do you have an example?Tuesday, April 23, 13
  • 6. Do we need SPA?Luca Mascaro - Better SoftwareTuesday, April 23, 13
  • 7. SPA - Definition“A Single Page Application is a web appin which the majority of interactionsare handled on the client without theneed to reach a server with a goal ofproviding a more fluid user experience”Tuesday, April 23, 13
  • 8. Code complexityTuesday, April 23, 13
  • 9. I’m a jQuery ninjaWhy should I care?Tuesday, April 23, 13
  • 10. It starts very simple...using objects to organize your jquery code1. Load some content when a list item isclicked2. Hide the content for siblings list itemsTuesday, April 23, 13
  • 11. Yay, Task done. Coffee time!Tuesday, April 23, 13
  • 12. Some time later you get a call...• Url needs to be configurable• We would like back button support• Animations are so cool...• We must mark the current item• Let’s use a LightBox!Tuesday, April 23, 13
  • 13. using objects-to organize your jquery code“Houston we might have a problem”Tuesday, April 23, 13
  • 14. Sad ninjaTuesday, April 23, 13
  • 15. What’s the problem?• Application state kept on DOM• State drives behavior. You’re coupling the logicof your app to how it’s presented on thescreen• They have different different reasons tochange• DOM => appearance• App => logic• An App’s appearance hopefully will changefaster than its logicTuesday, April 23, 13
  • 16. Our Goals• Keep things simple (vs easy)• Some kind of modularity (vs deps hell)• Single Responsibility Principle• StructureTuesday, April 23, 13
  • 17. MV*, Here they comes• Essentially they provide us with a pre-defined path towards success our goals• They enforce structure by giving us a setof components (building blocks). Not tobe confused with widgets• Different levels of prescriptivenessTuesday, April 23, 13
  • 18. MV* - Who are they?Tuesday, April 23, 13
  • 19. Backbone Intro• Created by J. Ashkenas+coffeescript+underscorejs• Born on October 2010• Only dependencies areunderscorejs + jQuery orZeptoTuesday, April 23, 13
  • 20. Tuesday, April 23, 13
  • 21. Why Backbone?• “Use only what you need” approach• Based on jQuery. Reuse the skill you alreadyhave• Low learning curve, 1500 understandable LOCincluded comments -> High ROI• Huge communityTuesday, April 23, 13
  • 22. Backbone componentsModel CollectionViewTemplateHTMLFragmentRoutercontainsuseuseEventsuseData+=Template EngineBackboneTuesday, April 23, 13
  • 23. Backbone.Events• Publish and Subscribe events• Inherited by all other componentsTuesday, April 23, 13
  • 24. Backbone.Model• Keep app state• Persistent orTransient• Data access/manipulationthrough get() & set()• REST friendlyTuesday, April 23, 13
  • 25. Backbone.Collection• Sorted set of models• Set manipulationfunctions (provided byunderscorejs)• Set manipulationevents (add, remove)• REST friendlyTuesday, April 23, 13
  • 26. Backbone.View• Render/manipulate aDOM fragment• Sits between a model/collection and a DOMfragment• Observe models• Handle DOM eventsTuesday, April 23, 13
  • 27. Backbone.Router• Enable the associationof an intermediateapp state as a URL• You decide whatstates should bereachable as a URL• It calls a callbackwhenever a URL ismatchedTuesday, April 23, 13
  • 28. Backbone Progression• Decompose UI into Views• Encapsulate state in models• Add routing to mark intermediatestates and support back button &bookmarks.Tuesday, April 23, 13
  • 29. UI DecompositionTuesday, April 23, 13
  • 30. Backbone tips &tricksaka lessons from the trenchesTuesday, April 23, 13
  • 31. Changes propagationSearchViewsave newsearchPropagate changes through state manipulationaddSearchesSavedSearchesViewnope!Tuesday, April 23, 13
  • 32. View *-------1 ModelTweetsView TweetsCountViewTweetsCollectionTuesday, April 23, 13
  • 33. Everyone has a BaseTuesday, April 23, 13
  • 34. Don’t leave crumbs aroundTweetsViewTweetViewTweetViewTweetViewRemove nestedviews recursively toavoid memory leaksTuesday, April 23, 13
  • 35. Evolve & AdaptTweetsViewTweetControlleraka Glue CodeComposeTweetViewDon’t feel constrained to useonly what Backbone provide.Javascript is still there...OMG, it’snotfromBackbone!Tuesday, April 23, 13
  • 36. Precipitation patternViewController aka Glue CodeModel/CollectionRouterFollow the gravityReferences EventsTuesday, April 23, 13
  • 37. Communication patternsTrendsView EventsBusTrends SearchControllertweets:searchtweets:searchObserver PubSub aka Mediatoraka EventBusTuesday, April 23, 13
  • 38. Who uses it?Tuesday, April 23, 13
  • 39. Learn it :-)• http://backbonefu.com/• http://lostechies.com/derickbailey/category/backbone/• http://www.watchmecode.net/• http://recipeswithbackbone.com/• http://ricostacruz.com/backbone-patterns/Tuesday, April 23, 13
  • 40. Thanks!#jsfullwww.dotnettoscana.org/javascript-full-immersion.aspxSlides on:Tuesday, April 23, 13