Introdução aos módulos e desenvolvimento modular de front-end

Todo mundo conhece e adora peças de Lego. Eu era viciado em Legos quando era criança e ainda os amo hoje. Você pode montar seu brinquedo de todos os tipos de Legos de todas as maneiras, uma peça de cada vez. Você pode então recomeçar e construir um brinquedo diferente dessas mesmas peças. As possibilidades são infinitas.

Módulos em um site são muito parecidos com Legos. Pense nos módulos como peças de Lego que permitem que você construa seu site. Quando você os conecta da maneira certa, eles formam páginas da web. Para construir sites como Legos, você deve pensar em sites como uma coleção de módulos independentes. Este artigo irá ajudá-lo a fazer exatamente isso com seu desenvolvimento e design de front-end.

Colagens de Módulos

Ao entrar na fase de design de um projeto, costumo começar montando colagens de inspiração de design e colagens de módulos. É um processo muito parecido com o de Dan Mall, que chama essas colagens de produtos de design para uma era pós-comp. Colagens de inspiração são coleções de capturas de tela que apresento ao cliente, apenas para ter uma ideia geral da direção visual em que estamos indo. São simplesmente capturas de tela de sites que eu e o cliente gostam.

Assim que tivermos a confirmação de que estamos na mesma página em termos de estilo, posso entrar no meu editor gráfico (prefiro o Sketch) e criar colagens de módulos. Essas colagens são coleções dos módulos mais usados ​​- botões, formulários, títulos, parágrafos, listas, imagens e assim por diante. As colagens de módulos me permitem criar rapidamente partes da aparência e da aparência do site.

Aqui está uma parte de uma colagem de módulo recente minha, um exemplo de um botão que desenhei no Sketch no início de um projeto:

Talvez você esteja se perguntando quando as composições estáticas e a apresentação de designs perfeitos de pixel para o cliente entram em jogo. Eles não – estou pulando esses quase inteiramente no meu processo. Pular essa parte do processo me permite entrar no código muito cedo no projeto e nos protótipos de código (chegarei a eles em breve), ou em outras palavras, projetar no navegador. Aqui estão algumas das vantagens de projetar no navegador:

• O navegador é o ambiente natural de um site, e manter as ideias feitas em um editor gráfico pode sair pela culatra. É natural testar e tomar decisões de design em navegadores. Você já ouviu isso antes, você vai ouvir de novo - não é sobre como parece, é sobre como funciona.

• Sempre haverá inconsistências de design entre os mocks estáticos e o que você acaba obtendo no navegador quando eles são traduzidos em código. Para evitar essas inconsistências, entre no editor de código e no navegador para resolver problemas reais de design.

• As composições estáticas podem não transmitir a mensagem certa. A aparência será muito diferente quando você integrar a interatividade - como os estados de foco, transições e animações.

• Em vez de gastar horas e horas projetando vários modelos estáticos para várias resoluções, posso economizar muito tempo entrando no código antecipadamente. Ajustar o CSS me permite demonstrar rapidamente as mudanças e o aspecto responsivo ao cliente em vários dispositivos - smartphones, tablets, etc.

Portanto, economize tempo e abra seu editor de código e o navegador para começar a criar o UX o mais cedo possível. Na minha experiência, a maioria dos clientes pedirá uma maquete completa de uma página ou duas antes que possamos prosseguir com a codificação, e isso é completamente bom. É importante que o cliente tenha uma boa noção do design futuro. Eu costumo usar o InVision, que é uma ótima ferramenta para acompanhar os primeiros modelos, as alterações, comentários e muito mais. No entanto, é muito importante que os clientes entendam que o Sketch e o InVision não os levarão muito longe.

Construindo os Módulos para Desenvolvimento Front-end

Uma vez que o cliente esteja satisfeito com a colagem do módulo e os modelos que criei, posso começar a codificar e definir a aparência real desses elementos.

O design modular está entrelaçado com o desenvolvimento modular em um processo iterativo. Eu codifico um módulo, experimento-o no navegador para ver como ele funciona e, em seguida, faço uma iteração, se necessário. Novamente, esse processo é muito parecido com a construção de Legos – você basicamente projeta e desenvolve ao mesmo tempo e experimenta diferentes variações até se sentir bem com isso.

Costumo começar o desenvolvimento dos módulos construindo algo simples, como um botão. Imagine que você está construindo um e precisa codificar um botão laranja, geralmente usado para um formulário de contato. Aqui está o que você pode inventar:

 .submit-button { background: orange; color: #fff; padding: 10px 20px; font-size: 16px; }

 <a href=“#” class=“submit-button”>A link</a>

Bastante simples, certo? Você aplicaria a classe .submit-button ao seu HTML e isso resolveria seu problema atual. Agora, o que aconteceria quando você precisasse criar um novo botão, igual a esse, mas com uma cor de fundo azul? Você provavelmente copiaria essa classe exata e, em seguida, alteraria o nome da classe e a cor do plano de fundo. Rapido e sujo. Agora, imagine que você precisa usar o mesmo botão, mas com um fundo laranja. Você pode ver onde isso está indo - você pode acabar com muito CSS sendo repetido. Em um projeto super pequeno, isso pode não se tornar um problema real, mas em projetos maiores provavelmente será. Antes que você perceba, seu CSS fica inchado e difícil de manter.

Se você já desenvolveu um projeto de médio a grande porte, sem dúvida já experimentou seu quinhão de dores de cabeça. Esses podem ter sido causados ​​por qualquer um dos seguintes motivos:

• Código confuso, inconsistente, difícil de digitalizar e entender.
• Código inchado e arquivos CSS XXL com muita duplicação.
• Código difícil de manter.
• A falta de separação de estrutura e pele.

Não se preocupe, você não está sozinho. Aposto que todos os desenvolvedores front-end experimentaram esses problemas dolorosos de tempos em tempos, e provavelmente muitos mais. Posso dizer com segurança que tive muitos projetos no passado em que encontrei todos esses problemas típicos.

Uma forma de evitar ou minimizar esses problemas é construir de forma modular.

O botão modular

Como codificar esse botão de maneira modular? Uma abordagem modular seria escrever código que você possa reutilizar. Lembre-se daqueles Legos, que podem ser usados ​​e reutilizados novamente.

 .button { padding: 10px 20px; font-size: 16px; } .button-orange { background: orange; color: #fff; }

 <a href=“#” class=“button button-orange”>A link</a>

O que fizemos foi uma separação inteligente de estilos. A classe .button contém os estilos que cada botão em seu projeto usa, para que você não precise repeti-lo. A classe .button-orange usa apenas os estilos relevantes para o botão laranja. Você faria o mesmo para todos os outros botões e definiria suas cores de fundo e texto.

Seu módulo de botões pode acabar consistindo em vários botões independentes, prontos para serem usados ​​sempre que você precisar deles.

E as coisas mais complexas?

Você segue os mesmos princípios para todos os outros componentes de que possa precisar. O objetivo é criar módulos que sejam elementos autônomos, independentes de outros módulos. Quando combinados, esses módulos formarão modelos, onde você simplesmente reutiliza os módulos conforme necessário e trabalha para concluir seu design.

Para ler mais sobre desenvolvimento modular de front-end, recomendo fortemente o SMACSS, que é a arquitetura que costumo usar em todos os meus projetos, grandes ou pequenos.

Lembre-se, o processo modular tem tudo a ver com construção, teste e iteração. Um módulo é produzido primeiro em seu editor, depois testado em um navegador e, em seguida, iterado, se necessário. Repita esse ciclo sempre que necessário.

Envolvendo o Cliente

Não se esqueça das necessidades do cliente – eles querem ser mantidos informados e obter a confirmação de que estão recebendo o valor do seu dinheiro. A beleza desse processo de desenvolvimento é que os clientes podem ser membros ativos de sua equipe. Você pode mostrar os módulos com segurança e eles podem ignorar o processo de desenvolvimento e colaborar o tempo todo para melhorar o produto. Eles não precisam esperar que uma composição estática seja concluída ou que um marco seja alcançado antes de ver o progresso real. Se você dedicar algum tempo para explicar como os módulos funcionam para seus clientes, eles terão uma melhor compreensão e apreciação do processo de design e do tempo gasto para construí-los.

A maneira como eu normalmente apresentaria módulos para um cliente é muito parecida com o Bootstrap – configurar um módulo isolado junto com seu código é uma ótima maneira de envolver todos os designers, desenvolvedores e clientes no processo.

Use os módulos que você construiu como blocos de construção para páginas. Para sua página de índice, você pode colocar o módulo de navegação no topo, um módulo herói ao lado, alguns dos módulos de conteúdo ao lado e, em seguida, o rodapé na parte inferior. Antes que você perceba, você já tem uma página para um protótipo HTML. Mas o que é um protótipo, exatamente? Eu sempre amei a definição de Leah Buley de um protótipo de seu ótimo livro The User Experience Team of One:

Exemplos funcionais ou semifuncionais de como o design deve se comportar e operar uma vez implementado.

Ao construir um protótipo, é exatamente isso que você obterá na fase inicial do projeto – um site semifuncional. Onde os modelos estáticos e o InVision ficam aquém, os protótipos HTML se destacam. O protótipo serve como uma entrega responsiva perfeita para seus clientes. E uma vez que o cliente esteja bem com a aparência do seu protótipo, tudo o que você precisa fazer é poli-lo até que funcione da maneira que precisa. Construir, testar, iterar.

Reutilize os blocos de construção

Módulos e protótipos permitirão que você reutilize o código para o projeto atual, mas também para projetos futuros. Ajustar um módulo do seu último projeto pode economizar muito tempo - os módulos que você precisa em cada projeto geralmente são semelhantes. Eu tenho uma grande biblioteca de módulos que costumo reutilizar: guias, menus de navegação, botões, breadcrumbs, formulários, tabelas, paginação, listas, etc. Embora o código desses módulos não seja exatamente o mesmo em todos os projetos, bons pedaços dele pode ser reutilizado, economizando muito tempo de desenvolvimento. Meu conselho para você é criar módulos reutilizáveis ​​para você também. Confira BASSCSS, Pure e Refills para se inspirar.

Não desanime se a mudança para design e desenvolvimento modular levar tempo. Naturalmente, se os princípios modulares forem novos para você, eles exigirão um ajuste em seu processo de design e desenvolvimento, mas a mudança pode valer a pena.

Os métodos e técnicas modulares que abordei neste artigo estão apenas arranhando a superfície. No entanto, espero sinceramente que este artigo tenha sido útil e que o tenha intrigado a mergulhar no design e desenvolvimento modular.