História do Frontend

4.1 História do desenvolvimento web: de HTML a HTML5 e CSS3

No início dos anos 1990, o mundo viu o nascimento do desenvolvimento web graças a Tim Berners-Lee. Ele foi literalmente o primeiro desenvolvedor Frontend: ele criou o HTML e escreveu nele, também criou o primeiro navegador. Um verdadeiro frontend não é parado nem pela falta de um navegador.

Embora CSS e JavaScript ainda não tivessem sido inventados naquela época, então criar sites era mais simples. Pode-se dizer que Tim Berners-Lee foi o primeiro desenvolvedor old school, que lidava com Frontend antes desses seus JavaScript e CSS.

Em 1995, a Internet Engineering Task Force (IETF) aprovou o HTML 2.0 como o primeiro padrão oficial de HTML. Esta versão incluía tags e atributos básicos que permitiam criar páginas web básicas. HTML 2.0 estabeleceu as bases para o desenvolvimento futuro do desenvolvimento web.

HTML 3.2 e HTML 4.0: expansão de capacidades

O ano de 1997 foi uma etapa importante na história do HTML. Neste ano foi lançado o HTML 3.2, desenvolvido pelo consórcio W3C. Esta versão incluía suporte para tabelas, applets Java e fórmulas matemáticas, o que ampliou significativamente as capacidades dos desenvolvedores web.

Mais tarde no mesmo ano, apareceu o HTML 4.0, que trouxe grandes aprimoramentos. A inclusão de suporte a estilos CSS, semântica aprimorada e novos elementos transformaram o HTML 4.0 em uma poderosa ferramenta para criar páginas web mais complexas e estruturadas. A introdução de estilos CSS permitiu que os desenvolvedores separassem o conteúdo de sua aparência, o que facilitou o gerenciamento de estilos e simplificou a implementação do design.

CSS: revolução na estilização de páginas web

O primeiro padrão CSS (Cascading Style Sheets) foi lançado pelo W3C em 1996. O CSS permitiu que desenvolvedores estilizam documentos HTML, separando elementos visuais da estrutura da página. O CSS1 oferecia possibilidades básicas para estilização de texto e imagens de fundo.

Em 1998, foi apresentado o CSS2, que adicionou novas funcionalidades, como suporte a media queries, posicionamento absoluto e relativo, além de estilos mais sofisticados para impressão.

O CSS3, que começou a aparecer em 2011, apresentou uma arquitetura modular. Isso permitiu a introdução de novas funções de maneira incremental, incluindo animações, gradientes, transformações e layouts aprimorados.

HTML5: nova era do desenvolvimento web

O HTML5, desenvolvido por esforços conjuntos do WHATWG e W3C, foi uma atualização significativa e foi oficialmente apresentado em 2014. O HTML5 adicionou suporte a multimídia (vídeo e áudio), novos elementos para semântica aprimorada (como <article>,<section>,<header>,<footer>), formatos melhorados para formulários web e novas APIs para trabalhar com gráficos e multithreading.

O HTML5 expandiu significativamente as capacidades dos desenvolvedores web, permitindo a criação de aplicações web mais interativas e dinâmicas. O suporte a elementos multimídia e novas APIs tornou as aplicações web mais poderosas e funcionais.

4.2 De jQuery a Angular e React

Quanto mais rápido era a internet, mais pesadas se tornavam as páginas web. Mais CSS e JavaScript havia nelas. Para simplificar um pouco a escrita, começaram a usar diversas bibliotecas. Uma das mais populares foi o jQuery.

jQuery: Facilidade no trabalho com JavaScript

jQuery foi criado por John Resig e lançado em janeiro de 2006 na conferência BarCamp em Nova Iorque. O objetivo do jQuery era simplificar a interação com documentos HTML, manipulação de eventos, animações e interação Ajax para um desenvolvimento web rápido.

jQuery rapidamente se tornou popular graças aos métodos simples e intuitivos que ocultavam as complexidades de trabalhar com JavaScript e problemas de compatibilidade entre navegadores. Suas principais funções incluem:

• Seletores que permitiam encontrar e manipular facilmente elementos DOM
• Trabalho simples com eventos
• Animações e efeitos
• Integração com Ajax para criar páginas web interativas

jQuery mudou a abordagem de desenvolvimento web, tornando-o mais acessível e conveniente para desenvolvedores.

Angular: Introdução a aplicações web dinâmicas

Outra resposta ao aumento da complexidade das páginas web foi o surgimento do framework Angular. AngularJS foi inicialmente apresentado pelo Google em outubro de 2010. O projeto foi criado por Miško Hevery e Adam Abrons para simplificar o desenvolvimento de aplicações de página única (SPA).

AngularJS forneceu ferramentas poderosas para o desenvolvimento do lado do cliente, incluindo:

• Binding de dados declarativo através de diretivas
• Serviços integrados para trabalhar com requisições HTTP
• Binding de dados bidirecional, permitindo atualizar automaticamente a view quando os dados do modelo mudam
• Modularidade e testabilidade do código

Em 2016, o Google apresentou uma versão completamente reformulada do Angular (Angular 2 e acima), que se tornou uma plataforma para o desenvolvimento de aplicações web escaláveis e de alto desempenho utilizando TypeScript.

React: Revolução na renderização de UI

React foi criado por Jordan Walke do Facebook e lançado pela primeira vez em março de 2013. React foi a resposta à necessidade do Facebook de melhorar o desempenho e suporte a interfaces de usuário complexas.

React apresentou uma nova abordagem para o desenvolvimento de interfaces de usuário, baseada em componentes e no DOM virtual:

• Arquitetura de componentes, permitindo criar componentes reutilizáveis e isolados
• DOM virtual, que otimiza a atualização da interface, tornando-a mais rápida e eficiente
• Binding de dados unidirecional, o que simplifica a depuração e gerenciamento do estado da aplicação

React rapidamente ganhou popularidade e se tornou a base para o desenvolvimento de muitas aplicações web modernas graças ao seu desempenho e flexibilidade. Ele também se tornou a base para outras bibliotecas e frameworks, como o React Native para aplicações móveis.

Essas três tecnologias — jQuery, Angular e React — desempenharam papéis-chave na evolução do desenvolvimento web, cada uma trazendo suas abordagens e ferramentas únicas que simplificaram significativamente a criação de aplicações web modernas.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 se tornaram tecnologias tão poderosas que a Web transbordou os limites do navegador e se tornou uma tecnologia Fullstack Frontend completa. E o primeiro a sentir isso foi o backend.

Node.js: a conquista do backend

Node.js foi criado por Ryan Dahl e lançado pela primeira vez em maio de 2009. O principal objetivo do Node.js é fornecer um ambiente de execução para JavaScript fora do navegador, o que permite usar JavaScript para desenvolvimento de servidor. Node.js é construído no motor V8 do Google, o que garante alto desempenho e velocidade de execução.

Node.js utiliza I/O não bloqueante (input/output, entrada/saída), o que permite processar várias conexões simultaneamente sem bloquear o thread principal de execução. Ele também possui um extenso ecossistema de módulos disponíveis através do npm (Node Package Manager), o que facilita o desenvolvimento e integração de várias bibliotecas e ferramentas. E graças ao motor V8, Node.js garante processamento rápido e eficiente de requisições.

Electron: a conquista dos desktops

Criar uma UI legal para desktop é uma tarefa e tanto, e com HTML5+CSS3 à mão... Por que não usá-lo? Então, os programadores inventaram um truque: o seu aplicativo abre uma janela principal, nesta janela é incorporado um navegador (componente WebView), e neste navegador é carregado o código em HTML5, CSS3 + JavaScript.

A biblioteca Electron, originalmente conhecida como Atom Shell, foi criada pelo GitHub para o editor de código Atom. A primeira versão do Electron foi lançada em julho de 2013. O objetivo do Electron é permitir que desenvolvedores criem aplicativos de desktop usando tecnologias web, como HTML, CSS e JavaScript.

Electron permite criar aplicativos que funcionam em Windows, macOS e Linux com a mesma base de código. Electron combina as capacidades das tecnologias web e o poder do Node.js, o que permite acesso ao sistema de arquivos e outros recursos do sistema. Os desenvolvedores podem usar frameworks web existentes e bibliotecas para criar interfaces e funcionalidades.

React Native: aplicativos móveis

React Native foi desenvolvido pelo Facebook e apresentado pela primeira vez em março de 2015. O objetivo do React Native é fornecer a capacidade de criar aplicativos móveis nativos para iOS e Android usando JavaScript e React.

React Native usa componentes nativos, o que garante desempenho comparável aos aplicativos nativos. Ao mesmo tempo, os desenvolvedores podem escrever código que funciona tanto em iOS quanto em Android, simplificando significativamente o desenvolvimento e reduzindo o tempo de suporte.

Tudo é a mesma coisa, como no caso do Electron: na janela inteira do aplicativo móvel, um WebView é aberto, onde o "site" escrito em HTML5, CSS3 e JS é carregado. Todos esperavam que aplicativos móveis substituíssem sites em telefones, mas o oposto ocorreu: os sites começaram a substituir aplicativos nativos.

Hoje, um Frontend Fullstack Software Engineer é a profissão de TI mais procurada no mundo. Então, a decisão de se tornar um desenvolvedor Frontend é correta e visionária!