Client-Side-MV*

Ein Überblick

Von Benedikt Lang

Früher: Server-Side-MV*

MVC serverseitig

Alle Komponenten und Logik auf dem Server

Server liefert statisches HTML

Client Server - Serverside MVC

Dann kam XHR

MVC immernoch serverseitig

Endlich möglich: Dynamisches Nachladen von Inhalten

Defacto Standard ab 2005

Client Server - Serverside MVC with XHR

Heute: Client-Side-MV*

MVC (MVP, MVVM, MVWTF) im Browser

Thick Client, Server MVC wird zur REST Api, Skaliert besser (CDN, XHR), User Experience++

Client Server - Clientside MVC

Grundlegender Aufbau

Model: Javascript Object(s) mit integrierter REST Funktionalität

View: Templateengine (immer unterschiedlich)

Controller: Glue zwischen Model und View, oft mit vorgeschaltetem Application Router.

Choose your Weapon

MV* Frameworks

Angular.js

2009 | Google | OpenSource Github

"Angular is what HTML would have been had it been designed for applications."

- Angular.js Entwickler [...]

Not Bad

Angulars Hauptfeatures

  • Erweiterte Templates: Databinding
  • HTML Erweiterungen: Directives

Databinding: Two-Way

Oneway Binding Twoway Binding

HTML Erweiterungen: Directives

Oberflächlich: Eigene HTML Tags und Attribute
Im Hintergrund: Marker auf einem DOM Element, die Angulars HTML Compiler dann mit Logik versieht

Integrierte (ng-)Directives

Angular bringt eine Vielzahl von Directives mit (ng- Prefix)

  • ng-repeat: Praktisches Foreach
  • ng-click/ng-submit: Button onClick
  • ng-src: Dynamische Bilder
  • ng-if: Bedingungen
  • ng-app, ng-controller: App/Ctrl Binding
  • Viele Weitere...

In der Praxis

Eigene Directives

Attribute und Tags mit verschiedenen Scope Einstellungen

Directives in der Praxis

Kann Angular noch mehr?

  • Dependency Injection
  • ngResource: Anbindung an RESTful APIs
  • DeepLinking/Routing

Wie anfangen?

Yeoman

Wie anfangen?


npm install -g yo
npm install -g generator-angular
yo angular
grunt serve
Yeoman Workflow

Yeoman.io

Entscheidungen!

Client-Side-MV* Ja/Nein?

Nahezu alle Varianten von Webseiten können profitieren

Bzgl SEO immernoch schwierig

Erheblicher Mehraufwand muss eingerechnet werden

Welches Framework?

Im Prinzip Geschmackssache, IMHO Angular für nahezu alle Projekte, Backbone wenn viel Flexibilität nötig

TodoMVC.com zum selbst ausprobieren

How?

Slides mit HTML/JS: github.com/hakimel/reveal.js

JS Fiddle für Slides: github.com/blang/quiddle.js

Slides online: git.io/RSaODg

Who?

Benedikt Lang | github.com/blang

THE END

Angular.js Playground

Quellen

  • http://en.wikipedia.org/wiki/XMLHttpRequest
  • https://plus.google.com/+AngularJS/posts/aZNVhj355G2
  • https://github.com/yeoman/yeoman.io/tree/gh-pages/media
  • http://docs.angularjs.org/guide/databinding
  • http://docs.angularjs.org/guide/directive
  • http://docs.angularjs.org/guide/templates
  • http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/
  • http://www.edwardmarriner.co.uk/JavaScriptMVC.pdf