# Breve história da Web ### Anos 90, o embrião da Web No final dos anos 80, *Tim Berners-Lee*, um developer da **CERN**, uma agência europeia de pesquisa nuclear, decide explorar um tipo de documento em uma arquitetura cliente-servidor TCP/IP da época. A este documento, é trazida uma ideia até antiga da década de 30, de conter textos que podem conter apontamentos para outros textos, através de links. Esta capacidade de fazer link de um texto a outro é chamada de hyperlink, e o texto que contêm **hyperlinks** é chamado de **hypertexto**. O objetivo desta exploração era que esses documentos pudessem conter informação pública, através de uma rede global de computadores descentralizada, favorecendo a pesquisa e partilha de conhecimento.
Buscava-se então uma forma de **padronizar** a comunicação destes documentos através da internet, estabelecendo **protocolos** e convenções para que diferentes aplicações pudessem utilizar a mesma *interface*. ### HTTP Com isto em mente, foi estabelecido um conjunto de regras, através de um **protocolo** bem definido: * era necessário que a informação trafegasse pela internet, através de **TCP/IP** * era também preciso garantir a entrega da mensagem na ordem, portanto para transporte, seria necessário utilizar o protocolo **TCP** * a comunicação teria 2 tipos de mensagens: **request e response** * a mensagem iria ter um padrão rigoroso de formato, com **introdução**, **cabeçalhos** e **corpo** (conteúdo) * o conteúdo da mensagem precisaria ser **hypertexto** * por ser um protocolo por cima do TCP, no conjunto TCP/IP este protocolo estaria na camada de **Aplicação** Este protocolo tem um nome, *Hypertext Transfer Protocol*, ou simplesmente **HTTP**. Nasce, então, a **World Wide Web**. ### Nexus, o primeiro Web browser O primeiro web browser criado por Tim Berners-Lee e que deu início à Web era chamado WorldWideWeb, mas posteriormente foi renomeado para Nexus.
### HTML, a linguagem da Web O tipo de conteúdo na mensagem HTTP precisava ter alguma garantia semântica, ou seja, os elementos da página no web browser tinham de serem *marcados* para que o browser pudesse colocar a formatação devida. Com isto, como parte do projeto, surge o **HTML**, ou *Hypertext Markup Language*, que é uma linguagem de marcação para documentos Web. Mas os elementos HTML não definem *apresentação*, posicionamento e estilo. Para isto é necessário uma ferramenta adicional ao HTML, para que os elementos sejam apresentados de forma adequada e que a plataforma Web pudesse evoluir ao longo do tempo. ### CSS *Cascading Stylesheet*, ou **CSS**, é uma linguagem de stylesheet utilizada no projeto para que os elementos HTML possam ser **apresentados** de acordo com a necessidade do website. Com isto, os elementos podem ser *posicionados* à esquerda, ao topo, terem cores variadas etc, dando assim uma característica mais amigável para usuários da Web. HTML e CSS foi um grande avanço para a partilha de documentos hypertexto, mas as páginas eram estáticas e não traziam funcionalidades dinâmicas. ### Batalha dos Web browsers Esta época foi marcada pela **batalha** de web browsers. Um notório browser, chamado **Mosaic**, possuía *interface gráfica* e permitia renderização de imagens no HTML e submissão de formulários. Os developers do Mosaic, atuando na *Netscape*, criaram depois o **Navigator**, que tinha uma melhor aparência que o Mosaic, o que o fez se tornar o principal web browser na época. Com a necessidade de trazer mais *dinamismo* para as páginas Web, os developers do Navigator decidiram criar rapidamente um *protótipo* de uma linguagem de programação para a web. Temos, então a linguagem **LiveScript**, que pouco tempo depois foi renomeada para **Javascript**. Em paralelo, a **Microsoft** entrou na onda e criou o **Internet Explorer**, e após fazer uma engenharia reversa do *Navigator*, criaram a própria linguagem de programação, chamada de **JScript**. Esta batalha entre **IE e Navigator** deixou os developers da Web com o trabalho de terem que optar por suportar um dos browsers, já que utilizavam motores de renderização diferentes, bem como uma linguagem de programação diferente. No pior dos casos, developers tinham de suportar ambos browsers. Era preciso padronizar. ### ECMAScript *European Computer Manufacturers Association*, ou **ECMA**, é uma organização sem fins-lucrativos criada nos anos 60 que tem por intuito criar padrões e estabelecer convenções de nomes para serviços de comunicações, engenharia e tecnologia. Em 1997, Netscape submete Javascript à ECMA, pelo que é aceito e ganha o nome *ECMA-262*, ou **ECMAScript**. Apesar da Netscape ter padronizado o ECMAScript, a Microsoft conseguiu uma grande fatia do mercado e dominou o mercado web até 2004. ### 2004, Mozilla e Firefox Em 2004 a **Mozilla**, sucessora do *Netscape*, lança o **Firefox**, que consegue buscar uma grande parte do mercado. Um ano mais tarde, em 2005, Mozilla se junta à ECMA International e começa a dar mais atenção ao desenvolvimento do ECMAScript, que estava estagnado. ### Fim da batalha dos Web browsers Conforme os anos foram se passando, o trabalho feito na especificação do ECMAScript foi evoluindo, passando por ECMAScript 4 (ou **ES4**), depois **ES5** e assim por diante. E com isso, a Web foi ficando mais padronizada, encerrando uma década de batalha de browsers. **Google** também trouxe em meados dos anos 2000 o **Chrome**, contando com um runtime sofisticado com Just-In-Time compilation (*JIT*), chamado de **V8,** e que interpreta ECMAScript. Não obstante, o *IE* chegou ao fim mas a Microsoft continuou desenvolvimento criando o **Edge**, um web browser que utiliza um motor baseado no Google Chrome, o **Chromium**. ### Desafios com interfaces ricas A Web estava mais dinâmica mas faltava uma melhor interação entre browsers e servers, mas a exigência de *interfaces ricas*, ou **rich interfaces**, fez com que novos desenvolvimentos em volta da Web fossem feitos. A página era servida e, a cada vez que o usuário precisava de novas informações na mesma página, era feito outro pedido ao server, causando um recarregamento completo da página novamente. Isto trazia alguns problemas de usabilidade e a Web precisava evoluir. ### XHR Em paralelo, havia uma API criada pela Microsoft nos anos 2000 chamada *XMLHttpRequest***,** ou **XHR**, que permitia fazer chamadas assíncronas ao servidor, trazendo como resposta uma informação com formato *XML*, que posteriormente foi incorporado também suporte a *JSON* e outros formatos. ### Os primeiros frameworks JS Ainda em meados dos anos 2000, *Jesse James Garrett*, um web designer e desenvolvedor web, traz a ideia de um conjunto de ferramentas em volta da Web que permitem que o browser possa fazer um pedido assíncrono ao server e renderizar apenas uma parte da página, melhorando a usabilidade dos usuários de websites. Então, esta ideia busca unificar Javascript e XHR para resolver o problema de carregamento completo da página. Surge então o *Asynchronous Javascript and XML*, ou **AJAX**. Após isto, o mercado e comunidade web começam a trabalhar em ferramentas para abstrair complexidade em volta do AJAX e assim, permitir uma melhor experiência ao developer (DX) bem como compatibilidade com diversos browsers à medida que ECMAScript ia sendo evoluída. Criam-se então ferramentas que abstraem complexidade, também chamadas de **bibliotecas ou frameworks**, sendo as pioneiras JQuery, Prototype a MooTools. ### Anos 2010, a maturidade da Web Por volta de 2010, o desenvolvimento do ECMAScript vai amadurecendo, trazendo compatibilidade com diversos browsers bem como uma API mais rica e versátil. Assim, surge o **ES6**, que revoluciona a indústria Web. ### Single Page Applications Apesar da maturidade do *ES6*, a indústria fez um movimento em direção à ideia de, ao invés de carregar páginas à medida que o usuário clica nos links, carregar todo o site (páginas HTML, CSS e Javascript) no primeiro request, trazendo para o usuário uma experiência "nativa" no web browser, como se estivesse navegando em uma aplicação sem carregamento de páginas. Isto foi possível graças ao AJAX. Então, frameworks SPA como Backbone são criados. Mais tarde, Ember, AngularJS, React, Vue etc. **Bom, o resto é história.** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://web101.leandronsp.com/breve-historia-da-web.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.