React js


Быстрый UI

без головной боли





Максим Кожух

plain javascript

REACT JS


Типичные проблемы

веб-приложений



  • производительность
  • сложный UI и логика
  • разработчики


MVC НАС СПАСЕТ !


Backbone

Angular

Ember

...


или нет...



REACT . JS


Model             View        Controller


  • простой синтакс
  • компоненты
  • реально быстрый
 

Синтакс 


var HelloWorld = React.createClass({
  render: function(){
    return React.DOM.p("Hello world");
  }
});


React.renderComponent(
    HelloWorld(),
    document.getElementById('example')
);

Мы только что освоили 30% react.js

И зачем оно надо ? 


return React.DOM.ul([
    React.DOM.li("Option A"),
    React.DOM.li("Option B")
])


    return "<ul><li>Option A</li><li>Option B</li></ul>";




VS





Виртуальный DOM
Звучит безумно - но так быстрее :)

Виртуальный DOM


Полный контроль над операциями с DOM

  • Применяет все изменения сразу
  • requestAnimationFrame
  • Негде воткнуть jQuery


При перерисовке 
React сравнивает старый vDOM и новый
применяет только изменения


Типичные проблемы

веб-приложений



  • производительность
  • сложный UI и логика

Компоненты 


var HelloWorld = React.createClass({
  render: function(){
    return React.DOM.p( "Hello world " + this.props.index );
  }
});

var HelloUniverse = React.createClass({
  render: function() {
    var worlds = [];
    for(var i=0; i<100; i++) 
      worlds.push( HelloWord({ index: i }));

    return React.DOM.div(worlds);
  }
});
Уровень освоения react.js 50%

Пример

Пример

Компоненты 


var HelloWorld = React.createClass({
  render: function(){
    return React.DOM.p( "Hello world " + this.props.index );
  }
});

var HelloUniverse = React.createClass({
  render: function() {
    var worlds = [];
    for(var i=0; i<100; i++) 
      worlds.push( HelloWord({ index: i }));

    return React.DOM.div(worlds);
  }
});

jxl 


/** @jsx React.DOM */
var HelloWorld = React.createClass({
  render: function(){
    return <p>Hello world {this.prop.index}</p>;
  }
});

var HelloUniverse = React.createClass({
  render: function() {
    var worlds = [];
    for(var i=0; i<100; i++) 
      worlds.push( <HelloWorld index={i} />  );

    return <div>(worlds)</div>;
  }
});

JXL


2000
Javascript код в HTML


2014  
HTML теги в Javascript коде


Самый сложный пример


var HelloUniverse = React.createClass({
  getInitialState:function(){
    return { start: 0; } 
  },
  shiftNext:function(){
    this.setState({ start : this.state.start + 1 });
  },
  render: function() {
    var worlds = [];
    var start = this.start.state;

    for(var i=start; i<start + 10000; i++) 
      worlds.push( <HelloWorld index={i} onClick={this.onClick} />  );

    return <div onClick={this.shiftNext}>(worlds)</div>;
  }
});

Уровень освоения react.js 80%

Самый сложный пример - State


var HelloUniverse = React.createClass({
  getInitialState:function(){
    return { start: 0; } 
  },
  shiftNext:function(){
    this.setState({ start : this.state.start + 1 });
  },
  render: function() {
    var worlds = [];
    var start = this.start.state;

Самый сложный пример


  render: function() {
    var worlds = [];
    var start = this.start.state;

    for(var i=start; i<start + 10000; i++) 
      worlds.push( <HelloWorld index={i} onClick={this.onClick} />  );

    return <div onClick={this.shiftNext}>(worlds)</div>;
  }
});

Прочие чудеса



  • Автоматический event delegation  
  • Можно использовать с SVG, VML, Canvas
  • Можно использовать с NodeJS
  • Можно запускать в Web Worker
  • Поддается тестироваюнию



Типичные проблемы

веб-приложений



  • производительность
  • сложный UI и логика
  • разработчики ?

Кто использует

Khan Academy


Плюсы



  • Простой в освоении 
  • Простой в работе
  • Реально быстрый
  • Совместимость ( MVC)
  • Поддержка Facebook 

МИНУСЫ


  • совместимость  ( libs )
  • идеология
  • IE8+ only

REACT vs ANGUlAR





VS

 

 Angular

React

  • Простой
  • Компоненты
  • Только V
  • One-way binding
  • Быстрый
  • Сложный 
  • Директивы
  • Весь MVC
  • Two-way binding
  • Не очень

REACT VS ANGULAR


Vanilla JS все равно быстрее

Где кто ?





Ну собственно и всё



https://slides.com/mkozhukh/react

http://facebook.github.io/react/index.html 

ReactJS

By mkozhukh

Made with Slides.com

ReactJS

Быстрый UI без головной боли

  • 12,142

More from mkozhukh