Time to React.

Ampersand Angular 2.0 AngularDart AngularJS Aria Templates Atma.js Aurelia Backbone.js
Batman.js CanJS Chaplin Closure ComponentJS DUEL Dart DeftJS Dijon Dojo Durandal Elm Ember.js Enyo Epitome Exoskeleton FOAM Flight GWT Kendo UI Knockback.js KnockoutJS Lavaca MarionetteJS Meteor Mithril Montage Olives Polymer PureMVC Ractive.js Reagent SAPUI5 Sammy.js Serenade.js SocketStream Spine Thorax TroopJS TypeScript Vue.js WebRx YUI cujoJS jQuery rAppid.js soma.js

angular However isolated scope creates a new problem: if a
transcluded DOM is a child of the widget isolated scope then it will not be able to bind to anything. For this reason the transcluded scope is a child of the original scope, before the widget created an isolated scope for its local variables. This makes the transcluded and widget isolated scope siblings > http://docs.angularjs.org/guide/directive

Gal Schlezinger ישאר ןתינכת

Time to React.

UI. just the

Controllers Directives Templates Global Listeners Models View/Models

Components.

Components. composable

Gal Schlezinger posted on 1 hour ago םינפל הז ןנחוי
ועמש ואוו 3 likes 10 comments Ariel Jannai: ילש ךלמה התא Ran Fedida: םודא ילש בלה

ועמש ואוו 3 likes 10 comments Ariel Jannai: ילש ךלמה התא Ran Fedida: םודא ילש בלה FacebookPost

ועמש ואוו 3 likes 10 comments Ariel Jannai: ילש ךלמה התא Ran Fedida: םודא ילש בלה CommentList Proﬁl ePic TimeAgo

ועמש ואוו 3 likes 10 comments Ariel Jannai: ילש ךלמה התא Ran Fedida: םודא ילש בלה Comment Comment

1. Declarative > Imperative 2. Re-render on every change 3.
Virtual DOM +--------+ | Agenda | +--------+

Virtual DOM

Virtual DOM diff(oldVirtualDOM, )

javascript is fast DOM is slow.

SERVER RENDERING for free.

SERVER RENDERING for free. universal apps

you’re so predictable

Predictable is better

THIS IS JUST the concept

lets see some code

import React, { Component } from ‘react’; class SimpleComponent extends
Component { render() { return ( React.createElement(‘div’, { className: 'class-name' }, 'Hello World!’) ); } } React.render( React.createElement(SimpleComponent), document.getElementById(‘main') );

<my-directive some-attribute=‘attribute’> </my-directive> angular is better? no

Component { render() { return ( React.createElement(‘div’, { className: 'class-name' }, 'Hello World!’) ); } } React.render( React.createElement(SimpleComponent), document.getElementById(‘main') );

Component { render() { return ( <div className=‘class-name’> Hello World! </div> ); } } React.render( React.createElement(SimpleComponent), document.getElementById(‘main') );

Component { render() { return ( <div className=‘class-name’> Hello World! </div> ); } } React.render( <SimpleComponent />, document.getElementById(‘main') );

Component { render() { return ( <div className=‘class-name’> Hello World! </div> ); } } React.render( <SimpleComponent />, document.getElementById(‘main') ); es6 jsx

it is too static for me BUT!

Props State Immutable mutable

Component { render() { return ( <div className=‘class-name’> Hello World! </div> ); } } React.render( <SimpleComponent />, document.getElementById(‘main') );

import React, { Component } from ‘react’; class HelloTo extends
Component { render() { return ( <div className=‘class-name’> Hello World! </div> ); } } React.render( <HelloTo name=‘Gal Hagever’ />, document.getElementById(‘main') );

import React, { Component } from ‘react’; class HelloTo extends
Component { render() { return ( <div className=‘class-name’> Hello { this.props.name }! </div> ); } } React.render( <HelloTo name=‘Gal Hagever’ />, document.getElementById(‘main') );

class HelloToGal extends Component { render() { return (<HelloTo name=‘Gal
Hagever’ />); } } React.render( <HelloToGal />, document.getElementById(‘main') );

class Counter extends Component { constructor(props) { super(props); this.handleClick =
this.handleClick.bind(this); this.state = { clicked: 0 }; } handleClick() { this.setState({ clicked: this.state.clicked + 1 }); } render() { return ( <div onClick={ this.handleClick }> clicked { this.state.clicked } times! </div> ); } }

class Counter extends Component { constructor(props) { super(props); this.handleClick =
this.handleClick.bind(this); this.state = { clicked: 0 }; } handleClick() { this.setState({ clicked: this.state.clicked + 1 }); } render() { return ( <div onClick={ this.handleClick }> clicked { this.state.clicked } times! </div> ); } } WAT WAT WAT

WE ALL LOVE separation of concerns

html: building blocks css: styling javascript: behaviour

html: building blocks css: styling javascript: behaviour they are all
coupled.

export default class Counter extends Component { constructor(props) { super(props);
this.handleClick = this.handleClick.bind(this); this.state = { clicked: 0 }; } handleClick() { this.setState({ clicked: this.state.clicked + 1 }); } render() { return ( <div onClick={ this.handleClick }> clicked { this.state.clicked } times! </div> ); } } // components/counter.js

JavaScript its all about

how can I iterate over an array In angular.js?

how can I ﬁlter array items In Ember.js?

how can I call functions In Backbone? well, that is
extremely easy. sorry.

what scope function calls have In angular.js?

Templates DSLs &

var str = '<li class="note">' + note.message + ' by
' + note.author + '</li>'; $(document.body).append(str); jQuery

angular

just javascript.

javascript

react.js

questions?

Time to React.

Time to React.

More Decks by Gal Schlezinger

Other Decks in Programming

Featured

Transcript