Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Single page applications with backbone js

896 views

Published on

A session I delivered in SELA SDP14 about SPAs and Backbone.js.

Published in: Technology
  • Be the first to comment

Single page applications with backbone js

  1. 1. SELA DEVELOPER PRACTICE Gil Fink Single Page Applications with Backbone.js
  2. 2. • The Road to Single Page Apps • What is a SPA? • SPA Building Blocks and Architecture • AMD and RequireJS • MVC using Backbone.js • A Simple SPA Agenda
  3. 3. RIA Web Apps Websites Thin Clients and App Stores The Road to Single Page Apps Native Apps Click- Once SPA Embedded Objects (Flash, Silverlight, Java Applets …)
  4. 4. Traditional Web Apps HTTP requests translated into user actions The state persisted in the server side The server translates the user action The server translates its response to HTML The browser displays the HTML response
  5. 5. Traditional Native Apps State is persisted in the client-side Compiled programming language is used The application is platform dependent An installation may be required
  6. 6. What is a Single Page App (SPA)? A web application No need for full page submit No full refresh No embedded objects Client-side routing
  7. 7. Why to Develop SPAs? Feature Web App Native App Single Page App Cross Platform V X V Client State Management X V V No Installation required V X V Web App Native App SPA
  8. 8. SPA Building Blocks HTML5 JavaScript Libraries Ajax REST SPA Web API
  9. 9. HTML5 Supported by most modern browsers Include variety of new JavaScript APIs that can help to: Store data locally Save data across application shutdowns Communicate with the server in new ways Such as CORS and Web Sockets Increase web performance with new APIs and new mechanisms
  10. 10. Ajax Asynchronously call server endpoints Non blocking operations You can maintain state in the client and go to the server without refreshing the whole page Has opened the road for richer client-side UX
  11. 11. JavaScript Libraries/Frameworks
  12. 12. REST Stands for REpresntational State Transfer Architecture style Designed to work with HTTP Using HTTP verbs (POST, GET, PUT, DELETE) Performs Create, Read, Update and Delete operations respectively Can also use other HTTP verbs Can receive and send data in variety of formats JSON, XML, HTML, XHTML, Blob and more
  13. 13. Web API The server is used only as API Each API Function is an endpoint in the server No need for server rendering No need for server routing
  14. 14. Client-Side Routing The main building block in a SPA All routing is done in the client-side You use a routing library/framework When a route change happens, the library/framework intercepts the navigation and impose your functionality
  15. 15. SPA Architecture
  16. 16. Asynchronous Module Definitions (AMD) Define modules such that the module and its dependencies can be asynchronously loaded
  17. 17. RequireJS Library A module framework in the browser Can be downloaded from http://requirejs.org/ Browser friendly API Concepts supported in Node.js as well Defines a structure for files layout Uses conventions to perform lookups for dependencies
  18. 18. Demo RequireJS
  19. 19. MVC using Backbone.js Backbone.js is a small MVW library Enforces structure to your JavaScript code Includes only 5 main objects: Models Collections Views Routers Events
  20. 20. MVC using Backbone.js – Cont. Extending one of Backbone.js main objects To include built-in Backbone.js functionality To create your own custom functionality var myModel = Backbone.Model.extend({ defaults: { myModelID: 0, myModelName: ‘’ } }); Var myCollection = Backbone.Collection.extend({ model: myModel }); var myRouter = Backbone.Router.extend({ routes: { ‘’: home }, home: function() { // create the home view } });
  21. 21. Demo A Simple SPA
  22. 22. Questions
  23. 23. Summary • SPAs are entire web apps built upon one page and JavaScript interactions • Very suitable for mobile development • SPAs are the way to build your next web apps!
  24. 24. Thank You

×