Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
12 minutos de leitura
Autor(a)
Desenvolvedor Full-Stack que puxa pro lado do Front-End. Estudante de Engenharia de Software cansado. Entusiasta em UX/UI Design.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Como a WAI-ARIA pode tornar as aplicações acessíveis
Ler mais
Boas práticas com JavaScript e jQuery: código não-obstrusivo
Ler mais
Desenhando a logo da Caelum com CSS
Ler maisO Front-end nunca esteve tão aquecido, e isso se reflete nos principais frameworks disponíveis: Angular, React e Vue.js, mas qual escolher? Tudo depende do conhecimento prévio.
Uma progressão natural na carreira Front-end é ir de HTML, CSS e JavaScript puros para abstrações, como frameworks. Essas três linguagens que compõem a web foram desenvolvidas em outra época, um passado em que a web era muito diferente.
Os frameworks são soluções desenvolvidas por equipes que enfrentaram problemas com o uso, principalmente, do JavaScript puro para trabalhar com aplicações web complexas. Com empenho, conhecimento técnico e investimento, qualquer pessoa pode desenvolver um framework, principalmente com o auxílio das comunidades de Código Aberto (Open Source).
Frameworks não são ferramentas mágicas que geram apreensão. Entender que algumas pessoas simplesmente criaram uma ferramenta para facilitar o desenvolvimento é o primeiro passo para entender um framework.
A maior parte do que é desenvolvido em front-end se relaciona com:
O JavaScript faz essas duas coisas muito bem, o problema é que usá-lo por si só não é escalável a longo prazo. Gerenciar tudo pode ficar complicado e, se você precisa fazer a mesma coisa em diferentes aplicações, é inviável.
Qual a melhor forma para aprender Framework? Com Alberto Souza | #HipstersPontoTube
https://www.youtube.com/watch?v=kL7c6YWavok
Frameworks focam em criar aplicações que:
Aprender ou trabalhar com um framework não é limitante. Em uma carreira longa é normal trabalhar com mais de uma tecnologia. Afinal, essas ferramentas possuem conceitos e objetivos similares, mesmo que se diferenciem em outros pontos.
O Angular está fundamentado em Orientação a Objetos, um paradigma de programação expressivo, testado e usado universalmente. Com isso, o framework trabalha com uma arquitetura similar ao MVC.
https://www.youtube.com/watch?v=LFlNU30u7d8
Para quem nunca viu MVC, é importante entender que ele é um padrão de projeto baseado em modelos (os formatos dos dados), views (a representação dos dados que no front-end pode ser relacionada ao HTML) e controladores (entidades que funcionam como "gerentes", controlando os comportamentos baseado no que é solicitado).
No Angular trabalhamos com componentes que são, essencialmente, uma mistura de TypeScript e HTML que resulta em um código independente, isolado e reutilizável. Pense em componentes como elementos HTML com super-poderes. Um botão personalizado, uma tabela, um cabeçalho, e várias estruturas comuns podem ser componentes.
A síntese do MVC com componentes resulta na seguinte estrutura:
Design Systems, Angular e open source na TOTVS – Hipsters On The Road #21
spotify:7toO3SDOtcX2EVwcdH5sFm:episode
Um componente de botão pode conter:
<button [title]="titulo" (click)="aoClicar()">
<ng-content></ng-content>
</button>
No template podemos misturar HTML com algumas propriedades do próprio Angular: diretivas, atributos que implementam comportamentos, e ligação de dados, maneiras de passar dados dinâmicos como valores de atributos e conteúdo.
A propriedade title do botão, por exemplo, pode receber um valor dinâmico (variável), para isso usamos os colchetes ([title]).
Eventos podem receber métodos e são marcados com parênteses ((click)). Já <ng-content> é um elemento especial do Angular que não possui nenhuma representação visual, mas serve para criar trechos HTML dinâmicos. Nesse caso, será substituído pelo que for passado dentro do componente (processo chamado de Projeção de Conteúdo).
O componente é um arquivo à parte. É uma classe que usa TypeScript. Esse arquivo é carregado de código adicional para funcionar. Então vamos primeiro focar no essencial (que por si só não é funcional):
export class BotaoComponent {
titulo = '';
aoClicar = () => {};
constructor() {}
ngOnInit() {}
}
Temos uma classe com o nome BotaoComponent, duas propriedades e dois métodos. Tanto a classe, quanto às propriedades e os métodos possuem comportamentos especiais.
Usando o Angular, teremos o seguinte:
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-botao',
templateUrl: './botao.component.html',
styleUrls: ['./botao.component.css'],
})
export class BotaoComponent implements OnInit {
@Input() titulo = '';
@Output() aoClicar = new EventEmitter<string>();
constructor() {}
ngOnInit() {}
}
@Input, @Output e @Component são decorators do TypeScript e adicionam comportamentos aos dados que os usam. O @Component recebe a configuração do componente. Perceba o selector (como o componente será referenciado), e os caminhos para o template e estilos.
O @Component também pode receber o código HTML diretamente, como string, mas separá-los é mais legível.
Além da classe principal e do template, também temos arquivos de testes, auxiliares e módulos. Dentre estes, os módulos são importantes no Angular, pois componentes não importam outros componentes diretamente, mas importam via módulos.
Angular é uma plataforma de desenvolvimento completa que oferece tanto uma abstração para seu código quanto uma caixa de ferramentas. Formulários, rotas, classes comuns para o desenvolvimento (como Services), entre outros estão disponíveis em um projeto Angular sem nenhuma instalação adicional.
O framework incentiva a criação de código robusto (e consequentemente extenso), o Angular CLI oferece uma maneira prática de criar componentes, módulos, serviços e outros em um único comando.
Pré-requisitos:
Pontos positivos:
Pontos negativos:
Casos de uso:
spotify:6IvpefCYYRyZar1vhWRMWn:episode
React é uma ferramenta popular para começar no universo de frameworks, mas não é um framework. Isso significa que, diferente de Angular, não possui ferramentas próprias que juntas oferecem 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. A biblioteca auxiliar React DOM permitindo a inserção desses elementos em páginas web.
Bibliotecas externas criadas por pessoas ativas na comunidade complementam as funcionalidades, adicionando a capacidade de criar Single-Page Aplications (SPAs), com React Router, por exemplo. Além disso, ferramentas como Create React App, e o framework baseado em React Next.js, permitem criarmos projetos com todas as ferramentas e estruturas comuns no desenvolvimento.
O que é uma Single-Page Application? (SPA) #HipstersPontoTube
https://www.youtube.com/watch?v=opxYpCKzlLk
React é mais ligado à programação funcional. Dessa forma, as boas práticas de React são bem diferentes de boas práticas de Angular. Um dos principais pontos é que React não possui uma divisão clara de partes de um componente.
Possui uma estrutura mais simples: um componente pode ser tanto uma classe como uma função. Se Angular é semelhante ao MVC, React foca apenas no "V" (view).
Geralmente, trabalhamos com funções que retornam um código especial, uma linguagem de marcação: o JSX, uma extensão do JavaScript que adiciona a sintaxe do HTML, permitindo que páginas dinâmicas sejam criadas facilmente.
https://www.youtube.com/watch?v=6IuQUgeDPg0
Um componente React pode ser pequeno graças ao JSX. Teremos uma função chamada Botao e a maior parte do seu dinamismo é resultante do parâmetro props (nome que vem de propriedades).
Todo componente React pode receber propriedades que se assemelham a atributos do HTML. Além disso, children é um atributo especial que contém o conteúdo que foi passado dentro do componente (nesse caso, será o texto do botão).
No JSX, JavaScript pode ser passado dentro de chaves ({}) e será interpretado.
export default function Botao(props) {
return (
<button title={props.titulo} onClick={props.aoClicar}>
{props.children}
</button>
);
}
Apesar do componente ser estruturado com JSX, isso é apenas um facilitador para a escrita do código. O código é traduzido para JavaScript puro quando processado.
Manipular a DOM é uma ação feita puramente com código JavaScript e essa é uma característica importante do React: pouca sintaxe própria significa que muito do trabalho é feito em JavaScript puro, e assim um conhecimento avançado da linguagem facilita o trabalho.
Por ser flexível, ainda há muito debate de como é a estrutura de uma aplicação React, quando deve se dividir código em componentes e quais ferramentas usar para cenários como formulários. Como iniciante, é importante não se confundir com isso, pois é normal encontrar arquiteturas diferentes.
Ciclo de vida de componentes React.js | #AluraMais
https://www.youtube.com/watch?v=jK0uiQ1ZQQQ
Pré-requisitos:
Pontos positivos:
Pontos negativos:
Casos de uso:
https://www.youtube.com/watch?v=k77WZrvuDQU
O Vue.js foi inspirado em versões iniciais do Angular, e possui vários pontos semelhantes na forma de se trabalhar, principalmente com a manipulação da DOM, pois ambos usam diretivas e ligações de dados. Além disso, o Vue também separa a estrutura de um componente em template, lógica interna e estilo, mas a boa prática não é separar em arquivos diferentes, como o Angular, nem misturar template e lógica, como React.
spotify:7zpYFZjrcnpZFAUqVyOnPG:episode
Um arquivo .vue possui três seções:
O que for definido no script pode ser usado no template para manipular a DOM, e vice-versa.
Essa estrutura não é obrigatória e, como React, Vue é flexível quanto a isso porque trabalha muito próximo da pessoa que desenvolve, permitindo que componentes sejam criados e manipulados pelas próprias funções.
Similar ao Angular, um componente pode receber propriedades (props, como no React) usando diretivas. Entretanto, no Vue temos sintaxes menores, como os dois pontos : que permite atribuir valores dinâmicos a propriedades/atributos. No caso dos eventos, podemos usar o arroba (@) e passar uma função para ser executada.
Temos elementos especiais que podem ser usados para manipulação, como o slot, que tal como o ng-content, faz a projeção do conteúdo passado dentro do componente quando usado.
A configuração é feita dentro do script, exportando um objeto com alguns atributos, como o name e as props.
<template>
<button :title="titulo" @click="aoClicar">
<slot></slot>
</button>
</template>
<script>
export default {
name: "Botao",
props: {
titulo: String,
aoClicar: Function,
},
};
</script>
<style>
</style>
O Vue possui várias características de Angular e de React, e é uma excelente opção para quem não tem os pré-requisitos de Angular, mas também não se interessa pelo estilo de desenvolvimento que o React oferece.
A curva de aprendizado é intermediária e o framework oferece algumas soluções próprias, mas também deixa muitas responsabilidades para outras bibliotecas. A própria documentação do Vue.js define esse comportamento como "incrementável", enquanto define o Vue como um "framework progressivo", permitindo que se comporte como biblioteca ou framework, dependendo da necessidade. Bibliotecas oficiais, como Vue Router (rotas) e Vuex (gerenciamento de estado), também estão disponíveis.
Similar ao React, essa flexibilidade também trouxe frameworks baseados na biblioteca que implementam funcionalidades comuns em projetos. O principal framework baseado em Vue, o Nuxt, possui funcionalidades como rotas e renderização do lado do servidor (SSR) implementadas e prontas para o uso, similar ao Next, baseado em React.
Pré-requisitos:
Pontos positivos:
Pontos negativos:
Casos de uso:
https://www.youtube.com/watch?v=juJcR4-Mrss
Escolher um framework ou biblioteca é importante para dar continuidade ao desenvolvimento front-end, mas não precisa ser uma tarefa estressante. Experimentar faz parte, e as ferramentas estão prontas para isso com documentações completas.
Muitas vezes o conhecimento é transferível e conceitos presentes em um framework podem ser aplicados em outro.
O importante é buscar a tecnologia que traga mais conforto se encaixe melhor com os seus pré-requisitos e objetivos, e aprender a fundo o seu funcionamento.
React pode ser confuso para quem vem do back-end, enquanto Angular pode ser mais claro. Por outro lado, sem os pré-requisitos de Angular a pessoa pode se sentir perdida com a quantidade de informações, nesse caso React e Vue oferecem trilhas mais flexíveis.
Vale ressaltar que a diferença entre as aplicações feitas com essas tecnologias não são expressivas do ponto de vista do cliente ou do usuário. Por isso, a questão é mais sobre qual é o melhor framework para o contexto do que qual é o melhor.
Mergulhe aprendendo alguma dessas tecnologias de Front-End com a Alura:
Avalie este artigo
