Oliver Zeigermann / @DJCordhose
Online-Version: http://bit.ly/1Ot8Mkg
Code auf Github: https://github.com/DJCordhose/javascript-web-frameworks
Anleitung: ESC drücken für eine Übersicht über alle Folien, Blättern mit den Cursor-Tasten
jeder Boot tut gut, jeder Roundtrip setzt Zustand zurück
Anfordernugen an Client Code wachsen bei SPAs dramatisch
Entweder nimmt man ein Standard-Framework
... oder man schreibt sein eigenes (manchmal ohne es zu merken)
Standard-Framework bietet
Mit allen Frameworks implementieren wir dasselbe Hello, World
https://toddmotto.com/exploring-the-angular-1-5-component-method/
<input ng-model="greeter.greeting" id="in">
<p>{{greeter.greeting}}, World!</p>
<input type="button" value="Clear" ng-click="greeter.clear()">
<body ng-app="hello">
<greeter greeting="Hello">
</body>
angular.module('hello', [])
.component('greeter', {
bindings: {
greeting: "@"
},
controller: function () {
var vm = this;
vm.clear = function () {
vm.greeting = '';
document.getElementById('in').focus();
};
},
templateUrl: 'greeter.html'
});
Run
Eine gute Idee?
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();
}
}
// index.html
<body>
</body>
// main.js
import HelloMessage from './HelloMessage';
var mountNode = document.getElementById('mount');
ReactDOM.render(<HelloMessage greeting="Hello"/>, mountNode);
Run
A framework for building native apps using React
Native Apps für Android und iOS mit React
@Component({
selector: 'greeter'
template:
`<input [(ngModel)]="greeting" #in>
<p>{{greeting}}, World</p>
<button (click)="reset(in)">Clear</button>`
})
class Greeter {
@Input() greeting: string;
reset(input: HTMLInputElement) {
this.greeting = '';
input.focus();
}
}
@Component({
selector: 'hello-app',
directives: [Greeter],
template: ' '
})
class App {
}
bootstrap(App);
<body>
<hello-app></hello-app>
<script>System.import('app');</script>
</body>
npm start
<greeter-element greeting="Hello"></greeter-element>
// document.define in latest version of spec
document.registerElement('greeter-element', Greeter);
class Greeter extends HTMLElement {
// constructor in latest version of spec, plus more callbacks
createdCallback() {
this.render();
this.bind();
this.setModel(this.getAttribute("greeting"));
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === "greeting") {
this.setModel(newValue);
}
}
// ...
}
// just plain HTML using ES6 import
import template from './template.html';
render() {
// this.attachShadow({mode: 'closed'}).innerHTML = template;
this.createShadowRoot().innerHTML = template;
this.input = this.shadowRoot.querySelector("#in");
this.span = this.shadowRoot.querySelector("#log");
this.button = this.shadowRoot.querySelector("#btn");
}
bind() {
this.input.addEventListener("keyup", event => this.setModel(event.target.value));
this.button.addEventListener("click", event => {
this.setModel("");
this.input.focus();
});
}
setModel(value) {
this.span.textContent = value;
this.input.value = value;
}
Run
https://twitter.com/hichaelmart/status/667749535440084992/photo/1
Was wird bei welcher URL gerendert?
React-Router und Component Router können verschachtelte Routen rendern
Oliver Zeigermann / @DJCordhose
Online-Version: http://bit.ly/1Ot8Mkg