1. itcampro@ itcamp13# Premium conference on Microsoft technologies
SPA Made Breezy
Tiberiu Covaci, @tibor19

2. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHuge thanks to our sponsors!

3. itcampro@ itcamp13# Premium conference on Microsoft technologies

4. itcampro@ itcamp13# Premium conference on Microsoft technologies

5. itcampro@ itcamp13# Premium conference on Microsoft technologies
Single Page Applications
Made with Breeze.js
Tibi Covaci, @tibor19

6. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileWho am I
• Tiberiu ’Tibi’ Covaci
• Software engineer, 20 years experience
• MCT since 2004, teaching .NET
• Senior Trainer & Mentor in Romania
• Microsoft MVP for Windows Azure
• Father & Geek
• Twitter: @tibor19 / #itcamp13

7. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileAgenda
• What is SPA
• Technologies
• Demo

8. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSingle Page Application
Rich Client App in HTML/JavaScript

9. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileWhy SPA?

10. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileOne ASP.NET

11. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileHybrid is the norm
ASP.NET Web
Form
ASP.NET
MVC Page
ASP.Net
MVC Page
SPA
No one pattern is the best Evolution, not revolution

12. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout
• JavaScript MVVM framework
• Independent library
• Works well with other frameworks

13. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout
• Declarative bindings
• Automatic refresh
• Dependency tracking
• Support for templating

14. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout observables
• Observable properties
• Observable arrays
• Computed(dependent) observables

15. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileKnockout bindings
• Controlling text and appearance
• Control flow
• Form field bindings
• Rendering templates
• Custom bindings

16. itcampro@ itcamp13# Premium conference on Microsoft technologies
Demo

17. itcampro@ itcamp13# Premium conference on Microsoft technologies
learn more at
knockoutjs.com

18. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileDurandal
• Clean MV* Architecture
• JS & HTML Modularity
• Simple App Lifecycle
• Eventing, Modals, Message Boxes, etc.
• Navigation & Screen State Management
• Consistent Async Programming w/ Promises
• App Bundling and Optimization

19. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileDurandal
• Use any Backend Technology
• Built on top of jQuery, Knockout & RequireJS
• Integrates with other libraries such as
SammyJS & Bootstrap
• Make jQuery & Bootstrap widgets
templatable and bindable (or build your own
widgets).

20. itcampro@ itcamp13# Premium conference on Microsoft technologies
Demo

21. itcampro@ itcamp13# Premium conference on Microsoft technologies
learn more at
durandaljs.com

22. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileRich data
Caching
Validation
Client Queries
Batch Save
Change Tracking
Roll Your
Own

23. itcampro@ itcamp13# Premium conference on Microsoft technologies
Free
Open Source (GitHub)
MIT License

24. itcampro@ itcamp13# Premium conference on Microsoft technologies
Technical Support
Professional Services

25. itcampro@ itcamp13# Premium conference on Microsoft technologies

26. itcampro@ itcamp13# Premium conference on Microsoft technologies
Demo

27. itcampro@ itcamp13# Premium conference on Microsoft technologies
learn more at
breezejs.com

28. itcampro@ itcamp13# Premium conference on Microsoft technologies
Development &
MobileSummary
• SPA is a good alternative
• KO and data binding makes code cleaner
• Durandal makes the MV* easy
• SPA is Breezy with KO and Durandal

29. itcampro@ itcamp13# Premium conference on Microsoft technologies
Thank you
Thanks to IdeaBlade
Ward Bell
Marcel Good

30. itcampro@ itcamp13# Premium conference on Microsoft technologies
Q & A