Front-end Frameworks, what's anyone says...

Transcript

1. 1.

   Front-end Frameworks O que ninguém te fala..

2. 2.

   Igor Halfeld Software Engineer & Consultancy igorluiz.me - @IgorHalfeld

3. 3.

   O que eu vim falar aqui?

4. 4.

   None
5. 5.

   Falar sobre o funcionamento deles…

6. 6.

   None
7. 7.

   None
8. 8.

   Browser É mágica!

9. 9.

   User interface Browser Engine Render Engine Data persistence Networking JavaScript

   Interpreter UI Back-end
10. 10.

    DOM Document Object Model

11. 11.

    None
12. 12.

    Virtual DOM “Virtual” Document Object Model

13. 13.

    None
14. 14.

    None
15. 15.

    Até agora, tudo legal…

16. 16.

    Beleza, e então? O front-end moderno começa depois do Angular

    1.x
17. 17.

    Watcher DOM Watcher State Watcher

18. 18.

    Virtual DOM Wrapper

19. 19.

    Deu bom

20. 20.

    Vamos imaginar… …a construção de uma interface.

21. 21.

    <p> <div> <section>

22. 22.

    Recursivo!

23. 23.

    None
24. 24.

    Render e eventos usam a main thread! Imagina se tivesse

    muitos childrens e fazer handling de eventos ao mesmo tempo!
25. 25.

    None
26. 26.

    Precisamos ter o controle! A main thread precisa estar disponível

    para updates prioritários.
27. 27.

    section div button return children sibling Fiber

28. 28.

    None
29. 29.

    Tudo ficou bem… Temos uma história feliz, mas então..

30. 30.

    Tudo complexo O desenvolvimento ficou complexo e nada divertido :(

    Complexidade instrumentar VS Complexidade inerente
31. 31.

    Virtual DOM Data-binding baseado em observers Wrapper

32. 32.

    Data-binding baseado em observers Wrapper /Compiler

33. 33.

    Apesar de tudo.. Todos são ótimos pra entregar o que

    você quer fazer e é importante saber os internos pra resolver os problemas.
34. 34.

    Obrigado! igorluiz.me/talks - @IgorHalfeld