Boas Práticas de Front-end

Durante o uso de um sistema, aplicativo ou site é essencial a interação que o usuário tem com a interface. Isso garante a diminuição de solicitações de mudanças e manipulação dos sistemas. Além disso temos os dispositivos com telas sensíveis ao toque e com tamanhos variados. Não é possível negligenciar os mais variados dispositivos disponíveis no mercado. No entanto, não é somente a percepção do usuário que deve ser levada em conta, o programador deve ter atenção na forma que está construindo esta interface: desde componentes até os estilos.

A construção de interfaces de sistemas web requer o uso de CSS, javascript e html como base. Depois podemos acrescentar os frameworks e pré-processadores como facilitadores dessa construção. Mas o uso destes não garante que seu sistema está construído de uma forma que a manutenção seja simples. Fazendo o uso de uma analogia simples, você pode até ter os ingredientes de uma receita, se não souber como misturá-los corretamente, o seu resultado não será satisfatório, podendo ser até catastrófico. Por isso, o objetivo desse texto é dar algumas recomendações importantes para construção de front-end de uma aplicação.

O uso de frameworks de fron-end facilitam a construção de layouts ao possuírem classes que já possuem atributos para determinados componentes. Mas não adianta usar classes que você acabará sobre-escrevendo. Se precisar escrever um estilo específico não use o nome da classe, crie um id e escreva seu CSS. Não use CSS inline pois ao realizar uma mudança você terá uma dificuldade enorme para procurar o componente, além de ser uma forma desorganizada de construção.

Se você está usando um framework, utilize o máximo que puder do mesmo. Por isso é importante estar estudando o mesmo para conhecer o que ele tem disponível. Não significa que você está preso ao framework. Mas qual o sentido de usar algo que você não aproveitará e precisará usar remendos em quase todas as situações? Determinados componentes JQuery podem ser incompatíveis com alguns frameworks. Vem a pergunta: por que misturar coisas que não “conversarão” entre si? Layout é como uma casa, não se pode fazer uma base com materiais incompatíveis. Isso vale CSS e Javascript.

Com o Html 5 e o CSS 3 veio o acréscimo de novos recursos que tornaram a construção de layouts responsivos muito melhor. As media queries foram uma das novas funcionalidades mais importantes que foram acrescentadas ao CSS3. Com elas você consegue criar estilos específicos para tamanhos variados de tela. Por isso aprender a utilizá-las é importante. Diria que são a base da construção de frameworks.

Ao usar pré-processadores de CSS, você tem a possibilidade de construir o seu estilo de uma forma estruturada e organizada. Mas se está usando um pré-processador, significa que deve construir seu estilo com ele. Não adianta usar um SASS e escrever seus estilos com remendos de CSS, por exemplo. O uso de pré-processadores é justamente para que a escrita do CSS seja programável para evitar repetições e inconsistências. Outra coisa, a criação de temas torna-se muito mais fácil. Neste caso, você pode criar um tema e importar o mesmo, sem precisar modificar os CSS base.

Não é o framework que define o quão bem construída é uma aplicação, mas sim, os desenvolvedores (que incluem todos os profissionais envolvidos, desde o planejamento a construção). E mais importante: não adianta usar algo que você não conhece, por isso vem a palavra mágica: conhecimento. Você deve estudar as ferramentas que utiliza e entender seus objetivos. Conhecer sintaxe, não significa que alguém conheça programação. Html, CSS e Javascript também precisam ser bem construídos e utilizados para que as aplicações sejam bem construídas e fáceis de manter.