Durandal at Team4Talent
-
Upload
peter-morlion -
Category
Technology
-
view
922 -
download
0
description
Transcript of Durandal at Team4Talent
![Page 1: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/1.jpg)
Durandal
Peter Morlion
![Page 2: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/2.jpg)
Wat?
• Framework voor SPA• Wat is een SPA?
![Page 3: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/3.jpg)
Drie hoofdbrokken
• jQuery• RequireJS• Knockout
![Page 4: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/4.jpg)
jQuery
![Page 5: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/5.jpg)
RequireJS
![Page 6: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/6.jpg)
RequireJS: wat?
• AMD• Javascript ==(=) javashit ?• Dependency injection
![Page 7: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/7.jpg)
RequireJS modules: simpel object (singleton!)
![Page 8: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/8.jpg)
RequireJS modules: met dependencies• Array met module ids• Function• RequireJS lost dependencies op
![Page 9: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/9.jpg)
RequireJS modules: singelton vermijden• return function
![Page 10: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/10.jpg)
RequireJS: require
![Page 11: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/11.jpg)
RequireJS: configuration
• Paths• Shim
![Page 12: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/12.jpg)
Knockout
![Page 13: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/13.jpg)
Knockout: wat?
• javascript MVVM
Model
ViewModel
View
Magic
Jouw code (of mapping plugin)
![Page 14: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/14.jpg)
Knockout: HTML
• Databinding
• Gewoon javascript mag
• Meerdere properties
![Page 15: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/15.jpg)
Knockout: viewmodels
• Observables zijn functions:
![Page 16: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/16.jpg)
Knockout: HTML + viewmodels
• Of:
![Page 17: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/17.jpg)
Knockout: observables
![Page 18: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/18.jpg)
Knockout: computed
![Page 19: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/19.jpg)
Knockout: subscribe
![Page 20: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/20.jpg)
Knockout: bindings
visibletexthtmlcssstyle
attrforeachififnotwith
clickeventsubmitenabledisablevaluehasFocuscheckedoptionsselectedOptionsuniqueNametemplate
![Page 21: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/21.jpg)
Knockout: customBindings
![Page 22: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/22.jpg)
Knockout: binding contexts
• $data• $parent• $parents• $root• $index
![Page 23: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/23.jpg)
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
![Page 24: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/24.jpg)
Knockout: containerless syntax
![Page 25: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/25.jpg)
Durandal
![Page 26: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/26.jpg)
Durandal: modules
• AMD modules met RequireJS• Iedere module krijgt een eigen id
![Page 27: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/27.jpg)
Durandal: views
• Gewoon html bestand• Slechts 1 root element• Databinding (Knockout!) verbindt view met module
![Page 28: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/28.jpg)
Durandal: views en viewmodels
• Convention:• viewmodels/customerList.js• views/customerList.html
![Page 29: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/29.jpg)
Durandal: composition
• Object composition• Visual composition
![Page 30: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/30.jpg)
Durandal: visual composition
![Page 31: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/31.jpg)
Durandal: composition extras
• strategy• transition• cacheViews• activate• preserveContext, area, activationData, mode, hooks, whoa!• composition lifecycle: getView, activate, binding, bindingComplete,
attached, compositionComplete, detached
![Page 32: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/32.jpg)
Durandal: debugging
• Veel info in console
• Cache busting
![Page 33: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/33.jpg)
Durandal: dialogs
• app.showMessage en app.showDialog
![Page 34: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/34.jpg)
Durandal: app setup 1
![Page 35: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/35.jpg)
Durandal: app setup 2
![Page 36: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/36.jpg)
Durandal: app setup 3
![Page 37: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/37.jpg)
Durandal: plugins
• http en serializer • observable• …
![Page 38: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/38.jpg)
Durandal: main.js
• Configuratie van RequireJS en Durandal• Andere libraries:• Vóór RequireJS• Via RequireJS
![Page 39: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/39.jpg)
Durandal en ASP.NET MVC
• HotTowel template
![Page 40: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/40.jpg)
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
![Page 41: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/41.jpg)
En verder
• http://jquery.com/• http://requirejs.org/• http://knockoutjs.com/
• http://durandaljs.com/
![Page 42: Durandal at Team4Talent](https://reader031.fdocuments.in/reader031/viewer/2022013101/554f91fbb4c9052a518b5413/html5/thumbnails/42.jpg)
Einde
Hmm, javascript ain’t so bad after all