Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Durandal at Team4Talent

1,343 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Durandal at Team4Talent

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

×