Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Reinventar a roda a cada novo framework js, vale a pena?

249 views

Published on

Frameworks JS são criados a todo momento no mundo Front End. Mas como tomar a decisão de qual framework escolher, ou até mesmo não utilizar nenhum framework e desenvolver tudo internamente?

Nessa talk contarei como foi o processo de optar pela construção de uma arquitetura isomórfica no Elo7, utilizando o mínimo de frameworks possíveis, construindo tudo de forma pura em um projeto usando conceitos presentes em diversos frameworks como por exemplo: server side rendering, DOM diffing, reutilização de código com isomorfismo, web components, entre outros. Compartilharei também as descobertas e aprendizados nesse processo.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Reinventar a roda a cada novo framework js, vale a pena?

  1. 1. FERNANDA BERNARDO REINVENTAR A RODA A CADA NOVO FRAMEWORK JS, VALE A PENA?
  2. 2. Vale a pena?
  3. 3. Vou te contar…
  4. 4. FERNANDA BERNARDO Engenheira de Software @Elo7 MVP @Microsoft @Help4Papers http://fernandabernardo.com.br @Feh_Bernardo
  5. 5. WARNING - Contexto - Escopo - Cultura Tudo que for falado tem:
  6. 6. Como trabalhamos?
  7. 7. Programação Pareada
  8. 8. Vanilla JS
  9. 9. Vanilla JS
  10. 10. HTML, CSS e JS
  11. 11. Usuário é importante
  12. 12. Produto guia nossas escolhas
  13. 13. DECISÕES DE DEV
  14. 14. Solução caseira código sob medida melhor performance (carregamento) conhecimento
  15. 15. dar manutenção testes mais extensivos demora mais para ficar pronto Solução caseira
  16. 16. Framework adaptação solução pronta stack overflow ajuda
  17. 17. integração dependência de terceiros atualizações Framework
  18. 18. 12x
  19. 19. Real Time Nova Infra Performance Reaproveitar código
  20. 20. Nova Infra /home JSON componente página /search componente
  21. 21. Nova Infra
  22. 22. POR QUE ?
  23. 23. POR QUE ?
  24. 24. sistema de template JS isomórfico performático
  25. 25. exige muito tempo complexo fazer uma sistema de template não garante que seria mais performático Porque não construir o nosso?
  26. 26. Performance
  27. 27. Isomorfismo
  28. 28. O QUE É ISOMORFISMO?
  29. 29. Java Ruby PHP HTML CSS Javascript
  30. 30. SINGLE PAGE APPLICATION (SPA) Java Ruby PHP HTML CSS Javascript+
  31. 31. ISOMÓRFICO HTML CSS Javascript+Javascript
  32. 32. ISOMÓRFICO HTML CSS Javascript+Javascript JS Isomórfico
  33. 33. Rotas Renderização View Models i18n Persistência Log Sessão Eventos UI Local Storage Rotas Renderização View Models i18n
  34. 34. isomórfico Persistência Log Sessão Eventos UI Local Storage Rotas Renderização View Models i18n
  35. 35. E ALÉM DA PERFORMANCE?
  36. 36. Reutilizar código
  37. 37. Server Side Rendering
  38. 38. O QUE É SERVER SIDE RENDERING?
  39. 39. Servidor /home
  40. 40. Servidor Comps /home
  41. 41. Servidor Comps /home
  42. 42. Servidor Comps /home
  43. 43. 1ª página == SSR Servidor Comps /home
  44. 44. 1ª página == SSR /search Servidor Comps /home
  45. 45. 1ª página == SSR /search dados? Servidor Comps /home
  46. 46. 1ª página == SSR /search dados? claro! Servidor Comps /home
  47. 47. 1ª página == SSR /search dados? claro! Servidor Comps /home
  48. 48. x páginas == CSR 1ª página == SSR /search dados? claro! Servidor Comps /home
  49. 49. x páginas == CSR 1ª página == SSR /search dados? claro! Servidor Comps /home BROWSER
  50. 50. QUAIS VANTAGENS VIMOS NO SSR?
  51. 51. Funciona sem JS
  52. 52. SEO
  53. 53. Performance
  54. 54. Quais os problemas do DUST? Documentação Helpers não intuitivos
  55. 55. COMO COLOCAR OS COMPONENTES NA TELA?
  56. 56. Servidor Java
  57. 57. Servidor Java Servidor Node
  58. 58. Escopo - JS - CSS
  59. 59. Soluções Estudadas iframe shadow dom id
  60. 60. Soluções Estudadas iframe id shadow dom
  61. 61. Soluções Estudadas iframe id shadow dom
  62. 62. Soluções Estudadas iframe id shadow dom
  63. 63. Web Components shadow dom
  64. 64. Web Components shadow dom templates custom elements HTML imports
  65. 65. Web Components shadow dom custom elements
  66. 66. Web Components shadow dom custom elements
  67. 67. Web Components shadow dom custom elements escopo de CSS
  68. 68. Web Components shadow dom custom elements escopo de CSS
  69. 69. Web Components shadow dom custom elements escopo de CSS onde colocar o componente
  70. 70. PROBLEMAS COM O SHADOW DOM
  71. 71. Por outro lado…
  72. 72. Integração com resto da stack Time sem fluência Performance Não resolve problema de escopo JS Apostou no futuro do shadow dom Resultado rápido Código enxuto Compatibilidade melhor
  73. 73. 1 get 1 post subir server
  74. 74. HTTP
  75. 75. Eventos e Broadcasts Pouco Isomorfismo
  76. 76. html JS
  77. 77. html JS
  78. 78. html JS
  79. 79. html JS
  80. 80. html vazia? JS
  81. 81. html vazia? JS
  82. 82. html vazia? JS
  83. 83. html vazia? JS
  84. 84. Usar mais o isomorfismo Centralizar lógica na view Não manipular via JS a view O QUE QUERÍAMOS?
  85. 85. Não mudar o template Dust complicou a integração Queria uma solução mais simples EXISTIA ALGO PRONTO?
  86. 86. Nymeria
  87. 87. json
  88. 88. json
  89. 89. json
  90. 90. json Nymeria teve mudança!
  91. 91. json Nymeria teve mudança!
  92. 92. json Nymeria teve mudança!
  93. 93. json Nymeria teve mudança!
  94. 94. json Nymeria teve mudança! morph dom
  95. 95. json Nymeria teve mudança! morph dom
  96. 96. E OS TESTES?
  97. 97. Testes unidade aceitação
  98. 98. Unidade
  99. 99. Unidade
  100. 100. Unidade
  101. 101. Unidade
  102. 102. Aceitação
  103. 103. Aceitação PhantomJS
  104. 104. PORQUE NÃO FIZEMOS A NOSSA?
  105. 105. COMO SEMPRE OLHAR PARA OS TESTES?
  106. 106. PROBLEMAS COM O TRAVIS…
  107. 107. pago não é tão configurável fila de espera para rodar
  108. 108. Porque não usar servidor local de integração contínua?
  109. 109. mais configurações menos estável cenário pouco específico
  110. 110. TASK RUNNERS
  111. 111. automatizar tarefas dev, build, deploy minificar otimizar imagens pré-processador ou transpiler …
  112. 112. Motivações
  113. 113. MAS… NENHUMA LIB?
  114. 114. páginas legadas sistemas internos páginas novas
  115. 115. Quando possível OU Se estiver atrapalhando
  116. 116. Mas e aí? Reinventar a roda realmente valeu a pena?
  117. 117. https://engenharia.elo7.com.br/tags/isomorfico/ https://medium.com/walmartlabs/the-benefits-of-server-side-rendering-over-client-side- rendering-5d07ff2cefe8 https://developers.google.com/web/fundamentals/web-components/shadowdom?hl=pt-br https://www.webcomponents.org/ https://developers.google.com/web/fundamentals/web-components/?hl=pt-br https://betomuniz.com/blog/web-components-hoje/ https://github.com/patrick-steele-idem/morphdom https://medium.com/@hidace/understanding-reacts-virtual-dom-vs-the-real- dom-68ae29039951 https://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript- frameworks.html http://blog.caelum.com.br/unidade-integracao-ou-sistema-qual-teste-fazer/ Referências
  118. 118. http://fernandabernardo.com.br @Feh_Bernardo

×