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