Quer sair da complexidade do React? Experimente a estrutura progressiva do Vue

Com o desenvolvimento front-end, é melhor começar de forma simples e construir sobre HTML, CSS e JavaScript padrão? Ou você precisa de uma estrutura de canivete suíço, como Next.js ou Angular, com funcionalidades integradas como renderização do lado do servidor (SSR), roteamento e navegação e formas mais complexas de gerenciamento de estado?

Claro, depende da escala do site que você está construindo. Mas se você é um usuário Vue.js, já é um defensor de começar de forma simples. Se precisar de funcionalidades mais complexas, você poderá adicioná-las usando configurações adicionais ou ferramentas de terceiros. Por exemplo, existe uma opção para implementar SSR com Vue usando Node.js, ou você pode usar Nuxt.js (uma estrutura construída sobre Vue.js). Na verdade, Nuxt.js foi projetado especificamente para lidar com SSR e outras funcionalidades avançadas.

Estruturas Progressivas

Em sua página inicial, o Vue.js se posiciona como “a estrutura JavaScript progressiva”. A palavra “progressivo” faz um trabalho pesado, mas em poucas palavras significa que o Vue pode ser usado para uma variedade de casos de uso e é (como diz a documentação do projeto) “adotável de forma incremental”.

Sobre a abordagem de estrutura progressiva, Evan You acredita que Vue é “o único que a implementou muito bem”.

Na recente conferência Vue.js Live, o criador e principal mantenedor do Vue.js, Evan You, dobrou o conceito de estrutura progressiva. “Acredito que a Vue (foi) a primeira a ser pioneira nessa ideia e também a única que a implementou muito bem”, disse ele.

Mantenha a simplicidade, sintaxe

A chave do Vue é seu recurso “Single File Component” (SFC), que permite aos desenvolvedores “criar componentes modularizados usando a sintaxe familiar de HTML, CSS e JavaScript”.

React e Vue são modelos baseados em componentes, mas a sintaxe é uma diferença fundamental. React usa sintaxe JSX, que combina HTML e JavaScript, enquanto Vue usa “uma sintaxe de modelo baseada em HTML”. É importante ressaltar que “todos os modelos Vue são HTML sintaticamente válidos que podem ser analisados ​​por navegadores e analisadores de HTML compatíveis com as especificações”.

A sintaxe do Vue foi projetada para ser mais acessível para desenvolvedores web familiarizados com HTML padrão — esperançosamente, quase todos eles! – enquanto JSX requer uma compreensão de JavaScript. De acordo com uma entrevista em podcast que você deu no mês passado, a sintaxe do Vue foi a principal razão pela qual ele ganhou força nos primeiros dias, em fevereiro de 2014, quando foi lançado.

“Na verdade, o único recurso que ele tinha era fornecer essa sintaxe de modelo. E então você pode declarar seu estado com objetos JavaScript simples. E ele atualizará as coisas automaticamente conforme você altera os objetos, conforme você altera os objetos. Então esse foi o começo.”

“Essencialmente, destilamos as partes com as quais qualquer pessoa que trabalha com front-end se importaria.”
– Evan You, criador do Vue

Questionado sobre por que o Vue.js decolou quando havia alternativas bem conhecidas, como o AngularJS, disponíveis naquela época, a resposta de You é reveladora – e oferece uma pista sobre por que há uma insatisfação crescente com a complexidade do React.

“O AngularJS já estava disponível”, disse You, falando sobre quando lançou o Vue, há uma década. “Mas acho que para muitos usuários (…) o AngularJS ainda parecia bastante intimidante, por causa de todos os conceitos adicionais que você precisa entender antes de poder usá-lo com eficiência. Então, acho que o Vue surgiu no momento em que essencialmente destilamos as partes com as quais qualquer pessoa que trabalha com frontend se importaria. (…) No fundo, começámos só com isso e deitámos todo o resto fora. E acho que esse tipo de simplicidade realmente tornou mais fácil para as pessoas entenderem o que é… entenderem o problema que está resolvendo.”

Ele explicou que o Vue se expandiu na última década para incluir muitos recursos novos, incluindo um roteador de aplicativos de página única, ferramentas de gerenciamento de estado, uma CLI de conjunto de ferramentas, ferramentas de desenvolvimento, documentação e muito mais.

O React ainda é um framework frontend?

Embora o conjunto de ferramentas do Vue tenha se expandido, você diz que o escopo do projeto ainda está focado no frontend. Esse não é o caso, argumenta ele, do React.

“Eu diria que com os componentes do React Server, o React não é mais uma estrutura de front-end.”
– Evan You, criador do Vue

“Mesmo no React, todos os novos recursos estão centrados nos componentes do servidor”, disse ele, “o que está (…) expandindo significativamente o escopo do que você consideraria uma estrutura de front-end, eu diria que com os componentes do React Server, React não é mais um framework frontend. Mas Vue, neste momento, ainda nos consideramos focados no frontend.”

Em outra entrevista de podcast, você sugeriu que a abordagem Vue de usar modelos HTML também atrai desenvolvedores de back-end que precisam fazer algumas coisas de front-end, mas não querem lidar com estruturas de front-end complexas.

Frameworks frontend como Angular e React geralmente envolvem o uso de um servidor Node.js para renderização no lado do servidor (SSR), que gera HTML no servidor e o envia ao cliente. React Server Components, um recurso relativamente novo no React, ajuda ainda mais o processo de renderização, manipulando alguma lógica e renderização no lado do servidor antes de entregar o conteúdo ao cliente.

Mas os desenvolvedores de back-end não desejam necessariamente esse tipo de funcionalidade, de acordo com você.

“A visão de mundo é completamente diferente para, digamos, desenvolvedores de PHP – ou outras linguagens de back-end”, disse ele. “Para eles, a visão de mundo é (…) o framework backend é enviar todo o HTML para o frontend, e então eles pensam em como torná-lo interativo.”

Calçadeira JavaScript

“Os desenvolvedores de JavaScript farão absolutamente qualquer coisa para evitar escrever código que não seja JavaScript.”
– Paul Scanlon, desenvolvedor

As estruturas JavaScript atraíram muitas críticas nos últimos anos – e não apenas por sua complexidade cada vez maior. Muitos desenvolvedores acham que muito está sendo feito com JavaScript atualmente. Como disse recentemente meu colega escritor Paul Scanlon: “Os desenvolvedores de JavaScript farão absolutamente qualquer coisa para evitar escrever código que não seja JavaScript”. Eles colocarão CSS em JavaScript, HTML em JSX e agora SQL em JavaScript!”

Alguns argumentaram que a dependência excessiva do JavaScript não apenas desvaloriza o ecossistema da web, mas também coloca em risco os empregos dos desenvolvedores. O desenvolvedor islandês Baldur Bjarnason apresentou esse mesmo argumento recentemente. Ele afirma que o React “é, para a grande maioria das organizações que fabricam software voltado para a web, objetivamente pior do que muitas das alternativas”. Além disso, ele acha que o React e as estruturas construídas sobre ele resultaram em uma geração de desenvolvedores “que não têm treinamento para solucionar problemas de código DOM ou resolver problemas usando CSS”. Isto, disse ele, torna mais fácil para as empresas de tecnologia demitirem esses trabalhadores quando a demanda por empregos não é alta (como agora).

Ao contrário dos frameworks React como Next.js, incluindo os mais modernos como Remix, o Vue não tenta encaixar tudo em JavaScript. Embora, como observa o próprio Evan You, JavaScript avançado esteja disponível para usuários do Vue se eles realmente precisarem dele.

O post Quer sair da complexidade do React? Experimente o Progressive Framework do Vue apareceu pela primeira vez em The New Stack.