Construindo interfaces interativas com React

Transcript

1. Construindo
   interfaces interativas
   com React
   

   View Slide

2. Interação de usuário é como o
   usuário interage com a interface e
   como a interface reage com o
   usuário.
   

   View Slide

3. Interação de usuário é como o
   usuário interage com a interface e
   como a interface reage com o
   usuário.
   Scroll
   Hover
   Drag
   Click…
   Render
   Animate…
   

   View Slide

4. Somos a
   

   View Slide

5. View Slide

6. View Slide

7. View Slide

8. ✈
   "
   

   View Slide

9. ✈
   ☀
   ☁
   

   View Slide

10. ✈
    "
    ✈
    ⛄
    

    View Slide

11. ☀
    ☀
    ✌
    

    View Slide

12. View Slide

13. O nosso processo
    

    View Slide

14. React é uma biblioteca de JavaScript
    declarativa, eficiente e flexível para
    construir interfaces de usuário.
    

    View Slide

15. Componentes auxiliam a organizar a
    arquitetura. Uma língua comum entre
    design e desenvolvimento.
    

    View Slide

16. SCREENSHOT OF PROXY ARCH?
    

    View Slide

17. View Slide

18. Prototype Inspect
    

    View Slide

19. View Slide

20. View Slide

21. Estrutura dos componentes
    

    View Slide

22. View Slide

23. Component.js
    Component.story*
    Component.module.css
    index.js
    Component 1
    Components
    Component 1
    Component 2
    Component 3
    

    View Slide

24. View Slide

25. View Slide

26. Componentes funcionais + hooks (
    Yes, please.
    

    View Slide

27. View Slide

28. View Slide

29. Implementando animaçōes
    

    View Slide

30. Tenha regras bem definidas sobre
    como implementar.
    

    View Slide

31. Nenhuma animação
    é melhor que uma mal feita.
    

    View Slide

32. Mexa apenas no
    opacity e transform.
    

    View Slide

33. Position transform: translate(npx, npx);
    Scale transform: scale(n);
    Rotation transform: rotate(ndeg);
    Opacity opacity: 0…1;
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. O ciclo do React, apesar de
    flexível, não é o suficiente para
    orquestrar a ordem das coisas.
    

    View Slide

43. Algumas libs animam os valores
    fora do ciclo do React, para
    melhor performance.
    

    View Slide

44. Orquestrando com refs.
    

    View Slide

45. View Slide

46. Orquestrando com componentes.
    

    View Slide

47. View Slide

48. Se necessário, FLIP it.
    

    View Slide

49. Caso necessário,
    FLIP it.
    

    View Slide

50. isFullScreen: false
    

    View Slide

51. min-height: 400px
    position: relative
    …
    

    View Slide

52. isFullScreen: true
    

    View Slide

53. position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    

    View Slide

54. isFullScreen: false
    01 First
    

    View Slide

55. 02 Last
    

    View Slide

56. 03 Invert
    

    View Slide

57. https://aerotwist.com/blog/flip-your-animations/
    

    View Slide

58. View Slide

59. View Slide

60. Jogue a responsa no
    After Effects.
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. Algumas dicas
    

    View Slide

67. awesome-react-components
    

    View Slide

68. React DevTools
    

    View Slide

69. React DevTools
    

    View Slide

70. Analise a performance
    

    View Slide

71. Libs que recomendamos.
    

    View Slide

72. +
    

    View Slide

73. Obrigado!
    

    View Slide