Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[RubyConf Brazil 2016] Porquê o React criou uma...

[RubyConf Brazil 2016] Porquê o React criou uma solução - e você devia saber disso

Entenda os conceitos centrais criados ou trazidos de outras áreas da ciência da computação pelo React e porque isso criou uma revolução, influenciando outras bibliotecas e frameworks como Angular 2, Ember e CycleJS, e porque isso é importante para se manter em dia com as coisas que estão surgindo no desenvolvimento web.

Talysson de Oliveira Cassiano

September 24, 2016
Tweet

More Decks by Talysson de Oliveira Cassiano

Other Decks in Technology

Transcript

  1. C M

  2. class GreetMessage extends React.Component { render() { return ( <div>

    Hey, { this.props.name }. </div> ); } } ReactDOM.render( <GreetMessage name="RubyConf attendant"/>, document.querySelector('#app') );
  3. Antes // app.js angular.module('rubyconf', []) .controller('GreetCtrl', function($scope) { $scope.name =

    'RubyConf attendant'; }); // app.html <div ng-controller="GreetCtrl"> Hey, {{ name }}. </div> // app.js App.GreetMsgView = Ember.View.extend({ templateName: 'greet_msg' }); App.HomePageView = Ember.View.extend({ templateName: 'home_page', name: 'RubyConf speaker' }); // home_page template {{#view 'greet_msg'}} // greet_msg template Hello, {{name}} Angular < 1.5 Ember 1.x
  4. Depois // app.js angular.module('rubyconf', []) .controller('GreetCtrl', function($scope) { $scope.name =

    'RubyConf attendant'; }) .component('greetMsg', { template: 'Hey, {{ $ctrl.name }}.', bindings: { name: '=' } }); // app.html <div ng-controller="GreetCtrl"> <greet-msg name="name"></greet-msg> </div> // app.js App.GreetMsgComponent = Ember.Component.extend({ templateName: 'greet_msg' }); App.HomePageView = Ember.View.extend({ templateName: 'home_page', name: 'RubyConf speaker' }); // home_page template {{greet-msg name=name}} // greet_msg template Hello, {{name}} Angular 1.5+ Ember 2.x
  5. class GreetMessage extends React.Component { render() { return ( <div>

    Hey, { this.props.name }. </div> ); } } class HomePage extends React.Component { render() { return ( <div> <h1>Welcome</h1> <GreetMessage name="RubyConf attendant"/> </div> ); } } ReactDOM.render( <HomePage />, document.querySelector('#app') );
  6. Antes Angular 1.x // greetMsg.js angular.module('rubyconf') .component('greetMsg', { bindings: {

    name: '=' }, template: ` <div ng-click="$ctrl.handleClick()"> Hey, {{$ctrl.name}} </div>`, controller() { this.handleClick = function() { this.name = 'speaker'; }; } }); // homePage.js angular.module('rubyconf') .component('homePage', { template: ` <h1>{{$ctrl.theName | uppercase}}</h1> <greet-msg name="$ctrl.theName"></greet-msg> `, controller() { this.theName = 'attendant'; } });
  7. Antes Backbone var HomePageView = Backbone.View.extend({ initialize: function() { this.greetAttendants

    = new GreetMsgView({ model: { name: 'attendants'} }); this.greetSpeakers = new GreetMsgView({ model: { name: 'speakers'} }); }, render: function() { this.$el.append( this.greetAttendants.render().$el, this.greetSpeakers.render().$el ); } });
  8. Depois Angular 2.x // greetMsg.ts @Component({ selector: 'greet-msg', template: `

    <div (click)="handleClick()"> Hey, {{ name }} </div> ` }) export class GreetMsg { @Input() name = ''; handleClick() { this.name = 'speakers'; } } // homePage.ts @Component({ selector: 'home-page', directives: [GreetMsg], template: ` {{ theName | uppercase }} <greet-msg [name]="theName"></greet-msg> `, }) export class HomePage { constructor() { this.theName = 'attendants'; } }
  9. const makeBoldComponent = (Component) => { return (props) => <b><Component

    {...props}/></b>; }; const GreetMessage = (props) => ( <div> Hey, { props.name }. </div> ); const BoldGreedMessage = makeBoldComponent(GreetMessage); const HomePage = () => ( <div> <h1>Welcome</h1> <BoldGreetMessage name="RubyConf attendant"/> </div> ); ReactDOM.render( <HomePage />, document.querySelector('#app') );
  10. Vantagens ▸ Favorece imutabilidade e pureza ▸ Código mais limpo

    e menos classes ▸ Componentes de alta ordem ▸ Reduz uso do this ▸ Mais fácil de testar ▸ Melhor performance ▸ Memoização
  11. Vantagens ▸ Maior previsibilidade ▸ Mais fácil de pensar sobre

    ▸ Mais fácil de encontrar causa de bugs ▸ Maior escalabilidade no front-end
  12. Antes <ul> <li ng-repeat="item in items"> <a ng-href="{{ item.url }}">

    {{ item.title }} <span ng-if="item.subtitle"> - {{ item.subtitle }} </span> </a> </li> </ul> <ul> <li v-for="item in items"> <a v-bind:href="{{ item.url }}"> {{ item.title }} <span v-if="item.subtitle"> - {{ item.subtitle }} </span> </a> </li> </ul> Angular 1.x Vue
  13. Antes <ul> {{#each item in items}} <li> {{#link-to 'items.show' item}}

    {{ item.title }} {{#if item.subtitle }} - {{ item.subtitle }} {{/if}} {{/link-to}} </li> {{/each}} </ul> Ember/Handlebars
  14. React com JSX <ul> { items.map((item) => ( <li> <a

    href={ item.url }> { item.title } { item.subtitle && `- ${ item.subtitle }` } </a> </li> )) } </ul> const linkItems = items.map((item) => ( <li> <a href={ item.url }> { item.title } { item.subtitle && `- ${ item.subtitle }` } </a> </li> )); <ul> { linkItems } </ul>
  15. React sem JSX const h = React.createElement; h('ul', null, items.map((item)

    => ( h('li', null, h('a', { href: item.url }, item.title, item.subtitle && `- ${ item.subtitle }` ) ) )) ); const h = React.createElement; const linkItems = items.map((item) => ( h('li', null, h('a', { href: item.url }, item.title, item.subtitle && `- ${ item.subtitle }` ) ) )); h('ul', null, linkItems );
  16. Depois h('ul', items$.map((item) => ( h('li', h('a', { href: item.url

    }, [ item.title, item.subtitle && `- ${ item.subtitle }` ]) ))) ); CycleJS <ul> { items.map((item) => ( <li> <a href={ item.url }> { item.title } { item.subtitle && `- ${ item.subtitle }` } </a> </li> )) } </ul> Inferno
  17. Depois m('ul', items.map((item) => ( m('li', m('a', { href: item.url

    }, [ item.title, item.subtitle && `- ${ item.subtitle }` ]) ))) ); Mithril <ul> { items.map((item) => ( <li> <a href={ item.url }> { item.title } { item.subtitle && `- ${ item.subtitle }` } </a> </li> )) } </ul> Preact
  18. Vantagens ▸ Adoção gradual, sem reescrita ▸ Integração simples, é

    só JavaScript ▸ Biblioteca focada em UI ▸ Tamanho permite ser usada em conjunto (44kb)
  19. O problema ▸ Não-SPAs carregam mais que o necessário ▸

    SPAs demoram para fazer o primeiro render ▸ SPAs tem problemas com SEO (sem hacks)
  20. A solução ▸ Renderizar o máximo do front-end no servidor

    ▸ “Montar” a aplicação no HTML já renderizado ▸ Carregar apenas dados a partir daí ▸ Primeira tentativa: Backbone Rendr
  21. Com React const html = ReactDOMServer.render( <HomePage /> ); ReactDOM.render(

    <HomePage />, document.querySelector('#app') ); Servidor Cliente
  22. O problema ▸ Manter várias aplicações mobile inteiras é custoso

    ▸ Soluções híbridas com WebView são ineficazes ▸ O mercado mobile exige apps para todos SOs
  23. import { View, Text } from 'react-native'; const GreetMessage =

    (props) => ( <Text>Hey, { props.name }</Text> ); class GreetMobileDeveloper extends Component { render() { return ( <View> <GreetMessage name="RubyConf mobile developer" /> </View> ); } } Com React Native
  24. create-react-app ▸ CLI para desenvolvimento com React ▸ Tooling totalmente

    configurado ▸ Já vem com suporte a testes ▸ Fácil para começar a produzir na hora
  25. React Fiber ▸ Algoritmo de renderização incremental ▸ Mudança no

    agendamento da renderização ▸ Possibilidade de renderizar via stream ▸ Renderização no servidor (ainda) mais efetiva
  26. O React-way ▸ Componentes isolados, combináveis e reutilizáveis ▸ Fluxo

    único de dados ▸ Virtual DOM ▸ Somente JavaScript