# Javascript Frameworks

# Introduction - React (/me knows that one) - Angular - Vue

# All of them - build (and runs the tests) on NodeJS - performance - better interaction - good documentation - unit tests - code structure - MIT license

# All of them - (Fedora) Bootstrap compatibility - will add build complexity and dependencies - somewhat immature in corner cases

<table> <thead> <tr> <th></th> <th>Vue</th> <th>React</th> <th>Angular</th> </tr> </thead> <tbody> <tr> <td> App sizes </td> <td> S & M </td> <td> M & L </td> <td> L </td> </tr> <tr> <td> Learning curve </td> <td> Easy </td> <td> Medium </td> <td> Hard </td> </tr> <tr> <td> Ecosystem </td> <td> Medium </td> <td> Large </td> <td> Large </td> </tr> <tr> <td> PatternFly </td> <td> No </td> <td> Yes </td> <td> Yes </td> </tr> <tr> <td> HTML </td> <td> Templates </td> <td> JSX </td> <td> Templates </td> </tr> </tbody> </table>

<table> <thead> <tr> <th></th> <th>Vue</th> <th>React</th> <th>Angular</th> </tr> </thead> <tbody> <tr> <td> Sponsor </td> <td> (none) </td> <td> Facebook </td> <td> Google </td> </tr> <tr> <td> Static typing </td> <td> Optional (TypeScript or Flow) </td> <td> Optional (Flow) </td> <td> Mandatory (TypeScript) </td> </tr> </tbody> </table>

# Vue ```js <div id="app-4"> <span v-if="seen">Now you see me</span> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div> var app4 = new Vue({ el: '#app-4', data: { seed: true, todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue' }, { text: 'Build something awesome' } ] } }) ```

# React ```js class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } } class App extends React.Component { render() { return ( <div> <Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); ```

# Links - https://pixxel.ml/angularjs-vs-reactjs-vs-vuejs-comparison/ - https://vuejs.org/v2/guide/comparison.html