Single Page Application presentation
Download as PPT, PDF1 like2,082 views
The document discusses a journey to building a single page application using AngularJS and BreezeJS. It describes the initial solution using jQuery with problems around navigation and two-way binding. AngularJS solves these issues with routing and two-way binding. BreezeJS simplifies working with data by removing boilerplate code for model creation, queries, validation and only saving changed data. Unit testing is also enabled through Angular's dependency injection and separation of concerns. The presentation concludes that single page applications are well-suited for cross-platform mobile apps that avoid app stores, and that AngularJS and BreezeJS improve code testability and reduce data access code.
Single Page Application presentation
- 1. Single Page Applications – A journey About Me About the company Single Page Applications AngularJS BreezeJS Application demo Unit Testing Conclusion Any questions?
- 2. Biography – John Staveley 13 years C#.net MVC HTML5 Strong on backend Increasingly working on front end projects https://www.linkedin.com/in/johnstaveley @johnstaveley
- 3. Toriga Energy – Who, what, why? Who are Toriga Energy? − Compliance business What they were trying to achieve? − Cross platform mobile app − Offline − Bootstrap Why? − Fast adaptation to the marketplace − Avoid app stores
- 4. How - Single Page Application? CSS/HTML5 web page – all action takes place 'in page' Don't get access to device features e.g. address book Communication via $.ajax Manifest Local Storage to persist offline data App settings for HTML5 – chrome removal, icon, splash
- 5. What - Initial solution Jquery with Bootstrap – Single page with tabbed control
- 7. Jobs view
- 8. Problems jQuery – No Navigation from job view to project view – No Two way binding – No deep linking We need a framework...
- 9. But, which framework to choose?
- 10. AngularJS Solves two way binding problem
- 11. AngularJS – How it works Controller View Result!
- 12. AngularJS - Benefits Routing – solves deep linking problem Directives e.g. navigation control <navigation /> AngularJS versions of jquery libraries such as jquery ui, bootstrap, kendo, signature pad - give example More...
- 13. Demo of deep linking
- 14. Data – Initial solution First there was: WCF web services with SQL Not good at Rest Inflexible Verbose No Metadata – validation
- 15. BreezeJS – solves data problems To simplify creating the model on the client and persisting changes Client side queries Validation Extending the model Only saves data that has changed
- 16. BreezeJS – get rid of the boiler plate! Removes verbosity of web layer
- 17. Data access – Entity Framework
- 18. Unit Testing Angular enforces separation of concerns Angular allows Dependency injection BDD with Jasmine and Sinon for mocking Example
- 19. Controller to Unit Test
- 21. Conclusion Single Page Applications are great for cross platform apps which avoid the app store Don't benefit from intellisense AngularJS makes your code testable BreezeJS removes a lot of data access code https://www.linkedin.com/in/johnstaveley @johnstaveley
- 22. Any questions?