JS Frameworks 2015

Evolution

<div class="container" ng-app>
    <form>
        <h1>Hello {{name}}</h1>
        Name: <input type="text" ng-model="name" ng-init="name='User'"/>
    </form>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>

jsfiddle

var Greeting = React.createClass({
    render: function () {
        return (
            <div>
                <h1>Hello User</h1>
            </div>
        );
    }
});
React.render(<Greeting />, document.getElementById('container'));

JSX

<div class="greeting">
    <h1>Hello User</h1>
</div>

React.createElement("div", {class: "greeting"},
    React.createElement("h1", null, "Hello User")
)

Props

var Greeting = React.createClass({
    render: function () {
        return (
            <div>
                <h1>{this.props.text} User</h1>
            </div>
        );
    }
});
React.render(<Greeting text="Grüezi" />, document.getElementById('container'));

Props: Nicht veränderbar von der Komponente selbst

State

var Greeting = React.createClass({
    getInitialState: function () {
        return {name: 'User'};
    },
    nameInputChange: function (e) {
        this.setState({name: e.target.value});
    },
    render: function () {
        return (
            <div>
                <h1>{this.props.text} {this.state.name}</h1>
                Name: <input type="text"
                             onChange={this.nameInputChange}
                             value={this.state.name} />
            </div>
        );
    }
});
React.render(<Greeting text="Grüezi" />, document.getElementById('container'));

jsfiddle

Metric	ANGULARJS	BACKBONE.JS	EMBER.JS	REACT
Stars on Github	40k	22k	14k	23k
StackOverflow Questions	103k	18.1k	15.5k	3.5k
YouTube Results	~95k	~12k	~8k	~5k
GitHub Contributors	1266	265	500	437

React, AngularJS & Co.

Welches Framework passt für welche Applikationen?