Meet React

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

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