fbpx

Conhecendo a fundo os principais frameworks de front-end

Texto feito em parceria com a Rocketseat, com colaboração do redator Luiz Felipe Buzzi. 

A Rocketseat é uma plataforma de aprendizado contínuo em tecnologia, com foco em desenvolvimento web e mobile. 
Acreditam que não existem limites para o que as pessoas podem imaginar, construir e conquistar quando estão juntas, se importam e buscam o próximo nível. 
Oferecem uma experiência colaborativa, prática e personalizada, para que que as pessoas possam se conectar, compartilhar e ser protagonistas da sua própria evolução.

Trabalhar com desenvolvimento web significa possuir em mãos uma vasta biblioteca de ferramentas e técnicas flexíveis de alto desempenho para a execução de projetos ágeis e eficientes. O mercado está em constante evolução, todos os anos — na verdade, quase todos os dias — somos apresentados a novas tecnologias que preenchem demandas modernas e facilitam o nosso trabalho. No meio disso tudo, a maior dificuldade é tomar a decisão correta: que ferramenta eu preciso dominar?

Pensando nisso, nós criamos este guia detalhado sobre as três frameworks JavaScript mais utilizadas e reconhecidas pelo ecossistema tech para auxiliá-lo na escolha certa.

Vue.js

Apresentação

Vue.js é descrito como um framework progressivo JavaScript, open source, criado para o desenvolvimento de interfaces de usuários (UIs). Atualmente é mantido por seu criador, Evan You, e desde 2014 atualizado por ele e seu time core de desenvolvedores.

Toda sua base foi construída, segundo eles, para ser adotado de forma incremental. A biblioteca central é focada apenas na camada de View, o que torna mais fácil sua integração com outras bibliotecas JS e projetos existentes. Com as ferramentas certas, Vue é descrito como ser “perfeitamente capaz de alimentar aplicações Single-Page sofisticadas”. 

Evan You trabalhou por anos no Creative Labs do Google, e teve acesso ao desenvolvimento com Angular.js, ferramenta de programação do Google — experiência que serviu como modelo para elaboração do Vue, anos depois.  Em uma entrevista para o portal Free Code Camp, Evan disse que na época sentia a necessidade de criar algo funcional e leve, sem complexidades extras: “e se eu pudesse extrair a parte que eu realmente gostava do Angular e construísse algo muito leve e sem todos os conceitos extras envolvidos?”

Nesta campanha oficial do Patreon, para levantar fundos de apoio ao desenvolvimento do framework, o propósito do Vue é descrito como: “um framework front-end simples e naturalmente poderoso, desenhado para ser progressivamente adotado dentro de novos projetos”. Atualmente a campanha já arrecadou 18 mil dólares, com 150 apoiadores.

Mercado de trabalho

No mais recente Survey do Stack Overflow, publicado em Maio de 2021, o Vue se posicionou em 4º lugar entre as web frameworks mais populares no mercado, atrás do Angular, Express, jQuery e React.js.

Na mesma pesquisa, Vue ficou em segundo entre as tecnologias mais desejadas entre devs que atuam no mercado de trabalho. 

Entre as companhias que utilizam, ou utilizaram, o Vue em determinados projetos, temos a própria Netflix, a Xiaomi, a Adobe e outras gigantes no mercado.

Recursos técnicos

Vue é reconhecido por suas vastas bibliotecas e ferramentas que sustentam a construção de largas aplicações single-page. Aqui listamos algumas destacadas por eles.

  • vue-router: solução de roteamento do lado do cliente orientada a componentes para aplicativos de página única;
  • vuex: arquitetura de gerenciamento de estado inspirada em fluxo para aplicações de grande escala
  • vue-loader/vueify: plugins do bundler para habilitar componentes de arquivo único
    • colocar o modelo / estilo / lógica de um componente
    • suporta a mistura de pré-processadores no mesmo arquivo
    • suporta hot-reloading
    • CSS com escopo
  • vue-devtools: Extensão do Chrome para debug de aplicativos Vue.js
    • inspeção da árvore de componentes
    • debug de viagem no tempo com Vuex
  • vue-cli: projeto rápido com configurações de teste e construção prontas para uso
    • hot reload
    • linting
    • teste de unidade
    • teste e2e
    • construção pronta para produção com minimização de ativos e otimização de cache

React

Apresentação

Desenvolvido por Jordan Walker em 2011, o React é um software open source e definido, de acordo com a própria plataforma, como uma biblioteca Javascript destinada ao desenvolvimento de interfaces de usuário. 

Isso significa que essa tecnologia não se trata de um framework, mas se referir a ela como uma ferramenta não é errado.

Quando apresentada desta maneira, pode até não fazer sentido, mas tudo isso pode ser justificado pelo fato de que esta tecnologia não possui muitos códigos prontos, fazendo com que, muitas vezes, não seja possível pensar em soluções apenas com esta lib. 

No entanto, por ser uma biblioteca, é muito menos “engessada” do que outros frameworks, o que dá às pessoas programadoras mais autonomia para traçar as suas próprias soluções, da maneira mais inovadora possível.

Também não podemos dizer que o React se limita ao desenvolvimento web front-end, já que suas versões Native e 360° permitem que os desenvolvedores construam projetos mobile e de realidade virtual, respectivamente. O que pode ser interessante, tendo em vista o crescimento destes setores da tecnologia.

Em 2011, Jordan Walker desenvolveu o React com o objetivo de suprir algumas necessidades relacionadas à interface da timeline do Facebook, onde trabalhava. Com o framework em prática nas redes de Mark Zuckerberg, era hora de disponibilizar o software a toda a comunidade desenvolvedora, e assim foi feito em 2013. 

A partir deste momento, o React passou a ganhar cada vez mais popularidade e abrindo diversas oportunidades no mercado de trabalho em tecnologia.

Mercado de trabalho

De acordo com o relatório da Stack Overflow já apresentado anteriormente, no ano de 2021, o React foi considerado o web framework mais utilizado pelos desenvolvedores, superando o jQuery. 

A pesquisa também abordou sobre os frameworks nos quais as pessoas desenvolvedoras mais desejam trabalhar e, neste quesito, o React é considerado o mais querido, onde um em cada quatro talentos de tecnologia querem trabalhar com esta tecnologia, seguido pelos frameworks Vue, Django e Angular.

Por ser um software desenvolvido e aplicado no Facebook e outras redes da mesma empresa, como o Instagram, muitos negócios fazem uso do React em seus produtos, como o Discord, Tesla, Airbnb, Netflix, Paypal e até mesmo veículos de notícias como BBC News, CNN e Globo.

Recursos técnicos

Seguindo os primeiros passos de como utilizar a framework, React é descrito como uma ferramenta que possibilita “criar UIs interativas sem dores no desenvolvimento”. Aqui vamos listar alguns recursos técnicos que servem como base inicial para entender o diferencial da tecnologia. 

Lembrando que você pode conferir todos os principais conceitos neste guia oficial.

Componentes (funcionais e de classe): Funções JavaScript úteis para dividir a UI em partes independentes e poder trabalhar nelas de forma isolada. 

DOM Virtual: Seguindo a definição do próprio React, VDOM é um conceito de programação base onde uma representação ideal, o virtual, da UI é mantida em memória e sincronizada no DOM real por uma biblioteca.

JSX: Uma extensão de sintaxe para JavaScript. É recomendado utilizar JSX para descrever como a UI deveria parecer.

React Hooks: Adição moderna no React, implementada na versão 16.8 da tecnologia, Hooks permitem que você use o state e outros recursos do React sem escrever uma classe.

Angular

Apresentação

Do Google Feedback para o mundo, o Angular consiste em um framework JavaScript de software open source, destinado ao desenvolvimento de aplicações web de página única (o que conhecemos como Single Page Applications – SPA), mas que também possibilita a construção de menus dinâmicos.

Misko Hevery e Adam Abrons desenvolveram esta tecnologia em 2009 e lançaram a sua primeira versão no ano de 2012. Apesar de ser uma ferramenta de JavaScript mais antiga do que as duas outras apresentadas neste artigo, uma reformulação completa no Angular fez com que ele se colocasse à altura tanto do Vue.js, como do React.

Neste framework, os códigos são escritos em TypeScript e, posteriormente, compilados em JavaScript para que sejam executados nos navegadores. Além disso, conta também com uma combinação bi-direcional que une JavaScript e HTML, poupando muito tempo das pessoas programadoras enquanto estão desenvolvendo. 

Engenheiros do Google, Hevery e Abrons implementaram a tecnologia, pela primeira vez, na empresa através do Google Feedback buscando reduzir a quantidade de linhas de código do projeto em um período de duas semanas. Mesmo tendo ultrapassado o prazo, o objetivo foi alcançado e o framework lançado, revolucionando o desenvolvimento de aplicações web.

O Angular que conhecemos hoje, não é o mesmo desenvolvido pelos engenheiros em 2009, já que, para acompanhar a evolução da tecnologia, ele precisou passar por diversas reformulações e, assim, atender às necessidades de quem trabalha com programação. A segunda versão do Angular, sobre a qual estamos falando neste artigo, foi lançada em 2016 e desde então, recebe constantes atualizações.

Mercado de trabalho

Diversas empresas estão incluindo o Angular em seus projetos, fazendo com que profissionais com experiência nesta tecnologia encontrem excelentes oportunidades no mercado de tecnologia. 

De acordo com a Stack Overflow, neste ano de 2021, o Angular assume a posição de quarto framework mais utilizado entre pessoas desenvolvedoras, ficando atrás apenas do React.js, jQuery e Express, além de estar entre os dez frameworks mais queridos por programadores, assim como o React e o Vue.js.

Alguns dos negócios que utilizam o Angular em seus softwares são a Udemy, Paypal, o Telegram, a Nike e, é claro, o Google.

Recursos técnicos

Angular usa conceitos técnicos semelhantes e comparáveis com os frameworks React e Vue, com pequenos diferenciais. Aqui vamos listar alguns que são introdutórios e podem dar conhecimento sobre a arquitetura da ferramenta.

Lembrando que você pode acessar aqui o guia detalhado sobre todo o ecossistema Angular.

Componentes: Principais blocos de desenvolvimento em Angular. Cada bloco, ou componente, utiliza: um template HTML; uma classe Typescript que defina um valor; CSS que define como o template vai ser utilizado no componente; adicionalmente estilos em CSS para compor o template;

Templates: Em poucas linhas, seguindo a própria definição da tecnologia, template são grandes pedaços em HTML

Diretivas : Classes que adicionam comportamentos extras em elementos da aplicação Angular.

Injeção de dependências: Serviços ou objetos que uma classe precisa para performar uma função.

Conclusão

A pergunta que você deve estar se fazendo agora é: afinal, qual dos três frameworks é o melhor para se trabalhar? 

E a resposta é, simplesmente, todos. E com isso, quero dizer que não existe o melhor e o pior framework, já que sempre haverão pontos positivos e negativos em cada um deles. 

Nem sempre uma única tecnologia será o suficiente para trabalhar em um projeto, e é por esse motivo que bons profissionais possuem o domínio de todas elas. Você pode não ser um grande especialista nos três frameworks, mas precisa garantir que, com os seus conhecimentos, conseguirá desenvolver bons projetos e, assim, se tornar um talento de destaque no mercado de tecnologia.

Procurando por oportunidades de trabalho em desenvolvimento front-end? Crie sua conta em nossa plataforma e seja conectado a startups e scale-ups do Brasil e do mundo.

Públicações relacionadas

5 Podcasts de Tecnologia para desenvolvedores
artigo com dicas de podcast de tecnologia para desenvolvedores

Elencamos neste conteúdo, cinco podcasts de tecnologia para você complementar seus estudos na área de desenvolvimento de software. Confira! Profissionais Ler o artigo completo

Angular: um framework de destaque no desenvolvimento front-end
trabalhando com framework angular em desenvolvimento web

Conheça o framework Angular, que está fazendo sucesso entre desenvolvedores, e entenda quais características tem para tornar o desenvolvimento de Ler o artigo completo

NestJS: introdução e aplicação de CRUD usando MongoDB
aplicação de NestJS

Alexander Yokogawa, desenvolvedor da EZ.devs, introduz o assunto NestJS e mostra como é possível desenvolver a base de aplicações back-end Ler o artigo completo

Node.js: por que esta tecnologia está crescendo?
node.js - notebook em mesa com tela mostrando código de programação

Noje.js está ganhando cada vez mais espaço no mercado e nesse artigo apresentamos alguns dos motivos para esse crescimento.

Veja todos os nossos artigos