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.

Isomorfismo pra quê?

1,221 views

Published on

Novas ferramentas são criadas a todo momento e um nome está surgindo no mundo JS: ISOMORFISMO.

Published in: Technology

Isomorfismo pra quê?

  1. 1. Isomorfismo Pra quê? Fernanda Bernardo
  2. 2. Voltando no tempo…
  3. 3. 1993 Páginas estáticas
  4. 4. 1993 Páginas estáticas 1995Javascript
  5. 5. E se fosse possível rodar JS no servidor e no cliente?
  6. 6. UX
  7. 7. Server / Client
  8. 8. 1993 Páginas estáticas 200X SPA 1995Javascript
  9. 9. SPA ● Single Page Application ● Modelo de desenvolvimento ● Sem reload ● Dados assíncronos
  10. 10. SEO / JS
  11. 11. E se fosse possível rodar JS no servidor e no cliente?
  12. 12. 1993 Páginas estáticas 2009Node JS 200X SPA 1995Javascript
  13. 13. E se fosse possível rodar um mesmo JS no servidor e no cliente?
  14. 14. 1993 Páginas estáticas 2009Node JS 200X SPA 1995Javascript 2011 Javascript Isomórfico
  15. 15. O que é Isomorfismo?
  16. 16. isomorfismo i.so.mor.fis.mo sm (iso+morfo1 +ismo) substantivo masculino 1. álg correspondência biunívoca entre os elementos de dois grupos, que preserva as operações de ambos; homomorfismo. 2. miner fenômeno pelo qual duas ou mais substâncias de composição química diferente se apresentam com a mesma estrutura cristalina. 3. bio similaridade superficial entre indivíduos de diferentes espécies ou raças.
  17. 17. isomorfismo i.so.mor.fis.mo sm (iso+morfo1 +ismo) substantivo masculino 1. álg correspondência biunívoca entre os elementos de dois grupos, que preserva as operações de ambos; homomorfismo. 2. miner fenômeno pelo qual duas ou mais substâncias de composição química diferente se apresentam com a mesma estrutura cristalina. 3. bio similaridade superficial entre indivíduos de diferentes espécies ou raças.
  18. 18. JAVASCRIPTJAVASCRIPT
  19. 19. E no código?
  20. 20. It's Show Time!
  21. 21. pessoa.js
  22. 22. pessoa_parser.js
  23. 23. pessoa_parser.js
  24. 24. pessoa_parser.js
  25. 25. main.js
  26. 26. main.js
  27. 27. main.js
  28. 28. index.html
  29. 29. main.js
  30. 30. main.js
  31. 31. main.js
  32. 32. pessoa_parser.js
  33. 33. Rotas Renderização View Models Persistência Log Eventos UI Rotas Renderização View Models i18n i18n Sessão Local Storage
  34. 34. Rotas Renderização View Models Persistência i18n Log Sessão Eventos UI Local Storage isomórfico
  35. 35. Quem usa?
  36. 36. Charlie Robbins
  37. 37. ● 2011 ● Arquitetura isomórfica ● Adoção lenta
  38. 38. Spike Brehm
  39. 39. We really want a hybrid of the new and old approaches: we want to serve fully-formed HTML from the server for performance and SEO, but we want the speed and flexibility of client-side application logic. Spike Brehm
  40. 40. ● Reconstrução site mobile web ● Diminuir tempo carregamento da página ● Melhorar UX para o usuário
  41. 41. Kristofer Baxter
  42. 42. Java Struts Tiles Javascript JQuery
  43. 43. Java Struts Tiles Javascript JQuery
  44. 44. Prototipação
  45. 45. Java Struts Tiles Javascript JQuery
  46. 46. Java Struts Tiles Javascript JQuery
  47. 47. Servidor de Componentes
  48. 48. Requisição 1ª requisição
  49. 49. JSON Requisição 1ª requisição
  50. 50. Compo- nente JSON Requisição 1ª requisição
  51. 51. Compo- nente Página JSON Requisição 1ª requisição
  52. 52. 2ª requisição Requisição Requisição
  53. 53. JSON Requisição Requisição Componente 2ª requisição
  54. 54. Prós / Contras
  55. 55. Menos duplicação de código Mais fácil de dar manutenção
  56. 56. Menos tempo gasto para escrever código no servidor e no cliente.
  57. 57. Levar em conta onde o código será executado
  58. 58. Primeiro request é rápido e os outros ainda mais.
  59. 59. Mais simples de funcionar sem JS, servidor retorna o HTML.
  60. 60. Debug é mais complicado
  61. 61. Evitar expor dados sensíveis
  62. 62. Os frameworks mudam muito rápido
  63. 63. Se sua página não tiver muita atualização dinâmica, você irá implementar muito código para pouco benefício
  64. 64. Frameworks / Libs
  65. 65. ● Primeira lib isomórfica open source ● Yahoo! ● Abril 2012 ● Dependência do YUI
  66. 66. ● Primeira lib isomórfica open source ● Yahoo! ● Abril 2012 ● Dependência do YUI
  67. 67. ● Primeira lib isomórfica open source ● Yahoo! ● Abril 2012 ● Dependência do YUI
  68. 68. Real Time
  69. 69. Configurações
  70. 70. Configurações
  71. 71. Configurações
  72. 72. Configurações
  73. 73. 53 scripts
  74. 74. Projeto básico muito pesado
  75. 75. Projeto básico muito pesado Load: 3.01 s
  76. 76. Não funciona sem JS
  77. 77. Documentação
  78. 78. Componentes
  79. 79. ● Oferece uma linguagem de templates para renderizar HTML (só view). ● Não pode ser comparado com Angular, Ember, Backbone...
  80. 80. Aplicação Simples Load: 343 ms
  81. 81. Aplicação com Router Load: 793 ms
  82. 82. Não suporta < IE8
  83. 83. Marko faz o HTML ser mais parecido com JavaScript JSX faz o JavaScript ser mais parecido com HTML
  84. 84. Support Libs
  85. 85. Faz o browser suportar require(‘modules’)
  86. 86. Referências ● http://isomorphic.net/ ● http://isomorphic.net/javascript ● http://techblog.netflix.com/2015/08/making-netflixcom-faster.html ● https://blog.nodejitsu.com/scaling-isomorphic-javascript-code/ ● http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/ ● https://medium.com/@mjackson/universal-javascript-4761051b7ae9 ● https://www.lullabot.com/articles/what-is-an-isomorphic-application ● http://joshowens.me/what-is-meteor-js/ ● https://www.sitepoint.com/7-reasons-develop-next-web-app-meteor/ ● http://blog.andrewray.me/reactjs-for-stupid-people/ ● https://scotch.io/tutorials/learning-react-getting-started-and-concepts ● http://nicolashery.com/exploring-isomorphic-javascript/ ● http://browserify.org/ ● https://webpack.github.io/
  87. 87. fernanda.bernardo@elo7.com FernandaBernardo @Feh_Bernardo

×