itcamp 2013 - tiberiu covaci - spa made breezy

itcampro@ itcamp13# Premium conference on Microsoft technologies

SPA Made Breezy

Tiberiu Covaci, @tibor19

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileHuge thanks to our sponsors!

itcampro@ itcamp13# Premium conference on Microsoft technologies

itcampro@ itcamp13# Premium conference on Microsoft technologies

itcampro@ itcamp13# Premium conference on Microsoft technologies

Single Page Applications Made with Breeze.js

Tibi Covaci, @tibor19

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

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileAgenda

• What is SPA

• Technologies

• Demo

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileSingle Page Application

Rich Client App in HTML/JavaScript

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileWhy SPA?

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileOne ASP.NET

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileHybrid is the norm

ASP.NET Web Form

ASP.NETMVC Page

ASP.NetMVC Page

SPA

No one pattern is the best Evolution, not revolution

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileKnockout

• JavaScript MVVM framework

• Independent library

• Works well with other frameworks

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileKnockout

• Declarative bindings

• Automatic refresh

• Dependency tracking

• Support for templating

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileKnockout observables

• Observable properties

• Observable arrays

• Computed(dependent) observables

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileKnockout bindings

• Controlling text and appearance

• Control flow

• Form field bindings

• Rendering templates

• Custom bindings

itcampro@ itcamp13# Premium conference on Microsoft technologies

Demo

itcampro@ itcamp13# Premium conference on Microsoft technologies

learn more at

knockoutjs.com

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

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

itcampro@ itcamp13# Premium conference on Microsoft technologies

Demo

itcampro@ itcamp13# Premium conference on Microsoft technologies

learn more at

durandaljs.com

itcampro@ itcamp13# Premium conference on Microsoft technologies

Development &

MobileRich data

Caching

Validation

Client Queries

Batch Save

Change TrackingRoll Your

Own

itcampro@ itcamp13# Premium conference on Microsoft technologies

Free

Open Source (GitHub)

MIT License

itcampro@ itcamp13# Premium conference on Microsoft technologies

Technical Support

Professional Services

itcampro@ itcamp13# Premium conference on Microsoft technologies

itcampro@ itcamp13# Premium conference on Microsoft technologies

Demo

itcampro@ itcamp13# Premium conference on Microsoft technologies

learn more at

breezejs.com

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

itcampro@ itcamp13# Premium conference on Microsoft technologies

Thank you

Thanks to IdeaBlade

Ward Bell

Marcel Good

itcampro@ itcamp13# Premium conference on Microsoft technologies

Q & A