Por que criar um front-end modular e escalável

Refletir a importância de perceber o quanto pode crescer sua aplicação e com isso você cria uma arquitetura modular e escalável para que outras equipes, ou até você mesmo, possam trabalhar de maneira organizada e sustentável.

Transcript

1. Por que criar um front-end modular e escalável? 1° FronThend – 2014 - @candidosales
2. Internet Arquitetura simples Arquitetura complexa
3. Aplicação de pequena escala
4. CSS e JS simples
5. Aplicação de larga escala
9. O quão grande essa aplicação se tornará?
10. Vamos pensar a longo prazo...
11. ... Pois não se trata de um site simples, mas de uma aplicação complexa.
12. Ao elaborar a arquitetura para a sua aplicação geral, é importante pensar no futuro O que pode mudar?
13. Vamos considerar o que é provável
14. • A aplicação possui partes reutilizáveis como blocos ou módulos? • Será possível retirar partes das funcionalidades da aplicação sem alterar significativamente o código? • Se eu trabalho com módulos, eles possuem baixo acoplamento? • Se partes específicas do aplicativo falharem, ele ainda pode funcionar?
15. "O segredo para construir grandes aplicativos nunca é construir grandes aplicativos. Quebre suas aplicações em pequenos pedaços e então, montar essas peças testáveis ​​em sua grande aplicação“ Justin Meyer, autor JavaScriptMVC
16. "A chave é reconhecer desde o início que você não tem ideia de como isso vai crescer. Quando você aceitar que você não sabe tudo, você começa a projetar o sistema defensivo. Você identifica as principais áreas que podem mudar, que muitas vezes é muito fácil quando você coloca um pouco de tempo para ele, por exemplo, você deve esperar que qualquer parte do aplicativo que se comunica com outro sistema provavelmente vai mudar, então você precisa abstrair. “ Nicholas Zakas, autor do livro JavaScript de alto desempenho
17. O que queremos?
18. Queremos uma arquitetura de baixo acoplamento com a funcionalidade dividido em módulos independentes, com idealmente sem dependências inter-módulos. Addy Osmani, Chrome Developer
19. Aplicações com front-end de larga escala são aplicações não-triviais que requerem um esforço significante de manutenção por parte do desenvolvedor, onde organização, modularização, otimização e reutilização de código são cruciais. Eduardo Shiota, Front-end Engineer Booking.com
20. Módulo
21. Gravity 2013
22. Gravity 2013
23. Os módulos são uma parte integrante da arquitetura de qualquer aplicação robusta e são tipicamente peças de propósito único de um sistema maior, que são intercambiáveis.
24. Só a modularidade permitirá separar as responsabilidades do seu código. Só a modularidade tornará possível expandir seu código com facilidade. Só a modularidade tornará possível a manutenção do seu codebase. Nando Vieira, HowToCode
25. Como fazemos?
26. CSS JS WRAPPER
27. CSS Sass é o mais maduro, estável e poderoso linguagem de extensão de CSS profissional do mundo. Uma biblioteca de mixins simples e leve para Sass O mais avançado framework front-end responsivo do mundo.
28. Variáveis, mixins e funções... http://sass-lang.com/
29. http://sass-lang.com/install
35. Framework de mixins para SASS... Não precisamos criar, já tem tudo que precisamos =) http://bourbon.io/
37. Framework CSS e JS para criação de front-end responsivo, semântico e customizável. http://foundation.zurb.com/
38. Estilos modularizados Organização
39. Settings: Variáveis globais; Base: tags html; Typography: @font-face; Layout: layout da interface ou layout comum das páginas (margin, padding, sizing); Helpers: Extends, funções, mixins, keyframe animations; Modules: Componentes de layout ou pedaços reutilizáveis; Vendor: Tudo que for de terceiros; Style.scss: Importar todos os arquivos SASS em um único;
40. Organizando os módulos
42. module/main-sidebar.scss module/main-content.scss module/sales/deliveries.scss module/sales/progress-sale.scss module/sales/search-client.scss
43. Dicas 1. Múltiplas classes + Responsabilidade única 2. Herança curta (máximo 3-4 níveis) 3. Classes portáveis
44. http://mvcss.github.io/
45. http://smacss.com/
46. http://thesassway.com/beginner/how-to-structure-a-sass-project/
47. http://bradfrostweb.com/blog/post/atomic-web-design/
48. http://oocss.org/
49. Como vamos transformar isso em CSS? Tirar todos os comentários? Concatenar? Minificar?
50. Executa tarefas para automatizar processos repetitivos, agilizando seu workflow As tarefas como validar, concatenar, minificar, testar já são encontrados em vários plugins que automatizam pra você http://gruntjs.com/plugins
51. http://candidosalesg.wordpress.com/2013/06/14/rapidez-no-seu-fluxo-de-trabalho-com-grunt-js/
54. JS Isso torna as coisas como travessia documento HTML e manipulação, manipulação de eventos, animação e Ajax muito mais simples com uma API fácil de usar, que funciona através de uma infinidade de navegadores O mais avançado framework front-end responsivo do mundo
55. JavaScript não é só jQuery
56. Pense no seu código como uma série de blocos que precisam encaixar uns nos outros. Nando Vieira, HowToCode
58. Cada um desses blocos pode ter seu próprio arquivo. Nando Vieira, HowToCode
59. Usamos o Module Pattern que permite simular o escopo e a visibilidade de atributos
62. app.js
64. Performance jQuery jQuery Proven Performance Tips And Tricks (Slides) by Addy Osmani Your jQuery: Now With 67% Less Suck by Scott Kosman 10 Ways to Instantly Increase Your jQuery Performance
65. Dicas 1. JavaScript baixo acoplamento > Portável 2. Responsabilidade única 3. Aberto para extensão, mas fechado para modificação
66. Como tirar todos os comentários/logs? Validar sintaxe? Concatenar? Minificar?
68. Por que não modularizar, também, o HTML?
69. CSS JS WRAPPER HTML
70. HTML Assim como fizemos no CSS, vamos fazer no HTML (templates).
72. Como faço para unir os templates/partials/módulos HTML?
74. Vou ter que ficar executando a cada alteração o Grunt pela linha de comando?
76. http://livereload.com/
77. https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
78. Exemplo
79. Você prefere 1 arquivo com 1.000 linhas ou 10 arquivos com 100 linhas?
80. Todo aplicativo complexo deve ser quebrado em menores partes.
81. Você nunca sabe qual vai ser o tamanho do seu projeto.
82. Códigos modulares podem ser escritos sem o uso de bibliotecas.
83. Quando você deixa de perguntar apenas “como vou fazer isso” e passa a perguntar “como vou fazer isso da melhor maneira”...
84. ... Estamos no caminho certo.
85. Obrigado! @candidosales http://candidosalesg.wordpress.com/
86. Referências Arquitetura de Front-end em Aplicações de Larga Escala by Eduardo Shiota Yasuda Desafios do Desenvolvimento de Front-end em um e-commerce by Eduardo Shiota Yasuda MVCSS is a Sass-based CSS architecture for creating predictable and maintainable application style Nicholas Zakas: Scalable JavaScript Application Architecture Organizando o JavaScript - Nando Vieira - Webday 2013 Patterns For Large-Scale JavaScript Application Architecture by Addy Osmani Princípios para escrever CSS de forma consistente e idiomática Princípios para escrever JavaScript de forma Consistente e Idiomática Shubhie Panicker: CSS module system in Google+ -- JSConf EU 2013 The jQuery Essentials by Addy Osmani