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

olá pessoal fábio akita estamos no quarto episódio desta série semana passada começamos com algumas coisas básicas do developer world map onde discute porque saber de ti e aprender linux de verdade são as duas coisas mais importantes para começar mas eu me lembrei no caso de linux que eu disse que tinha duas formas você aprender do jeito difícil que é instalar e configurar uma distro como arc linux no ambiente virtualizado como o virtualbox ou aprender o jeito 13 difícil que eu esqueci dimensionar no final do episódio e que instalando direto como sistema operacional da sua máquina

sim vai ser bem difícil se fosse uma única máquina e você só tiver acesso ao site do ar que linux pelo celular mas vai por mim hoje está bem fácil porque a gente fazer essas coisas nos anos 90 só confiando que tinha tudo certo nos disquetes e sem internet para baixar alguma coisa caso tivesse esquecido eo ic sequer haviam sido inventados aliás bull não tinha sido inventado então considere que hoje está muito fácil e instale arc linux como sistema operacional principal se conseguir fazer isso sozinho você está no caminho certo no episódio de hoje vamos

falar sobre um dos assuntos mais desnecessariamente complicados da carreira de programador web um guarda-chuva que chamamos de front end porém em vez de seguir world map nesse episódio eu vou fazer uma longa tangente aliás vai ser um dos meus episódios mais longos então não deixe de dizer nos comentários se preferiam que eu tivesse quebrado esse episódio em duas partes ou se nesses casos a hockey cerh longo mesmo se você está entrando hoje no mercado de front ends vai esbarrar em dezenas de letrinhas coisas como sas vi object engler bootstrapping npm e anil abhipec flow script

da arte bens max wsp as raio e por aí vai eu entendo por que alguém que está iniciando os estudos agora vai ficar extremamente confuso sobre por onde começar e como sempre o melhor jeito de entender como começar é do começo [Música] a tangente que eu me referi é que eu vou fazer o contrário da maioria dos tutoriais ou guias que falam de front end em vez de dizer logo de cara o que eu acho que você devia estudar eu pessoalmente acho mais fácil explicar porque aquela sopa de letrinhas existe e daí vocês mesmos podem

começar a chegar em algumas conclusões a história do front end é a própria história da web e algumas coisas que você tem hoje só fazem sentido no contexto dos anos 90 ou dos anos 2000 sem saber disso você meio que tem que engolir como as coisas são sem entender por que e no final do episódio espero que vocês tenham muito mais perguntas do que neste momento a estrutura mais simples que você precisa ter na cabeça a seguinte quando você abre o navegador e digitar o endereço tipo https meu site ponto com.br ele vai fazer dezenas

de operações mas no mínimo ele precisa primeiro traduzir o domínio no endereço ip e quem faz esse trabalho inicial é o tal servidor de dns o domínio name server que você já deve ter pelo menos ouvido falar o nome e para onde a configuração de rede do seu computador está apontando dns é como se fosse uma lista telefônica traduzindo nomes para números agora é tarefa da tal rede roteadores provedores conectar seu navegador a um servidor a internet funciona porque todas as pontas falam o mesmo formato de mensagens e tráfego onde uma determinada maneira que é

o que chamamos de protocolo e o padrão que nos interessa é o famoso ter cpi p por agora só entenda que com o endereço ele encontra o servidor certo no mundo e bem resumo estamos falando de um programa ou aplicação que é um cliente de tcp ligando a um servidor pcp que fica escutando o que chamamos de uma porta todo servidor web que serve página html é um programa que quando você carrega ele se liga a uma porta que é representado por um número que vai de uma mais 65 mil a convenção é que um

servidor web de ouvir conexões na porta 80 o servidor ssh houve na a22 um servidor web também escuta na porta 443 quando é saber que são de conexão segura via https e muitos servidores de desenvolvimento como o dj s brail java houve importa como 3 mil 5 mil oitenta 80 respectivamente não tem nada de mágico nesses números são arbitrários e foram escolhidos anos atrás e por isso é só uma convenção mas na prática qualquer número de porta serve contanto que exista alguma coisa escutando nessa porta nesse minuto de explicação eu simplifiquei bastante na faculdade você

faria exercício simples escreveu um programinha que escuta numa porta e outro que conecta nessa porta é assim que começa a nascer a semente de um servidor web e de um navegador agora o que é o servidor web mais simples de todos eles simplesmente nenhum arquivo da máquina e serve esse arquivo o endereço completo que você digita no navegador se chama url ou e universal resource locator que é composto pelo protocolo pelo domínio e pelo caminho de um arquivo no caso mais simples então antigamente você ver endereços como esse site da faculdade ponto e deu barra

josé barquinho e esse tio josé se você estudou linux como eu disse no episódio anterior vai saber que é um atalho para o diretório barrou ibarra josé e é assim que você faz o servidor web mais simples de todos e como hoje em dia sabemos o mais bugado em termos de segurança porque se ele terá dois direto da url para um caminho de arquivos no seu sistema operacional sem nenhuma checagem você poderia ficar tentando achar maneiras de vasculhar todos os arquivos do usuário mesmo os que ele achou que não seriam servidos publicamente ea gente fazia

isso mesmo antigamente para achar brechas e quando o navegador que é um exemplo de um programa que é cliente de tcp recebe esse arquivo ponto html agora ele traduz as marcações para elementos visuais e como existe o elemento que chamamos de link que é o hf onde a significa em co âncora e hf ripper text rain franz nasceu o conceito de hipertexto onde um texto possui links para outros textos no começo ninguém estava interessado em visual só em disponibilizar textos linkando com outros textos e assim nasce a tal o world wide web o www conceitow

com henna seria naturalmente dados esses elementos que eu mencionei até agora era inevitável no próximo passo alguém pensou e se em vez de digitar o nome de um arquivo eu digitar o nome de um programa executável um binário que é um programa que no caso do windows são aqueles arquivos que termina o nome com o ponto e xc tipo o word ponto x é o excel ponto este z em vez de um hipertexto cujo nome termina com a extensão ponto html no navegador bem antigo não ia acontecer nada provavelmente podia dar erro porque o servidor

não saber interpretar algo que não é texto mas aí alguém fez um dos primeiros servidores web que conhecer quando alguém pede um executável e em vez de só ler o arquivo e cuspiu o conteúdo pelo navegador ele primeiro tenta executar esse programa no servidor e cospe pelo navegador o resultado dessa execução que esperamos que seja um texto em html ou seja para o navegador não faz diferença se pedimos um executável um arquivo texto ao servidor contanto que o que volte pra ele como resposta seja um conteúdo texto em html e se considerarmos que pedir arquivos

textos que nunca mudam é algo estático assim nasce a primeira geração de sites dinâmicos ou seja que dinamicamente podem mudar o resultado dependendo do que o executável faz isso começa com programas binários feito sem ser mesmo e o padrão foi nomeado como seja ir ou como um guerreiro e interface mas fazer se ficar cuspindo html é como usar o canhão para matar uma mosca mas felizmente havia outra linguagem mais simples em ambiente unix e linux e melhor adaptada para manipular cadeias de texto ou strings e foi assim que paul se tornou a principal de linguagem

para fazer seja isso foi assim que o mundo começou a conhecer mais sobre essa subida linguagem que o pão trazia chamada hardware express chão soube guex para manipular strings se você não sabe o que é o ibex coloque na sua lista de coisas obrigatórias para estudar e depois do surgimento de alguns servidores web como o da erenice é ser o da netscape dentre outros um começou a despontar pela sua facilidade de uso e por ser open source ou seja de código aberto o famoso apache cujo nome eu sempre ouvi a história de que foi inspirado

em pet que traduzem em português como um remendo já que ele não deixa de ser um puxadinho de remendos de código que foram seus adicionados o pet de cada vez para quem não sabe você pode comparar duas versões do mesmo arquivo de código um mais antigo e outro mais novo usando uma ferramenta de linha de comando que vem na maioria das distribuições linux chamada dfi para tirar a diferença entre eles e colocar no arquivo de remendo o pet e usa outra ferramenta a linha de comando pet para aplicar essa diferença e falando em remendos de

arquivos uma das coisas mais irritantes da web no começo dos anos 90 era que se eu quisesse fazer um site com dez páginas e algum layout o estilo visual eu precisava copiar e colar o html inteiro de uma página para outra dez vezes e da editar o conteúdo diferente entre cada uma se depois eu quisesse mudar o layout para outro formato eu precisava abrir as dez páginas e mudar uma a uma originalmente a idéia não era que o html de tasci como o conteúdo seria visualmente estilizado a idéia era que cada navegadores utilizasse as páginas

do jeito que quisesse o motivo disso foi porque html foi inspirado em outras linguagens de marcação de conteúdo como sg ml voltados para a estrutura 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çamento e tudo mais para comportar esse conteúdo numa página de paz eu e os navegadores é que decidirão como apresentar esse conteúdo num monitor inclusive o usuário do navegador o dia customizar escolhendo que não queria o padrão de fonte times new

roman e sim arial e todas as páginas mostrariam arial por isso se você viu exemplos de páginas do começo da web elas eram todas bem semsau com fundo cinza fontes pretas e links azuis tudo meio igual você já podia embute um jeito rudimentar de forçar o controle de estilo direto no html com o atributo chamado style mas foi com css que separamos o estilo do conteúdo e ganhamos mais controle sobre como navegador pinta o visual da tela coisas como escolher fontes tamanhos passamentos alinhamento e muito mais isso foi no começo dos anos 90 lá por

95 96 com o css apareceu pela primeira vez nessa época você já tinha netscape superando o antigo museu aqui mas o internet explorer sairia na frente porque implementava melhor o primeiro css ao contrário da netscape foi quando surgiram páginas de teste como famoso esse dia para checar a compatibilidade e css e navegadores em uma página com a história completa da novela em cima do css que estou deixando nos links na descrição abaixo essa briga meio deu início à guerra dos navegadores as ferozes batalhas entre a microsoft ea netscape pela hegemonia da web com cada versão

do navegador tentando ser melhor principalmente em termos visuais e de interatividade do que o anterior e recomendo muito que você procure pelo documentário do discovery the true story of the internet onde o primeiro episódio na rai mais detalhes como foi essa guerra eu falei sobre isso nos primeiros episódios desse canal quando de dicas de séries e filmes para programadores no fim dos anos 90 a netscape estava perdendo a guerra e resolveu mudar seu modelo de negócio que envolve a vender o navegador e abrir o seu código-fonte criando a fundação mozilla um ópera apareceu também mostrando

como redimensionar conteúdo para dispositivos móveis da época como os palm pocket psc os - dumbphones de marcas famosas na época como nokia ou siemens a primeira geração de seu de smartphones vamos assim dizer isso antes do surgimento da black berry e foi quando vimos o primeiro uso de mídia times que evoluíram para mídia cores e viriam a se tornar oficiais só no css 3 em 2012 mas os primeiros rascunhos da tam pelo menos de 97 se você não sabe o que são mídia tais lembre-se que layout de conteúdo era mais especializado para impressão em papel

na editora revistas jornais ou livros e tínhamos agora que adaptar para monitores de computador mas além disso ainda havia outras formas de mostrar conteúdo imagens positivos táteis como braille para cegos ou que gera um som para surdos cada um deles é um tipo de mídia ou mídia type e ópera começou a popularizar o uso do atributo arroba mídia que evoluiria para as mídia quest que usamos hoje onde o cse se pergunta o navegador que tipo de mídia estamos lidando é uma tela de celular tela de tablet hotel de computador com o boom do internet explorer

foi quando a microsoft começou a embutir o máximo possível da web no windows e com windows 98 vimos pela primeira vez a integração dessas tecnologias direto no sistema operacional como a utilização de maimi tais uma tecnologia que surgiu primeiro em emails para possibilitar embute arquivos binários em emails que eram somente texto puro miami que significa multa e corpos internet email eckstein shows e que você conhece como paris que determina o tipo de arquivo como text html lima de png ou vídeo e mpeg é uma forma mais avançada do que no windows são as extensões de

arquivos como ponto html o ponto png o ponto mpg o falha explorer foi mesclado ao internet explorer que possibilitava explorar os arquivos da máquina ou explorar os arquivos da web hoje em dia todos os navegadores de arquivos online type e isso foi um dos estopins para caracteriza prática monopolista da microsoft em forçar pessoas a usar a internet explorer a comissão europeia na época forçou a microsoft a deixar os fabricantes de computador escolher se deixariam pré instalado o netscape ou ópera mas o argumento da microsoft era que é impossível separar o internet explorer do windows porque

eles eram parte fundamentais um do outro de como você navegavam no sistema operacional foi uma controversa enorme na época do windows 98 voltando ao assunto dos servidores web quando os servidores como apache se tornaram capazes de executar coisas como script que manipulava html antes de mandar para os navegadores eu poderia escrever o html do layout como se fosse um template um modelo e fazer só o conteúdo diferente daquelas dez páginas separadas e se precisasse mudar o layout bastava mudar nesse template e todas as 10 automaticamente seriam modificadas com esse conceito começamos a evoluir o mundo

de escrever páginas de texto com o hiperlink para algo mais dinâmico e visualmente mais agradável do que texto sem times new roman ou corri com o fundo cinza a diferenciação começou a ser a customização gráfica e de design do site e começava a nascer a profissão de web designers que começou com designers gráficos de revista tentando entender como traduzir a linguagem visual de revistas e livros no formato digital da web a gente via muito design bizarro nessa época eu diria que foi a época do esplendor exuberante barroco do design web e não é só isso

dado que linguagens no servidor seja em ser o pro poderiam ter acesso a recursos como bancos de dados de repente uma nova possibilidade se abre aplicações web em vez de só sites web e se eu pudesse fazer um formulário onde o usuário pudesse ditar seu cartão de crédito e enviar para esse script pro no servidor e gravar o banco de dados é como se inicia a semente para coisas como e-commerce a microsoft novamente não deixou passar a oportunidade e criou seu próprio servidor web o ie s ou internet information services que adicionou tecnologias proprietário como

o front page serviu eckstein shams que junto com o programa front page permite criar páginas dinâmicas convalidações complicadas de formulário de maneira simples porém páginas feitas com essas extensões só podiam rodar e e s e ser interpretados por internet explorer aumentando ainda mais a pressão em cima de apaixonante escape você encontrar resquícios disso em produtos atuais da microsoft como o servidor share point em paralelo ao prouni ou seja isso nasceu outra forma de criar páginas dinâmicas com extensões embutidas diretamente dentro do núcleo do apache e seu principal proponente foi o php agora em vez do

servidor web chamar o programa externo para gerar os html sopro servidor web ganhou a capacidade de interpretar lógica de programação para cursos e html a microsoft seguiu lado a lado adicionando em 96 a extensão de aço e no ie s então nasceu a guerra server side entre php asp pela hegemonia do mundo servidor na consequência disso ainda ganhamos aberrações como coldfusion um representando o pico do mau uso do então inovador xml não só como forma de representar dados em formato de tags mais usar tags como linguagem de programação inspirado pelo famigerado jsp no mundo j2

e isso coincide com a evolução do java no lado do servidor em outra categoria de servidores web os application server ou servidores de aplicação entenda que um servidor de aplicação é um servidor web mas nem todo servidor web como a paixão indy next de hoje é um servidor de aplicação servidores web tem como principal função servir páginas html e servidores de aplicação tem como principal função executar programas que cospe html essa época também coincide com a abertura inicial de capital a equipe ou os da netscape a ru que marca o início da famosa bolha da

internet do meio para o fim dos anos 90 com a entrada de programadores mais experientes do que meros designers fazendo html tecnologias que permitirão o tráfego de informações seguras com o sl da netscape nasceram e as primeiras aplicações web como content management systems ou se é mas como histórico file net o monstruoso viet que todo o portal de conteúdo usava versões open source como pega pennock mambo que viria a inspirar a próxima geração como o drupal juma ousou pi em python que daria origem ao tony e finalmente o nascimento do wordpress no começo dos anos

2000 que ajudaria a iniciar a era dos blogs uma vez que começou a ficar claro que era possível programar aplicações interativas controlar o visual se tornou mais e mais importante a evolução do css um processo s2 que inaugurou também a época das bebe fontes e moveu os layouts ou estruturas de página de usar tabelas células pra ela ter bulas e design fluido também viu o nascimento de outras duas tecnologias fundamentais para web de hoje da enami html ou de html com html versão 4 e uma tecnologia inaugurada pela mozilla na forma de há cinco anos

javascript ou ajax e seu principal garoto propaganda o gmail que começou a ser desenvolvido em 2001 e foi lançado só no dia 1º de abril de 2004 também inaugurando a era dos memes do dia da mentira o gmail foi a personificação de tudo que mil gays temia nos anos 90 que os navegadores web se tornassem substitutos dos sistemas operacionais no caso do windows na função de executar programas ele previu corretamente e sem padrões proprietários você não teria como segurar os usuários do windows porque eles poderiam rodar o mesmo programa no navegador como netscape em qualquer

sistema como mac oeste ou distribuições linux o gmail foi provavelmente a primeira aplicação web que substitui com sucesso um dos programas nativos mais importantes no sistema operacional o cliente de e mails como um outlook da microsoft e isso ameaçava tudo incluindo o monopólio sobre programas como o office nesse ponto da história estamos entrando em 2004 em termos de tecnologias de frontin já avançamos html até a versão 4 que comporta coisas como de html ajax e derivado do sml tivemos html mas também surgiria o xml para estruturar qualquer tipo de dados e como uma estrutura mais

geral onde html ou mais especificamente xhtml seria um caso especial html é especializada em estruturar conteúdo de texto xml instrutura dados como cadastro css versão 2.1 que é o cascading style sheets passou a suportar web fontes internacionalização posicionamento relativo ou absoluto que permite que os elementos na tela se ajustem dinamicamente de acordo com o tamanho total da tela do ao contrário do que fazemos no meio dos anos 90 onde considerávamos um comprimento fixo de tela para encaixar os elementos especialmente dentro de tabelas e usando muito recorte de imagens porque o css não era poderoso o

suficiente para alguns designers gráficos além disso é importante entender que css é uma linguagem declarativa onde declaramos regras visuais que são aplicadas no html e as regras são cascatinha dados onde uma regra é das características da regra para enumerar que é de regras aliás tenham sempre em mente a estrutura de uma árvore o hierarquia quase tudo na web é baseado nessa estrutura html são árvores de elementos css são árvores de atributos de estilo sites são árvores de páginas uma linkando na outra e agora que evoluímos de simples sites de conteúdo hipertexto para gerenciadores de conteúdo

cms pra e covers e com o início da era de aplicativos web como gmail e redes sociais como orkut myspace e friendster abriu se uma nova fase de desenvolvimento em paralelo na era java do começo dos anos 2000 o popularizou se o conceito de frameworks que mais do que linguagens fornece uma estrutura pré definida pra ajudar a desenvolver aplicativos fornecendo coisas como segurança a ação de dados autenticação e autorização granular em pleitez visuais e que determinava o meio que um dia de lugares onde você devia colocar cada tipo diferente de código antes disso cada aplicativo

como junto a outro pau fazia tudo do zero no mundo php começaram a surgir fran e max inspirados em j2 e ou estreantes como usem de framework e finalmente abrimos a era do grupo 1 brews por fim de 2004 e agora lendário demo do blog 15 minutos que david hanson gravou no evento física de 2005 no brasil inaugurando a era dos freios que eram os conceitos de agilidade que foi inaugurado pelo manifesto ágil de 2001 por causa de ruby on rails começou a surgir a primeira geração de subir freimark javascript css até então escreveu html

ou css ou mesmo javascript geral muito trabalhoso que não funcionava exatamente da mesma forma em todos os navegadores lembrando que estamos na época do famigerado internet explorer 6 edu também famigerado windows xp do netscape 7 com isso em mente alguém pensou por que não unificar essas coisas porque não fazer um frame java script para homogeneizar e evitar que o programador ter que fazer código específico para a internet explorer ou netscape daí surge a primeira geração de micro framework especializados em visual do lado do navegador como tons do world o próprio jay com ele e os

que o ruby on rails tornou popular na época no caso o protal equipe o script tacos script tacos que popularizou novas formas de elemento de interação como drag and drop de elementos no html onde podíamos arrastar as coisas como podemos arrastar emails no emboque do gmail pouco tempo depois em 2007 surge uma nova revolução na área de design visual e usabilidade vemos o nascimento dos smartphones a partir do primeiro iphone lançado em julho de 2007 com ele temos um navegador safari que é uma evolução do navegador chamado concordou a deh do linux que usava o

núcleo caga tml que viria se tornar o que conhecemos hoje como webkit só que tela de celular que uma resolução muito menor do que um desktop e em 2007 o mais comum era monitores com resolução de 1024 pixels por 7 6 8 mas o iphone tinha meros 320 por 480 pixels uma coisa que se tornou popular nos anos 90 e que eu ainda não falei foi uma forma de simplesmente não usar nada de html nem css e javascript para tentar tomar a dianteira empresas como a microsoft não fizeram só componentes proprietários para o servidor como

front page ser rex tem chances ou asp hassan criou java e queria dar um jeito de colocar java em tudo o java servia para fazer muitas coisas incluindo aplicativos para desktop como os malditos aplicativos de imposto de renda que você usa até hoje mas eles queriam dar um jeito de colocar java nos navegadores mas sendo uma linguagem em geral ela poderia virar um problema de segurança se de repente você rodar se já o navegador ele pudesse acessar seus arquivos por isso criou se o conceito de sandbox ii um container que permite executar código java com

baixos privilégios ou seja sem privilégio para acessar arquivos ou a própria rede ele devia rodar dentro desse conteúdo e assim nascem os applets quem dessa época não lembra do famigerado aplique demonstração que mostrava a água se mexendo num tipo de animação que era impossível de fazer só com o css ou mesmo com um gif animado e seguindo essa tendência a microsoft criou o padrão active ex que era o mesmo que a place mas em vez de usá java você programar vá em cepas pans ou mesmo visual basic 6 felizmente applet java e activex já não

existem mais mas a macromedia também fez seu cd box na forma do famigerado plug in flash que trazer tecnologias realmente legais pra época como ilustrações vetoriais com curvas de base e que já era usado em programas como o coreldraw o adobe illustrator para conseguir embutidos trações de melhor qualidade e tamanho muito menor do que uma imagem bitmap como jota pegue ou gif e mais do que isso adicionar o conceito de linha do tempo pra animar essas ilustrações adicionando uma linguagem bem toscas simples chamada actionscript e você podia fazer coisas interativas como joguinhos todo mundo jogou

alguma coisa em flash no começo dos anos 2000 em 2019 o processador de um iphone famoso a 12 bionic nos novos iphone apps s é quase tão potente quanto o processador intel core em um macbook pro um processador em um iphone original e 2007 era um processador arm11 de meros 412 mega hertz e tinha só um mero 128 mega bytes de ram ea bateria tinham mais de 1.400 menino perde hoje celulares têm até 4 milhão perde entre pouco processamento e pouca bateria sem teclado sem mouse só contante rodar flash é um exercício de futilidade os

primeiros android queriam se destacar deixando rodar flash mas rapidamente foi provado que só deixava celulares android extremamente lentos e bateria acaba num piscar de olhos flash já não tinha boa reputação por causa do tanto de bugs e principalmente buracos graves de segurança sua programação porca a gente dá um jeito de aguentar com cpus mais potentes e muita ram e desktop mais em smartphones não tinha para onde correr a apple se recusou a rodar flash e não só isso demonizou flash publicamente na famosa carta aberta de steve jobs como selou o destino do fim do flash

só que a partir de 2005 a única forma decente de ver vídeos do youtube ou outros sites era via o plug in the flesh ouvir o plugin de silverlight que ela tinha uma evolução do activex da microsoft mas também não durou muito sem esses plugins não havia vídeo a apple ajudou a evoluir o html para suportar playback de vídeo acelerado por hardware e popularizou em envelope mp4 de vídeo com compressão h 264 e com isso nascer novas tags de vídeo para html somado ao fim do flash também aumentou a pressão para adicionar funcionalidades a ação

também acelerado pela nova classe de gpu e assim surgem coisas como o atual câmbio controlado por css mg l a revolução dos smartphones a queda da sankay foi adquirida pela oracle que pois também um ponto final em a players as ingerências da microsoft pós julgamento antitruste dos anos 2000 que desacelerar o desenvolvimento do internet explorer e tecnologias como o silverlight tudo isso forçou o w3c e seu consórcio de empresas a acelerar uma coisa que já estava muitos anos atrasado a evolução para html5 e css3 que só aconteceu em 2014 onde alguns anos antes disso todos

os navegadores começando com o surgimento do google chrome em 2008 começaram a implementar uma funcionalidade de cada vez ficamos de 2008 e 2015 um período muito chato de transição a gente tinha que desenvolveu hebe em meio a html css javascript tanto no meio do caminho e mudando o tempo todo em cada nova versão de cada navegador era impossível fazer um site que funcionasse em todos os navegadores e em todos os dispositivos ao mesmo tempo com os padrões ainda não oficializados e cada navegador implementando parte da especificação e por conta disso surgiram meta linguagens para nos

blindar dessa bagunça foi quando joguei com ele deixou de ser opcional e passou a ser uma necessidade para lidar com javascript e css com o fim do flash java script voltou a ser a única alternativa viável para a animação e interação uma linguagem extremamente ruim que não via uma evolução significativa desde o começo dos anos 2000 então começou a surgir uma gambiarra na forma de transporte lers linguagens que não são compilados em instrução nativa de uma máquina real ou virtual mas que traduzem de uma linguagem para a outra linguagem novamente o mundo ruby on rails

veio tentar ajudar o robusta relton quente nem escreveu o saci ou se intere cali o são style sheets usando ruby sassá é tipo um dialeto de css que permite estruturar melhor o cse dando funcionalidade de reusar código esconder detalhes específicos de navegador o twitter resolveu criar sua própria versão e daí surgiu o leste sa celesc ficaram com correndo por anos mas as é superior hoje em dia também do mundo o clube em 2009 jaime a china escreveu um compilador em um clube chamado koff script uma nova linguagem cujo resultado da compilação era java script ele

adicionou dezenas de conceitos de linguagens como ruby python para criar uma nova linguagem muito mais agradável de trabalhar e que geraria a porcaria do javascript por baixo e isso ajudou muito a evitar temos que usar algo como jay com r ou ficar nós mesmos nos preocupando em adicionar código específico para cada navegador hoje em dia todo mundo demoniza koff script porque assim táxi dele é um pouco agressiva e pouco ortodoxa mas foi dele que saíram diversos conceitos como interpolação de streams melhor controle sobre o número de leitos e terá dores e agora famosa sintax de

fat é lo para funções anônimas e muito mais que foi incorporado ao java script versão s 6 que só foi sair em 2015 tornando o cofre script obsoleto mais do que só matar o flash o surgimento de smartphones com telas verticais e resoluções diferentes de um monitor de computador também surgiu a necessidade de criar estilos que se adequassem automaticamente ao formato de tela e com o movimento de ter boas ou seja parados há tabelas para a estrutura estrutura layout html ea consolidação de elementos flutuantes com espaçamento relativos ss2 transacionados protal design responsivo que tanto se

fala hoje em dia layout que automaticamente se a deco o dispositivo e com o advento da interação via tante uma nova classe de pesquisa foi iniciado o que hoje chamamos de 1 x ou usabilidade pense que até então normal era um teclado e mouse como criar telas interativas que só usam o dedo hoje em dia isso é um problema já resolvido mas principalmente em 2000 em 2015 isso foi assunto para muita discussão e como o primeiro smartphone de verdade do mundo foi o iphone da apple além das tecnologias ela trouxe outra coisa do seu dna

seu estilo de design e linguagem de usabilidade se o fim dos anos 90 foi a época barroca do design web a apple trouxe a linguagem de bauhaus o que hoje chamamos de design minimalista que valoriza os espaços em branco entre elementos linha simples em um escândalo de cores bregas e tudo desalinhado que se via em páginas de redes sociais como myspace ii e em cima dessa linguagem as empresas pararam de reinventar a roda em cada site e passaram a criar bibliotecas de estilo reusáveis e daí nascem os frei morte de css escrito nas linguagens a

celesc falei anteriormente o mais famoso deles sendo twitter boots trepp por isso muitos sites parecem que foram feitos pelo mesmo designer porque todo mundo usa bootstrapping em vez de partir do zero e ficar reinventando a roda redesenhando o visual de botões e outros elementos daí criamos elementos novos como hamburguinho para menos os de ambo tromsoe skrulls pai que toda além de impedir que usa com tantos novos elementos de javascript e css surgiu outra necessidade agora não era mais só escreveu um arquivo de css nem cá no html pronto passamos a reusar dezenas de bibliotecas como

os de qualidade a vida código para google analytics frangos de css gigante enfim muitos e muitos aceites primeiro precisávamos dar um jeito de baixa todos esses ácidos e bibliotecas nos nossos projetos sem ficar indo de site em site clicando no link de download descomprimindo oscips manualmente os diretórios no mundo pão já tínhamos coisas como cepam que permitirá baixar bibliotecas de um servidor central no mundo ruby depois de várias tentativas finalmente consolidarmos no bando ler pra não só baixar as bibliotecas mas gerenciar corretamente as versões corretas que nossos projetos precisariam e no mundo java script as

coisas começaram meio devagar com o advento do npm que só ficaria realmente usável quando concorrentes como early tentaram tomar seu lugar mas no mundo java script o mpm pelo menos se tornou o padrão de fato para gerenciar os acidentes no lado da máquina do desenvolvedor mas só isso não é suficiente como expliquei no começo do episódio o servidor web kospi html e todos esses acertos para o navegador e como agora colocamos dezenas deles dos nossos projetos você devia imaginar que quanto mais arquivos e quanto maior a eles foi mais lento vai ser o navegador baixa

e renderizar tudo e isso se tornou ainda mais óbvio nos primeiros smartphones hoje em dia a gente tem alta velocidade em conexões 4g e já estamos indo pra 5g mas em 2009 o normal ainda era 2g poucos com 3g como otimizar esses acertos para ficar e menor alguém parou pra pensar esses assis já o script css tudo texto nós programadores sabemos fazer texto fica menor por exemplo a gente escreve code com tabulação espaço usamos nomes grandes descritivos para ficar mais fácil pra outro programador conseguir editar esse código mas o navegador não se importa com espaço

em branco o nome descritivos computadores sabem ler e dados em formatação visual e espaços em branco nomes grandes ocupam o espaço desnecessário mais do que isso quanto mais arquivos separados tivermos mais lento vai ser então por que não juntar vários arquivos no único arquivo e porque não filtrarmos fora espaços em branco e reduzir nomes de variáveis e funções ao menor tamanho possível dentre outros truques esse é o conceito que chamamos de mini ficar são mini ficar textos humanamente legíveis em textos menores horrorosos mas que navegadores conseguem ler e com tantas atividades agora para chegar nos

arquivos de html css javascript finais otimizados temos que transpirar de sas para a css de koff script pra é 6 o s5 que na época era mais usado e é o que chamamos de canos de processamento de assis ou a cetip on line como chamamos do ruby on rails onde o conceito nasceu e no mundo java script surgiram coisas similares como um grande golpe e hoje em dia o mp ter somado a ferramentas como babel que fazem exatamente esse tipo de coisa e por causa disso todo novo framework que se preza tem algum tipo de

integração com coisas como web pecker pra ter esse pai pillai de processamento isso ficou um pouco menos necessário desde que evoluímos para o padrão http 2 mas isso é assunto para outro dia evoluindo em cima da herança do gmail só ajax não era mais suficiente e passamos a experimentar em tirar a lógica dos servidores de aplicação e transferiu o controle do estado da aplicação para mais próximo da tela gráfica e assim surge os freires javascript em vez de ficar controlando cada elemento da tela individualmente via javascript e ficar controlando os estilos globais com o css

porque organizar uma tela de uma aplicação direto só em seus elementos menores por exemplo no spotify em vez de falarmos em botões ou listas podemos separar em coisas maiores como playlist menu do usuário dashboard playback lista de resultado de pesquisa de música são todos grandes componentes que interagem entre si e cada um deles tem uma representação gráfica que depende de um estado por exemplo no dashboard playback temos estados como tocando pausado chan foi o ativo ou não e para criar esses componentes e gerenciar os estados no lado do cliente aproveitando a tecnologia do html5 como

web store que permite guardar esse estado no navegador surgem frémaux como em beber em rieti com redox e viu js e assim também surge o conceito de uma única página que carrega toda essa aplicação que é composta java script aceites como css imagens sem precisar mudar de página para atualizar entre cada estado pra fazer isso usamos ajax por baixo e mudamos tudo numa única página e por isso temos o conceito que vocês já devem ter ouvido falar de spa sou single page aplications isso aconteceu a partir do nascimento de aplicações mais complexas e interação e

estado como o próprio google docs slack spotify e outros e é por isso que hoje você tem esses frémaux na época que a apple estava na dianteira desse tipo de aplicativo por conta do icloud ela tinha um framework próprio chamado sprout cor dali veio a semente que viria se tornar em bar que também saiu da comunidade ruby on rails e por isso em bercy parece um pouco a estrutura com raios o google tinha o antigo jwt que foi muito usado no mundo java para fazer aplicativos parecidos com o gmail mas depois criou o enredo e

depois o pole mark não deu muito certo em adoção e com o crescimento do facebook necessidade de criar aplicativos como facebook messenger surgiu o reaction que torna mais veloz o desenho de parte da tela cujo estado foi modificado com o seu virtual do ou seja em vez de ficarmos redesenhando explicitamente um elemento na tela tipo mudar a cor de um botão para vermelho só mudamos o estado do botão e deixamos esse virtual dom redesenhar o que precisa na tela de forma que podemos evitar redesenhar o que não se precisa e ao mesmo tempo otimizar a

velocidade total do redesenho e na tentativa de fazer concorrência e evoluir em cima da experiência do endre ect no mundo open source surgiu o viu ponto js que começou a ganhar algum momento graças à sua inclusão como padrão no freio porque o ar havel no mundo php e nos dias de hoje com a evolução do java script s6 a dominância do chrome como navegador mais usado ea decadência do internet explorer e também o surgimento de processadores multi-core mais rápidos e mais eficientes nos smartphones com ram mais barata que permite que desktops e dispositivos consigam ter

seis ou oito gigas ou mais de hum começou a surgir uma nova classe de aplicativos os híbridos aplicativos de desktop ou de mobile que tecnicamente tem uma estrutura narrativa que liga com hardware como câmera touch áudio e o mais mas são controlados por uma fina camada de javascript e outras tecnologias web como html5 e css3 então a gente pode usar a mesma estrutura que eu escrevi anteriormente para fazer aplicativos desktop ou mobo como é o caso de coisas que usamos todo o dia com o próprio esporte fae o slac o editores de código como atuou

visual studio code e assim surgem também freimark híbridos como o eléctron que é uma forma de encapsulá tecnologias do chrome e abrir como se fosse um aplicativo nativo ou então rieti nem tive que torna possível você desenvolveu um aplicativo simples para aí o s ou android como se estivesse desenvolvendo um site web ect e caraca eu sei que o pincelei bem por cima de dezenas de assuntos e mais de 25 anos de história eu já disse em outros episódios que eu sinto que eu nasci na hora certa porque eu pude ver cada evento que eu

narrei aqui acontecendo em tempo real isso me ajudou muito porque eu pude aprendendo cada nova tecnologia à medida que elas foram aparecendo algumas delas já morreram como asp clássico flash silverlight activex applet java koff script jwt e ao mesmo tempo muitas novidades apareceram na forma dos atuais padrões html5 css3 javascript s6 e as ferramentas por cima delas como iets assim por diante mas eu espero que ao ouvir sobre essa linha do tempo você consiga ter uma noção melhor de onde cada coisa se encaixa e eu recomendo que você assista este episódio mais vezes não agora

mas de tempos em tempos para ver se o que eu tô falando vai fazendo mais sentido à medida que você vai estudando e treinando sempre que tiver dúvida sobre uma tecnologia comece do começo pesquisa sua história a história vai te dizer porque essa tecnologia existe que problemas ela foi desenhada para resolver ela ainda resolve esse problema da melhor forma o já surgiram os substitutos ainda vale a pena aprender ou já tem coisa melhor na frente por onde anda o autor original da tecnologia ou a empresa que patrocinou essa tecnologia são perguntas como é os que

vão te dar o norte sobre o que estudar e como estudar se eu fiz meu trabalho direito você começou esse episódio com dúvidas sobre o que estudar e deve ter terminado esse episódio com mais dúvidas ainda e esse é o objetivo se você tem poucas perguntas não está se esforçando o suficiente faça a pergunta errada e vai receber a resposta errada reveja seus conceitos veja a lista de coisas que têm para estudar coloque na linha do tempo veja quais problemas você vai resolver com quais ferramentas encontre problemas para resolver e vai aprendendo dessa forma na

tentativa e erro e quais problemas eu não disse no episódio anterior você precisa aprender a função dos projetos ou pensões que estão no derrame é por ali mesmo você vai achar o total colhido está grande que alguém fez ele vai está feito em inglês eu falei aqui você já entendeu pra que ele serve procura um tutorial online sobre angola daí vai ver que tem arquivos com extensão ponto s css que é saci e agora você sabe o que é saci e que deve ter algum pai pioline com web pec então procuro um tutorial de sassá

e outro de web pec e quando for rodar você já sabe pelo menos em conceito a diferença de um servidor web e um servidor de aplicações e se levou a sério o episódio anterior você está estudando distribuições linux agora procure um tutorial de como instalar configurar e sumiu em hindi next por exemplo e por hoje é isso aí o objetivo de hoje foi colocar as tecnologias de front end dentro da história semana que vem eu quero tentar fazer a mesma coisa com tecnologias beck and na seguinte finalmente um pouco sobre de vocs eu sei que

vocês ficaram com dúvidas e eu mesmo não sou melhor programador de front end então mandem suas dúvidas nos comentários abaixo pra todo mundo poderá ajudar a responder se curtiram mantém um jóia compartilhe com seus amigos assine o canal e cliquem no sininho para não perder os próximos episódios a gente se vê até mais pessoal