JavaScript Single Page Application Web Frameworks
Oliver Zeigermann / @DJCordhose
Janos Koschwitz / @JanosKoschwitz
Online-Version: http://bit.ly/1VTfUZX
Code auf Github: https://github.com/DJCordhose/javascript-web-frameworks
Überblick
Copyright 2015, Mike North (@michaellnorth), https://twitter.com/ModernWebUI/status/575532649948790784/photo/1
Wieso denn überhaupt ein JavaScript Web Framework?
Single Page Applications (SPAs) verschieben eure Anwendung in den Browser
Und im Browser läuft eben nur JavaScript
Klassiche Webanwendung
Copyright 2015, Oliver Zeigermann
SPA Lean
Copyright 2015, Oliver Zeigermann
SPA Fat
Copyright 2015, Oliver Zeigermann
Trotzdem: Warum moderne Frameworks einsetzen?
Projekte werden größer
Buisness-Apps im Web
Framework = Ordnungsrahmen
- Schnelles Scaffolding mit gewissem Funktionsumfang
- Community
- neue Mitarbeiter finden sich zurecht
Unsere Kandidaten
- Magie: Angular 1.x... "Der Comunitylover"
- Reale Web Components: Polymer... "Googles kleiner Schatz"
- Konvention vor Konfiguration: Ember... "Mr. All-Inclusive"
- Einfachheit: React... "Facebook reagiert!"
- Mehr Magie?: Angular 2... "Zukunft?"
Trends September 2015
Trends September 2015 ohne Angular 1
Magie: Angular
- Aktueller Hype von Google
- View Model als Basis
- 3 Ds
- Data Binding (2-Wege)
- Dependency Injection
- Directives (=== Komponenten)
Hello World AngularJS 1.4
Code-Stil basiert auf (halb-) offizieller Empfehlung
function HelloController() {
var vm = this; // define view model
vm.greeting = 'Hello';
vm.clear = function () {
vm.greeting = '';
document.getElementById('in').focus();
};
}<body np-app ng-controller="HelloController as helloController">
<input ng-model="helloController.greeting" id="in">
<p>{{helloController.greeting}}, World!</p>
<input type="button" value="Clear"
ng-click="helloController.clear()">
</body>
Der Communitylover
- Massig Developer, Foren, Themes, usw
- einfache Lernkurve
- Abkömmling Ionic (Hybrid-App-Framework)
Reale Web Components: Polymer
- Von Google
- Basiert auf dem Standard Web Components
- Kommt mit Polyfills, damit Web Components auf allen Browsern laufen
- Macht die API einfacher
- Bietet eine ganze Reihe von Standard-Komponenten
- Vaadin bietet ein darauf aufbauendes Grid
- Google hält es für produktiv einsetzbar (unterstreicht dies mit dem 1.0 Release)
Exkurs Web Components
- Eine Erweiterung der DOM-API als Standard
- Custom Elements: man kann eigene Tags definieren
- HTML Templates: einfache Templates innerhalb einer HTML-Seite
- Shadow DOM: Lokale Kapselung von DOM, JavaScript und CSS
- HTML Imports: Inkludieren von HTML/Web Components
- Wird im Moment nur von Chrome komplett unterstützt
- Firefox unterstützt HTML Imports nicht
- Microsoft hat mit der Umsetzung begonnen
Hello World Polymer
<link rel="import" href="greeter-element.html">
<greeter-element greeting="Hello"></greeter-element>
// greeter-element.html
Polymer({
is: "greeter-element",
reset: function() {
this.greeting = "";
this.$.in.focus();
}
});
<dom-module id="greeter-element">
<template>
<input id="in" value="{{greeting::keyup}}">
{{greeting}}, World!
<input type="button" value="Clear" on-click="reset">
</template>
</dom-module>Das Nunchaku der Frameworks
- Cool, but useless?
- läuft gut nur in Chrome
- Standardkomponenten -> Styling sehr Googlelastig
- Wer benutzt es?
Konvention vor Konfiguration: Ember
- "Ordnungsrahmen": Sehr strukturiert und modularisiert
- All-In-Ökosystem mit vielen Best-Practices
- Super Router mit verschachteteln Routen
"Don't waste time making trivial choices"
from emberjs.com
Hello World Ember
// handlebars/htmlbars template
{{input id="in" value=greeting}}
{{greeting}}, World
<input type="button" value="Clear" {{action 'clear'}}>
export default Ember.Controller.extend({
greeting : "Hello",
actions: {
clear: function() {
this.set('greeting','');
$('#in').focus();
}
}
});The Upside: All-In
- starkes Command-Line-Interface Ember-CLI
- Taskrunner zum Testen, entwicklen, builden, usw.
- Storekonzept (Restadapter, Localstorage, uvm.)
- Templating Engine (Handlebars / HTMLBars)
- Data-Binding
- Router
- (Web-)Komponentenorientierte Entwicklung
- Ember Addons
The Downside: the Ember Way
- viele Veränderungen und Depractions von Release zu Release (Hoffnung seit Ember 2.0)
- Wenig Raum für eigene Strukturierungen
If you follow the Ember way
you will like the Ember way
Janos Koschwitz
Einfachheit: React
- Der kommende Hype von Facebook
- Framework für Facebook und viele andere
- Basiert auf Komponenten, die Template und Logik enthalten
- Templates sind einfach JavaScript
- Templates können HTML artige JSX-Syntax enthalten
- Ein-Weg-Data-Binding: Zustandsänderungen stellen Komponente neu dar
- Kann im Browser und auf dem Server rendern
Hello World React
class HelloMessage extends React.Component {
render() {
return (
<input value={this.state.greeting} ref="in"
onChange={this.updateModel.bind(this)} />
{this.state.greeting}, World
<button onClick={this.reset.bind(this)}>Clear</button>
);
} constructor(props) {
this.state = {greeting: this.props.greeting};
}
updateModel(event) {
this.setState({greeting: event.target.value});
}
reset() {
this.setState({greeting: ""});
this.refs.in.focus();
}
}Aufruf
// index.html
<body>
</body>
// main.js
import HelloMessage from './HelloMessage';
var mountNode = document.getElementById('mount');
ReactDOM.render(<HelloMessage greeting="Hello"/>, mountNode);
Hype, Hyper, React
- Macht genau, was es soll!
- Schnell!
- Mehr "Lib" als Framework
- wird für komplette Anwendung typischerweise mit React Router und einem Flux-Framework gekoppelt
- viel Inspiration aus der funktionalen Ecke (Immutable, pure functions, stateless)
Mehr Magie: Angular 2
- Nachfolger von Angular 1
- Beta-Release bisher nicht absehbar
- Ankündigung (Herbst 2014) hat zu Verunsicherung geführt
- Konzepte deutlich anders als Angular 1
- Kein Migrationspfad absehbar
- sanfter Migrationspfad inzwischen denkbar
- Optimiert für den Einsatz von Microsofts TypeScript
- Simuliertes 2-Wege-Data-Binding
- Basiert auf Komponenten
Hello World AngularJS 2.x
@Component({
selector: 'hello-app'
})
@View({
template:
`<input [value]="greeting" #in (keyup)="updateModel(in.value)">
<p>{{greeting}}, World</p>
<button (click)="reset(in)">Clear</button>`
})class HelloCmp {
greeting: string;
constructor() {
this.greeting = 'Hello';
}
reset(input) {
this.greeting = '';
input.focus();
}
updateModel(value) {
this.greeting = value;
}
}Aufruf
bootstrap(HelloCmp);
<body>
<hello-app></hello-app>
<script>System.import('app');</script>
</body>
Fazit
- Hypes kommen und gehen schnell im JavaScript-Land
- Technisch sind alle Frameworks brauchbar
- Mit allen sind ähnliche Arbeitsergebnisse erreichbar
- Welches Framework für dich das richtige ist, hängt von hauptsächlich von strategischen Überlegungen ab
- Langlebigkeit? Wartbarkeit?
- Einarbeitungsaufwand? Welcher Code-Stil passt zu dir?
- Diese Fragen kann man nur in Zusammenhang mit individuellen Anforderungen beantworten
Bewertung
| User Experience | Developer Experience | Standards | Investitionssicherheit | |
|---|---|---|---|---|
| Angular 1 | + (langsam bei vielen Komponenten) |
o (viel Magie, Komponenten unnötig komplex) |
- (Angular-way eher Java-Stil) |
o (muss migriert werden) |
| Polymer | + (nur in Chrome optimal) |
o (bisher nur geringe Toolunterstützung) |
+ (basiert auf Standard und 1.0) |
o (1.0, aber wer setzt das ein?) |
| Ember | ++ | + (Ember Way) - (Ember Way) |
+ | + (stabile Community) |
| React | ++ | Für JS-Dev: ++ (Turnaroundzeiten)
Für Java-Dev: o (viel neues) |
+ | + (Einsatz bei Facebook, Rückwärtskompatibilität) |
| Angular 2 | ++ (vermutlich) | o (vieles neu) |
+ | - (bisher kein Release) |
Disclaimer: basierend auf unseren Erfahrungen
Vielen Dank!
Fragen / Diskussion
Oliver Zeigermann / @DJCordhose
Janos Koschwitz / @JanosKoschwitz