SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.
-
Upload
vincent-page -
Category
Documents
-
view
214 -
download
0
Transcript of SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.
![Page 1: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/1.jpg)
SDC 2013
SPA Made Breezy
Tiberiu Covaci
Ward Bell, v.p. of technology, IdeaBlade
![Page 2: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/2.jpg)
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
![Page 3: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/3.jpg)
SDC 2013
Agenda
• What is SPA• Technologies• Demo
![Page 4: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/4.jpg)
SDC 2013
Single Page Application
Rich Client App in HTML/JavaScript
![Page 5: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/5.jpg)
SDC 2013
Why SPA?
![Page 6: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/6.jpg)
SDC 2013
One ASP.NET
![Page 7: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/7.jpg)
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
![Page 8: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/8.jpg)
SDC 2013
Knockout
• JavaScript MVVM framework• Independent library• Works well with other frameworks
![Page 9: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/9.jpg)
SDC 2013
Knockout
• Declarative bindings• Automatic refresh• Dependency tracking• Support for templating
![Page 10: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/10.jpg)
SDC 2013
Knockout observables
• Observable properties• Observable arrays• Computed(dependent) observables
![Page 11: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/11.jpg)
SDC 2013
Knockout bindings
• Controlling text and appearance• Control flow• Form field bindings• Rendering templates• Custom bindings
![Page 12: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/12.jpg)
SDC 2013
learn more at
knockoutjs.com
![Page 13: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/13.jpg)
SDC 2013
Demo
![Page 14: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/14.jpg)
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
![Page 15: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/15.jpg)
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).
![Page 16: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/16.jpg)
SDC 2013
learn more at
durandaljs.com
![Page 17: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/17.jpg)
SDC 2013
Demo
![Page 18: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/18.jpg)
SDC 2013
Rich data
Caching
Validation
Client Queries
Batch Save
Change TrackingRoll Your
Own
![Page 20: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/20.jpg)
SDC 2013
Technical Support
Professional Services
![Page 21: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/21.jpg)
SDC 2013
![Page 22: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/22.jpg)
SDC 2013
learn more at
breezejs.com
![Page 23: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/23.jpg)
SDC 2013
Demo
![Page 24: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/24.jpg)
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
![Page 25: SDC 2013 SPA Made Breezy Tiberiu Covaci Ward Bell, v.p. of technology, IdeaBlade.](https://reader036.fdocuments.us/reader036/viewer/2022070412/56649ee65503460f94bf665a/html5/thumbnails/25.jpg)
SDC 2013
Tank you
Thanks to IdeaBlade
Ward Bell
Marcel Good