SDC 2013

SPA Made Breezy

Tiberiu Covaci

Ward Bell, v.p. of technology, IdeaBlade

SDC 2013

Who am I

• Tiberiu ’Tibi’ Covaci• Software engineer, 20 years experience• MCT since 2004, teaching .NET• Senior Trainer & Mentor in Romania• MVP for Windows Azure• Father & Geek• Twitter: @tibor19 / #scandev

SDC 2013

Agenda

• What is SPA• Technologies• Demo

SDC 2013

Single Page Application

Rich Client App in HTML/JavaScript

SDC 2013

Why SPA?

SDC 2013

One ASP.NET

SDC 2013

Hybrid is the norm

ASP.NET Web Form

ASP.NETMVC Page

ASP.NetMVC Page

SPA

No one pattern is the best Evolution, not revolution

SDC 2013

Knockout

• JavaScript MVVM framework• Independent library• Works well with other frameworks

SDC 2013

Knockout

• Declarative bindings• Automatic refresh• Dependency tracking• Support for templating

SDC 2013

Knockout observables

• Observable properties• Observable arrays• Computed(dependent) observables

SDC 2013

Knockout bindings

• Controlling text and appearance• Control flow• Form field bindings• Rendering templates• Custom bindings

SDC 2013

learn more at

knockoutjs.com

SDC 2013

Demo

SDC 2013

Durandal

• 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

SDC 2013

Durandal

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

SDC 2013

learn more at

durandaljs.com

SDC 2013

Demo

SDC 2013

Rich data

Caching

Validation

Client Queries

Batch Save

Change TrackingRoll Your

Own

SDC 2013

Free

Open Source (GitHub)

MIT License

SDC 2013

Technical Support

Professional Services

SDC 2013

SDC 2013

learn more at

breezejs.com

SDC 2013

Demo

SDC 2013

Summary

• SPA is a good alternative• KO and data binding makes code cleaner• Durandal makes the MV* easy• SPA is Breezy with KO and Durandal

SDC 2013

Tank you

Thanks to IdeaBlade

Ward Bell

Marcel Good