[Pesquisa] Qual framework escolher para iniciar o projeto?

[Alecell]

Olá pessoal, boa noite!

Primeiramente sei que esta pergunta já foi feita, entretanto foi em 2017, como o ecossistema do frontend muda muito nesse periodo de quase 2 anos estou abrindo a discussão de novo.

Tenho o desafio de reescrever uma aplicação e estou na dúvida sobre qual framework escolher decorrente das premissas que tenho que atender, do meu contexto e do contexto da empresa.

Empresa:

• Startup
• Prefere Angular
• Tem um produto pouco manutenivel hoje e precisa de um novo

Eu:

• Experiência com vanillaJS e React
• Único de front da empresa

Contexto:

• O app precisa ser hibrido (Web, Android e iPhone)
• SEO é crucial
• Precisa ser altamente escalavel
• Deve ser fácil encontrar funcionários para manutenção futuramente

Qual vocês recomendam nesse panorama? Se possivel deixar o motivo da escolha vai ajudar muito!

Obrigado!

[willycamargo]

Bem, vivemos hoje em uma época onde as palavras tem sido usados de maneira exacerbada. Framework é uma delas.

Vou considerar que você esteja falando da necessidade de escolher um conjunto de tecnologias e ferramentas para desenvolver o front-end de uma nova aplicação, sem necessidade de migrar ou integrar com algo já pré existente. Esse conjunto de tecnologias vamos chamar de stack.

Entendo que um framework como Angular já irá vir com boa parte da stack pronta, te mostrando o caminho sobre como organizar e desenvolver o que for necessário. Mas não é caso quando falamos de Bibliotecas, como o React que você mesmo citou.

A escolha de uma boa stack vem sendo motivo de preocupação pra mim há mais de 4 anos, desde qual linguagem, pré-processador, padrão de código etc. E não tem como ser diferente, é realmente um assunto delicado.

Desenvolvi algumas SPAs desde lá e, guiado pelo mercado, a maioria deles com React, mas ainda assim muito diferentes entre sí.

• Em alguns eu utilizei ES6, em outros Typescript.
• Em alguns consumia uma API REST e outro GraphQL.
• Em alguns havia tratamento de websocket e outros não.
• Em alguns havia um roteador e outros não precisavam
• Alguns tiveram versão hibrída e outros não.
• Alguns usei Redux, outros Mobx e outros React.Context

Cada uma dessas diferenças na stack fazem com que a experiência de desenvolvimento seja diferente. E normalmente cada escolha com suas vantagens e desvantagens. As possibilidades de "combinações" para a estruturação de um novo projeto são infinitas.

• Utilizar Typescript pode ser um saco e parecer improdutivo se você estiver trabalhando sozinho, mas em equipe se torna uma ferramenta ótima para manter padrão e qualidade do código enquanto ele escala

• Consumir uma API GraphQL é incrível e pode parecer um sonho em conversas de boteco, mas estruturar uma app frontend para trabalhar de forma modularizada e bem organizada pra isso é complicado, e o arrependimento vem quando enfrentar a dor de cabeça para fazer uma simples paginação. Sem contar a curva de aprendizado e adaptação para novos colaboradores, o que é um problema se a empresa tiver uma rotatividade grande.

O que quero dizer é que é uma decisão bastante complicada para ser tomada por uma única pessoa, principalmente tendo que assumir a responsabilidade de "ser fácil encontrar funcionários para manutenção futuramente".
Ta difícil contratar qualquer tipo de desenvolvedor atualmente, só Deus sabe qual tecnologia vão estar usando no futuro. O que posso dizer é que Angular e React tem uma popularidade parecida. E falo isso baseado na pesquisa do stackoverflow

Framework ou Biblioteca

Considerando as opções que você colocou na descrição: Angular (Framework) e React (Biblioteca), vou tentar dissertar um pouco abaixo.

Talvez eu fale besteira, principalmente por minha falta de experiência aprofundada com Angular e espero que apareça alguém aqui corrigindo se for o caso.

Framework

Se você optar por um framework como o Angular, ele irá citar algumas regras que você deve seguir.
Ele te dará um boilerplate inicial do projeto. Existe a maneira certa de definir componentes, a maneira e o lugar certo de setar as rotas, tem o typescript e cli para ajudar na estruturação, etc. O framework vai pressupor que você terá alguns problemas e disponibilizará ferramentas para você resolver esses problemas. Isso pode agilizar e ajudar principalmente para quem não tem experiência na construção de uma app do zero.

Biblioteca

Quando olhamos para uma biblioteca como React, você tem a solução de alguns poucos problemas incluídas dentro da tecnologia. Qualquer outro problema você terá que procurar por ferramentas auxiliares. Você terá que escolher qua pré-processador irá usar, terá que escolher entre as 3 ou 4 ferramentas diferentes para fazer seus testes, terá que escolher entre as 2 bibliotecas de rotas, entre qual gerenciador de estado global utilizar, em qual component ou biblioteca para ajudar com formulários, etc. Claro que se preferir, pode fazer tudo por conta própria, com Javascript.

Você demoraria talvez 1 dia de trabalho para colocar um Hello World na tela.

Pra isso existem projetos como o Create React App que ajuda especificamente no setup inicial de um projeto com React, mas ainda assim eu garanto que você terá que tomar muitas decisões sob qual caminho seguir para diversos problemas que aparecerem.

Conclusão

A utilização do Angular tende a ser mais segura, principalmente pra alguém que estará trabalhando sozinho e provavelmente sobrecarregado. A falta de tempo para pesquisar as melhores ferramentas e métodos talvez sejam cobertas por decisões já tomadas pelo próprio framework.

A utilização do React irá permitir mais flexibilidade, você não ficará preso a regras do framework e até mesmo se utilizar o Create React App, tem como ejetar (não recomendo) para reescrever com seus próprios scripts de pré-processamento. A vantagem fica concentrada na facilidade de modularizar e reutilizar componentes. Com a crescente popularização, existe uma gama de conteúdos e componentes prontos que podem ajudar com muitas coisas visuais.

Possíveis problemas

Você colocou como contexto itens que podemos considerar como problemas:

Hibrído (Web, Android e iPhone)

O quão "hibrído" essa aplicação precisa ser? Ela terá funcionalidades idênticas entre todas plataformas? Se sim, existem soluções que geram uma app nativa com webview para Android e iOS.
Caso a app tenha features específicas em cada uma das plataformas, principalmente se utilizar recursos nativos, acredito ser melhor separar em projetos diferentes que reaproveitem partes iguais entre sí.

SEO é crucial

SPA sempre teve problemas com SEO e isso não é novidade. Apesar de o Google estar conseguindo ler e indexar bem as aplicações SPA, ainda tem outros problemas referentes a client side rendering:

• Google pode acabar não indexando alguma parte do site
• Outros robôs não indexam corretamente
• Ao compartilhar o link em alguma rede social o título, imagem e descrição não aparece corretamente

Para resolver isso normalmente usa-se tecnologias de pré-renderização:

1. Algum framework com suporte a server-side-rendering, como NextJS por exemplo
2. Algum serviço que faça a pré-renderização e disponibilize ela através de um redirecionamento que pode ser configurado no apache/nginx: http://prerender.io

Precisa ser altamente escalável

É o próximo Google? Empresa unicórnio? Vai explodir e precisar passar de 30 páginas para 500 de um dia para o outro?

Acho que escalabilidade deve ser sim uma preocupação, mas não deve ser barreira para começar a fazer algo. Essa preocupação muitas vezes acaba atrapalhando mais do que ajudando. Se, por algum motivo a empresa crescer de uma forma desenfreada, terá dinheiro suficiente para contratar uma equipe separada pra cuidar só infraestrutura e escalabilidade.

Mas, se serve de alívio: tanto React quanto Angular escalam muito bem se forem bem estruturados.

Deve ser fácil encontrar funcionários para manutenção futuramente

React e Angular estão bem populares como linkei na pesquisa do Stack Overflow ai acima.
Mas só com bola de cristal para ter a certeza sobre qual tecnologia vai ser fácil encontrar no futuro 🔮

---

Edit 1: Ainda sobre stack, o Stackshare é bem interessante para saber qual stack esta por trás de grandes produtos atualmente.