Otimização de arquitetura e organização no Front-end | Enext Ideias
Enext Ideias + Conteúdo + TI + Funcionalidades + Otimização de arquitetura e organização no Front-end
Otimização de arquitetura e organização no Front-end
em nov 29, 2014:por
Olá pessoal, esse é meu primeiro post aqui no blog, e gostaria de falar sobre algo que muitos ainda não têm dado o devido valor, mas que é algo vital do processo de desenvolvimento do front-end: Organização.
A maioria vai concordar comigo que a arquitetura realmente tem um papel fundamental para o sucesso ou o fracasso de um projeto, porém muitos estão se perguntando o porque a organização tem tanto peso no processo. Eu arrisco em dizer que a organização na arquitetura do projeto é o seu braço, e ainda que mesmo com uma arquitetura bem estruturada se o projeto não estiver bem organizado, a equipe toda terá problemas no desenvolvimento, como re-trabalho, duplicidade de informação, dificuldade de novos membros se localizarem no projeto, etc. Tudo isso irá refletir na qualidade do projeto, nos prazos e também na manutenção. É isso mesmo, até a manuteção do projeto que já é um estágio caro, pode se tornar manais caro!
Mas porque há tanto em jogo relacionado a organização?
Isso é bem simples de entender. Vamos pensar que nossa arquitetura está bem definida, se mantermos uma organização simples e objetiva, tudo será mais fácil de se localizar, re-aproveitar e modificar. Com isso já conseguimos eliminar os problemas que vimos anteriormente. Mas isso deve estar muito bem entendido por parte de cada participate da equipe, e ser praticado diariamente durante todo o ciclo de vida do projeto.
Mas como estamos falando de Front-end, como podemos manter nosso e-commerce mais organizada?
Hoje vemos uma variedade de boilerplates, frameworks, ferramentas que ajudam bastante no quesito organização, mas com tantos desses disponíveis, qual é o melhor? O melhor sempre vai ser o que o seu projeto se encaixar e o que sua equipe gostar, e pode ser que não seja nenhum! E ainda que tenham escolhido algum boilerplate, ou framework o melhor é adaptar o mesmo à realidade do projeto.
Tá, mas como seria isso no meu e-commerce?
E-commerces tem uma estrutura bem específica e complexa, pois são muitos componentes que temos, isso mesmo componentes! Quando falamos em organização, a melhor forma de organizar é componentizar. Com isso fica mais fácil de se definir um padrão, e torna menos complexo o desenvolvimento. Afinal, o que temos em uma página de produto, se não uma galeria de imagens com uma imagem principal com zoom, um bloco com os preços do produto, outro com a descrição, outro com uma área onde selecionamos suas variações, outro com ações de comprar, listagem de produtos similares, etc. Podemos tratar cada um desses "blocos" como componentes e assim ter nosso código dividido em componentes. Não se assuste com a quantidade de componentes que podem surgir, mas também não exagere na componentização, seja moderado. Com a componentização definida já podemos iniciar a estruturação dos arquivos.
Vamos nos ater às nossas folhas de estilo (CSS) para um exemplo de organização. Dentro da pasta onde se encontram as css, podemos defidir por contexto, ou por página. Dentro dessa pasta temos os componentes, como na imagem:
Essa estrutura, é bem genérica, se enquadra na maioria dos e-commerces, e por isso é bem fácil de todos se localizarem. Mas você deve estar se perguntando, como devo fazer para usar essa estrutura? Ou, eu vou incluir esse monte de css no meu template? É claro que não! Não vamos jogar o que aprendemos sobre otimização e performance no lixo! Com esse monte de css, podemos concatenar por página, que é uma boa prática, para não termos vários css incluídos no template. Quem utiliza de pré-processadores, tem mais facilidade em componentizar e concatenar, realmente os pré-processadores são uma mão na roda para nossar organização, maaaas, cuidado ao utilizar os pré-processadores, eles podem ajudar ou atrapalhar seu fluxo ou até poluir seu código se a equipe não tiver conhecimento de como utlizar essa ferramenta, mas isso fica para outro post =).
Manutenção do E-commerce
Fase muito importante no ciclo de vida do projeto, pois vai ser a sua maior parte do tempo de vida, e é muito comum o projeto virar uma bagunça após algumas manutenções. É muito importante manter o padrão de organização que foi criado lá no início do projeto, para que os problemas que eliminamos lá atraz não voltem.
Bônus: Ferramentas que auxiliam
Nesse exemplo falamos de uma ferramenta bastante comum e maravilhosa, que é o grupo dos pré-processadores. Eles são ótimos para poupar tempo, pois existem bibliotecas, geradores que se usados com consciência nos abrem um leque de opções sem pesar no seu código. Os mais populares são: SASS e LESS.
Também temos os automatizadores de rotinas. As possibilidades são infinitas quando usamos os automatizadores, com eles podemos automatizar: compressão e minificação de arquivos, concatenação, compressão e otimização de imagens, mover arquivos compilados para locais específicos, e muito mais! Os mais populares são: Grunt e Gulp.
Outra ferramenta muito bacana e aliada da arquitetura, é o grupo dos frameworks de javascript. Com a responsabilidade e poder cada vez maior do javascript, tem surgido várias ferramentas que valem a pena dar uma olhada, os frameworks! São poderosos em organização, pois a maioria trabalha em cima de algum padrão de projeto, como o MVC. Os mais populares são: Backbone, Angular e Ember.