Tempo de leitura: 12 minutos
Olá desenvolvedores, como prometido, depois do nosso artigo com “12 Frameworks Front-End Parte 1” (que recomendo muito que você leia), estamos com a continuação do artigo com mais 12 Frameworks Front-End Parte 2.
E como os conceitos básicos de um Framework e como ele funciona já foi tudo explicado na parte 1, acredito que não seja necessário repetir aqui o que foi dito. Mas qualquer dúvida, só comentar abaixo do artigo, okay? 🙂
O que nós iremos aprender nesse artigo?
// Frameworks HTML
// 1. HTML5 BOILERPLATE
// 2. Base
// 3. CreateJS
// 4. FireShell
// Frameworks CSS
// 5. Milligram
// 6. Skeleton
// 7. Semantic UI
// 8. Material UI
// Frameworks JavaScript
// 9. Backbone.js
// 10. Knockout.js
// 11. Ember.js
// 12. Riot.js
Preparados para embarcar no universo dos Frameworks? Então vamos lá!
< Frameworks HTML />
Como já falei na parte 1 desse artigo, não vamos entrar em detalhes sobre o que é o HTML para não perdermos o foco do que viemos aprender aqui.
Mas assim mesmo vou deixar aqui abaixo alguns links úteis caso você queira se aprofundar mais sobre HTML.
– Atualmente o HTML 5.2 é a Recomendação do W3C, 14 de Dezembro de 2017.
1. HTML5 BOILERPLATE.
O HTML5 Boilerplate tem ajudado os desenvolvedores a começarem seus projetos baseados em um novo padrão de desenvolvimento, oferecendo um modelo de Front-End profissional que permite que você crie um site rápido, robusto e adaptável com um conjunto de recursos e elementos preparados para o HTML5.
Foi desenvolvido por Paul Irish e Divya Manian e é um projeto Open Source (código aberto) que é perfeito para criar sites suportados por vários navegadores e que também funcionam em navegadores mais antigos, enquanto estiverem suportando HTML5.
Sua vantagem é que ele tem correções CSS para versões mais antigas do IE, bem como as classes IE que se aplicam à tag.
Existem muitos dispositivos no mercado, que pode ser difícil saber por onde começar o desenvolvimento, no entanto, o HTML5 Boilerplate lhe fornece todo o código de esqueleto que você precisa para celulares, tablets e desktops.
Você também pode utilizar o HTML5 Boilerplate com o Initializr, que gera modelos baseados no Boilerplate.
É ideal para: Iniciar qualquer novo projeto que seja cross-browser.
Links úteis:
– Documentação Oficial do HTML5 Boilerplate.
– O Guia Oficial do HTML5 Boilerplate.
– Passo a passo HTML5 Boilerplate.
2. Base
Base é um Framework HTML5 bem leve, com uma boa semântica e de desenvolvimento rápido para a construção de sites.
O sistema grid incorporado permite que você crie grid layouts em fluxo sem ter que adicionar qualquer código, além do mais, os módulos de estilo que estão incorporados permitem que você comece o foco do seu aplicativo com o desenvolvimento e não o design.
A página principal do Base oferece um console de desenvolvimento interativo para testar suas habilidades com o Base e ver o que você já aprendeu.
Ideal para: Quem tem pressa em desenvolver um site.
Links úteis:
– Iniciar com o Base.
– Github do Base.
3. CreateJS
O CreateJS é um conjunto de bibliotecas e ferramentas modulares que permitem um rico conteúdo interativo em tecnologias abertas via HTML5.
Essas bibliotecas foram desenvolvidas para trabalhar totalmente independentes uma da outra, ou combinadas de acordo com suas necessidades.
As quatro bibliotecas são:
EaselJS – biblioteca JavaScript que facilita o trabalho com o elemento HTML5 Canvas.
TweenJS – biblioteca JavaScript para interceder e animar propriedades HTML5 e JavaScript.
SoundJS – biblioteca JavaScript que permite trabalhar de forma fácil e eficiente com o áudio HTML5.
PreloadJS – biblioteca JavaScript que permite administrar e coordenar o carregamento de ativos.
Cada biblioteca pode ser utilizada de forma independente da outra, mas também pode ser combinada com todas ou duas / três, para criar o tipo de efeito necessário no processo de desenvolvimento do aplicativo.
CreateJS é a chave dos quatro frameworks juntos.
Ideal para: O desenvolvimento de anúncios em HTML5.
Links úteis:
– Documentação do CreateJS
– Github do CreateJS
4. FireShell
Criado para quem busca um fluxo de trabalho confiável para seu processo de desenvolvimento Front-End.
Pode-se tirar grande proveito do gerenciador de tarefas e do processador de tarefas embutido do FireShell, que se baseia em um belo Framework HTML5.
Seus recursos são fáceis de integrar e a integração de entrega de conteúdo jQuery, suporta HTML5 Shiv e Modernizr para o desenvolvimento de aplicativos Front-End moderno.
Ele faz seu fluxo de trabalho funcionar com o Grunt.
Experimente o verdadeiro desenvolvimento em tempo real com o recarregamento ao vivo, tenha seu código otimizado com ferramentas automatizadas para otimizar JS e CSS, bem como dezenas de outros recursos que tornarão seu fluxo de trabalho Front-End uma mão na roda, uma vez que você começar a explorar o potencial infinito dos recursos do FireShell.
Ideal para: Desenvolvedores que desejam construir algo simples e sofisticado e que não querem ter muito trabalho com a linha de comando.
Links úteis:
– Documentação do FireShell
– Github do FireShell
{ Frameworks CSS; }
Se você quiser saber mais sobre CSS e quem sabe até se aprofundar mais na linguagem, vou deixar alguns links úteis sobre CSS.
Vamos para os Frameworks CSS agora.
5. Milligram
O Milligram é outro Framework super leve, bem semelhante ao Skeleton que falaremos em seguida.
Quando aplicado o Gzip, ele fica com apenas 2kb e é usado para oferecer aos desenvolvedores um ponto de partida bem simples e flexível.
O sistema de Grid do Milligram é diferente da maioria dos Frameworks, por causa do uso padrão do modulo CSS Flexible Box Layout.
Ele vem com alguns componentes chaves para você iniciar, como botões, blocos, formulários, tabelas, listas, etc.
Ideal para: Quem está desenvolvendo um projeto pequeno que não requer muitos recursos de design e que deseja usar um sistema CSS Flexbox grid.
Links úteis:
6. Skeleton
O Skeleton é um Framework CSS responsivo bem leve que contém nele somente 400 linhas de código.
É um Framework que tem como objetivo incluir apenas os requisitos mínimos para que você comece o desenvolvimento do seu projeto.
Além dele ser responsivo, ele é baseado em um sistema grid de 12 colunas que inclui os elementos essenciais, como listas, botões, formulários, tabelas, etc.
Ideal para: Alguém que está desenvolvendo um pequeno projeto que não exige todos os componentes de estilo de uma grande estrutura.
Links úteis:
– Documentação Oficial do Skeleton.
– Skeleton Boilerplate: PSD para HTML.
– Introdução ao Skeleton CSS Boilerplate.
7. Semantic UI
Esse é um Framework novato que veio para roubar a cena, pois se destaca de varias maneiras e está preparado para se tornar um dos Frameworks Front-End mais populares do mercado.
O principal fator de sucesso que ele tem é a sua simplicidade.
Como ele usa uma linguagem natural, o código é autoexplicativo.
Mesmo aqueles com uma experiência razoável de codificação se sentirão em casa trabalhando com esse Framework.
Outra característica interessante do Semantic-UI é que ele está integrado com uma série de bibliotecas de terceiros.
Sendo assim, provavelmente você não precisará recorrer a outras bibliotecas.
Com isso o processo de desenvolvimento é um pouco mais fácil e bem mais simplificado.
Ideal para: Iniciantes e aqueles que buscam trabalhar com um Framework leve e ágil.
Links úteis:
– Iniciar o Semantic UI
– Github do Semantic UI
8. Material UI
Se você está buscando por um Framework Front-End que facilite a aderência às diretrizes do Google’s material design, você não vai se decepcionar com Material UI.
É, de longe, o Framework mais elaborado para implementar essas diretrizes até o momento, mas há uma ressalva: não é uma boa ideia como ponto de partida para um novo projeto de web design.
Carregado com componentes CSS e material design-compliant components, Material UI é construída em cima do pré-processador LESS.
Por usar os componentes do React, uma compreensão decente do React é uma super vantagem.
Ele é altamente customizável, Material UI inclui estilos que são separados em arquivos individuais, de modo que você possa substituir variáveis LESS CSS, sem afetar os componentes do Framework.
Ideal para: Desenvolvedores que entendem e têm experiência com o React e que precisam de uma maneira fácil de aderir às diretrizes do material design.
Links úteis:
– Iniciando com Material UI.
– Github do Material UI.
Frameworks JavaScript ({ })
Se quiser conhecer um pouco mais a respeito do JavaScript vai abaixo o link da documentação dele.
E agora para finalizar com chave de ouro, vamos concluir com os Frameworks JavaScript.
9. Backbone.js
Construir aplicativos elegantes de página única com as bibliotecas de desenvolvimento web mais tradicionais podem transformar sua base de código em uma salada completa se você não estiver prestando atenção na estrutura e na coalizão do seu código.
O Backbone é construído com a ideia de que todas as funções server-side devem fluir através de uma API , minimizando a quantidade de código que precisa ser composta para alcançar a mesma funcionalidade complexa de frameworks web mais sofisticados.
O Backbone está entre alguns dos Frameworks de desenvolvimento web mais populares para desenvolvedores JavaScript, e em parte por duas razões: é fácil de entender os módulos de usabilidade, bem como a curva de aprendizado é muito direta.
Ideal para: Construção de Aplicativos web com JavaScript.
Links úteis:
– Iniciando o Backbone.
– Github do Backbone.
10. Knockout.js
Os recursos predominantes do Knockout.js são ligações declarativas, atualização automática de UI, rastreamento de dependência e recursos modelos.
Relacione seus elementos DOM existentes com modelos de dados usando sintaxe simples.
Sempre que você atualiza seus modelos de dados, as mudanças dentro da UI são refletidas em tempo real.
Crie conexões entre seus modelos de dados para combiná-los e transformá-los.
Com o suporte de JavaScript nativo, o Knockout tornará incrivelmente fácil integrar-se com qualquer outro framework externo disponível.
Ideal para: Criar aplicativos de página única com links personalizados.
Links úteis:
– Documentação do Knockout.
– Tutoriais interativos.
11. Ember.js
O Framework Ember é um moderno Framework de desenvolvimento web para desenvolvedores com muita ambição.
Conhecido pela sua capacidade de ajudar os desenvolvedores a desenvolver aplicativos complexos large-client-side – a Ember se destaca com a simplicidade e o fluxo de funcionalidades para tornar o desenvolvimento de aplicativos web uma experiência agradável.
Começar com o Ember é rápido e bastante tranquilo, com a vantagem que o mesmo se adapta a qualquer projeto.
O Ember conseguiu ficar longe de termos brilhantes e módulos que tornam os Frameworks mais modernos destacados de toda a multidão de frameworks, em vez disso, a Ember mantém a funcionalidade tradicional, ao mesmo tempo em que oferece poder e centralização que é necessário para a construção de ótimas aplicações, como o fórum de discussão.
Ideal para: Para desenvolvimento de aplicativos web mais complexos.
Links úteis:
– Guia do Ember.js
– Inicie o Ember.js
12. Riot.js
O React definitivamente foi um grande influenciador para a maioria dos frameworks reativos de JavaScript que vemos no desenvolvimento mundial de hoje, e o Riot.js não é uma exceção.
Em suas próprias palavras, Riot.js é uma biblioteca de UI baseada em React que se concentram em micro funções.
Streamdata explorou essa abordagem em grande detalhe em seu blog .
O Riot.js está sendo mantido pelos desenvolvedores no Muut – uma das plataformas de discussão mais proeminentes que vimos até hoje, que também é super interativa, então espere o mesmo tipo de desempenho em seus próprios aplicativos, uma vez que você começar a usar a funcionalidade do Riot em seus projetos.
Ideal para: Desenvolver aplicações baseadas em React.
Links úteis:
– Guia do Riot.js.
– Iniciar com o Riot.js.
Conclusão: 12 Frameworks Front-End para você Brincar, Conhecer e Aprender – Parte 2
Nossa, quanto Framework hein? Que ficamos até em dúvida sobre qual deles escolher e saber qual de fato se encaixa em nossa necessidade.
Por isso é interessante que depois de você ter lido esses dois artigos continue a pesquisar sobre os assuntos que você leu aqui, por isso deixei o link de todos os Frameworks para você analisar mais de perto cada um, ver sua documentação, fazer testes etc.
E é depois de uma análise minuciosa que você vai realmente decidir qual ferramenta irá de fato atender sua necessidade.
Esse artigo te ajudou de alguma forma? Tem alguma sugestão? Fique a vontade para utilizar os comentários logo abaixo.
Deseja aprender com projetos práticos a criar aplicações completas utilizando os mais modernos frameworks do mercado?
