Welches Webframework passt zu mir? (WJAX)

Welche Webtechnologie passt zu mir?

Alexander Casall
@sialcasa
Software Architekt &
Scrum Product Owner

https://github.com/mraible/history-of-web-frameworks-timeline

Server-seitiges Rendering
vs
Client-seitiges Rendering aka
Single Page Applications (SPA)

Rendering
Rendering
Server
Client
Server side
rendering
Client side
rendering

GET http://catcontent.com
Rendering
Server
Client
GET
<html>
…
</html>
GET
<html>
…
</html>
GET
<html>
…
</html>
Server Side Rendering

GET http://catcontent.com
Rendering
Server
Client
GET
<html>
<script>
</script>
</html>
GET
{
"cat": {
"name":"grumpy“
}
}
GET
{
"cat": {
"name":"garfield“
}
}
Client Side Rendering

Vorteile
• Caching der
gerenderten Templates
• Dokumenten-Ansatz
• Hohe User Experience
• Ein Programmiermodell
im Client (klare
Trennung der Aspekte)
Rendering
Server
Client
Rendering
Server
Client

Nachteile
• Seiten müssen erneut
übertragen werden
• Serverseitige Sessions
notwendig (stateful)
• Initialer Ladeaufwand
• SEO kritischer
• Zusätzliche API
Schicht (e.g. REST)
• Unvorhersehbare
Performance
Rendering
Server
Client
Rendering
Server
Client

https://github.com/mraible/history-of-web-frameworks-timeline
SPAs

als Rich Client Platform zu verstehen
in TypeScript geschriebenes SPA Framework
verfolgt Komponentenansatz
Angular

Optional statisch getypt
interfaces, enums, generics, access modiﬁers …
interface ICar{
engine: string;
color: string;
}
class Car implements ICar {
constructor (public engine: string, public color: string) {}
private drive(direction:Direction) : boolean{
return false; //unfall
}
}
Transpiliert zu JavaScript

Komponentenansatz
header component
category component
discount component
content component
suggestionsoverview component
suggestion component
webshop component
highlight component

@Component({
selector: 'category',
templateUrl: 'category.component.html',
styleUrls: ['category.component.css'],
})
export class CategoryComponent {
title = 'categorycomponent works!';
}
Struktur einer Komponente

@Component({
selector: 'categories',
template: '<h1> 
{{title}} 
</h1>',
})
title = 'categorycomponent works!';
}
Template
Styles
TypeScript

Ein genauerer Blick auf Templates

@Component({
template: `<ul>
<li *ngFor="let category of categories">
{{category.name}}
</li> 
</ul>`,
})
var categories: Categories[] = [
{ "id": 1, "name": "jackets" },
{ "id": 2, "name": "trousers" },
{ "id": 3, "name": "planes" }
];
}
Structural Directive
<— Binding

@Component({
template: '<button [style.color] = "cool ? 'red': 'green'"
(click)="toggleCoolness()">Coolness</button>'
})
cool = false;
switchCoolness(){
this.cool = !this.cool;
}
}
Style Bindings

Unidirektionales Binding
@Component({
template: `<h1> 
{{title}} 
</h1>`,
})
title = 'Display this!';
}

Bidirektionales Binding & Events
@Component({
template: '<input [(ngModel)]="input"
(click)="addPlus()">'
})
input = 'initial Value';
addPlus(){
title += '+';
}
}

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

@Component({
selector: 'webshop',
template: `
<header/>
<categories/>
<discounts/>
<content/>
<suggestions/>
`
})
export class WebshopComponent {
}
Verschachtelung derKomponenten
nsatz
header component
category component
webshop component

@Component({
selector: 'webshop',
template: `
<header/>
<categories/>
<discounts/>
<content/>
<suggestions/>
`
})
export class WebshopComponent {
}
@Component({
templateUrl: 'category.componen
})
}
nsatz
header component
category component
webshop component

Kommunikation zwischen Parent / Child?

@Component({
selector: 'parent',
template: '<child [text]="displayInChild"></child>'
})
export class ParentComponent {
displayInChild = 'Text of Parent!'
}
Daten von Parent zu Child über Binding
@Component({
selector: 'child',
template: '<label>{{text}}</label>'‚
})
export class ChildComponent {
@Input() text : String
}

@Component({
selector: 'parent',
template: '<child (close)="onEvent($event)">
</child>'
})
export class ParentComponent {
onEvent(input: String) {…}
}
Daten von Child zu Parent über Events
@Component({
selector: 'child',
template: '<label (click)="close.emit('closeme')">Text</label>'‚
})
export class ChildComponent {
@Output() close : EventEmitter<String>
}

Weitere Kommunikationsarten zwischen
Parent / Child möglich
https://angular.io/docs/ts/latest/cookbook/component-communication.html

Services
@Injectable()
export class CategoryService {
getCategories() : Category[]{
…
}
}

Category
Service
CompA
@Component({
…,
providers:[CategoryService]
})
export class CompA {}
CompB CompC
@Component({…})
export class CompB {
//Constructor Injection
constructor (private _service:
CategoryService){}
doSomeThing(){
this._service.getCategories();
}
}
CompC sieht genau so aus, und bekommt
die gleiche Instanz des Services

Category
Service
CompA
CompB CompC
@Component({
providers:[CategoryService], …
})
export class CompB {
//Constructor Injection
constructor (private _service:
CategoryService){}
doSomeThing(){
this._service.getCategories();
}
}
CompC sieht genau so aus, und bekommt
die eine eigene Instanz des Services
Category
Service

• SPA Library
• verfolgt Komponenten Ansatz
• beschränkt sich im Kern auf Strukturierung und
Rendering von Komponenten
React

class HelloWorldItem extends React.Component{
constructor(props){
super(props);
this.state.counter = 1;
}
render(){
return React.createElement('div', {},
React.createElement('label', ...),
);
}
}

constructor(props){
super(props);
}
render(){
return (
<div>
<label>{this.props.title}</label>
</div>
)
}
}
JSX

constructor(props){
super(props);
}
render(){
return (
<div>
<label>{this.props.title}</label>
</div>
)
}
}
Input von parent
Interner Zustand

Render wird aufgerufen, wenn props
oder state neu gesetzt wird

class HelloWorldList extends React.Component{
constructor(props){
super(props);
}
render(){
return (
<div>
<ul>
{this.props.items.map((i,index) =>
<li key={index}>{i}</li>
)}
</ul>
</div>
)
}
}}
JavaScript statt Template Syntax

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.onInputChanged = onInputChanged.bind(this);
}
onInputChanged(event) {
this.setState({input: event.target.value});
}
render() {
return (
<div>
<input type="text" value={this.state.input}
onChange={this.onInputChanged}/>
</div>
);
}
}
Eventhandling

class MyComponent extends React.Component {
render() {
var header = <h1>MyHeader</h1>;
var footer = <p>Footer 2016</p>;
var greeting;
if(this.props.loggedIn) {
greeting = <p>Hallo {this.props.name}</p>;
} else {
greeting = <p>Hallo Gast</p>;
}
return (
<div>
{header}
{greeting}
{footer}
</div>
);
}
}
JSX in erweiterter Ausprägung

Verschachtelung derKomponenten
class Webshop extends React.Component{
constructor(props){
super(props);
}
render() {
return (
<div>
<Header/>
<Categories/>
<Discounts/>
<Content/>
<Suggestions/>
</div>
);
}
}

class Webshop extends React.Component{
constructor(props){
super(props);
}
render() {
return (
<div>
<Header/>
<Categories/>
<Discounts/>
<Content/>
<Suggestions/>
</div>
);
}
}
class Categories extends React.Component

class Parent extends React.Component{
…
render() {
return (
<div>
<Child items={this.state.items}/>
</div>
);
}}
class Child extends React.Component{
render() {
return ({
this.props.items.map((i,index) =>
<div>{i}</div>
)
});
}}
Daten von Parent zu Child über Props

class Parent extends React.Component{
…
render() {
return (
<div>
<Child someAction={this.callBack.bind(this)}/>
</div>
);}
callBack(){//Do something}
}
class Child extends React.Component{
render() {
return (
<div>
<input type="button"
onClick={this.props.someAction}/>
</div>
);
Callback Funktionen von Child zu Parent

Wie sieht die Architektur
abseits der Komponenten aus?
(äquivalent Services, DI)

Redux
Component
Actions
Reducer
Reducer
Reducer
State
Middleware
(state, action) => state

Bekannte Konzepte
Teilweise uneindeutiger Datenﬂuss
Neue Konzepte
Eindeutiger Datenﬂuss

Es existiert ein Redux Binding
für Angular 2

Was React (nicht) ist
• Reacts Hauptanspruch ist die Strukturierung der
Anwendung
• React ist eine sehr gute Rendering-Bibliothek
• React ist keine Rich Client Platform
• React ist keine Komponenten Bibliothek

Was Angular (nicht) ist
• Angulars Hauptanspruch ist die Strukturierung der
Anwendung
• Angular ist eine Rich Client Platform
• Angular ist keine Komponenten Bibliothek

Welche Unterschiede existieren?
• React setzt auf JSX
• Angular setzt auf Templates (Lernaufwand)
• Angular bietet Uni - und Bidirektionales Binding
• React nutzt render() wenn State / Props neu gesetzt wird
• React eher funktional, Angular eher OOP

Anwendungen gehen über den
Komponentenansatz hinaus

Anwendungsentwicklung
Lifecycle Hooks für Komponenten
Backend-Anbindung
Dependency Injection
Access-Management
Formular-Handling & (Async)-Validation
Accessibility
Security
Controls
Routing
i18n
Mobile
Komplexes Focus Management
UI Tests

Lifecycle Hooks für Komponenten
Backend-Anbindung
Dependency Injection
Access-Management
Formular-Handling & (Async)-Validation
Accessibility
Kernfunktion
Drittanbieter
Nicht vorhanden

Security
Controls
Routing
i18n
Mobile
Komplexes Focus Management
UI Tests
Kernfunktion
Drittanbieter
Nicht vorhanden

const contentRoutes: RouterConfig = [
{
path: ‘highlight',
component: HighlightComponent
},
{
path: ’catalogue',
component: CatalogueComponent,
]}
];
export const appRouterProviders = [
provideRouter(routes)
];
Routing deklarieren

@Component({
selector: 'content',
template: `
<a routerLink="/highlight">Highlights</a> 
<a routerLink="/catalogue">Katalog</a>
<router-outlet></router-outlet>
`
})
export class ContentComponent {}
Routing

Routing @ React
via 3rd Party lib
https://github.com/ReactTraining/react-router

Routing deklarieren
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="about" component={About}/>
<Route path="users" component={Users}>
<Route path="/user/:userId" component={User}/>
</Route>
<Route path="*" component={NoMatch}/>
</Route>
</Router>
), document.getElementById('root'))

Routing nutzen
const Users = React.createClass({
render() {
return (
<div>
<Link to={`/user/${user.id}`}>{user.name}</Link>
</div>
)
}
})

Ok, genug Funktionen - was ist
mit Zukunftssicherheit?

Zukunftssicherheit
• Welche Aspekte sind wichtig?
• Stand im Produktlebenszyklus
• Strategie desVendors
• Marktsituation

Einführung
Reife
Wachstum Degeneration

Hinweis
Man sollte bedenken, dass jede Third-Party Library wieder
auf Ihr Zukunftssicherheit zu prüfen ist.

Wie setzt derVendor die
Bibliotheken ein

Wie setzt Google ein?
• Google Adwords (in Entwicklung)
• GreenTea (Googles internes CRM)
• Google Fiber (https://ﬁber.google.com/about/)

Wie setzt Facebook ein?
• in Facebook (z.B. Chat, Kommentare)
• WhatsApp Webapp
• Instagram

Release Politik /
Versionierung

Release Strategie Angular
SemVer
http://angularjs.blogspot.de/2016/10/versioning-and-releasing-angular.html?m=1&utm_campaign=NG-Newsletter&utm_medium=email&utm_source=NG-Newsletter_169

angularjs.blogspot.de/2016/10/versioning-and-releasing-angular.html?m=1&utm_campaign=NG-
Newsletter&utm_medium=email&utm_source=NG-Newsletter_169

Versioning React
https://facebook.github.io/react/blog/2016/02/19/new-versioning-scheme.html
SemVer seit 0.14.7. —> 15.0.0
ohne expliziten Releasezyklus

Freelancer auf Gulp
0
125
250
375
500
Freelancer auf GULP
442
2030
react angular2 angular

Projekte auf Gulp
0
12,5
25
37,5
50
Projekte auf Gulp
47
33

Community auf Stackoverﬂow
0
2250
4500
6750
9000
Stackoverﬂow created:1m
8.476
6.736
3.999

Resümee Marktsituation
• Beide Technologien ermöglichen die Entwicklung
komplexer Anwendungen
• React ist eine Bibliothek
• Angular 2 ist ein Framework (RCP)

Resümee Marktsituation
• Versioning gleich
• Angular hat transparente Releasezyklen
• Marktsituation rund um Angular etwas besser

Welche Entscheidung haben
wir getroffen?

Wie sind wir bei unserer Entscheidung vorgegangen?

Beide Technologien sind
relevant und wir sollten uns
mit ihnen auskennen.

Wenn Greenﬁeld Projekt, dann
Angular

Wer Webanwendungen baut muss
lernen permanent zu lernen.

Danke
twitter.com/sialcasa
Umsetzung von Software, Beratung und Training

https://www.similartech.com/compare/angular-js-vs-react-js

Why Do People Hate Client-Side JavaScript?
Everyone is different, and if you asked 100 different haters I’m
sure they would have 100 different ﬂavors of Hatorade™.

https://webmasters.googleblog.com/2014/05/understanding-
web-pages-better.html

export default class Counter extends Component {
constructor(props) {
super(props);
}
render() {
const { counter, increment, decrement, addTreatments } = this.props;
return (
<View style={{ﬂex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>{counter}</Text>
<TouchableOpacity onPress={decrement} style={styles.button}>
<Text>down</Text>
</TouchableOpacity>
<TouchableOpacity onPress={addTreatments} style={styles.button}>
<Text>Load</Text>
</TouchableOpacity>
</View>
);
}
}
React Native

@Component({
selector: 'list-test',
template: `
<GridLayout rows="*">
<ListView [items]="items">
<template let-item="item">
<item-component [data]="item"></item-component>
</template>
</ListView>
</GridLayout>
`
})
export class ListTest {
items : Array<String>
constructor(private restClient : RestClient) {
restClient.loadTreatments().subscribe(resp =>
console.log(resp))
//this.items =
}
}
Nativescript

Welches Webframework passt zu mir? (WJAX)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Andere mochten auch

Andere mochten auch (8)

Ähnlich wie Welches Webframework passt zu mir? (WJAX)

Ähnlich wie Welches Webframework passt zu mir? (WJAX) (20)

Welches Webframework passt zu mir? (WJAX)