Single Page Applications – A journey

About Me About the company Single Page Applications AngularJS BreezeJS Application demo Unit Testing Conclusion Any questions?

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

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

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

What - Initial solution

Jquery with Bootstrap– Single page with tabbed control

Jobs view

Problems

jQuery– No Navigation from job view to project view– No Two way binding– No deep linking

We need a framework...

But, which framework to choose?

AngularJS

Solves two way binding problem

AngularJS – How it works

Controller

View

Result!

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...

Demo of deep linking

Data – Initial solution

First there was: WCF web services with SQL Not good at Rest Inflexible Verbose No Metadata – validation

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

BreezeJS – get rid of the boiler plate!

Removes verbosity of web layer

Data access – Entity Framework

Unit Testing

Angular enforces separation of concerns Angular allows Dependency injection BDD with Jasmine and Sinon for mocking Example

Controller to Unit Test

Unit testing code

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

Any questions?