[React Meetup Campinas 2017] Porque React criou uma revolução - e você devia saber disso

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="Meetup attendant"/>, document.querySelector('#app') );
10. Antes // app.js angular.module('meetup', []) .controller('GreetCtrl', function($scope) { $scope.name = 'Meetup 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: 'Meetup speaker' }); // home_page template {{#view 'greet_msg'}} // greet_msg template Hello, {{name}} Angular < 1.5 Ember 1.x
11. Depois // app.js angular.module('meetup', []) .controller('GreetCtrl', function($scope) { $scope.name = 'Meetup 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: 'Meetup 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="Meetup attendant"/> </div> ); } } ReactDOM.render( <HomePage />, document.querySelector('#app') );
14. Antes Angular 1.x // greetMsg.js angular.module('meetup') .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('meetup') .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 BoldGreetMessage = makeBoldComponent(GreetMessage); const HomePage = () => ( <div> <h1>Welcome</h1> <BoldGreetMessage name="Meetup 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. Antes: 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="Meetup mobile developer" /> </View> ); } } Com React Native
50. ReactXP Depois
51. O futuro
52. 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
53. 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 ▸ Fragments
54. O React-way ▸ Componentes isolados, combináveis e reutilizáveis ▸ Fluxo único de dados ▸ Virtual DOM ▸ Somente JavaScript
55. “ Don’t Rewrite, React! - Ryan Florence
56. ? Perguntas? Talysson @talyssonoc talyssonoc.github.io
57. Obrigado! Talysson @talyssonoc talyssonoc.github.io