12 Frameworks Front-End para você Brincar, Conhecer e Aprender – Parte 1

Tempo de leitura: 14 minutos

Hoje em dia a grande parte dos desenvolvedores já usufruem das vantagens dos Frameworks Front-End, principalmente quem trabalha com um número grande de projetos.

E com toda a certeza, a facilidade de reutilizar códigos com poucas modificações ajuda muito a pouparmos tempo, além de dar ao desenvolvedor uma caixa de ferramentas que supera o que é fornecido pela linguagem em si.

Em muitos casos inclusive o conceito de Framework parece muito confuso, quando comparado com outras formas de se aproveitar o código em vários projetos, como as classes e orientações a objetos por exemplo.

A grande diferença dos Frameworks é sua forma de operar, que é bem mais profunda, porém, com vantagens e desvantagens.

E é justamente por isso que vamos lhe explicar detalhadamente o que é um Framework e lhe trazer nessa primeira parte 12 opções com os melhores Frameworks Front-End (HTML, CSS e JavaScript)

O que iremos aprender nesse artigo?

// O que é um Framework.
// Como um Framework Funciona.
// Para que serve um Framework?

// Frameworks HTML

// 1. Foundation
// 2. Sencha Ext JS
// 3. Monaca
// 4. Montage

// Frameworks CSS

// 5. Materialize
// 6. BootStrap
// 7. Pure
// 8. Susy

// Frameworks JavaScript

// 9. Angular.js
// 10. React.js
// 11. Vue.js
// 12. Meteor.js

Preparado para conhecer e entender os conceitos por traz de um Framework? Vamos lá então.

O que é um Framework?

o que é um framework

O Framework tem como prioridade prover um template de base com inúmeras funções para o desenvolvedor, justamente para o desenvolvedor não perder tempo reproduzindo funções desnecessárias em seus projetos.

Podemos fazer uma comparação para você compreender melhor.

Imagine uma caixa de ferramentas que ao invés de guardar martelos, chaves de fendas e alicates, há uma base para validação de campos, formulários de logins, conexão com o banco de dados etc.

Olhando por esse prisma de tentar reduzir custos e elevar a produtividade, o uso de Frameworks tem se sido cada vez mais propagado entre os desenvolvedores.

Como um Framework funciona?

como um framework funciona

Existe uma grande variedade de parâmetros e funções que dão vida a um Framework, o que possibilita ao desenvolvedor realizar customizações no projeto ao qual está trabalhando.

Para realizar isso, são utilizados os fundamentos da orientação a objeto, como o polimorfismo, abstração e a herança.

Essa integração entre vários tipos de função de um Framework é uma de suas principais características.

O que significa que as ferramentas são desenvolvidas de forma aberta, para poder se encaixar em vários tipos de situação.

Para que serve um Framework?

para que serve um framework

Talvez você ainda esteja um pouco confuso sobre a utilidade de um Framework, calma, pretendo esclarecer tudo pra você.

É recomendado a utilização do Framework quando você for desenvolver uma aplicação, onde precisa-se realizar repetitivas tarefas ou que sejam comuns em vários sistemas.

Por que perder horas e horas desenvolvendo e testando um sistema de validação de dados se já existe uma ferramenta pronta e afiada que faz isso, e que já foi testada por diversos desenvolvedores?

Os diversos desenvolvedores são comunidades que estão por trás da criação das diversas ferramentas, pois dificilmente você verá um Framework de qualidade sendo desenvolvido por uma única pessoa, sempre haverá uma grande comunidade que contribui para o seu desenvolvimento.

Mas por enquanto estamos só na teoria, e quando não se vai para a pratica, muitos conceitos ficam bem abstratos e vagos se não praticarmos, por isso convido você para conhecermos os 12 Frameworks Front-End mais utilizados hoje em dia pelos desenvolvedores.

E com as referencias que vamos lhe passar você já pode começar agora mesmo a ler a documentação dos mesmo, entender como funciona, e já colocar a mão na massa. Vamos conhecê-los?

< Frameworks HTML />

Bem, nesse artigo não vamos entrar em detalhes sobre o que é o HTML e como utiliza-lo, se não perdemos o foco do que realmente viemos falar aqui nesse artigo, que foi sobre os Frameworks Front-End, mas vou deixar aqui abaixo alguns links úteis caso você queira se aprofundar mais sobre HTML.

Dominando o HTML e CSS.

Atualmente o HTML 5.2 é a Recomendação do W3C, 14 de Dezembro de 2017.

HTML Básico.

1. Foundation.

foundation framework

O Foundation foi desenvolvido pela empresa de design Web Zurb, e é um Framework Front-End muito avançado, muito bem visto pelo mundo corporativo, ideal para o desenvolvimento de sites mais robustos e ágeis.

Ele é utilizado em sites como a Adobe, Facebook, Mozilla, e além de ser mais complexo que os outros Frameworks não o recomendamos para iniciantes.

Mas é um Framework muito rico em recursos e que vale a pena conhecê-lo mais de perto.

Suporta aceleração GPU que serve para criar animações mais suaves e rápidas, e o Fastclick.js para renderização rápida nos dispositivos móveis.

O Framework é executado no pré-processador SASS e leva incluso o atributo de intercâmbio de dados que foi desenvolvido pela própria Foundation, que permite carregar HTML de forma mais leve quando se trata de dispositivos móveis e uma versão mais pesada quando se trata de telas maiores.

É Ideal para: Desenvolvedores mais experientes e que tenham principalmente a preocupação em desenvolver sites rápidos, atraentes e flexíveis.

Links úteis:

– Documentação Oficial da Foundation: Iniciando.
Foundation: Modelos HTML.

2. Sencha Ext JS.

senha ext js framework

O Sencha Ext JS é bem interessante devido a sua capacidade de desenvolver aplicações Web Multiplataformas.

O Ext JS aproveita os recursos do HTML5 em navegadores mais modernos.

Ele possui mais de 115 componentes de UI de alto desempenho, pré-testados e integrados, incluindo calendário, grids, gráficos e muito mais.

O pacote Ext JS Grid e Advanced Charting pode lidar com milhões de registros com facilidade.

O Framework inclui um pacote de dados robusto que pode consumir dados de qualquer origem Back-End.

Com o adaptador Srima Pivot Grid e D3, as corporações podem adicionar capacidades de visualização e análise de ponta para seus aplicativos web.

É ideal para: Desenvolver aplicações para Desktops, tablets e smartphones.

Links Uteis:

Instalação do Ext JS

Guia Introdutorio

3. Monaca.

monaca framework

O Monaca é outro Framework muito poderoso para o desenvolvimento de Aplicativos Móveis híbridos Multiplataformas.

O Cordova e o PhoneGap são nomes bastantes conhecidos quando se fala em desenvolvimento de aplicativos móveis híbridos, e a função do Monaca é justamente ajuda-lo a reunir os dois em um ambiente simples baseado em nuvem, e oferecem a você recursos e ferramentas para otimizar sua experiência de desenvolvimento.

As três principais características do Monaca.

Como foram descritas pelos próprios desenvolvedores, a primeira é a capacidade de desenvolver na nuvem, para utilizar todos os recursos (design, desenvolvimento front-end e back-end, testing, debugging, building), ou integrados como uma plataforma de desenvolvimento de aplicativos full-fledged, ou para usá-los separadamente, sempre que necessário, e a terceira é a capacidade, como já mencionamos, de combinar Monaca com qualquer um dos seus Frameworks favoritos, dando-lhe o poder da nuvem sobre todas as suas necessidades de desenvolvimento.

É ideal para: Desenvolver Aplicativos Móveis Híbridos.

Links úteis:

Documentação oficial do Monaca.

4. MontageJS

Montage framework

O Montage é um Framework HTML5 Open Source (Código Aberto) para o desenvolvimento de aplicativos de página única.

Esta biblioteca de JavaScript usa uma vinculação declarativa que facilita você manter os dados da sua aplicação e UI em sincronia.

É ideal para: Criar aplicações em uma única página (SPAs)

Links úteis:

Documentação Oficial do MontageJS
Iniciando com MontageJS

{ Frameworks CSS. }

Se você quiser saber mais sobre CSS e quem sabe até se aprofundar mais na linguagem, vou deixar algumas documentações para você acessar:

CSS Tutorial.

Introdução ao CSS.

Vamos conhecer agora alguns dos Frameworks CSS mais utilizados hoje em dia.

5. Materialize.

materialize framework

O Framework de desenvolvimento Front-End responsivo Materialize também incorpora as especificações do Google’s material design e é carregada com botões, ícones, cards, formulários e outros componentes prontos para serem utilizados.

É disponibilizado em uma versão padrão e em uma que é executada no SASS.

Materialize inclui um conveniente recurso de IZ column grid (grade de coluna IZ) que pode ser usado para os layouts do seu site.

Também é carregado com CSS que está pronto para usar no material design, como: sombras, tipografia, cores e muitos outros recursos.

As características adicionais incluem animação com efeitos ondulatórios, menus móveis drag-out (arrastar), SASS mixins e muito mais.

Ideal para: desenvolvedores menos experientes que precisam de orientação sobre as especificações do Google’s material design.

Links úteis:

Documentação Oficial do Materialize
Github do Materialize

6. Bootstrap.

bootstrap framework

Não poderíamos deixar de fora em hipótese alguma o nosso querido Bootstrap, um dos mais populares Frameworks Front-End do mercado.

Ele foi desenvolvido pelos desenvolvedores do Twitter e lançado inicialmente em 2011, é o Framework Open Source (código aberto) mais utilizado no mundo.

Como qualquer Framework Front-End eficaz, o Bootstrap inclui vários componentes CSS, HTML e JavaScript.

Adota os padrões do web design responsivo, permitindo que você desenvolva sites responsivos de todas as complexidades e tamanhos.

Como é atualizado constantemente, o Bootstrap normalmente inclui os melhores e mais recentes recursos.

Um exemplo disso foi a adição de temas que atendiam as diretrizes do Google’s material design pouco depois de serem publicados, e também foi atualizado para utilizar o SASS como um pré-processador CSS.

Ideal para: Desenvolvedores iniciantes e aqueles que preferem um framework front-end robusto.

Links úteis:

Documentação Oficial do Bootstrap.
Começando com o Bootstrap.
Open Source, Temas Twitter Bootstrap Gratuitos

7. Pure.

pure.css framework

Criado pela equipe de desenvolvedores do Yahoo, ele vem com uma leve serie de módulos CSS que podem ser utilizados praticamente em qualquer projeto.

Com o Pure você pode facilmente criar botões, grids, tabelas, menus e vários outros recursos responsivos.

Por ser 100% baseado em CSS, ele não suporta JavaScript ou Plugins JQuery.

O mesmo quando minificado e comprimido com o Gzip, fica com apenas 4,5kb, tornando-se um dos Frameworks Front-End mais leves e simples.

Como resultado da sua simplicidade é ideal para o desenvolvimento de sites mobile.

Ideal para: Desenvolvedores que focam na criação de sites móveis rápidos e flexíveis.

Links úteis:

Github do Pure
Iniciando o Pure

8. Susy

suzy framework

Alguns desenvolvedores falam que o Susy não chega a ser um Framework Front-End pelo fato de estar focada em resolver problemas de layouts mais complexos.

Muitos até classificam o Susy como um fabricante de Grids mais do que qualquer outra coisa, mas pode ser uma ferramenta indispensavel para você que tem a necessidade de fazer um layout mais especializado.

O Susy vem armado com mixins que podem ser usados para criar grades.

O Framework faz todos os cálculos necessários para você, que economiza muito tempo e esforço.

Com o Suzy você pode criar qualquer tipo de grid layout que deseje.

Ideal para: Qualquer desenvolvedor que tenha como requisito a criação de layouts únicos ou especializados.

Links úteis:

Documentação Oficial do Suzy3

Artigos

Frameworks JavaScript ({ })

Se quiser conhecer mais a respeito do JavaScript vai abaixo o link da documentação dele.

Documentação JavaScript

E agora para finalizar o nosso artigo com os Frameworks Front-End vamos listar os Frameworks JavaScript para fechar com chave de ouro.

9. Angular.js

angular.js framework

Angular.js é muitas vezes declarado como um Framework MVW (Model-View-Whatever) e entre os principais benefícios para projetos corporativos e também pessoais são: produção rápida de código, testes fáceis de qualquer parte do aplicativo e dados bidirecionais vinculativo (as alterações no Back-End são imediatamente refletidas na UI).

Desde a sua libertação, o seu ecossistema foi além da imaginação.

Por enquanto, é gentilmente chamado de Framework JS mais utilizada para desenvolvimento de SPAs (Single-Page Applications) e possui a maior comunidade de desenvolvedores.

Angular2

Vem com uma incrivel lista de recursos que permitem construir tudo, desde web até desktop e mobile.

O Framework é construído com o TypeScript da Microsoft com o objetivo de tornar o JavaScript mais ágil e atraente para as grandes empresas.

O ng2 possui uma arquitetura baseada em componentes, DI melhorada (dependency injection), serviço de registro eficiente, comunicações intercomponentes e muito mais.

Ideal para: Aplicativos corporativos ou para ambientes de programação rigorosos com padrões elevados de legibilidade de código.

Links úteis:

Documentação Oficial do AngularJS

10. React.js

react.js framework

Apesar de o React ser considerado mais biblioteca do que um Framework JS, ele está por trás das interfaces de usuários do Facebook e Instagram, mostrando sua eficiência em aplicações dinâmicas com um alto tráfego.

E hoje é visto como o Framework JS que mais rápido tem crescido. Só no Github existem milhares de colaboradores.

No padrão MVC (Model-View-Controller), o React.js atua como “V” e pode ser integrado de maneira uniforme com qualquer Framework.

Devido ao uso de virtual DOM, ele oferece um excelente desempenho, comparado ao Angular 1.x.

Além disso, os componentes React podem ser desenvolvidos e reutilizados entre aplicativos ou mesmo transferidos para uso público.

Ideal para: Desenvolvimento de aplicativos e soluções complexas de software.

Links úteis:

Documentação Oficial do React.
Github do React.

11. Vue.js

vue.js framework

O Vue 2.0 foi despertado em 2016 e levou o melhor de Ember, React e Angular, colocando tudo isso em um pacote acessível.

É provável que seja mais rápido e mais flexível, comparado ao React e Angular 2.0.

Aprofundando-se mais, o Vue.js oferece conexão de dados bidirecionais (visto em AngularJS), renderização server-side (como em Angular2 e ReactJS), Vue-cli (ferramenta scaffolding para inicialização rápida) e suporte opcional JSX.

Seu fundador afirma que o Vue 2 é um dos frameworks mais rápidos em tudo.

Se você deseja construir soluções multiplataforma de forma rápida, Vue.js é a escolha certa.

Pode também se tornar uma base sólida para aplicações de pagina única com alta qualidade (SPAs).

Ideal para: Desenvolver soluções multiplataforma de forma rápida.

Links úteis:

Guia do Vue.JS
Guithub do Vue.JS

12. Meteor.js

meteor.js framework

O Meteor está entre os mais populares Frameworks JavaScript, e vem bem equipado com toneladas de recursos para o Desenvolvimento Back-End, renderização de Front-End, gerenciamento de banco de dados e lógica de negócios.

Desde o seu lançamento em 2012, seu ecossistema cresceu de forma assombrosa em um curto período de tempo.

Esta plataforma Full-Stack permite o rápido desenvolvimento de aplicações web e móveis de ponta a ponta em JavaScript puro.

Devido ao Framework modular, todos os pacotes e bibliotecas podem ser usados ​​no ritmo certo.

Em termos de desempenho, todas as mudanças no banco de dados são imediatamente transmitidas para a interface do usuário, sem perder tempo.

O MeteorJS abrange todas as fases do ciclo de desenvolvimento de software e cuida de processos globais como vinculação, concatenação de arquivos e outros.

Atualmente tem desenvolvido aplicativos em tempo real para empresas como IKEA, Mazda e muitas outras.

É ideal para: Desenvolvimento de aplicações web e móveis.

Links úteis:

Guia, documentação, tutorial.
Guithub do Meteor.

CONCLUSÃO: 12 Frameworks Front-End para você Brincar, Conhecer e Aprender – Parte 1

conclusao frameworks front-end

Bom, chegamos ao final da parte 1 do artigo sobre Frameworks Front-End, onde nós desbravamos vários dos Frameworks mais utilizados e estudados do mercado.

Como você já deve saber, existem muito mais Frameworks Front-End do que os listados aqui e por isso dividimos esse artigo em 2 partes para não ficar uma leitura muito extensa e pesada.

Acredito que as informações aqui passadas foram bastante úteis apesar de resumidas.

Sentiu falta de alguns Frameworks Front-End? Quer dar a sua opinião ou tirar alguma duvida sobre algum Framework?  Sinta-se a vontade para deixar o seu comentário e logo logo estarei lhe respondendo.

Comentários encerrados.