7 motivos para (ainda) usar (e continuar) com o Bootstrap

Então veio o Bootstrap

O Bootstrap é um framework front-end para padronização de interfaces e representa aproximadamente 14% de todos os sites da web atualmente (retirado de https://trends.builtwith.com/docinfo/Twitter-Bootstrap em Junho de 2018, obrigado Ricardo Valério Sanches). Temos também outros frameworks, e assim como este framework originalmente do Twitter, não devemos deixar de usá-los como ferramenta para ajudar na implementação do front-end em nossos projetos.

Do criador do framework JQuery, John Resig mostrando como ser um Javascript ninja.

A História do Bootstrap

Para quem é novo na área, ou passou despercebido pela revolução do front-end na era do Bootstrap, o Ricardo Valério Sanches contou toda a história do Bootstrap neste vídeo para que você possa entender de maneira didática o contexto em que ele foi criado:

História da evolução e do sucesso do Bootstrap neste vídeo. Fonte: Canal do Youtube do Ricardo Sanches - https://www.youtube.com/channel/UCxsjItE8ek_KG21BClqBo7Q

Por que estou falando disto?

Já faz um bom tempo que venho falando sobre o Bootstrap, desde as versões mais antigas até a publicação do meu livro que falava da nova (agora antiga) versão que viria para revolucionar, o Bootstrap Mobile First.

Mobiel First Bootstrap Book
Um exemplar do livro Mobile First Bootstrap por Alexandre Magno, da editora Packt Publishing

01 — Mobile First

Esta técnica do Mobile First ficou bastante difundida com o crescimento do uso de dispositivos móveis, que diz que o desenvolvimento tem que ser pensado na experiência em dispositivos menores primeiramente e passar para próximos posteriormente.

Exemplo de um modelo usando mobile first, nele você inicia seus elementos em blocos que ocupam toda a tela para depois dividi-la e redistribui-la.
Modelo desktop first como estamos acostumados. Temos os blocos distribuídos em uma tela grande que precisa posteriormente se encaixar em uma tela menor.

02 — Não reinvente a roda

O Bootstrap, assim como o jQuery construíram uma comunidade open source para que você pudesse aprender e compartilhar conhecimento entre diversos desenvolvedores, inclusive daqueles que dedicaram seu tempo para construir plugins para tentar resolver todos os problemas da sua vida. O Bootstrap criou várias formas de desenvolvimento com flexibilidade deste o início, assim como outro frameworks front-end.

Alguns frameworks de front-end de destaque

03 — Comunidade

Um framework precisa amadurecer e leva um bom tempo para ficar realmente estável e escalável e isto é feito de acordo com as necessidades da comunidade. Muitos nem sobrevivem às mudanças de paradigmas, como o Backbone.js, ou até mesmo Prototype.js que atualmente é pouco usado. Muitos frameworks nasceram para serem transitórios e para resolver problemas que uma tecnologia não suportava na época.

O poder da comunidade. No Github, existem cerca de 60 mil forks do Bootstrap, entre eles um que traduzi para ser usado internamente na Globo.com

Boostrap com React, Bootstrap com Angular

O mesmo poder da comunidade deu o Bootstrap uma flexibilização com outros frameworks como React Bootstrap e diretivas do Bootstrap para Angular, possibilitando ter o framework totalmente flexível para acompanhar as versões puramente em JS e HTML.

04 — Flexibilidade

Um misto com o jQuery

Guias de estilo

Os guias de estilo e elementos de interface ajudam no desenvolvimento de interações de diversos tipos, com formulários, grids e formas padronizadas da interface, na forma de temas.

O ZenGarden tenta mostrar como o CSS é poderoso para flexibilizar estilos de websites

05. Personalização

É possível fazer downloads de forma totalmente independentes com o Bootstrap. Você pode usar os diferentes tipos

Uma visão de como utilizar o Framework Bootstrap de Grid para entender as diferentes visualizações no desktop e celular
  1. Conteúdo
    Padronização de tipografias ajudam a organizar todo o conteúdo e estrutura básica do texto, usando CSS Reset para padronizar o comportamento dos browsers
  2. Componentes
    Os componentes foram construídos totalmente com javascript não obstrusivo, e integrado de forma simples usando data api’s em que é possível controlar o comportamento de seus componentes sem precisar adicionar nenhuma linha de Javascript.

06. Documentação

A documentação do Bootstrap é bastante completa e auto explicativa. Quando usei ele no passado em um projeto da Globo.com, facilmente integramos toda a equipe no desenvolvimento de um sistema interno usando a documentação que já estava ali, desenvolvida por outros enquanto tentávamos em outros projetos criar nossa própria documentação. No fim, a adoção foi muito mais rápida e o projeto ficou pronto mais rapidamente e com qualidade, e pudemos ir além e não se preocupar com coisas básicas já bem definidas. Não precisávamos passar pelos mesmos problemas que outros já resolveram.

07. Aprendizado

Ele é também um aprendizado importante para quem já é especialista no front-end. Padrões adotados pelo Bootstrap ficaram, assim como expliquei anteriormente que o jQuery fez com o javascript. Agora não pensamos mais no desenvolvimento da interface como antes, novas formas como o Material Design adotado pelo Google veio para revolucionar e fazer com que cada vez possamos ir além na experiência do usuário. Já para quem não tem muita familiaridade com o Javascript e CSS, pode desfrutar e sentir autoridade por construir interfaces completas sem conhecimentos avançados; o que seria inviável fazer sozinho para alguns sem especialidade em front-end. Não vemos mais páginas por aí sem CSS do jeito que o browser veio ao mundo. Quem não quer mostrar como foco uma experiência diferente, padrões de interface definidos por um framework difundido mostra como oferecer formas de experiência do usuário mais consolidadas e consistente.

--

--

Citizen Scientist and Software Engineer, looking for the limits beyond mind and machine exploring the world

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store