Por que precisamos de frameworks de front-end, como o React, quando podemos simplesmente usar JavaScript puro para criar nossas aplicações? Hoje, vou explorar essa questão para melhor entender a necessidade dos frameworks de front-end.

Veja, o desenvolvimento web antigamente usava basicamente renderização diretamente no servidor, ou seja, a página era toda montada no backend e depois enviada para o navegador do usuário. O JavaScript era muito usado sim, mas somente para adicionar interações e animações, por exemplo. Já nos dias de hoje, o desenvolvimento web é fortemente impulsionado pelo uso de frameworks JavaScript, como Angular, React e Vue. Mas por que esses frameworks são tão populares e amplamente adotados?

Conforme o desenvolvimento para web foi evouindo, houve um aumento na complexidade dos códigos com a necessidade de se criar aplicações de página única, isto é single-page applications, que basicamente fazem a renderização da página no lado do cliente (front-end), em vez do servidor. O resultado disso foi que as aplicações passaram a depender cada vez mais de JavaScript para funcionar, tornando tudo mais complexo. Nesse contexto, começaram a surgir soluções para lidar com esta complexidade e estas soluções são conhecidas como frameworks de front-end que permitem lidar com dados e exibi-los em uma UI (user interface) amigável, além de cuidar para que ela esteja sempre sincronizada com os dados em tempo real. Ao utilizar o React, por expemlo, temos a facilitação de dividir a aplicação em componentes reutilizáveis e usar recursos avançados, como o Virtual DOM, para melhorar o desempenho e a eficiência das atualizações na interface do usuário.

Esses frameworks fornecem uma solução eficiente para manter grandes quantidades de dados em sincronia com uma interface de usuário complexa, o que seria praticamente impossível de se realizar usando apenas JavaScript puro, também chamado de ‘Vanilla JS’.

Existem dois grandes aspectos que dificultam a construção de uma aplicação complexa com JavaScript puro: O primeiro é a necessidade de manipulação do DOM em quantidades consideráveis, o que envolve a seleção manual de elementos, alternância de classes e até mesmo manipulação de texto e estilos CSS. Essa abordagem leva a um código extremamente complexo e difícil de entender. O segundo grande problema é que em aplicações ‘Vanilla JS’, o estado dos dados, como texto simples ou números, muitas vezes é armazenado diretamente no DOM, nos próprios elementos HTML, em vez de ser centralizado em um local específico da aplicação, o que exeige que múltiplas partes da aplicação acesse e altere diretamente o estado do DOM, aumentando as chances de bugs de difícil identificação/correção.

Frameworks como Angular, React e Vue resolvem um problema árduo para nós desenvolvedores, cuidando da sincronização de dados com a interface de usuário. Diferentes frameworks têm abordagens diferentes para realizar isso, mas todos eles compartilham a função de manter a UI e os dados em sincronia ao longo do tempo. Outro fator considerável, é que os frameworks proporcionam uma estrutura correta para escrever código, permitindo que outros desenvolvedores sigam certas convenções para construir aplicações melhores, o que se traduz em consistência. E por que isso é bom? Por que garante que todos os membros da equipe desenvolvam suas partes do aplicativo no mesmo estilo e facilita a manutenção.