durandal at team4talent
DESCRIPTION
A presentation (in Dutch) on using Durandal for SPAs. This was a presentation given for an internal meeting at Team4Talent (http://www.team4talent.be). There is a demo app to go along with it at https://github.com/petermorlion/DurandalDemo. The notes with each slide sometimes refer to this demo app.TRANSCRIPT
Durandal
Peter Morlion
Wat?
• Framework voor SPA• Wat is een SPA?
Drie hoofdbrokken
• jQuery• RequireJS• Knockout
jQuery
RequireJS
RequireJS: wat?
• AMD• Javascript ==(=) javashit ?• Dependency injection
RequireJS modules: simpel object (singleton!)
RequireJS modules: met dependencies• Array met module ids• Function• RequireJS lost dependencies op
RequireJS modules: singelton vermijden• return function
RequireJS: require
RequireJS: configuration
• Paths• Shim
Knockout
Knockout: wat?
• javascript MVVM
Model
ViewModel
View
Magic
Jouw code (of mapping plugin)
Knockout: HTML
• Databinding
• Gewoon javascript mag
• Meerdere properties
Knockout: viewmodels
• Observables zijn functions:
Knockout: HTML + viewmodels
• Of:
Knockout: observables
Knockout: computed
Knockout: subscribe
Knockout: bindings
visibletexthtmlcssstyle
attrforeachififnotwith
clickeventsubmitenabledisablevaluehasFocuscheckedoptionsselectedOptionsuniqueNametemplate
Knockout: customBindings
Knockout: binding contexts
• $data• $parent• $parents• $root• $index
Knockout: data
• ko.toJS(viewModel)• ko.toJSON(viewModel)
• Knockout mapping plugin:• ko.mapping.fromJS• ko.mapping.updateFromJS• ko.mapping.toJS• ko.mapping.toJSON• ko.mapping.fromJSON
Knockout: containerless syntax
Durandal
Durandal: modules
• AMD modules met RequireJS• Iedere module krijgt een eigen id
Durandal: views
• Gewoon html bestand• Slechts 1 root element• Databinding (Knockout!) verbindt view met module
Durandal: views en viewmodels
• Convention:• viewmodels/customerList.js• views/customerList.html
Durandal: composition
• Object composition• Visual composition
Durandal: visual composition
Durandal: composition extras
• strategy• transition• cacheViews• activate• preserveContext, area, activationData, mode, hooks, whoa!• composition lifecycle: getView, activate, binding, bindingComplete,
attached, compositionComplete, detached
Durandal: debugging
• Veel info in console
• Cache busting
Durandal: dialogs
• app.showMessage en app.showDialog
Durandal: app setup 1
Durandal: app setup 2
Durandal: app setup 3
Durandal: plugins
• http en serializer • observable• …
Durandal: main.js
• Configuratie van RequireJS en Durandal• Andere libraries:• Vóór RequireJS• Via RequireJS
Durandal en ASP.NET MVC
• HotTowel template
Durandal: nog veel meer
• Publish-subscribe• Templatable widgets• Child routers• Custom project structuur (in plaats van /views/ en /viewModels/)• Custom manier om moduleId toe te kennen en op te halen• Custom manier om modules aan te maken• system.guid()• Custom manier om views te vinden• Builden met NodeJS en Weyland (lint, minify, combine,…)• Builden met NodeJS en Weyland vanuit Visual Studio• Builden met Mimosa• SEO mogelijkheden• Integreer Q, Dojo, KendoUI, Almond, i18next,…• PhoneGap, Node-Webkit, Windows 8
En verder
• http://jquery.com/• http://requirejs.org/• http://knockoutjs.com/
• http://durandaljs.com/
Einde
Hmm, javascript ain’t so bad after all