Como se organiza os estilos deve ser sempre matéria de preocupação para os bons programadores, especialmente quando está trabalhando em projetos grandes. Organizar a cooperação entre programadores e manter grandes bases de código CSS trará melhoria no desempenho da equipe.
1. O básico do básico, ou seja, as tecnologias que os navegadores interpretam
- HTML – conteúdos nas páginas web
- CSS – estilização da página web
- JavaScript – dinamismo da página web
2. Tecnologias CSS para organizar os elementos para serem apresentados numa tela
- BoxModel (Modelo de Caixa CSS) – bordas, margem e padding de um elemento. É um módulo de CSS que define caixas retangulares, incluindo preenchimento (padding) e margem (margin), que são gerados por elementos e dispostos de acordo com o modelo de formato visual. Ver CSS BoxModel.
- Flexbox – Flexbox é um método de layout unidimensional para organizar itens em linhas ou colunas. Ver Flexbox.
- GridLayout – abordagem bidimensional: GridLayout posiciona os componentes dentro de um grid. Este grid ocupa todo o espaço do container, todas as células possuem o mesmo tamanho e os componentes adicionados são redimensionados para ocupar todo espaço disponível na célula. Ver CSS Grid Layout.
3. Metodologias para organização de CSS (arquiteturas CSS)
Outras metodologias CSS para ter os elementos de forma organizada, limpa e escalável ao longo do tempo:
- BEM (Block, Element, Modifier). Ver BEM – padrão CSS e Metodologia BEM.
- SMACSS (Scalable and Modular Architecture for CSS). O SMACSS é mais uma série de tutoriais de como escrever um bom código que propriamente um sistema de CSS.
- OOCSS (Object-oriented CSS). Dois importantes princípios desta metodologia: separar estrutura de skin e separar contêiner de conteúdo. Ver Organizando Seu Código CSS
- Atomic. Dividir estilos em peças atômicas ou indivisíveis. Uma maneira de tornar os estilos mais encapsulados, mais fáceis de escrever e geralmente reduz o código geral. Ver AtomicCSS e Let’s Define Exactly What Atomic CSS is. Desenvolvido pelo Yahoo.
4. Frameworks CSS
Os frameworks front-end facilitam a construção de interfaces e, consequentemente, possibilitam uma melhor experiência ao usuário. São diversas as possibilidades que trazem estes frameworks para o desenvolvimento de websites, tanto em termos visuais quanto em termos de UX (“user experience”).
A utilização de frameworks proporciona uma melhoria significativa na velocidade do processo de desenvolvimento de projetos em comparação com a não utilização de um framework.
- Bootstrap: no mercado desde 2010, possui uma comunidade muito grande e ativa que está sempre evoluindo o framework, se constituindo em um framework consolidado no mercado. Um framework HTML, CSS e JavaScript que oferece muita liberdade e controle sobre os elementos de UX (é baseado em componentes), seguindo o padrão BEM de escrita de CSS. Sua prioridade é a responsividade e foco na experiência do usuário. Especialmente indicado para projetos mais robustos. Ver Bootstrap ou Materialize: Conheça as principais diferenças.
- Materialize: o grande foco deste framework é o visual. Foi projetado em cima de um espaço tridimensional e utiliza muito o movimento. É um framework CSS baseado no Material Design do Google. Especialmente indicado para uma aplicação visualmente interessante (em termos de UI) e que não exija grande esforço.
- TailwindCSS: criado em 2017, é um framework baseado em utilidades e tem como prioridade a facilidade de customização. Ao contrário do Bootstrap, o Tailwind CSS não oferece nenhum componente pré-construído para ser utilizado; em vez disso, cabe ao desenvolvedor projetar e construir os seus próprios componentes. Ver Bootstrap vs Tailwind
- Foundation: é um framework CSS criado em setembro de 2011. O menu responsivo é um de seus maiores trunfos. Foundation conta com componentes CSS e HTML, bem como extensões JavaScript, o que ampliam ainda mais sua funcionalidade. Cria designs responsivos, com foco em aplicativos da Web voltados para dispositivos móveis. É grande a capacidade de personalização do Foundation, o que pode melhorar muito o aspecto visual de um projeto. Isso não quer dizer que o Boostrap não possa fazer o mesmo, mas o Foundation foi criado para criar designs exclusivos e personalizados. Ver Foundation vs. Bootstrap.
5. Bibliotecas JavaScript
- React – utilizado pelo Meta. O React é uma biblioteca criada para construir telas de forma declarativa, ou seja, cria aplicações web para serem executadas em navegadores, sejam eles para desktop, mobile ou qualquer outro dispositivo. O React é conhecido como uma biblioteca de JavaScript utilizado para a criação de user interfaces (UI). React não é um framework e, diferente de Angular, não possui ferramentas próprias que juntas ofereçam uma solução completa para o desenvolvimento front-end. Pelo contrário, o React é apenas uma base, uma coleção de funções que cria elementos reutilizáveis. Angular é semelhante ao MVC, React foca apenas no “V” (view).
- Angular – utilizado pelo Google. Assim como o React, possui recursos JavaScript poderosos e populares para construir praticamente qualquer projeto de frontend que se deseje. É uma plataforma de código aberto baseada em TypeScript. Ver Angular vs React: Uma comparação em profundidade.
- Vue: inspirado em versões iniciais do Angular. Na verdade, une os aspectos mais positivos do React e do Angular. Tem se caracterizado como uma boa alternativa ao React e ao Angular. Possui uma curva de aprendizado baixa, mostrando-se leve, simples e eficaz.
- SolidJS: é uma biblioteca javascript declarativa, baseada no React, eficiente e flexível para construir UIs. É destinada especialmente para desenvolvimento de aplicações de desktop através de programação funcional, com suporte ao TypeScript. Vale frisar que o React é uma biblioteca voltada para o desenvolvimento de aplicações web.
- Svelte: Svelte é um framework de componentes de front-end de código aberto lançada em 2016. O código Svelte é compilado em JavaScript antes de chegar ao navegador, ao contrário da maioria dos frameworks, como React e Vue, onde o código é executado no navegador. Esse código compilado é pequeno e eficiente. O Svelte é apropriado para projetos menores que não exigem muitos recursos. É mais leve que o React e usa menos código, por isso é ótimo para projetos em que o desempenho é fundamental. Tem uma curva de aprendizado curta e ótimo para criar interfaces de usuário dinâmicas, pois compila o código em JavaScript altamente otimizado.
- Qwik: Qwik é um framework de front-end para criar aplicativos web que oferece tempos de carregamento de página extremamente rápidos, independentemente do tamanho e complexidade do site. Qwik renderiza HTML do lado do servidor para otimizar o desempenho.
6. Gerenciamento de sessões, estados e cache (persistências de informações)
- REDUX – utilizado pelo React. Redux é uma biblioteca para armazenamento de estados de aplicações JavaScript. Nasceu através de uma implementação do Flux, uma arquitetura criada pelo Facebook para contribuir com as aplicações de User Interface, utilizando o conceito de fluxo de dados unidirecional.
- MobX – utilizado no Angular e Vue.js. O Mobx é uma biblioteca de gerenciamento de estado para Javascript tida como “técnica de gerenciamento de estado sólida” por seu alto desempenho em projetos de larga escala. É uma biblioteca de gerenciamento de estado que simplifica a conexão dos dados reativos do aplicativo com a interface do usuário, e é frequentemente utilizada com o React. Aplica conceitos de programação funcional reativa em JavaScript de forma transparente, escondendo detalhes complexos de implementação por trás de objetos JavaScript puros. Tem uma curva de aprendizado menos abrupta do que a sua alternativa mais popular, o Redux.
- VueX – Vuex é um padrão + biblioteca de gerenciamento de estado para aplicativos Vue.js. Ele serve como um armazenamento centralizado para todos os componentes de um aplicativo, com regras que garantem que o estado só pode sofrer mutações de maneira previsível.
- ngRx – utilizado no Angular. Ou seja, é a versão Angular do Redux (utilizado pela biblioteca React), para gerenciamento de estado.
7. Server Side Rendering (SSR)
Conteúdo da página gerado do lado do servidor e enviado para o navegador já como HTM estático. Em particular, React e Angular oferecem suporte à SSR.
- Remix: Remix é um framework para o React, utilizado para renderização do lado do servidor (SSR). Isso significa que tanto o back-end quanto o front-end podem ser feitos usando um único aplicativo Remix. Os dados são renderizados no servidor e servidos no lado do cliente com o mínimo de JavaScript. Ao contrário do vanilla React, onde os dados são buscados no front-end e depois renderizados na tela, o Remix busca os dados no back-end e entrega o HTML diretamente ao usuário
- Next.js: Next.js é um framework de desenvolvimento para Web, de código aberto, para aplicativos web baseados em React com renderização do lado do servidor e geração de sites estáticos. Next.js é um dos frameworks mais populares para React. Fornece vários recursos extras, incluindo renderização do lado do servidor e geração de sites estáticos. Lançado em 2016.
8. Testes automatizados
- Jest: Jest é um framework JavaScript de testes construído sobre Jasmine e mantida pela Meta (anteriormente Facebook). Ele foi projetado com foco na simplicidade e suporte para grandes aplicativos da web. Funciona com projetos usando Babel, TypeScript, Node.js, React, Angular, Vue.js e Svelte. O Jest não requer muitas configurações dos usuários iniciantes.
- Cypress: Cypress é uma ferramenta de teste de front-end para aplicativos da web. O Cypress é executado no Windows, Linux e macOS. O aplicativo Cypress é um software de código aberto lançado sob a licença MIT, enquanto o Cypress Cloud é um aplicativo da web. O Cypress foi comparado ao Selenium. É executado totalmente do lado do cliente.
9. Ferramentas
Chrome Dev Tools
Firebug
10. Editor de Código
Vim
Sublime text
Bracket
Atom
Light Table
Geany
Bluefish
Referências:
1- Arquitetura CSS
2- Caminhos para ser um dev front-end
3- Padrão Digital do Governo Federal – Boas práticas de CSS
4- Object Oriented CSS – OOCSS
5- Top 5 bibliotecas JavaScript
6- 12 Frameworks e Bibliotecas JavaScript
Blog do Albuquerque 