Durandal at Team4Talent

50 %
50 %
Information about Durandal at Team4Talent

Published on February 28, 2014

Author: PeterMorlion

Source: slideshare.net


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.

Durandal Peter Morlion

Wat? • Framework voor SPA • Wat is een SPA?

Drie hoofdbrokken • jQuery • RequireJS • Knockout



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: wat? • javascript MVVM View Magic ViewModel Jouw code (of mapping plugin) Model

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 visible text html css style attr foreach if ifnot with click event submit enable disable value hasFocus checked options selectedOptions uniqueName template

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: 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/

Hmm, javascript ain’t so bad after all Einde

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Learning, speaking, and Durandal - Peter Morlion

Durandal at Team4Talent from Peter Morlion There are some useful comments in the notes of most slides. Also, you can have a look at the code I used for ...
Read more

Getting a Mimosa (Durandal) app to work on NodeJS on ...

Getting a Mimosa (Durandal) app to work on NodeJS on Microsoft Azure ... and Durandal. At Team4Talent we recently held an entire day of developer sessions.
Read more

SPA, Durandal and beyond... - Technology - documents.mx

Durandal vs. Angular Durandal Angular MV* Dependency injection (via Require) ... Durandal at Team4Talent. AngularJS and SPA. Salon and spa websites.
Read more

Durandal Dreadnought (en) 1 - Documents

DURANDAL DREADNOUGHT 95 The life of a Black Templar does not end once his mortal shell cannot fight anymore. It can go on in the sacred sarcophagus of a ...
Read more

Peter Morlion | LinkedIn

Peter Morlion. Passionate programmer, TDD fan. Location Bruges Area, Belgium Industry Information Technology and Services
Read more

Public speaking, a training day experiment - Tim Sommer

My company (Team4Talent) recently asked me to organize their next training day. I wanted all speakers to be colleagues. Everyone would feel more at ease ...
Read more