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

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

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

More Decks by Talysson de Oliveira Cassiano

Other Decks in Programming

Transcript

  1. C M

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

    Hey, { this.props.name }. </div> ); } } ReactDOM.render( <GreetMessage name="Meetup attendant"/>, document.querySelector('#app') );
  3. 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
  4. 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
  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="Meetup attendant"/> </div> ); } } ReactDOM.render( <HomePage />, document.querySelector('#app') );
  6. 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'; } });
  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 BoldGreetMessage = makeBoldComponent(GreetMessage); const HomePage = () => ( <div> <h1>Welcome</h1> <BoldGreetMessage name="Meetup 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. 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
  23. 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
  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 ▸ Fragments
  26. O React-way ▸ Componentes isolados, combináveis e reutilizáveis ▸ Fluxo

    único de dados ▸ Virtual DOM ▸ Somente JavaScript