Single Page Apps made easy with Durandal 2.0

Building single page applications should be easy. Durandal 2.0 is a mature single page application (SPA) framework that provides a simple architecture that will help you develop applications that your users will enjoy and your developers can easily maintain. This session will cover building an application from the beginning and cover project setup, modules, views, navigation and more. Experience the ease of building fast and beautiful applications with Durandal 2.0.

Transcript

1. Durandal2.0 Single Page Applications made easy Jonathan Marbutt jonathan@jmtechware.com @jmarbutt www.indepthdev.com
2. www.durandaljs.com
3. So many choices? METEOR
4. Durandal 2.0 Nothing like new code smell
5. So why choose Durandal? Minimal amount of new concepts Strong View Composition Rich Page Life Cycle Built on solid Javascript libraries (knockout, requirejs, jQuery) Modularization built on AMD standards
6. Agenda Getting Started Modules & Binding Views & Composition Routing Modals
7. Getting Started www.durandaljs.com Nuget packages Mimosa Skeleton in node.js
8. Modules Bringing order to the chaos
9. Understanding the structure The main.js is where it all starts All your code goes in here Here is a view And its module
10. What’s inside a module Dependencies Then passed in here Return a view model
11. Demo: Your Frist Module
12. Binding: New in 2.0, the observable module! No longer need to define knockout observables Use plain old JavaScript objects Easy to enable
13. Views More than just a pretty face
14. It’s just HTML
15. Binding Powered by KnockoutJS
16. Rich Page Life Cycle detached compositionComplete attached bindingComplete binding activate
17. View Composition Simple Composition Inline Composition Ability to bind modules to inline html Templated Composition Similar to Content sections in asp.net
18. Demo: View Composition
19. Routing
20. Defining routes
21. Parameters for route Easy to define: Easy to receive
22. Events Did you hear something?
23. Keeping things decoupled Module 1 Module 2 Event message
24. Defining Events Create a listener Fire the event
25. Events Demo
26. Modals
27. Built in modal dialog Simple Module that returns a Javascript promise to handle the response
28. Modal Demo
29. Q&A