CodeCon DurandalJS

1. DURANDAL.JS
AKO ALTERNATÍVA K ANGULAR.JS
MARIÁN VLČÁK (VLKO)
SPONZORED BY: DESCARTES SLOVAKIA, FINSTAT.SK, BRAINHOUSE.SK

2. AKO TO BOLO…
LEBO VŠETKO MÁ SVOJ PRÍBEH

3. ČO JE DURANDALJS
SPA framework
Modulárny
Routing
Binding
Composition
Prehľadný Lifecycle

4. ARCHITEKTÚRA
ViewModels
(js)
Views
(html)
Štýl
(css)
DurandalJS
RequireJS Knockout JQuery Bootstrap

5. REQUIREJS
Asynchronous Module Definition (AMD)
Single Responsibility Principle
Dependency injections

6. KNOCKOUT
Declarative Bindings
Automatic UI Refresh
Dependency Tracking
Templating
POCO <->Observable problém

7. OSTATNÉ
Jquery
Bootstrap
Čokoľvek potrebujete

8. COMPOSITION
Object Composition (RequireJS)
Visual Composition (data-bind="compose:... ")
Ak string (html alebo module id)
Ak objekt
Ak funkcia

9. LIFECYCLE
Callback Lifecycle Purpose
getView() and viewUrl Composition Enables the new object to return a custom view.
canDeactivate() Activator Allows the previous object to cancel deactivation.
canActivate() Activator Allows the new object to cancel activation.
deactivate() Activator Allows the previous object to execute custom deactivation logic.
activate() Composition & Activator Allows the new object to execute custom activation logic.
binding() Composition Notifies the new object immediately before databinding occurs.
bindingComplete() Composition Notifies the new object immediately after databinding occurs.
attached() Composition Notifies the new object when its view is attached to its parent DOM
node.
compositionComplete() Composition Notifies the new object when the composition it participates in is
complete.
detached() Composition Notifies a composed object when its view is removed from the
DOM.

10. DEMO
DurandalJS Starter Kit

11. TYPESCRIPT
Na také to typové kódenie
By design podpora pre modularizáciu (AMD, CommonJS)
Make sense for me

12. DEMO
DurandalJS Starter Kit – The Typescript sequel

13. KOMUNIKÁCIA V RÁMCI APP
PUB-SUB architektúra
Events module
App level
Funkcie:
 On
 Off
 Trigger
 Proxy

14. WIDGETS
Komponenta s vlastným view.html a viewmodel.js
Použitie cez binding syntax
Templatovanie cez data-part

15. DEMO
Events a Widgets

16. BUDÚCNOSŤ DURANDALJS
Rob Eisenberg nastúpil do AngularJS 2.0 teamu
[http://eisenbergeffect.bluespire.com/angular-and-durandal-converge/]
DurandalJS 1.x pre old/modern browsers
AngularJS 2.x pre modern browsers

17. DEMO SOURCE CODES
 https://github.com/vlko/CodeCon_Durandal