React behind the scenes

Transcript

1. 1.

   React behind the scenes. Virtual DOM, reconciliation phase, diff algorithm..

2. 2.

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

3. 3.

   None
4. 4.

   None
5. 5.

   None
6. 6.

   None
7. 7.

   Vamos começar suavão..

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.

    None
30. 30.

    None
31. 31.

    Onde eu quero chegar com tudo isso?

32. 32.

    Obrigado! igorluiz.me/talks - @IgorHalfeld