[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.

Transcript

1. Porquê o React criou uma revolução E você devia saber disso
2. Talysson @talyssonoc talyssonoc.github.io Front-end Codeminer42
3. React?!
4. “ Uma biblioteca JavaScript para construir interfaces de usuário. - React, Documentação do
5. C M V
6. C M
7. ¡Viva la revolución reacción!
8. Componentização
9. class GreetMessage extends React.Component { render() { return ( <div> Hey, { this.props.name }. </div> ); } } ReactDOM.render( <GreetMessage name="RubyConf attendant"/>, document.querySelector('#app') );
10. 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
11. 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
12. Composição
13. 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') );
14. 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'; } });
15. 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 ); } });
16. 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'; } }
17. Depois Backbone ¯\_(ツ)_/¯
18. Funcional
19. 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') );
20. 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
21. Antes Angular Ember Backbone Vue Knockout
22. Depois CycleJS Elm Reagent Om Om Deku
23. Fluxo único de dados
24. Controller Model View Antes
25. Action Data Component Depois
26. Vantagens ▸ Maior previsibilidade ▸ Mais fácil de pensar sobre ▸ Mais fácil de encontrar causa de bugs ▸ Maior escalabilidade no front-end
27. CycleJS Elm Redux Flux Vuex X Ember 2 Data ⬇, actions ⬆ Relay
28. Virtual DOM & Tree diff V-DOM
29. V-DOM
30. Preact V-DOM Ember 2/Glimmer CycleJS RiotJS Mithril Vue 2 Inferno Elm
31. React/JSX é só JavaScript
32. “ Interfaces de usuário são simplesmente projeções de uma forma de dado em outra forma de dado.
33. 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
34. 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
35. 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>
36. 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 );
37. 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
38. 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
39. Interoperabilidade
41. Vantagens ▸ Adoção gradual, sem reescrita ▸ Integração simples, é só JavaScript ▸ Biblioteca focada em UI ▸ Tamanho permite ser usada em conjunto (44kb)
42. Renderização do front-end no server
43. 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)
44. 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
45. Com React const html = ReactDOMServer.render( <HomePage /> ); ReactDOM.render( <HomePage />, document.querySelector('#app') ); Servidor Cliente
46. CycleJS Vue 2 Ember FastBoot Angular Universal
47. Mundo mobile
48. 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
49. 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
50. O futuro
51. 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
52. 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
53. O React-way ▸ Componentes isolados, combináveis e reutilizáveis ▸ Fluxo único de dados ▸ Virtual DOM ▸ Somente JavaScript
54. “ Don’t Rewrite, React! - Ryan Florence
55. ? Perguntas? Talysson @talyssonoc talyssonoc.github.io
56. Obrigado! Talysson @talyssonoc talyssonoc.github.io