Pro Yearly is on sale from $80 to $50! »

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.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

March 24, 2015
Tweet

Transcript

  1. Meet React Sir. Raphael Amorim

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

  3. None
  4. None
  5. Write code every day

  6. None
  7. None
  8. None
  9. Isso é um módulo ou não?

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

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

    diretiva para isso? É melhor criar um service para isso?
  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?
  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?
  14. None
  15. None
  16. None
  17. None
  18. React

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

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

  23. None
  24. Fluxø

  25. Flux

  26. None
  27. Primeiras Impressões

  28. Primeira Impressão BtnLike.jsx

  29. Primeira Impressão BtnLike.jsx WTF?

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

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

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

    do JS” “Então o React é templating language”
  33. Não se preocupe… JSX gera o JavaScript pós-compilação

  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.
  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
  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
  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! ”
  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!
  39. Alguns Fundamentos

  40. #1 Tudo é um Componente

  41. React não tem….

  42. React não tem…. …controllers

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

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

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

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

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

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

    …view models APENAS COMPONENTES
  49. None
  50. None
  51. None
  52. None
  53. None
  54. E se separássemos de outra forma?

  55. CartComponent

  56. CartComponent CartListComponent

  57. CartComponent CartListComponent CartItemComponent

  58. Separação de Componentes

  59. Separação de Componentes Reutilizáveis

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

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

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

  63. #2 O jeitinho React de ser

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

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

    Angular.js
  66. props “ Data Handed de pai para filho ”

  67. props

  68. props

  69. state

  70. #3 Virtual DOM

  71. Virtual DOM É rápido

  72. Virtual DOM É rápido É puro

  73. Virtual DOM É rápido É puro É o javascript puro,

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

    como abstração do DOM Renderiza totalmente
  75. #4 Semântica para um arquitetura de componentes

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

  77. #5 React Native

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

  79. Obrigado!