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

Meet React

Meet React

Talk about React. The new open-source JS library from Facebook and Instagram, is a different way to write JavaScript apps.

Raphael Amorim

March 24, 2015
Tweet

More Decks by Raphael Amorim

Other Decks in Programming

Transcript

  1. Meet React
    Sir. Raphael Amorim

    View Slide

  2. Raphael Amorim
    twitter.com/raphamundi
    github.com/raphamorim

    View Slide

  3. View Slide

  4. View Slide

  5. Write code every day

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. Isso é um módulo ou não?

    View Slide

  10. Isso é um módulo ou não?
    É melhor criar uma diretiva para isso?

    View Slide

  11. Isso é um módulo ou não?
    É melhor criar uma diretiva para isso?
    É melhor criar um service para isso?

    View Slide

  12. Isso é um módulo ou não?
    É melhor criar uma diretiva para isso?
    É melhor criar um service para isso?
    Ou eu crio um factory?

    View Slide

  13. Isso é um módulo ou não?
    É melhor criar uma diretiva para isso?
    É melhor criar um service para isso?
    Ou eu crio um factory?
    Por que essa tralha não funciona?

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. React

    View Slide

  19. View Slide

  20. View Slide

  21. Tá, então você pode construir
    aplicativos com ele?

    View Slide

  22. Tá, então você pode construir
    aplicativos com ele?
    github.com/facebook/react/wiki/Complementary-Tools

    View Slide

  23. View Slide

  24. Fluxø

    View Slide

  25. Flux

    View Slide

  26. View Slide

  27. Primeiras Impressões

    View Slide

  28. Primeira Impressão
    BtnLike.jsx

    View Slide

  29. Primeira Impressão
    BtnLike.jsx
    WTF?

    View Slide

  30. Primeira Impressão
    BtnLike.jsx
    “Achei Feio”

    View Slide

  31. Primeira Impressão
    BtnLike.jsx
    “Achei Feio”
    “O HTML deveria ser
    separado do JS”

    View Slide

  32. Primeira Impressão
    BtnLike.jsx
    “Achei Feio”
    “O HTML deveria ser
    separado do JS”
    “Então o React é
    templating language”

    View Slide

  33. Não se preocupe…
    JSX gera o JavaScript pós-compilação

    View Slide

  34. Não se preocupe…
    JSX gera o JavaScript pós-compilação
    O código gerado corre mais rápido do
    que um código equivalente escrito
    diretamente em JavaScript.

    View Slide

  35. Não se preocupe…
    JSX gera o JavaScript pós-compilação
    O código gerado corre mais rápido do
    que um código equivalente escrito
    diretamente em JavaScript.
    … e o React não é um templating
    language

    View Slide

  36. Não se preocupe…
    JSX gera o JavaScript pós-compilação
    O código gerado corre mais rápido do
    que um código equivalente escrito
    diretamente em JavaScript.
    … e o React não é um templating
    language

    View Slide

  37. Segunda Impressão
    “ Ahhhh! Existe Data-Binding assim como o Angular.js! ”
    “ Ahhhh! Eu consigo rodar isso com o Backbone, certo? ”
    “ Ahhhh! Eu consigo fazer animações e SVG! ”

    View Slide

  38. Segunda Impressão
    “ Ahhhh! Existe Data-Binding assim como o Angular.js! ”
    “ Ahhhh! Eu consigo rodar isso com o Backbone, certo? ”
    “ Ahhhh! Eu consigo fazer animações e SVG! ”
    Opa! Espera um pouco!

    View Slide

  39. Alguns Fundamentos

    View Slide

  40. #1 Tudo é um Componente

    View Slide

  41. React não tem….

    View Slide

  42. React não tem….
    …controllers

    View Slide

  43. React não tem….
    …controllers
    …directive

    View Slide

  44. React não tem….
    …controllers
    …directive
    …templates

    View Slide

  45. React não tem….
    …controllers
    …directive
    …templates
    …global event listeners

    View Slide

  46. React não tem….
    …controllers
    …directive
    …templates
    …global event listeners
    …models

    View Slide

  47. React não tem….
    …controllers
    …directive
    …templates
    …global event listeners
    …models
    …view models

    View Slide

  48. React não tem….
    …controllers
    …directive
    …templates
    …global event listeners
    …models
    …view models
    APENAS
    COMPONENTES

    View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. E se separássemos de outra forma?

    View Slide

  55. CartComponent

    View Slide

  56. CartComponent
    CartListComponent

    View Slide

  57. CartComponent
    CartListComponent CartItemComponent

    View Slide

  58. Separação de Componentes

    View Slide

  59. Separação de Componentes
    Reutilizáveis

    View Slide

  60. Separação de Componentes
    Reutilizáveis
    Manuteníveis

    View Slide

  61. Separação de Componentes
    Reutilizáveis
    Manuteníveis
    Sustentáveis

    View Slide

  62. Separação de Componentes
    Reutilizáveis
    Manuteníveis
    Sustentáveis
    Testáveis

    View Slide

  63. #2 O jeitinho React de ser

    View Slide

  64. Data Flows Tradicionais
    item.on(‘change:name’, function() {….
    Backbone.js
    $scope.name = ….
    Angular.js

    View Slide

  65. Data Flows Tradicionais
    item.on(‘change:name’, function() {….
    Backbone.js
    $scope.name = ….
    Angular.js

    View Slide

  66. props
    “ Data Handed de pai para filho ”

    View Slide

  67. props

    View Slide

  68. props

    View Slide

  69. state

    View Slide

  70. #3 Virtual DOM

    View Slide

  71. Virtual DOM
    É rápido

    View Slide

  72. Virtual DOM
    É rápido
    É puro

    View Slide

  73. Virtual DOM
    É rápido
    É puro
    É o javascript puro, como
    abstração do DOM

    View Slide

  74. Virtual DOM
    É rápido
    É puro
    É o javascript puro, como
    abstração do DOM
    Renderiza totalmente

    View Slide

  75. #4 Semântica para um arquitetura de
    componentes

    View Slide

  76. #4 Semântica para um arquitetura de
    componentes
    nicolasgallagher.com/about-html-semantics-front-end-architecture/

    View Slide

  77. #5 React Native

    View Slide

  78. Hora do código!
    github.com/raphamorim/react-sample

    View Slide

  79. Obrigado!

    View Slide