Como escolher o melhor framework front-end

O mundo JavaScript é um ambiente rico com dezenas de ferramentas, bibliotecas e frameworks. Mas, com muitas opções vem muita confusão. Realmente é uma faca de dois gumes.

Embora você tenha muito espaço para criatividade e experimentação, às vezes você não tem certeza sobre qual biblioteca ou estrutura escolher.

A estrutura de front-end que você escolher pode fazer ou quebrar seu projeto a longo prazo.

Neste artigo, veremos alguns dos frameworks JavaScript mais populares e como eles se comparam. Examinaremos cinco perspectivas diferentes dessas estruturas, o que geralmente facilita o processo de tomada de decisão sobre sua próxima estrutura JavaScript.

Esteja você escolhendo um desses frameworks JavaScript populares ou algo mais esotérico, você deve levar cada um desses aspectos em consideração.

Disponibilidade de Recursos de Aprendizagem

Este é óbvio, mas muitas vezes esquecido. Embora a página inicial sofisticada de algum framework possa chamar sua atenção, você ainda precisa de alguns cursos, livros, tutoriais e artigos adicionais, além de documentação chata e seca para ajudá-lo a começar.

Criar uma estrutura incrível é uma coisa e comunicar as ideias principais por trás dela é diferente. Na verdade, existem muitos desenvolvedores profissionais por aí que se especializam em coaching. Um recurso de aprendizado bem elaborado reduzirá drasticamente sua curva de aprendizado.

Procure recursos de autores confiáveis ​​com os quais você tenha experiência anterior - valerá a pena no final. Se você se esforçar para encontrar algo útil, seja cauteloso: a estrutura que você está tentando aprender pode ser nova ou ainda não foi bem adotada pela comunidade.

Embora eu tenha mencionado que a documentação por si só não é suficiente, há exceções para isso. O EmberJS, por exemplo, possui uma ótima documentação. Recursos principais e casos de uso são bem descritos com exemplos genéricos aqui e ali. Infelizmente, além da documentação, ficamos com poucos livros de recursos, cursos em vídeo ou outros materiais.

Por outro lado, há uma abundância de recursos para Angular e React. Quase qualquer site educacional voltado para o front-end terá um artigo ou dois sobre eles, talvez até um curso completo em vídeo ou livro.

O Vue chega ao meio-termo: tem uma boa documentação e existem alguns cursos interessantes que você pode escolher.

Aurélia, por exemplo, tem quase zero recursos; a única esperança para você é documentação e sorte.

Prefiro ter escolhas.

Mesmo que você leia um ótimo livro ou curso, há uma chance de você aprender algo novo expondo-se a diferentes recursos. Se você estiver familiarizado com o assunto, muitas vezes você pode percorrer e buscar possíveis áreas que ainda não estão muito claras.

Infelizmente, essa estratégia não funcionará se você estiver limitado com suas opções, o que nos leva ao próximo ponto.

Popularidade

Você pode se orgulhar de aprender algo exótico, mas se olhar para isso de uma perspectiva de negócios, não é a mesma coisa. Sua empresa ou cliente provavelmente prefere usar um conjunto de ferramentas testado em batalha.

Há várias razões para isso. Se um framework não é tão popular, significa que existem alguns desenvolvedores especializados nele. O que acontece se você abandonar o projeto ou encontrar um novo emprego? Seu empregador acaba ficando preso na busca por um desenvolvedor que conheça o framework que você usou.

Esse processo pode se tornar um fardo real para uma empresa. A mesma coisa vale mesmo se você ficar com o projeto e ele crescer. Agora, o empregador precisa de mais desenvolvedores para acelerar o desenvolvimento.

Existem algumas outras razões pessoais pelas quais você pode optar por uma estrutura popular e amplamente utilizada. O que acontece se você estiver preso em algum problema e não houver realmente uma comunidade para a qual você possa pedir ajuda? Como você está sozinho com a documentação, é provável que você perca muito tempo.

Além disso, você quer pensar em oportunidades futuras e mais atraentes em sua carreira. Se você se especializar em algo popular e ficar realmente bom nisso, haverá muitos projetos para você.

Líderes óbvios aqui são Angular e React.

A maioria das listas de empregos relacionadas ao front-end exigem um ou outro. Eles são apoiados pelo Google e pelo Facebook, respectivamente, e, portanto, os empregadores se sentem “seguros” sobre sua escolha.

Às vezes, a escolha do framework para sua empresa ou cliente não depende de você; talvez tenha sido feito por um funcionário anterior ou alguma outra pessoa da equipe. Provavelmente, será Angular ou React. Agora existem outras opções como Ember e Vue. Mas, você tem que procurar deliberadamente as empresas que os utilizam.

Você pode determinar a popularidade de um framework observando rapidamente o desempenho do projeto no GitHub e em outros lugares. Aqui estão algumas estatísticas coletadas ao escrever este artigo:

Embora essas bibliotecas existam há tempo suficiente para se provarem opções populares, se você estiver tentando algo realmente novo, estatísticas semelhantes para elas podem ajudá-lo a fazer a escolha.

Aprender apenas Angular ou React só o levará até certo ponto em sua carreira. Claro, você terá muitas oportunidades, mas há uma razão pela qual existem outras estruturas por aí. Tente aprender sobre eles em seu tempo livre e ocasionalmente faça alguns experimentos. Mesmo que você nunca os use em projetos reais, obterá informações valiosas que o ajudarão no seu trabalho de desenvolvimento diário.

Recursos principais

Vamos ser um pouco técnicos agora.

No início, você deseja uma breve visão geral dos principais recursos da estrutura para ter uma expectativa adequada quando começar a codificar. Para isso, verifique a documentação. Você precisa ter uma noção do que é esse framework em geral. É apenas uma camada de visualização, totalmente desenvolvida ou algo intermediário?

Se você tem uma rica experiência anterior com outros frameworks, esse processo é fácil e rápido. Procure os seguintes tópicos na documentação: modelagem, gerenciamento de estado, comunicação HTTP, processamento e validação de formulário e roteamento. Essas são coisas cotidianas que você faz como desenvolvedor. Nem todos eles podem ser apresentados na estrutura principal, ou pode haver alguma abordagem diferente para um problema específico.

Vamos tocar brevemente nas opções populares.

Começaremos com React e Vue. Eles não são realmente frameworks; eles representam apenas a camada de visualização do seu aplicativo. Isso significa que todas as outras partes — comunicação HTTP, validação de formulário, etc. — dependem de você.

Como mencionei anteriormente, pode ser uma faca de dois gumes. Eventualmente, você acabará construindo sua própria estrutura personalizada. Ambos têm seu ecossistema de bibliotecas para fornecer soluções para os problemas mais comuns, mas a estrutura geral varia de projeto para projeto.

O JSX do React sempre me fez estremecer. Eu tive que me acostumar com isso. No entanto, o modelo do Vue é muito bom, especialmente se você estiver vindo do Angular.

Por outro lado, Ember tem quase tudo. Surpreendentemente, o núcleo do Ember não fornece processamento avançado de formulários. Ele só tem alguns ajudantes de entrada e é isso. É muito opinativo e até tem sua própria camada de dados. Tudo tem que ser feito “à maneira da brasa”.

Se você tem experiência em outros frameworks ou JavaScript em geral, pode ficar frustrado porque o Ember usa seu próprio modelo de objeto. As classes ES2015 padrão não são amplamente usadas, como afirma sua documentação. Você pode encontrar-se atribuindo o valor diretamente a uma propriedade e Ember reclamando sobre isso.

Outra coisa significativamente diferente de outros frameworks é o Ember Data. É uma camada de dados para aplicativos Ember. Você pode pensar nisso como uma espécie de ORM para o front-end. Você cria modelos e mapeia os relacionamentos entre eles.

Agora, se o seu servidor usa API JSON (é uma especificação para implementação de APIs JSON), você está em um bom lugar com o Ember, mas infelizmente a maioria dos servidores não. Então você tem que escrever adaptadores e serializadores personalizados. No entanto, se você fizer as coisas da maneira Ember, pode ser realmente produtivo. Ele só tem uma curva de aprendizado íngreme.

Angular 2 é uma estrutura rica em recursos. Ele vem com muitos módulos como o Ember, então você tem uma tonelada de ferramentas à sua disposição prontas para uso. No entanto, como o Angular é destinado a grandes aplicativos, ele promove o TypeScript, o que pode desencadear alguma resistência antes de você tentar.

Outra coisa notável é o uso pesado de observáveis ​​da biblioteca Rx, o que é muito bom. Você pode representar quase qualquer coisa como um observável e aplicar operações de alto nível como mapa, filtro, etc. Se você usou Lodash ou Underscore, Rx é mais ou menos o mesmo, mas com esteróides.

Aqui está um resumo dos principais recursos dos quatro frameworks que estamos discutindo neste artigo:

Todos esses recursos que analisamos brevemente são inúteis se você precisar queimar a vela nas duas extremidades para usá-los de maneira eficaz - que é o próximo ponto.

Usabilidade

Se neste momento você ainda tem entusiasmo pelo framework escolhido, o próximo passo é colocar a mão na massa.

Talvez a estrutura seja adequada para você devido ao seu histórico. Talvez seja um pouco diferente e desafie você de algumas maneiras. Você ainda não sabe, e nenhuma quantidade de leitura ou assistir a tutoriais ajudará até que você tente você mesmo.

A melhor maneira de ter uma ideia de um framework é usá-lo em algum miniprojeto. Isso lhe dá a oportunidade de resolver problemas cotidianos mencionados acima com uma determinada estrutura.

Enquanto estiver trabalhando em um projeto, reserve um tempo e reflita se você está ou não sendo produtivo. Quão fácil é alcançar o resultado desejado? Você tem que procurar por bibliotecas externas? Talvez você precise de alguns plugins da comunidade. Existe alguma estrutura convencional ou diretrizes dentro do contexto da estrutura? Talvez haja uma CLI para acelerar o processo de desenvolvimento. Nesta etapa, você está reunindo experiência básica para poder pensar como seria se você usasse essa estrutura para projetos futuros ou até mesmo fizesse a transição de projetos existentes.

O Ember é considerado um framework muito produtivo, pelo menos para seus usuários principais. Ele vem com uma CLI, o que realmente ajuda. Você pode gerar rotas, controladores, componentes e modelos com seus próprios conjuntos de testes. Fazer tudo isso manualmente é uma tarefa tediosa. Gerar um novo projeto também é possível. Ele criará a estrutura básica de pastas, instalará os pacotes necessários, construirá ferramentas, ambiente de teste, etc. Se você nunca usou uma CLI a tal ponto, ficará muito satisfeito. Mas, como mencionei anteriormente, Ember é muito opinativo; apesar de toda essa bondade, você pode se sentir frustrado ao tentar realizar tarefas comuns.

Agora para React e Vue, eles têm algum tipo de CLI, create-react-app e vue-cli. Mas além de gerar um projeto inicial com algumas opções, eles não oferecem tanto em relação ao Ember ou Angular. É compreensível, pois ambos representam uma camada de visualização. Se você gosta de fluxos de trabalho personalizados, experimentação ou estruturas diferentes em uma base de projeto para projeto, então você está em um bom lugar. Para alguns desenvolvedores, a flexibilidade é a chave inerente ao uso do React ou Vue.

Angular 4 vem com uma CLI como o Ember. Você pode gerar componentes, diretivas, serviços, etc. Ele também gera a estrutura inicial de uma aplicação, então você só precisa se preocupar com o produto. O ambiente de teste é muito bom, pois, com cada parte do aplicativo gerado, o conjunto de testes fica próximo a ele (literalmente). Além disso, o TypeScript pode fornecer um aumento real de produtividade. Aqui está o porquê:

Quantas vezes você encontrou o código com linhas como esta…

 function doSomething(someData) { // do something }

…e se perguntou o que diabos someData é, quais propriedades ele deve ter, quais funções ele deve fornecer e qual é o seu comportamento? Com o TypeScript, você define o tipo e espera os dados apropriados. Pode ir mais longe se você usar algum IDE com suporte a TypeScript. Você pode explorar diferentes partes do aplicativo com facilidade.

Nós não tocamos em IDEs, mas, para a maioria dos frameworks populares, existem alguns plugins por aí, que tornam o desenvolvimento muito fácil. O WebStorm, por exemplo, vem com suporte integrado para Angular, React e Vue.

Facilidade de integração (com outras bibliotecas)

Por último, mas não menos importante, isso pode ser considerado como parte da usabilidade, mas é tão importante que merece sua própria seção.

Não importa quão rico em recursos seja o framework selecionado, é provável que você enfrente problemas onde ferramentas adicionais são necessárias. Existem ótimas bibliotecas por aí com foco em um problema, seja manipulação de DOM, processamento de dados, formatação de tempo, edição de rich text, etc. Se você tentar integrar uma delas e passar horas nela, talvez essa não seja a escolha ideal .

Testar isso é muito fácil. Você pode rapidamente criar algum cenário imaginário em que precisa de uma determinada biblioteca. Olhe para seus projetos anteriores; quais ferramentas você tem usado e em quais cenários? É provável que você se depare com as mesmas situações novamente e queira estar preparado para isso, ou pelo menos ter uma expectativa.

Nem todas as bibliotecas suportam TypeScript. Como o Angular o usa fortemente, algumas das vantagens do TypeScript podem desaparecer ao usar essa biblioteca. Claro, você pode encontrar uma solução alternativa, mas é um pouco mais complicado. Devido à popularidade do Angular, você pode integrar instruções na página da própria biblioteca.

Para Vue e React, você é responsável por quase tudo, e usar outras bibliotecas não é exceção. Se você estiver usando o Webpack ou uma ferramenta de compilação semelhante, poderá consultar diretamente as bibliotecas instaladas usando o NPM. Achei um pouco complicado para o Vue usar plugins da comunidade, especialmente quando eles também contêm lógica de interface de usuário.

O Ember possui o EmberObserver, que é um site de plugins comunitários. Cada um deles tem uma pontuação em uma escala de zero a dez. É realmente um ótimo lugar para procurar algo que você precisa. Se você digitar o nome de suas bibliotecas favoritas, como Lodash, Rx ou Ramda, encontrará os plug-ins relacionados, desde wrappers simples até reescritas completas. Claro, existem repositórios Awesome React e Awesome Vue que reúnem recursos relacionados, incluindo bibliotecas, mas achei o EmberObserver especialmente útil.

Comprometendo-se com uma estrutura JavaScript

Escolher o framework JavaScript certo é um dos passos mais importantes para tornar seu projeto web um sucesso. Quer você esteja trabalhando em um projeto pequeno ou grande, quer esteja trabalhando sozinho ou em equipe, cada um desses detalhes desempenha um papel crucial na determinação de qual framework é o melhor para o seu projeto (e menos de qual framework você pode preferir ).

Quanto aos recursos principais e usabilidade, listei os pontos que afetarão a produtividade dos desenvolvedores em vários graus. A usabilidade é especialmente complicada porque depende muito da sua experiência e formação, bem como da empresa ou organização em que você está trabalhando.

Com o tempo, os frameworks que discutimos neste artigo podem evoluir, suas popularidades podem mudar e os projetos para os quais eles são adequados podem mudar, mas este artigo deve fornecer uma noção geral de onde cada um desses frameworks pode funcionar melhor.