A História do Front-End para Iniciantes em Programação | Série "Começando aos 40"

Introdução

Overview: Nesta introdução, Fabio Akita apresenta o episódio e faz uma breve recapitulação do episódio anterior. Ele também menciona que este episódio será sobre front-end.

Recapitulação do Episódio Anterior

• Git e Linux são as duas coisas mais importantes para começar.

• Aprender Linux pode ser feito de duas formas: instalar e configurar uma distro como Arch Linux num ambiente virtualizado ou instalando direto como sistema operacional principal da sua máquina.

• Hoje em dia é muito fácil aprender Linux porque temos acesso à internet e Wikis, ao contrário dos anos 90.

Tópico Principal: Front-end

• O front-end é um assunto desnecessariamente complicado na carreira de programador Web.

• Há muitas tecnologias diferentes no front-end, o que pode ser confuso para iniciantes.

• Em vez de dizer logo de cara o que estudar, Fabio Akita explica por que essas tecnologias existem.

História do Front-end

Overview: Nesta seção, Fabio Akita explica a história do front-end e como ele evoluiu ao longo dos anos.

Como a Internet Funciona

• Quando você digita um endereço no navegador, ele precisa traduzir o domínio em um endereço IP usando um servidor DNS (Domain Name Server).

• Depois disso, roteadores e provedores conectam seu navegador a um servidor usando o protocolo TCP/IP.

• O servidor web é um programa que ouve conexões em uma porta, como a porta 80 para HTTP ou a porta 443 para HTTPS.

Servidor Web Mais Simples

• O servidor web mais simples lê um arquivo da máquina e serve esse arquivo.

• Os servidores web ouvem conexões em portas específicas, como a porta 80 para HTTP e a porta 443 para HTTPS.

Conclusão

Overview: Nesta seção, Fabio Akita conclui o episódio explicando que o front-end é complexo porque evoluiu ao longo dos anos. Ele espera que os espectadores tenham mais perguntas do que respostas no final deste episódio.

Resumo

• O front-end é complexo porque evoluiu ao longo dos anos.

• Aprender sobre as tecnologias de front-end pode ser confuso para iniciantes.

• Fabio Akita explica por que essas tecnologias existem em vez de dizer aos espectadores o que estudar.

O surgimento do hipertexto e da World Wide Web

Nesta seção, o palestrante discute o surgimento do conceito de hipertexto e como isso levou à criação da World Wide Web.

O que é um link?

• Um link é composto por um "A" que significa anchor ou âncora e href que significa hypertext reference.

• O conceito de hipertexto surgiu quando alguém pensou em criar links entre textos.

• A World Wide Web nasceu a partir desse conceito.

Surgimento dos sites dinâmicos

• Com o surgimento dos executáveis, os servidores web começaram a reconhecer quando alguém pedia um executável e em vez de ler o arquivo e cuspir o conteúdo pro navegador, ele primeiro tentava rodar esse executável no servidor e cospe pro navegador o resultado dessa execução.

• Isso levou ao surgimento da primeira geração de sites dinâmicos, que podiam mudar dependendo do que o executável fazia.

• Perl se tornou a principal linguagem para fazer CGIs.

Apache: O servidor web open source mais popular

Nesta seção, o palestrante discute a história do servidor web Apache.

História do Apache

• O nome "Apache" foi inspirado em "A Patch", já que ele não deixava de ser um puxadinho de remendos de código que foram sendo adicionados, um patch de cada vez.

• O Apache era open source, o que significa que seu código estava disponível para qualquer pessoa ver e modificar.

• A briga entre a Microsoft e a Netscape pela hegemonia da Web deu início à Guerra dos Navegadores.

CSS: Separando estilo do conteúdo

Nesta seção, o palestrante discute a história do CSS e como ele permitiu separar o estilo do conteúdo na Web.

História do CSS

• HTML foi inspirado em outras linguagens de marcação de conteúdo como SGML, voltados estruturar documentos governamentais que pudessem ser lidos por um computador.

• A função do HTML era marcar o que era um cabeçalho, um parágrafo, uma lista, e os perfis de impressão decidiam fonte, espaçamentos e tudo mais pra comportar esse conteúdo numa página de papel.

• Com CSS separamos o estilo do conteúdo e ganhamos mais controle sobre como o navegador pinta o visual na tela.

Conclusão

Nesta seção final, o palestrante conclui sua discussão sobre a história da Web.

Considerações finais

• O surgimento da World Wide Web mudou completamente a forma como as pessoas acessam informações.

• A evolução da tecnologia web continua até hoje com novas ferramentas sendo criadas constantemente.

História da Web

Nesta seção, o palestrante fala sobre a história da web e como ela evoluiu ao longo dos anos. Ele começa falando sobre a Netscape e a fundação Mozilla, em seguida, discute o Opera e os primeiros dispositivos móveis. Ele também fala sobre media types e media queries, bem como a integração do Internet Explorer no Windows.

Evolução dos Dispositivos Móveis

• Aparecimento de marcas famosas na época como Nokia ou Siemens.

• Primeira geração de pseudo-"smartphones".

• Uso de media types que evoluiriam para as media queries.

• CSS pergunta ao navegador que tipo de mídia estamos lidando.

Integração do Internet Explorer no Windows

• Integração das tecnologias direto no sistema operacional.

• Todos os navegadores de arquivos usam MIME types.

• Caracterização prática monopolista da Microsoft em forçar as pessoas a usar Internet Explorer.

Servidores Web

• Apache se tornou capaz de executar um script que manipulava o HTML antes de mandar para os navegadores.

• Evolução do mundo de escrever páginas de texto com hiperlink pra algo mais dinâmico e visualmente mais agradável.

• Surgimento da semente para coisas como e-commerces.

Guerra Server-Side entre PHP e ASP

• Criação de páginas dinâmicas com extensões embutidas diretamente dentro do núcleo do Apache.

• Adição da extensão de ASP no IIS.

• Guerra server-side entre PHP e ASP pela hegemonia do mundo servidor.

Servidores de Aplicação e a Evolução do Front-End

Nesta seção, o palestrante discute a evolução dos servidores de aplicação e do front-end da web.

Evolução dos Servidores de Aplicação

• Os servidores de aplicação têm como principal função executar programas que geram HTML.

• Com a entrada de programadores mais experientes, surgiram tecnologias que permitiam o tráfego seguro de informações, como o SSL da Netscape.

• Surgiram as primeiras aplicações Web, como content management systems (CMS), incluindo versões open source como PHP Nuke e Mambo.

Evolução do Front-End

• A evolução do CSS1 para o CSS2 inaugurou a época das Web Fonts e moveu os layouts ou estruturas de páginas para a era Tableless e design fluido.

• O GMAIL foi provavelmente a primeira aplicação Web que substituiu com sucesso um dos programas nativos mais importantes num sistema operacional: o cliente de e-mails como o Outlook da Microsoft.

• Na era Java do começo dos anos 2000 popularizou-se o conceito de Frameworks, que fornecem uma estrutura pré-definida para ajudar no desenvolvimento de aplicativos.

• Com Ruby on Rails em 2004, surgiu a primeira geração de sub-frameworks Javascript e CSS.

Conclusão

A evolução dos servidores de aplicação permitiu a criação de aplicações web mais complexas e seguras, enquanto a evolução do front-end permitiu o desenvolvimento de interfaces mais interativas e visualmente atraentes. O surgimento de frameworks também ajudou no desenvolvimento ágil de aplicativos.

A Brief History of Web Development

This section covers the evolution of web development from the 90s to the present day, including the rise of smartphones and the demise of Flash.

The Rise of Interactivity in Web Design

• In the 90s, web design was limited to static HTML pages with minimal interactivity.

• In 2007, smartphones revolutionized web design by introducing touchscreens and smaller screens that required new approaches to design.

• Java applets and ActiveX were popular in the 90s as ways to add interactivity to websites without using HTML or CSS.

The Demise of Flash

• Flash was a popular plugin for adding animation and video playback to websites but had many security issues.

• Apple refused to support Flash on its devices, which led to its eventual demise.

• HTML5 and CSS3 were developed as alternatives to Flash, allowing for more advanced animations and video playback directly within browsers.

The Evolution of Web Development

• GPUs allowed for accelerated graphics rendering on websites, leading to new technologies like WebGL.

• From 2008 until 2015, there was a period of transition where web developers had to adapt their skills as new standards were being implemented across different browsers.

• Today, web development continues to evolve with new technologies like AI and machine learning.

Surgimento de transpilers e linguagens como SASS e Coffeescript

Nesta seção, o palestrante discute o surgimento de transpilers, que são linguagens que traduzem uma linguagem para outra. Ele também fala sobre a criação do SASS e do Coffeescript.

Transpilers

• Surgimento de transpilers

• Transpilers são linguagens que traduzem uma linguagem para outra

• Exemplo de transpiler é o SASS, escrito em Ruby

• O LESS é uma versão criada pelo Twitter

SASS

• O SASS permite estruturar melhor o CSS

• Escrito em Ruby por Hamptom Caitlin

• Permite reusar código e esconder detalhes específicos de navegadores

Coffeescript

• Compilador em Ruby chamado Coffeescript

• Adicionou conceitos de outras linguagens para criar uma nova mais agradável

• Interpolação de strings

• Melhor controle sobre enumerators e iteradores

• Nova sintaxe para funções anônimas

Design responsivo e usabilidade

Nesta seção, o palestrante discute a necessidade do design responsivo com a chegada dos smartphones com telas verticais e resoluções diferentes. Ele também fala sobre a importância da usabilidade.

• Surgimento de smartphones com telas verticais e resoluções diferentes

• Necessidade de criar estilos que se adequassem automaticamente ao formato da tela

• Consolidação de elementos flutuantes com espaçamento relativo do CSS2 transicionamos para o design responsivo

• Importância da usabilidade

• Criação de telas interativas que só usam o dedo

• Discussão intensa entre 2009 e 2015

Design minimalista

Nesta seção, o palestrante discute a linguagem minimalista trazida pela Apple com seu estilo de design e linguagem de usabilidade.

• A Apple trouxe a linguagem minimalista, que valoriza os espaços em branco entre elementos, linhas simples sem escândalo de cores bregas e tudo desalinhado que se via em páginas de redes sociais como MySpace.

Frameworks CSS

Nesta seção, o palestrante discute frameworks CSS criados para evitar reinventar a roda em cada site.

• Empresas pararam de reinventar a roda em cada site e passaram a criar bibliotecas reusáveis

• Criados frameworks CSS escritos nas linguagens SASS e LESS

• O Bootstrap é o mais famoso deles

Gerenciamento de assets

Nesta seção, o palestrante discute a necessidade de gerenciar corretamente as versões corretas que os projetos precisariam.

• Passamos a reusar bibliotecas como um JQuery da vida, código pra Google Analytics, frameworks de CSS gigantes

• Consolidamos no Bundler para baixar as bibliotecas e gerenciar corretamente as versões corretas que nossos projetos precisariam.

• No mundo Javascript o NPM pelo menos se tornou o padrão de fato para gerenciar os assets no lado da máquina do desenvolvedor.

Otimização dos assets

Nesta seção, o palestrante discute a otimização dos assets para ficarem menores.

• Como otimizar esses assets pra ficarem menor? Alguém parou pra pensar que esses assets de Javascript e CSS são tudo texto.

• Programadores sabem fazer texto ficar menor

• Exemplo com tabulação, espaços

• Usando gzip para comprimir arquivos

• Minificação dos arquivos

Minification, Asset Pipeline, and Frameworks

Neste trecho do vídeo, o palestrante fala sobre a otimização de arquivos HTML, CSS e JavaScript por meio da minificação e do uso de ferramentas como Grunt, Gulp e Webpacker. Ele também discute o surgimento dos frameworks Javascript e sua evolução até os dias atuais.

Minificação e Asset Pipeline

• A minificação é o processo de reduzir textos humanamente legíveis em textos menores que navegadores conseguem ler.

• O Asset Pipeline é um pipeline de processamento de assets que nasceu no Ruby on Rails e agora é usado em outras linguagens.

• O HTTP/2 tornou o Asset Pipeline menos necessário.

Frameworks Javascript

• Os frameworks Javascript surgiram para gerenciar componentes gráficos com estados complexos.

• Ember, Angular, React + Redux ou Vue.js são exemplos de frameworks Javascript.

• Ember se parece um pouco com Ruby on Rails em estrutura. Angular surgiu do antigo GWT do Google. React foi criado pelo Facebook para tornar mais veloz o desenho de partes da tela cujo estado foi modificado com seu Virtual DOM. Vue.js começou a ganhar algum momento graças à sua inclusão como padrão no framework Laravel no mundo PHP.

Single Page Apps and Hybrid Apps

Nesta parte do vídeo, o palestrante fala sobre a evolução das aplicações web para Single Page Apps e Hybrid Apps.

Single Page Apps

• Uma única página carrega toda a aplicação que é composta de javascript e assets como CSS e imagens.

• O conceito de SPAs ou Single Page Apps surgiu a partir do nascimento de aplicações mais complexas em interação e estado como o próprio Google Docs, Slack, Spotify e outros.

Hybrid Apps

• Com a evolução do Javascript ES6, a dominância do Chrome como navegador mais usado e a decadência do Internet Explorer, começou a surgir uma nova classe de aplicativos híbridos.

• Aplicativos desktop ou mobile tecnicamente têm uma estrutura nativa que liga com o hardware mas são controlados por uma fina camada de Javascript e outras tecnologias Web como HTML5 e CSS3.

Linha do Tempo das Tecnologias de Front-End

Nesta seção, o palestrante apresenta uma linha do tempo das tecnologias de front-end e como elas evoluíram ao longo dos anos. Ele também fornece dicas sobre como estudar essas tecnologias.

Evolução das Tecnologias de Front-End

• Diversas tecnologias surgiram ao longo dos anos, incluindo Active X, Applets Java, Coffeescript, GWT e outras.

• Atualmente, os padrões HTML 5, CSS 3 e Javascript ES6 são amplamente utilizados juntamente com ferramentas como React e SASS.

• É importante entender a história de cada tecnologia para saber por que ela foi criada e quais problemas ela resolve. Também é importante saber se ainda vale a pena aprender ou se há substitutos melhores disponíveis.

• O objetivo é ter muitas perguntas sobre o que estudar. Aprender na tentativa e erro é fundamental para entender conceitos avançados.

Dicas para Estudar as Tecnologias de Front-End

• Comece pesquisando a história da tecnologia em questão para entender sua finalidade.

• Encontre projetos open source no Github relacionados à tecnologia que você está estudando e tente reproduzi-los em sua máquina.

• Aprenda os conceitos básicos primeiro antes de avançar para assuntos mais complexos. Teoria e prática são igualmente importantes.

• Procure tutoriais e cursos online para ajudar no aprendizado, mas não dependa exclusivamente deles.

Conclusão

• O objetivo desta seção foi fornecer uma linha do tempo das tecnologias de front-end e dicas sobre como estudá-las. Na próxima seção, o palestrante abordará as tecnologias de back-end.