Single Page Application presentation

821 views

Published on

The journey of creating a single page application using AngularJS with BreezeJS.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
821
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Single Page Application presentation

  1. 1. Single Page Applications – A journey  About Me  About the company  Single Page Applications  AngularJS  BreezeJS  Application demo  Unit Testing  Conclusion  Any questions?
  2. 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. 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. 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. 5. What - Initial solution  Jquery with Bootstrap – Single page with tabbed control
  6. 6. Jobs view
  7. 7. Problems  jQuery – No Navigation from job view to project view – No Two way binding – No deep linking  We need a framework...
  8. 8. But, which framework to choose?
  9. 9. AngularJS  Solves two way binding problem
  10. 10. AngularJS – How it works Controller View Result!
  11. 11. 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...
  12. 12. Demo of deep linking
  13. 13. Data – Initial solution  First there was: WCF web services with SQL  Not good at Rest  Inflexible  Verbose  No Metadata – validation
  14. 14. 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
  15. 15. BreezeJS – get rid of the boiler plate! Removes verbosity of web layer
  16. 16. Data access – Entity Framework
  17. 17. Unit Testing  Angular enforces separation of concerns  Angular allows Dependency injection  BDD with Jasmine and Sinon for mocking  Example
  18. 18. Controller to Unit Test
  19. 19. Unit testing code
  20. 20. 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
  21. 21. Any questions?

×