spa made breezy
DESCRIPTION
SPA Made Breezy. Tiberiu Covaci. Ward Bell, v.p. of technology, IdeaBlade. 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. - PowerPoint PPT PresentationTRANSCRIPT
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 PageSPA
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
Technical SupportProfessional 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 IdeaBladeWard Bell
Marcel Good