Client-Side-MV* – Ein Überblick –

View Github Repository Open presentation in a new window

blang

See all presentation from blang

Client-Side-MV* – Ein Überblick –

0 0

ClientSideMVCOverviewSlides

An overview about client side mv* framworks especially angular.js

On Github blang / ClientSideMVCOverviewSlides

Client-Side-MV*

Ein Überblick

Von Benedikt Lang

Stern kurz erklaeren

Früher: Server-Side-MV*

MVC serverseitig

Alle Komponenten und Logik auf dem Server

Server liefert statisches HTML

Dann kam XHR

MVC immernoch serverseitig

Endlich möglich: Dynamisches Nachladen von Inhalten

Defacto Standard ab 2005

Dann LowLevel DOM Operationen zb mittels jQuery.

Heute: Client-Side-MV*

MVC (MVP, MVVM, MVWTF) im Browser

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

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

Aehnlichkeiten, Backbone anders (framework vs library), Grosse Veraenderungen

2009 | Google | OpenSource

Angular=Eckig, Eckige Klammern von HTML Tags, Stabil, schnell zu verwenden

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

- Angular.js Entwickler [...]

Wenn HTML fuer Apps designed worden waere...

Angulars Hauptfeatures

  • Erweiterte Templates: Databinding
  • HTML Erweiterungen: Directives

Databinding: Two-Way

Oneway zb bei Backbones Underscore Templates.

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

Run Reset
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Eigene Directives

Attribute und Tags mit verschiedenen Scope Einstellungen

Directives in der Praxis

Run Reset
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Kann Angular noch mehr?

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

Wie anfangen?

Wie anfangen?

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

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

Run Reset
<div ng-app="playground" ng-controller="PlayCtrl">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
var app = angular.module('playground', []);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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