Single page applications with backbone js
1 like1,196 views
This document discusses single page applications (SPAs) and their architecture. It begins by explaining what SPAs are, noting that they are web applications that don't require full page refreshes and use client-side routing. The key building blocks of SPAs are then outlined as HTML5, JavaScript libraries, AJAX, REST APIs, and client-side routing. It also discusses specific technologies like AMD/RequireJS for module loading and the Model-View-Controller pattern using Backbone.js. The document concludes by advertising a demo of building a simple SPA.
Single page applications with backbone js
- 1. SELA DEVELOPER PRACTICE Gil Fink Single Page Applications with Backbone.js
- 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. 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. 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. 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. 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. 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. SPA Building Blocks HTML5 JavaScript Libraries Ajax REST SPA Web API
- 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. 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
- 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. 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. 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. SPA Architecture
- 16. Asynchronous Module Definitions (AMD) Define modules such that the module and its dependencies can be asynchronously loaded
- 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. Demo RequireJS
- 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. 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 } });
- 22. Questions
- 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. Thank You