Tweet
Tweet

Slide 1

Slide 1 text

Porquê o React criou uma revolução E você devia saber disso

Slide 2

Slide 2 text

Talysson @talyssonoc talyssonoc.github.io Front-end Codeminer42

Slide 3

Slide 3 text

React?!

Slide 4

Slide 4 text

“ Uma biblioteca JavaScript para construir interfaces de usuário. - React, Documentação do

Slide 5

Slide 5 text

C M V

Slide 6

Slide 6 text

C M

Slide 7

Slide 7 text

¡Viva la revolución reacción!

Slide 8

Slide 8 text

Componentização

Slide 9

Slide 9 text

class GreetMessage extends React.Component { render() { return (
Hey, { this.props.name }.
); } } ReactDOM.render( , document.querySelector('#app') );

Slide 10

Slide 10 text

Antes // app.js angular.module('meetup', []) .controller('GreetCtrl', function($scope) { $scope.name = 'Meetup attendant'; }); // app.html
Hey, {{ name }}.
// 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

Slide 11

Slide 11 text

Depois // app.js angular.module('meetup', []) .controller('GreetCtrl', function($scope) { $scope.name = 'Meetup attendant'; }) .component('greetMsg', { template: 'Hey, {{ $ctrl.name }}.', bindings: { name: '=' } }); // app.html
// 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

Slide 12

Slide 12 text

Composição

Slide 13

Slide 13 text

class GreetMessage extends React.Component { render() { return (
Hey, { this.props.name }.
); } } class HomePage extends React.Component { render() { return (

Welcome

); } } ReactDOM.render( , document.querySelector('#app') );

Slide 14

Slide 14 text

Antes Angular 1.x // greetMsg.js angular.module('meetup') .component('greetMsg', { bindings: { name: '=' }, template: `
Hey, {{$ctrl.name}}
`, controller() { this.handleClick = function() { this.name = 'speaker'; }; } }); // homePage.js angular.module('meetup') .component('homePage', { template: `

{{$ctrl.theName | uppercase}}

`, controller() { this.theName = 'attendant'; } });

Slide 15

Slide 15 text

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 ); } });

Slide 16

Slide 16 text

Depois Angular 2.x // greetMsg.ts @Component({ selector: 'greet-msg', template: `
Hey, {{ name }}
` }) export class GreetMsg { @Input() name = ''; handleClick() { this.name = 'speakers'; } } // homePage.ts @Component({ selector: 'home-page', directives: [GreetMsg], template: ` {{ theName | uppercase }} `, }) export class HomePage { constructor() { this.theName = 'attendants'; } }

Slide 17

Slide 17 text

Depois Backbone ¯\_(ツ)_/¯

Slide 18

Slide 18 text

Funcional

Slide 19

Slide 19 text

const makeBoldComponent = (Component) => { return (props) => ; }; const GreetMessage = (props) => (
Hey, { props.name }.
); const BoldGreetMessage = makeBoldComponent(GreetMessage); const HomePage = () => (

Welcome

); ReactDOM.render( , document.querySelector('#app') );

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Antes Angular Ember Backbone Vue Knockout

Slide 22

Slide 22 text

Depois CycleJS Elm Reagent Om Om Deku

Slide 23

Slide 23 text

Fluxo único de dados

Slide 24

Slide 24 text

Controller Model View Antes

Slide 25

Slide 25 text

Action Data Component Depois

Slide 26

Slide 26 text

Vantagens ▸ Maior previsibilidade ▸ Mais fácil de pensar sobre ▸ Mais fácil de encontrar causa de bugs ▸ Maior escalabilidade no front-end

Slide 27

Slide 27 text

CycleJS Elm Redux Flux Vuex X Ember 2 Data ⬇, actions ⬆ Relay

Slide 28

Slide 28 text

Virtual DOM & Tree diff V-DOM

Slide 29

Slide 29 text

V-DOM

Slide 30

Slide 30 text

Preact V-DOM Ember 2/Glimmer CycleJS RiotJS Mithril Vue 2 Inferno Elm

Slide 31

Slide 31 text

React/JSX é só JavaScript

Slide 32

Slide 32 text

“ Interfaces de usuário são simplesmente projeções de uma forma de dado em outra forma de dado.

Slide 33

Slide 33 text

Antes
  • {{ item.title }} - {{ item.subtitle }}
  • {{ item.title }} - {{ item.subtitle }}
Angular 1.x Vue

Slide 34

Slide 34 text

Antes
    {{#each item in items}}
  • {{#link-to 'items.show' item}} {{ item.title }} {{#if item.subtitle }} - {{ item.subtitle }} {{/if}} {{/link-to}}
    • {{/each}}
Ember/Handlebars

Slide 35

Slide 35 text

React com JSX
    { items.map((item) => (
  • { item.title } { item.subtitle && `- ${ item.subtitle }` }
    • )) }
const linkItems = items.map((item) => (
  • { item.title } { item.subtitle && `- ${ item.subtitle }` }
    • ));
      { linkItems }

    Slide 36

    Slide 36 text

    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 );

    Slide 37

    Slide 37 text

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

    Slide 38

    Slide 38 text

    Depois m('ul', items.map((item) => ( m('li', m('a', { href: item.url }, [ item.title, item.subtitle && `- ${ item.subtitle }` ]) ))) ); Mithril
      { items.map((item) => (
    • { item.title } { item.subtitle && `- ${ item.subtitle }` }
      • )) }
    Preact

    Slide 39

    Slide 39 text

    Interoperabilidade

    Slide 40

    Slide 40 text

    No content

    Slide 41

    Slide 41 text

    Vantagens ▸ Adoção gradual, sem reescrita ▸ Integração simples, é só JavaScript ▸ Biblioteca focada em UI ▸ Tamanho permite ser usada em conjunto (44kb)

    Slide 42

    Slide 42 text

    Renderização do front-end no server

    Slide 43

    Slide 43 text

    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)

    Slide 44

    Slide 44 text

    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

    Slide 45

    Slide 45 text

    Com React const html = ReactDOMServer.render( ); ReactDOM.render( , document.querySelector('#app') ); Servidor Cliente

    Slide 46

    Slide 46 text

    CycleJS Vue 2 Ember FastBoot Angular Universal

    Slide 47

    Slide 47 text

    Mundo mobile

    Slide 48

    Slide 48 text

    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

    Slide 49

    Slide 49 text

    import { View, Text } from 'react-native'; const GreetMessage = (props) => ( Hey, { props.name } ); class GreetMobileDeveloper extends Component { render() { return ( ); } } Com React Native

    Slide 50

    Slide 50 text

    ReactXP Depois

    Slide 51

    Slide 51 text

    O futuro

    Slide 52

    Slide 52 text

    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

    Slide 53

    Slide 53 text

    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

    Slide 54

    Slide 54 text

    O React-way ▸ Componentes isolados, combináveis e reutilizáveis ▸ Fluxo único de dados ▸ Virtual DOM ▸ Somente JavaScript

    Slide 55

    Slide 55 text

    “ Don’t Rewrite, React! - Ryan Florence

    Slide 56

    Slide 56 text

    ? Perguntas? Talysson @talyssonoc talyssonoc.github.io

    Slide 57

    Slide 57 text

    Obrigado! Talysson @talyssonoc talyssonoc.github.io