Single Page Applications With Backbone

522 views
433 views

Published on

Building sites using the Single Page Application approach has become the default options for many developers. In this talk we'll talk about why this trend has caught on, how you can create complete client side applications using Backbone.js hooking into any server side language, and what additional considerations exist when taking this approach.

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
522
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Single Page Applications With Backbone

  1. 1. Single page applications with backbone.js Cork ALT.NET 
 March 2014
  2. 2. LEAD Architect @SUGRUE www.jamessugrue.ie AUthor of Beginning Backbone.js Published Dec 2013 SIDE PROJECT www.donatecode.com
  3. 3. THE HISTORY ! CHARACTERISTICS OF A SINGLE PAGE APPLICATION ! ADVANTAGES AND PITFALLS ! BACKBONE.JS AND OTHER JS LIBRARIES ! SINGLE PAGE APPLICATIONS and .NET SINGLE PAGE APPLICATIONS
  4. 4. HISTORY
  5. 5. 2005
  6. 6. 2006
  7. 7. THE WILDERNESS YEARS 2006 -2010
  8. 8. 2010++ https://xkcd.com/927/
  9. 9. CHARACTERISTICS
  10. 10. Makes websites more APP-lIKE LESS WAITING ALL RESOURCES LOADED AT THE START ! PAGE NEVER RELOADS ! BOOKMARKABLE SECTIONS ! CHARACTERISTICS
  11. 11. MODEL VIEW * REQUIRED REDRAW UI WITHOUT SERVER ROUND-TRIP ! Server View s View 1 View 2 Model Model 1 Model 2 Client
  12. 12. TWITTER
  13. 13. WHAT DOES THE SERVER DO? BECOMES A PURE DATA API or a WEB SERVICE THIN SERVER HANDLES SECURE or SENSITIVE CODE
  14. 14. WHAT DOES THE SERVER DO? THICK STATEFUL SERVER Server RENDERS HTML and Executes LOGIC RECORDS STATE AND UPDATES CLIENT
  15. 15. ADVANTAGES PITFALLS
  16. 16. EMBRACE THE ADVANTAGES NATURAL USER FLOW PARALLEL DEVELOPMENT EXPERIENCE on MOBILE DEVICES STATE HANDLED ON CLIENT OFFLINE EXPERIENCE POSSIBLE
  17. 17. BEWARE OF PITFALLS SEARCH ENGINE OPTIMISATION JAVASCRIPT MUST BE ENABLED LOADING TIME JAVASCRIPT MEMORY LEAKS
  18. 18. USE THE SERVER LUKE RENDER FIRST PAGE ON THE SERVER INITIAL LOAD TIME ISSUE POPULATE INITIAL MODELS
  19. 19. BACKBONE.JS AND OTHER LIBRARIES
  20. 20. HELPS STRUCTURE CODE MODEL VIEW CONTROLLER LIGHTWEIGHT 6.4KB MATURE 2010 UNOPINIONATED
  21. 21. DEPENDS ON OPTIONAL
  22. 22. REpRESENts A SINGLE DATA OBJECT ! CONNECTS TO SERVER URL TO POPULATE / PERSIST ! WHEN DATA CHANGES, EVENTS FIRE BACKBONE MODEL
  23. 23. BACKBONE MODEL Tweet = Backbone.Model.extend({ });
  24. 24. BACKBONE MODEL: BASICS DEFAULT VARIABLES CONSTRUCTOR BUILT-IN FUNCTIONS YOUR OWN FUNCTIONS
  25. 25. BACKBONE MODEL: USAGE
  26. 26. BACKBONE MODEL: CHANGE EVENTS
  27. 27. BACKBONE COLLECTION BULK OPERATIONS ON MODELS ! CONNECTS TO SERVER URL TO POPULATE / PERSIST ! WHEN DATA CHANGES, EVENTS FIRE ! LOTS OF QUERY and FILTER FUNCTIONS
  28. 28. BACKBONE COLLECTION Timeline = Backbone.Collection.extend({ });
  29. 29. BACKBONE COLLECTION: BASICS MODEL CONSTRUCTOR URL
  30. 30. BACKBONE VIEW CHANGES THE DOM ! CAN HANDLE DOM EVENTS ! SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER ! USE TEMPLATE FOR EFFICIENT RENDERING
  31. 31. BACKBONE VIEW: THE DOM
  32. 32. BACKBONE VIEW: THE TEMPLATE
  33. 33. BACKBONE VIEW TimelineView = Backbone.View.extend({ });
  34. 34. BACKBONE VIEW: BASICS DOM ELEMENT TEMPLATE DOM EVENT HANDLING RETRIEVE THE COLLECTION
  35. 35. BACKBONE VIEW: RENDERING APPEND TO DOM
  36. 36. BACKBONE ROUTER HANDLES APPLICATION STATE ! PROVIDES BOOKMARKABLE STATE ! SUBSCRIBE TO CHANGE EVENTS IN THE DATA LAYER [CONTROLLER]
  37. 37. BACKBONE ROUTER CONTROLLER AppRouter = Backbone.Router.extend({ });
  38. 38. BACKBONE ROUTER: BASICS ROUTES EVENTS HANDLERS
  39. 39. DOM Model Collection ROUTER VIEW
  40. 40. UNOPINIONATED === CONTROL
  41. 41. ECO SYSTEM
  42. 42. MATURITY
  43. 43. TOOLING
  44. 44. .NET
  45. 45. http://www.asp.net/single-page-application/overview/introduction TEMPLATES FOR THE MOST POPULAR
  46. 46. @SUGRUE www.jamessugrue.ie AVAILABLE ON AMAZON WIN IT NOW! JOIN UP AT www.donatecode.com HIRING JAVASCRIPT / MOBILE DEVELOPERS

×