Desenvolvimento Web: Explorando Frameworks Frontend, Tendências e Melhores Práticas | PPTNC Podcast

0:00vieram PR facilitar muito a vida do desenvolvedor ISS isso é sem dúvida mas é preguiça você falou tudo é preguiça com a Ferrari no mesmo terreno que vai andar então é meio que injusto comparar uma coisa com a outra é [ __ ] Framework parrudo PR caramba tem um monte de coisa já pron lá dentro para você quanto react não que react já tem muita coisa a definir que vai vai de você para você definir como que vai ser ou não mais inteligente a sua Engine dentro do browser melhor vai renderizar o teu teu código Independente de ser Framework x Framework y o que manda ainda hoje em dia é o seu browser uma frase que o pessoal usou numa campanha da Mozilla que era de todos para todos então se você for olhar esse de todos para todos você vai ver que a web é feita para rodar uma cacetada de co muito bem muito bem meus amigos do PPT não compile estamos aqui para mais uma uma pauta técnica hoje é dia hoje dia hoje hoje o browser pega a memória e o sistema operacional não vê hoje é dia de 50 AB hoje é dia de crashar o Chrome hoje é dia de crashar o Chrome de da da lup infinito no node JS hoje hoje é dia hoje é dia hoje hoje é aquele dia que você e não é o update semare não é o update é o episódio sério por mais que não pareça né hoje nós vamos dar um banho de loja aqui para vocês nossos ouvintes tecnologias de frontend É isso aí fazer um catadão um catada asso aqui né eu vou voltar lá dos meus tempos de jquery para entender como é que funciona essa parada vai ter um pouquinho de naftalina aí no meio vai ter um pouquinho a gente vai falar aqui sobre os principais frameworks vamos falar sobre como funciona o teu browser né Vamos dar um overview aqui vamos dar algumas dicas para você que quer começar ou você quer se especializar na área de frontend no desenvolvimento web acompanha com a gente que o episódio tá muito bom bom para falar disso estou aqui com o meu amigo Bruno Lins muito boa noite pessoal tudo bom Bruno Lins aqui lin Solutions e também do podcast podcast cara volta Voltamos no dia 2 de Fevereiro pessoal estaremos gravando o Wellington vai deixar o link aqui do meu canal dia 2 de Fevereiro espero lá para acompanhar o canal Nesta mesma mesa nessa mesma mesa nessa mesma Praça isso aí obrigado por vir compartilhar com a gente muito obrigado pelo convite sempre que eu recebo um convite seu é é mais que aceito Aí Tamos junos Obrigado cara e aqui Clauber tipov nosso AZ cohost às vezes convidado Olha só múltiplas funções mú honra mu vários behaviors vários behaviors aqui vários web workers chamando as apis aí Clauber que é da Intel Intel PF e nosso Guru da Mozila aí anos então estamos aí 20 aninhos já não mais como contribuidor né mas pelo menos uns como contribuidor aí show de bola Mozila poderia além de pagar o salário e Patrocinar porque tanto que ele fala da moz Pois é po vamos falar de uma tatuagem aí que ele tem agora escondido escondido Obrigado cara por ter vindo aí CMA aí hoje você tá em casa tá jogando cas Hoje hoje eu tô tô no meu no meu terreno agora né isso aí muito bom hoje eu tô na piscina com com Red Bull É isso aí então você que quer conhecer mais sobre frontend acompanha com a gente que epis tá muito bom e não se esqueça de coment ess episo ficou com alguma dúvida comenta aqui ó tá P aquela parte lá eu não entendi isso aqui participe do episódio junto com a gente e a gente responde a gente responde vai tá também inclusive o Linkedin desses caras aqui Se alguém quiser ir lá pentelhar eles pode pode por favor e não se esqueça de se inscrever no canal de você recomendar esse episódio pro seu amigo e agora nós temos também as assinaturas do canal você pode ser membro do canal então se você terminar esse episódio e achar que nós contribuimos de alguma forma na sua vida profissional ou até interterimento ouvindo um pouco de besteira aqui com a gente você pode ser nosso apoiador e você pode até vir aqui um dia acompanhar sentar nessa mesa aqui com a gente sentar nessa mesa e acompanhar uma gravação ao vivo que faremos aí com os nossos membros Então vamos lá que o episódio tá muito bom Bora dep [Aplausos] é bom fazer esse episódio porque eu vou fazer praticamente uma atualização de conhecimento porque a última toos nossos a última coisa que eu programei para Font era de query e eu achoa maravilhoso é faz só um pouquinho de tempo Acho que você tá só um pouco defasado aí de de atualização tem um pouquinho aí né precisa dar um update aí né nesse éi acho que o último o último fron que o Programe era jquery com Bootstrap Bootstrap ainda é muito utilizado ainda jquery já caiu em desuso [ __ ] na época eu aprendi jquery junto com outro Framework que fazia umas transição Zinha bonitinha e tal que era o script táculos Nossa vocês lembram disso nem cono Pera que tá tá tá começando a subir o cheiro da nafitalina aqui já né Já Já começamos o programa com cheiro de nafitalina já prevent Senior patrocina patrocina patrocina PR EV deves na fitalina né É mas a a a meu favor eu posso dizer que eu programei com HTML 4 JavaScript puro e cgi você escreveu HTML você não programou HTML É verdade verdade ISO vai ter gente que vai se sentir ofendida você que tá aqui nos comentários vamos começar a tred aí HTML é linguagem de programação ou não eu ten a minha teoria e se você acha que é mostra o print de um if exatamente sabe que antigamente tinha tinha um zif dentro do HTML Car que era na época do I tinha dentro do HTML mas não era HTML não não era era parte Na verdade era aqueles comentários comentário condicional dentro do HTML imaginando eu tô imaginando uma tag if tipo Lig não era comentário condicional que você conseguia fazer uns esquema quando era i6 não era i6 tinha umas parad mas a gente tem um capítulo obscuro no mundo da do desenvolvimento we isso Essa parte a gente vai pular porque a gente já passou muita raiva ele já um minuto Vamos fazer um minuto de silêncio pelo pelo é Não já foi tarde já foi tarde de minut silêncio não então hoje vamos fazer uma atualização aí e no final vamos falar sobre a Vanguarda do desenvolvimento web com o nosso amigo chegar vamos chegar lá né mas hoje eu lembro que tinha uma logo depois que eu saí do do do Fronte e entrei Nas Profundezas das catacumbas do backend permanentemente Eh tava começando eu comecei a estudar um pouquinho daqueles frameworks que gerava o código CSS Uhum eu não lembro muito bem o que era Ach pressores pré-processador de CSS é ali eu já falei mustache essas coisas todas aí isso aí eu falei pô acho que aqui tá começando a ficar um pouco mais profissional a parada não tá f não tá tão artesanal porque h javscript sempre foi artesanal fo freestyle artesanal artesanal fo Frey era quase um um um artesão o cara chegava lá e esculpia o código praticamente cada um tinha o seu modo de organizar as coisas né Isso aí a partir dali eu larguei esse mundo e fi PR PR você chegou a pegar a época de tableless web standards Ah então tá então você não tava tão ruim assim n é não css3 com jquery foi o último que então tava começava a falar um pouco mais sobre Dom etc né já tinha você já conseguia rodar um seletor e rodar query dos dos elementos já já já não não era tão primitivo assim né é isso é até uma coisa que eh pegando um pouco as questões de hoje o pessoal tá esquecendo de padrão né você pega o código da Galera ã tudo que o pessoal falou lá atrás de não use table para para desenhar o seu site padrões web w3c web Standard e tudo mais parece que as coisas estão voltando pra aquela era pré web standards né de da Galera Como assim Os caras estão fazendo marqu né marqu que [ __ ] mar era legal T marqu era mar era bom e quando você colocava funciona melhor No Ie x ou no Netscape is isso é geralmente vinha com isso existe né O que nause tá aí para isso ainda hoje né Ah sim mas você não tem mais adesivinho né antigamente o legal era adesivinho É verdade não então mas eu levantei essa essa questão porque eu vejo muito usuário muito programador fazendo o que a galera chama de divit é uma uma um sintoma é a doença que o cara bota dividend de div dentro de div Ah mas o div ele é uma eterna recursão em qualquer coisa não tem semântica nenhuma você tem que ter semântica naquela bagaça cara senão não mas aí o cara vai se [ __ ] na indexação né de mas a galera não tá nem aí né o desenvolvedor desenvolvedor que tá ali no no freestyle no Vamos botar para funcionar depois eu vejo é tudo div e pior é que você vê material de de eh de ensinos novos aí de frameworks e tudo mais a galera está ainda colocando isso nos materiais de ensino fal pô gente né vamos vamos voltar a falar de padrões até legal a gente comentar isso porque como você falou lá atrás a gente começou a fazer design com HTML com tabela né tinha tudo código maçaroco não era um arquivo para JS um para CSS E aí a gente teve todo aquele trabalho de padrões Standard w3c e tudo mais semântica e aí Ufa respiramos veio HTML5 Putz um monte de tag nova mais semântica legal começaram a vir os os frameworks negócio bagunçou de novo né mas por qu porque o Framework ele já pré processa e gera um pouco desse HTML ou é preguiça mesmo da galera que tá começando a trabalhar com os frameworks porque Qual código processado a gente sabe que tem lá seus problemas né Eh como vamos dar um overview O que que tá rolando hoje no mercado até pra gente poder entender de de Framework web Eh esses dias eu falei de angular a galera já me deu um tiro que acho que angular já não é mais padrão de mercado certo é é assim mais ou menos isso é tem muita empresa grande principalmente banco USA muito ainda mas é já é considerado legado ou não não porque tem tão a cada seis meses eles lançam atualização Ah tá a Google e tá garantindo que é porque tem tem na questão do angular tem aquela treta angular e flutter isso que os dois ali ficam brigando por lugar né é o flutter ganhou um um mercado legal aí no mundo Web agora né cara e é puto é algo que eu acho que o JavaScript o pessoal tá falando que que Dart flutter é o que o JavaScript queria ser uma linguagem bem montada bem estruturada que atende qualquer dispositivo mobile e atende web flutter é uma linguagem então é um frame é um Framework de Dart o Dart é uma linguagem é é um super set do do JavaScript entendi é entendi mais ou menos aproveitando já Como é o typescript a ideia na verdade é parecida conceito de Dart É bem parecido com o typescript que é o é você adicionar funcionalidades na linguagem que ela não tem nativamente tipagem forte esse tipo de cois ée tipado sim não tem n não tem como colocar n Esse é um problema do TS mas é do typescript mas tem damic lá mas o dynamic é outra parada outra pegada não tem nada a ver com n né Respondendo sua pergunta você falou sobre o que que tá acontecendo com o pessoal porque que o pessoal tá sofrendo desse divit aí eu concordo com o que o glober falou véi os frameworks vieram para facilitar muito a vida do desenvolvedor isso isso é sem dúvida mas é preguiça você falou tudo é pregi tipo o cara não ou falta de conhecimento talvez ou preguiça não sei porque para você ter um HTML semântico você precisa ficar pensando o que que é isso daqui que eu tô fazendo é uma sessão é é um header é um Nav bar você tem que ficar pensando no que que é aquele aquela parte do código que você tá escrevendo e dependendo do que for tem a tag certa para você utilizar então Os caras mano não tô nem aí vou colocar uma div aqui e estiliza do jeito que tem que estilizar e não tô nem aí pra semântica entendeu e eu acho que até tudo bem tem muito backoffice que não não precisa de de indexação no Google não precisa de de subir no rank de pesquisa ou seo E essas paradas porque é um backoffice a pra vai usar internamente aí eu acho que tudo bem mas menos mal tudo bem Não porque tá rar menos mal rar falar né menos mal mas tolerável Mas eu sou sou a favor de ter um HTML semântico ali bonitinho você falou cara é acostuma com os termos né mas pô você falou que é o problema é que o cara tá programando ele tem que pensar [ __ ] quem tem que programa sem pensar velho é [ __ ] é é [ __ ] se o cara não tem contexto do que ele tá realizando Sim [ __ ] calma aí né campeão é é eu eu acho que a galera parou de falar um pouco dessa questão de standards né de padrões principalmente porque todo mundo começou a virar programador de Framework exato e não programador frontend falou tudo entendeu é isso o cara fala não eu sei programar tá até a gente tava comentando um pouco antes do do da gente começar a gravar do backstage sobre a questão de JavaScript puro né o vanila Tem muita gente que fala não eu vou usar typescript Tá mas para que que você vai US necessidade de usar Ah Eu vou usar tal Framework mas você precisa de tudo isso nunca escreveu um document WR na vida nunca não nem sabe o que é doct Type você perguntar pro cara qual que é o DOC Type do seu HTML Oi que que o que que é doc Type é entendeu então assim o pessoal tá esquecendo muito de estudar a aquele tripezinho a Tríade da da do Fronte HTML CSS JavaScript puro para depois chegar nos frameworks falar tá isso acontece por causa disso disso então aí passa um pouco é o que você falou de a um pouco da preguiça e um pouco da falta dos materiais novos de colocar ó existe um padrão existe uma um um consórcio chamado w3c que vai regulamentar o que que é Cada coisa tem né A galera brigou tanto na época do i6 lá para i7 para poder ter isso nos browsers E agora você não usa E aí né então acho que essa questão existe um pouco dos dois lados n tanto a questão do cara ser um programador só de Framework a questão de pouquinho de preguiça de entender o que tá por baixo dos panos ali e hoje os principais frameworks são então o angular flutter tinha mais um que react ainda é bem usado não se viw viu e tem o é svelt também o pessoa fala bastante do svelt eu nunca mexi com svelt Mas tem uma popularidade aí no é na verdade por exemplo você tem o pessoal do Google ali com a briga angular E flutter você tem o pessoal react que é o pessoal Facebook só que agora tem flutter também é Google flutter também é Google é Google puro e você tem um Framework em cima do Framework agora que é o Next nextjs ele roda em cima do react então assim eles estão adicionando sempre uma camada mais ali de de complicação pras coisas aí você tem o viw que é o Framework é na verdade é uma Lib né não é nenhum Framework eles não eles não se declaram como uma um Framework é uma biblioteca bioteca PR poder fazer as coisas então faz sentido você ter um next ali em cima né Uhum E você tem o vi que é meio que apartado desses dois grupos né ele foi Acho que foi um japonês né que que criou não sei que criou se eu não me engano foi foi um oriental agora não me lembro se ele é japonês ou se ele é coreano alguma coisa assim eh mas tem esses três grupos que são os mais falados mas você tem uma porrada de de Framework aí que a galera é como se fosse as nossas queridas distribuições de Linux ah né você tem tem Cada um faz o seu flavor você vai fazer ali o o Framework do tio do do do Hot Dog e é isso entendeu e eu lembro que o flutter Ele nasceu com uma parada mais mobile né o foco deles é mobile E aí ele acabou indo mais pra web na sequência sim sim desde o lançamento deles eu lembro eu tava trabalhando no safra ainda na época eh começou a ter a a ideia de surgir uma um novo Framework que ia derrubar Swift que ia matar cotlin não sei o quê falei olha pouco provável assim como falaram que o Java vai morrer matar aí ó é matar Swift e cotlin é fora de cogitação mas começaram a falar que ia surgir um Framework que era mobile foco o foco dele era mobile eu falei mano vamos estudar comecei a estudar e tipo na página dos caras já tava lá eh Framework especializ é focado para mobile nova versão web disponível tal dia então eles já tinham data para lançamento da versão web E aí o marketing deles era esse você vai poder começar desenvolvendo o seu aplicativo com o mesmo código do seu aplicativo você pode aumentando a tela até você ter uma responsabilidade desde você poder baixar o aplicativo a você usar o mesmo sistema no seu navegador numa TV de 80 polegadas sabe tudo no mesmo código ali isso é prometido há muito tempo porque eu lembro que eu eu cheguei a programar em phone GAP que era o famoso cordova ainda ainda usado ainda utilizado cordova tá Caraca PR caramb essas coisas não morrem o ionic até um tempo atrás antes da do lançamento do ionic 7 O o ionic 6 usava o córdova agora que Eles mudaram pro Como qual que foi o novo compilador do esqueci o nome é Teve teve também a galera do react que criou o react Native né que era para para você fazer aplicação para mobile não é aplicação E aí eles fizeram o caminho contrário do flutter né flutter nasceu Mob como mobile e depois foi expandindo o react fez o contrário el nasceu desktop E aí eles criaram o Native para poder fazer aplicação rodando com HTML aquela época da HTML5 uhum de você portar para tudo aí o que você comentou que é o mobile first né que seria a ideia do pessoal de design começar a criar as páginas pensando primeiro no dispositivo menor que é o celular depois expandindo tablet e desktop que faz todo sentido com o uso da web hoje né sim sim sim hoje acho que todo todo Grande portal tem mais de 80% de acesso m né Mob é isso Acabou Não matando mas diminuindo bastante aquela esquema aquele esquema que muito site tinha que era o ponto m ponto nossa cara é verdade você lembra disso você tinha um site feito só para mobile isso e um só para desktop e ele redirecionavel Portal lá x era x.com Sim tudo bem que a gente tem o ex hoje mas enfim eh né não dav é agora tem que ser o y y.com e aí você tinha quando você acessava no Mobo você tinha o m. y.com que era para Mob que era para Mobo exato aí veio o responsible capacitor tava pesquisando é o compilador do ionic até a versão 6 er o cordova ainda agora lançaram acho que faz um tempinho já lançaram o ionic 7 aí lançaram um novo compilador chamado chamado capacitor e o ionic é o mesmo esquema do react Native é mais ou menos isso mais ou menos é um Framework web que também espande PR o Framework Mobo também se expande pra web certo ele não tem motor tem muito essa questão de você o foco não é muito desktop é mais mobile é né sim porque o react eles trou eles tentaram levar o react pro pro pro mobile que a ideia deles era você faz a página nos dois lugares e aí você consegue exportar uhum com alguns ajustes para funcionar no no no celular como um app não como um mobile site ises Ach que pra desktop tem mais electron hoje do que do que qualquer outro assim electron Ganhou muito mercado em aplicativos para desktop mesmo electron é em JavaScript também é exatamente Ah o electron é um Framework que eu faço para desktop que roda no Browser é isso não na verdade ele é é uma camada com node ali embaixo e um um browser entre aspas capado ali que você não tem aba você não tem essas coisas você tem um renderizador onde você vai criar sua aplicação ali dentro como se fosse um desktop né então você tem alguns acessos a à máquina mesmo ou para para apis para comunicar com a máquina e você vai criar uma aplicação como se fosse uma um app local sem ser web só que com tecnologias web ele vira um pon xe se for um Windows depois ex isso o vs code é criado assim o Atom se eu não me engano na época foi criado assim por isso o nome electron que o pessoal do github na época que criou o Atom eles criaram electron uns nomezinho aí para né é uma brincadeirinha é E aí eles criaram electron para poder escrever os códigos do renderizar os códigos do átom localmente sem precisar do browser para apartado como se fosse uma aplicação desktop mesmo o vs code é um navegador você sabia né sim sim tem uns comandinho lá se control P eh não lembro qual que é el acho que é developer Tools alguma coisa assim sim o Devid Tools ele abre normal como fosse como se fosse um navegador ali abre o Dev to de o navegador de fato você consegue inspecionar elementos tá é da hora cara daqui a pouco você não vai precisar fazer mais binário pra aplicação web né Não faz mais sentido você ter binário para aplicação web Vamos chegar lá estamos costurando para isso sim é verdade e ao mesmo tempo estamos falando de compilar coisas pra web mas isso aqui é um Vamos chegar lá spiler spoiler né quero falar com você agora quem ainda não conhece é Clever Clever é uma empresa que já tem mais de 3 milhões de usuários vários em 30 países com 30 idiomas diferentes que tem trazido Soluções em blockchain criptomoedas e ativos digitais o objetivo da Clever é te dar liberdade financeira para operar nesse mercado de cripto então se você acredita nisso se você acredita nessa Liberdade você já Pensa como a Clever vai conhecer os caras é Clever ponio estão contratando também pessoal para trabalhar com crypto com blockchain então se você tem interesse se você tem conhecimento nessa área procura Clever se você gosta de criptomoedas se você opera no mercado você precisa conhecer a Clever precisa conhecer as soluções da Clever então o endereço tá aqui embaixo no vídeo para quem não tá no YouTube é Clever p i Vai lá vai conhecer que realmente é um mercado sensacional e e Cara eu tenho um pouco de como o dinossauro aqui do frontend Eu tenho um pouco de dificuldade em entender como que isso tudo é amarrado dentro no Framework porque na época do J quer eu criava o HTML lá botava o DOC Type importava o jquery.js tá CDN ainda época de CDN isso e tipo o bagulho era eu eu que fazia eu que organizava as passas e tal agora tem todo um pacote né que que você tem que que respeitar parâmetro de configuração você tem que respeitar dependendo do frame que ou biblioteca que você que você tá usando por exemplo react o que o nosso amigo Glauber é apaixonado é o que paga as contas dele hoje quase quase react react cara é pouquíssimo arquivos que tem quando você dá um um NP NP npx init lá vem pouquíssimos arquivos e você define como que vai ser a sua estrutura de pasta Diferentemente do angler quando você dá um ngn para você criar um projeto em angular lá cara a estrutura de passa dos caras é absurdo porque ele já meio que sugerem um padrão para você saca então seguindo isso daqui cara vai nessa que não tem como dar ruim uma equipe ferrada de arquiteto e engenheiro da Google Já pensou nisso Diferentemente do react que não tem estrutura nenhuma e quem vai usar define a cagada que vai ser aquilo ali entendeu a chance de dar merda dependendo do Dev sim exato dependendo da senioridade do cara pode dar uma merda bem grande a questão da diferença aí entre os dois é exatamente essa o angular ele ele é um Framework Então você vai ter toda aquela estrutura Você lembra do mvn lá mvn Não mvc mvc exatamente você vai ter não é mvc que ele roda ali mas é algo parecido é m acho que é mvm ou mvv alguma coisa assim mvvm acho que é isso mesmo Ach que é isso Eh mas ele tem uma arquitetura que é própria para essa parte de Framework paraa web já o react ele não tem isso por isso que ele é meio freestyle você vai criar ali a estrutura que você quiser de de pastas e até dos seus arquivos como você achar melhor por isso que ele chamar de bibliotec Exatamente exatamente essa é a grande diferença entre os dois é mais leve né não tem nada dentro dele Você Precisa converter uma data cara você vai ter que dar seu jeito de achar uma biblioteca que converte data para você sim você cria sua você tem as bibliotecas já de de react que fazem isso também né Então até o que você tava comentando ali de e eh como organizar essas coisas e tudo hã a questão hoje em dia que eu acho que é problemática no react é exatamente essa falta de padrão já pensando no angler Mas por outro lado o o angular ele vai te amarrar tanto que você às vezes vai querer resolver um problema que ele não vai conseguir te deixar resolver porque você vai ter que dar uma volta gigante para respeitar os padrões dele né então são dois pesos e Duas Medidas aí que você vai ter que analisar em qual qual tipo de projeto você vai usar qual ferramenta e talvez por isso que seja eh tão tão as duas terem uma dominância tão grande de mercado que elas podem ter aplicabilidade diferentes exatamente cara é tipo você comparar uma dod RAM com uma Ferrari São dois [ __ ] carros um é muito rápido Uhum você consegue chegar muito longe muito rápido só que você não anda com a Ferrari no mesmo terreno que uma dod Ram vai vai andar exato então é meio que injusto comparar uma coisa com a outra angular é um [ __ ] Framework parrudo pra caramba já tem um monte de coisa já pronta lá dentro para você quanto react não que é react já tem muita coisa a definir que vai vai de você para você definir como que vai ser ou não e não é válido comparar uma coisa com outra o pessoal tem tem a fama de que o angular é mais lento que não sei o que porque tem um monte de coisa mas saiu a versão 17 do angular agora aqui fizeram as métricas e ficou mais rápido que a última versão do react então Os caras estão estão trabalhando nessa ma fama deles né de ter de ter de ter essa fama de ser pesada de ser caminhão pesado entendeu É até uma uma história interessante recentemente eu na outra empresa onde eu trabalhava a gente fez o o a atualização de uma versão seis do humbler para uma versão 16 misericórdia de Deus só só 10 só 10 só 10 versões meu Deus então assim e eh foi interessante de ver a evolução do das versões desse Framework e você conseguiu sair de uma direto paraa outra ou teve que tem que pulando tem que ir pulando de uma em uma e resolvendo as dependências [ __ ] mais fácil fazer de novo olha depende viu porque assim qual que era o problema nesse projeto ele foi escrito de um jeito por uma empresa x que passou o código e falou tó é isso que vocês pediram pra gente se vira se vira e aí a galera que começou a dar manutenção nesse código e implementar coisas novas não tava seguindo a estrutura padrão do angular que é o que a gente tava comentando de você ser um Framework você tem umas regras para seguir e virou aquela bagunça generalizada se você adota um Framework já tem organização padrão Por que diabos você não segue aquilo que ele propõe já que você resolveu adotar o Framework exatamente ele ele tem essa estrutura mas em momento nenhum ele te obriga você a seguir ele não ele não ele não tem alguma coisa que vai te proibir de Fer tudo B bem assim como você não nada te proíbe de bater no velinha na rua Não façam isso crianças Não façam isso por favor mas p o o que eu não entendo é se o cara ele se prop cara eu vou fazer um projeto em angular Por que que você não segue a [ __ ] da recomendação do angular e vai fazer diferente cara Oi [ __ ] pega outro Framework faz no react que é freestyle é é não Então nesse caso a a a situação era o pessoal precisava botar as coisas no ar sabe aquela coisa não precisa MVP rápido põe no ar e aí foi né vai levando os problemas você vai arrastando os problemas e o negócio vai virando um monstro Então na hora de fazer essas atualizações é o que ele falou cara você pegou a versão seis você tinha que saber qual que era a versão do node específica para aquela versão as bibliotecas que rodam junto com ele que é rxjs e uma porrada de coisa você tem que subir tudo não só a versão do hler tem que subir vai subindo um pouquinho de cada coisa o stack inteiro você tem que atual steack inteiro então assim deu trabalho tem componente tem recurso H que para de funcionar porque foi foi descontinuado foi descontinuado você tem tem outra forma de fazer aquilo ali que você tem que re implementar de novo Tem biblioteca que só funcionava é tinha biblioteca que só funcionava com aquela versão E aí o tava escrito agora na nova versão não funcionava você tinha que pegar aquele código parâmetro diferente isso quando a biblioteca não atualizou né Tipo você usa uma biblioteca que parou na versão se você vai subir pra versão S você não pode mais usar aquela biblioteca porque não funciona e aí que que você faz você cria sua própria biblioteca para suprir o que você precisa entendeu e substituir essa que delícia então é legal você ver essa coisa acontecendo porque você consegue verificar em cada atualização ó essa atualização teve X incremento por exemplo Eles mudaram o motor de renderização o motor de compilação do do do angular eu não lembro de qual versão para qual versão mas no meio desse caminho eles trocaram que era o IV se eu não me engano aí depois Eles mudaram para um outro foi se eu não me engano foi da 15 para 16 é e cara você vê uma velocidade de de compilação de fazer o build lá para você poder empacotar e e colocar pra produção você falou Putz agora tá tá indo você vê a evolução do node junto né todo todo o ecossistema que envolve para você criar uma aplicação dessas Então essas questões assim de de você ter vários frameworks te dá essa visão de que você tem problemas diferentes com frameworks diferentes e que você se pegar legado vai ter outros problemas ali até o que você comentou de e eh de ter um Framework certo pro problema certo que é o que a gente até brincava na faculdade você não vai usar C para fazer uma página Web Apesar que a gente fazia antigamente que era cgi cgi muito tempo cgi então Eh inclusive quero aproveitar essa essa esse papo de upgrade de angler quero dar uma dica pro pessoal que tá assistindo é não sei se é da Google tá pessoal mas é um site chamado update.ver pai é um site que você coloca assim ó a minha versão aplicação da minha versão é a versão cara 8.1 eu quero migrar pra versão 18 que é a última versão que tá em latest tem um botãozinho aqui ó mostre-me como atualizar cara ele cria um back list gigantesco de tudo que você tem que tomar cuidado todos os pontos que mudou da versão que você colocou pra versão que você quer emigrar vai seguindo passo a passo que no final Vai dar vai dar bom vai d trabalho não é fácil ele basicamente diz o quantos quanto [ __ ] Você tá é é Ó tipo é muita coisa tem muita co cois eu usei esse site na época me ajudou bastante ajuda bastante e cara eh um Framework que eu tô vendo crescer que tá ganhando muito mercado e que tá meio que eh se diferenciando dessa briga né de react angler é o View sim cara o View junto com o nuxt também o nxt o nuxt é um Framework de um Framework o View é um Framework criaram um Framework em cima do View chamado nxt E aí criou-se um Framework de um Framework né e cara eh o pessoal da Flame pay lá eh pessoal que eu trabalho lá da Flame pay inclusive é empresa Nova tá Endo aí bem legal depois quem quem quiser dar uma pesquisada aí Flame pay eles estão usando nck e cara é muito simples de de você usar o o o View tem os composes né Diferentemente do angler que tem o typescript e tem o HTML e tem o CSS o o Né o View ele propõe você ter tudo dentro de um único arquivo o além dele Spa os componentes as páginas são um único arquivo Então você tem a tag script a tag eh template a tag Style tudo dentro do mesmo arquivo e ele funciona muito bem assim porque não é para é é não é para você ter uma página gigantesca que faz 30 coisas é para você ter uma página focada e se você ignora esse padrão que os caras criaram começa a ficar feio começa a ficar um arquivo com 30.000 coisas ali dentro e não é o ideal não é o que os caras planejaram entendeu então Os caras pegaram um conceito antigo do HTML que era cara é conceito antigo de html 3 ainda que a gente importava o CDN tudo dentro do mesmo arquivo ali e fizeram funcionar de uma forma que cara é OK entendeu Tipo é da hora então tô tô gostando bastante do View também tá crescendo aí no mercado uma coisa que eu que eu percebo com com os comentários que vocês estão fazendo é que esses frameworks web Eles são um pacote completo para você fazer uma desenvolvimento de uma aplicação web isso na minha época eu adoro falar isso ainda mais agora com 40 anos posso falar com propriedade eu chego lá também esse ano é vamos lá Caraca eu sou novinho da turma aqui novinho cara a gente tinha que ah vou fazer uma uma aplicação web eu tinha que escolher o Framework JavaScript tinha que escolher o Framework CSS e Tinha que trabalhar o HTML isolado né então por exemplo o exemplo de lá no começo eu usava o Bootstrap para fazer o CSS E aí eu podia usar o jquery ou outra biblioteca para trabalhar o JavaScript uh eudo isso trabalhado de forma individual a o modelo atual de desenvolvimento é eu ter um Framework que trata as os os três pontos HTML CSS jav scpt ele te facilita para juntar os três na verdade o Framework ele é focado em Por exemplo algo que que eu e o glober tava conversando Teve um dia que eu precisei fazer um for e renderizar elementos na tela baseando-se nesse for então para cada item do meu da minha lista eu renderiza uma tag diferente por por exemplo e eu precisei fazer isso em JavaScript puro no ângul é cara o código ficou absurdo de grande porque e fazia o for pelo pelo próprio JavaScript mesmo e ia fazendo Winner HTML dentro do document para ir renderizando linha a linha ali cara era um parto inserindo dentro do elemento dentro dentro do elemento eu i inserindo aquele aquele item que tava sendo renderizado no ular eu faço ISO uma linha com NG for no View eu faço em uma linha com v for então tem traz facilidade você trabalhar é ainda tem tem algumas coisas também que entre aspas a web moderna e os frameworks modernos já fizeram que por exemplo o jeito que ele fez elea em cação do for elea alterando o dom que é o document Object Model né que é o que você tá olhando ali no teu browser tem algumas técnicas que a gente usa hoje que é o Shadow por exemplo né que ele meio que pré renderiza a página por trás do browser Então quando você tá fazendo essas inserções seja no react no angular em qualquer Framework ele tá alterando ali atrás não que você tá vendo Então ele não tá tendo que entre aspas ficar renderizando a tela ve algum ponto da tua tela no Browser ele tá renderizando aqui a hora que aquilo terminou ele simplesmente troca né então você ganha em velocidade porque você não tá matando o processamento do cara uhum o tempo inteiro ali renderizando o dom e você ganha em em em em velocidade também do seu código porque enquanto aquilo tá renderizando ali no no background o cara tá mexendo com outra coisa né Então essa troca te dá muito mais e eh capacidade e fluidez do que você tinha no no java script puro quando a gente fazia com jquery com CSS na mão exatamente cara e eu acho John Rig eu conhecia o não quero ouvir uma palavra sobre jquery não John hesg ó um abraço para ele conheci o cara na na época então legal foi foi o comecinho da minha da minha carreira de não posso falar mal não todo mundo cara na nossa época acho que um dia já já usou J qu eu invejo para caramba o react você falou do do Doom no react tem o virtual Doom né que eles falam e o virtual Doom É nesse mesmo esquema que ele falou né Dee dele criar uma Doom virtual e quando você termina de fazer a manipulação da dum ele ele troca só que o virtual do Diferentemente dos outros que troca tudo ele troca só o pedaço que foi tipo Git é não tem porque eu trocar o header se eu só troquei se eu só mexi no Body não faz sentido ele troca só a parte que você trocou dali de dentro do Body Cara isso traz uma performance absurda pro é cada um O legal é isso né Cada um implementou de um jeito né Você tem o react que faz o essa parte de renderização de um jeito o angular criou o seu ali então a galera meio que vai tentando dá um um uma sobrevida para algumas coisas ou cara não tem como usar isso aqui vamos criar um um alguma tecnologia aqui que melhore até a performance do browser né Eu lembro quando a gente precisava atualizar um botão tinha que reatualizar a tela inteira porque não tinha virtual D tinha que carregar tudo irmão dane-se cara e é muito louco porque se você par para pensar da da arquitetura de uma de um navegador e e a interação com a web navegador já deveria fazer isso por ele mesmo né sim sim já poderia ser uma tecnologia embarcada no próprio navegador né É seria você tem que tratar isso F fica dic aí é Na verdade tem um pouquinho porque se você for pegar agora entrando um pouco de de de de arquitetura de de browser Antigamente você tinha uma Engine só que dava conta de todo mundo de renderizar JavaScript renderizar CSS HTML Então você tinha essas esses motores que faziam isso de uns tempos para cá o pessoal começou a apartar essas coisas principalmente depois do da da entrada do Chrome que o Chrome ele separou né renderizar HTML CSS de JavaScript são dois motores diferentes tanto que aí nasceu o V8 essa não sabia Essa é o o Na verdade o V8 vem do Web kit lá né daquelas coisas todas mas eles separaram isso E aí todos os browsers começaram a olhar fal pô verdade né a gente tá deixando todo mundo dar conta de uma coisa só e aí entra ão de trad paralelismo e tudo mais o o V8 não é o motor da Google que o node foi construído em cima esse mesmo motor é usado dentro dos navegadores ISO isso não cada um tem o seu na verdade na verdade bom tinha o seu antigamente né Cada um tinha mas ã de uns tempos para cá muita gente começou a migrar pro V8 que eles estão usando base do Chromium né Uhum que é o o que deu origem do open source do Chrome E aí muita gente é meio Chrome like assim n o Brave é Chrome like se eu não me engano o Ed também é Chrome like o ópera também é Chrome like antigamente não era também você usa Mozilla né uso Firefox tá falando tá fal é tá falando de Chrome e usa Firefox mas mas a gente tem que entender como é que fun uma raposa tatuada na no braço no braço no bra cara eu conheci eu conheci um cara n dele não me faça imaginar isso não melhor não eu já imaginei foi Não não a vida não tem control Z é eu conheci um cara trabalhou comigo ele eh ele entrou para trabalhar comigo dentro ag Flux já falei da Go Flux aqui anteriormente eh quando ele entrou fui eu que fiz a entrevista dele para trabalhar como frontend ele também tinha uma uma experiência ali de de back é o Anderson Belco o nome dele cara ele tem uma tatuagem do react na mão caramba e a gente colocou ele para trabalhar com angler só de sacanagem Por que não né Aí ele falou ah eu quero trabalhar com react tá V vai trabalhar com ângul só porque tem tatuagem do [Risadas] react continua T voltando à questão das das engines e antigamente era todo mundo junto começaram a separar então é o as Hoje em dia as mais usadas a mais usada né o V8 por conta de todos os outros browsers estarem Chrome likee e dentro do Firefox Você tem o spider monkey que é a Engine de renderização do JavaScript dentro do Firefox né então eles separaram a Engine que renderiza também HTML CSS e a Engine que renderiza JavaScript com isso os browsers também começaram a fazer esse lance de virtual Don e Shadow Dom já tem dentro dos browsers Na verdade o JavaScript que vai acessar e falar ó Onde você quer renderizar ISO isso você quer renderizar por baixo dos panos ou já pro usuário ver você tem essa habilidade via JavaScript de fazer tanto que foi aí que os os frameworks começaram a implementar essa questão na verdade e o browser já disponibilizou isso né então por conta dessa separação toda Então você tem novas tecnologias dentro do do seu renderizador ali para deixar o HTML mais rápido o JavaScript mais rápido tanto até uma uma chada de sardinha aqui uma um um dos meus papers quando eu fiz na na faculdade o de iniciação científica foi a utilização de computação paralela de de paralelismo dentro da Engine JavaScript do Firefox que da hora que é o Spider Monk então que é o Spider Monk exatamente então a gente pegava uma biblioteca Que implementava tipos diferentes dentro do do do Firefox você tinha que habilitar ele só Engine para entender esses tipos ã que permitiu o paralelismo no processador E aí você tinha uma biblioteca que conseguia abstrair esses esses tipos isso em JavaScript mesmo para poder calcular né tanto que o teste que eu fiz foi pegar um script que gerasse um uma um fractal de Mandel bra para poder mostrar ó com paralelismo você renderiza mais rápido do que você sem paralelismo né você tinha os tipos lá eh Big float essas coisas todas mais diferentonas para para poder fazer paralelismo Mas aí você entende que quanto mais inteligente a sua Engine dentro do browser melhor vai renderizar o teu teu código Independente de ser Framework x Framework y o que manda ainda hoje em dia é o seu browser né então por isso que teve essa briga muito tempo de V8 eh o IE na época lá com o com Acho que foi o 11 né que eles ainda tavam antes de ir pro Ed Então você tem toda essa por trás dos panos essa briga entre os os browsers ainda né eu eu lembrei de você essa semana que a gente tava falando da última vez que a gente gravou Uhum que eu tinha ficado acomodado no Chrome uhum né E essa semana eu voltei pro Firefox Yes por vestiu a camisa da empresa a assim por causa cara do próprio Google você acredita por quê Discorra o o Google ele trocou a interface do Google ADS uhum aliás Google [ __ ] ficou uma bosta confuso pra [ __ ] [ __ ] galera de w ali Nossa meu Deus do céu ficou ficou extremamente confuso mas enfim ele ficou mais com uma interface muito mais complexa uhum e cara no no Chrome trava direto Nossa a própria interface do Google no Chrome trava direto Uhum aí eu falei [ __ ] deixa eu testar no no Firefox cara funciona liso liso liso liso tenho certeza que o cara que programa a interface do Google USA Firefox não do vídeo porque isso acontece e isso acontecia dentro da Mozilla também pessoal que programava algumas coisas do Firefox às vezes usava o Chrome para poder testar também não para testar tudo bem mas lá eu tenho certeza que o cara usa no dia a dia porque funciona muito melhor no Firefox Cara acho que eu vou começar a fazer o teste eu vou trocar meu por favor V pel pela Firefox por uma semana vem pelo lado do Mozilla da for então aí eu percebi o teams funciona muito melhor no Firefox infelizmente ten que o teams crx no no na versão web crx bastante no Chrome sim e várias outras coisas que eu tava acostumado trava pra caramba então e funciona muito bem agora eu falei [ __ ] vou voltar pro meu querido raposinha é nós você que tá ouvindo a gente aí baixa Firefox dá essa oportunidade aí de novo o Firefox tem as extensões tem car muitas ainda e a maioria a maioria tem pros dois é e funciona tão bem quanto tem algumas extensões que não tem pro Chrome por exemplo eu tenho uma extensão que eu adoro isso eu não sei por que o Chrome não fez isso ainda quando você dá o o o control Tab para ir mudando de de control Tab para ir mudando de aba no Chrome O que que ele faz ele vai ou pra frente ou para trás uhum no Firefox Você tem uma extensão que você ele vai pegando Quais as últimas Abas que você abriu e que você visitou então sei lá você tem 10 Abas você tá Acessou a aba dois e a aba S você dá um control Tab ele vai para dois Ah vai para sete você não precisa ficar Tab Tab Tab Tab até lá Tab Tab T voltando entendi tipo eu que tô às vezes com 150 Abas abertas todo mundo porque afinal fica um pouco difícil no Chrome você já não conseguiria ter 150 não já chegar a 150 esquece ele trava a máquina um comportamento estranho do do Chrome também que você falou de Tab se você abrir e 15 abas no Chrome e você der control 9 que você consegue mudar de aba pelo número dela se ela é se ela é a primeira é control um para ir para ela se ela é a quinta control c não não sabia se você der cont control 9 você acha eu vou pra nona pra nona pra nona aba não ele vai pra última não é ele vai pra última você não consegue para depois do você nunca vai conseguir na nove você nunca vai conseguir na nove porque ele sempre te direciona pra última é tipo aquela maldição do andar em cada em cada país né nos Estados Unidos é o 13º andar na Itália se eu não me engano é o 22º você não tem é não pode não pode é não entendi o por tipo talvez porque não tem mais número para seguir ali 10 né contra o 10 não tem como ir mas o nove a daria entendeu poderia ser control a ex decimal é poderia ser control a control B control c i f um pouco complexo mas ia ficar meio complexo pouco você tá com os dedos tudo torto assim né talvez aqueles caras que usa teclado 70% para tem que ficar fazendo uns negócios assim tem tem tem um recado implícito nisso daí é você não deveria ter mais de nove Abas abertas não funciona Google Desculpa mas a o Chrome puxa muita memória quando abre muuito tablet velho é Infelizmente ah cara eu eu eu entendo a crítica mas [ __ ] bicho qualquer notebook vagabundo hoje tem 16 GB de Ram absurdo é absurdo não não não trava mano é trava trava trava legal é muito absurdo assim eu fico puto tipo você tá com uma aba aberta só e aí você tem um JavaScript pesado ele não não processar aí eu f aí eu quero rasgar a orelha com a unha mas [ __ ] e outra né mano a gente parou de usar favoritos agora para deixar as abas tudo salva você tá aquela aba que tá lá no teu Crome há 15 dias tem isso no Firefox para pinar pin taba fazer pin Tab cara eu vou mudar pro m eu vou vou experimentar para uma senhor vamos ver Isso é muito bom isso é muito bom sim é então é essa essa questão é legal você a gente falando de de frameworks JavaScript e tudo você vê até voltando ao nosso querido jquery você vê como os frameworks influenciaram nos browsers também porque antigamente antes da jquery a gente não tinha algumas facilidades no JavaScript Puro como a gente teve Depois do jquery por exemplo o select query você não tinha isso você tinha que fazer document pon e Element get Element byed by qualquer outra coisa então hoje em dia você teve muita coisa que aumentou né incorporaram dentro da linguagem do vanila mesmo para poder ter todo esse ecossistema de bibliotecas novas de frameworks novos JavaScript vanila eu já consigo quar um cara que faz sim sim você tem o document p query select All query selector select by Class by Class by id e ele vai te gerar um arzinho ali que você pode e você passa a classe ou ID Isso já é antigo tá é isso já é antigo é mas assim graças ao eu sou antigo Todos nós somos não se esqueça né e 20 anos de Mozila aqui já então Pois é e e cara como que é agora não tava nem na pauta mas o fiquei curioso saber como que é o desenvolvimento das extensões de browser já que você manja tudo da engenharia como é que eu build um xpi lá para instalar Então na verdade hoje em dia não é mais um xpi como era antigamente porque PJS hoje né na verdade ele é como se fosse um um web app em si né não é mais um só um xpi isso eu posso falar no Firefox no Chrome eu já não não sei mas Antigamente você tinha uma linguagem entre aspas chamada zul xul que era onde você definia é e é que em inglês eles usam o x como Z né então o pessoal tinha até uma brincadeira que era com fantasma lá que era o zo era alguma coisa dos gustbuster a Mozila é cheia dessas coisinha de engraçada né tanto que depois a gente deixa nos comentários aí o The Book of Mozilla que são os stegs da da da Mozilla enfim eu deixo lá depois no nos comentários e então você tinha esse zo que era uma l linguagem de marcação parecida com XML que era para você definir a interface do teu da tua extensão com o tempo eles começaram a criar outras coisas que tinha o jetpack que era uma extensão para fazer extensão né que você tinha já facilitava você não precisava usar mais zo Framework para criar extensão é exatamente então você não precisava usar mais zo você usava HTML CSS JavaScript é é isso que ia falar cara por foi muito mais inteligente por que que você cria uma outra linguagem PR exatamente mundo que é HTML CSS jesp né s e e e aí você ele ele empacotavam agora eu não vou lembrar qual que era a extensão mas era realmente um pacote né como era o xpi aham Então não é mais xpi não não hoje em dia eles pode ser que ainda tenha alguma extensão perdida lá em xpi dentro do do moil adons mas já mudou tanto que hoje em dia você faz com o básico HTML CSS jav script entendi Você tem o airb workers Você tem uma porrada de coisa que você consegue acessar como antigamente você não conseguia por causa de segurança e tudo mais você consegue acessar coisas de dentro do browser eu criei Eu juro que foi pura trollagem com meus amigos mas eu eu criei uma uma extensão por Chrome e falar que eu criei não eu eu procurei no github uma extensão específica que era aquela extensão que trocava todas as imagens do seu navegador pelo Nicolas keage pelo é é era eraa essa pegada aí pelo acho que era pelo ncolas keage E aí eu é clonei o repositório dos caras é clonei coloquei no meu repositório né Fiz um fork e troquei o banco de imagem coloquei imagem de um parceiro meu que trabalhava comigo e aí quando você baixava a extensão do do Chrome todas as imagens ficavam as imagens do cara que trabalhava comigo e era um arquivo pon JavaScript é por isso que eu falei ponto ponto JS porque depende do do do browser cada um tá implementou de um jeito n sim entendi cara foi o ó mais bem pago da minha vida paguei ó para poder ter a conta para poder publicar lá a extensão pessoal da empresa fez vaquinha nossa tudo para juntar ó e publicar para poder sacanear um cara maravilhoso V como é objetivo como pessoal engajado os caras criaram um Bucket na gcp com com banco de imagens só para poder puxar É isso aí cara é tava sem gira aberto no dia é tava tranquilo era uma segunda-feira ainda né Pois é cara então Eh já já partindo aqui pro segundo tempo uhum para onde vai tudo isso porque a gente tá aí com com um mundo bem consolidado desses frameworks e só que eu percebo que já tá aí um tempo meio que em estabilidade ali né dentro surgindo novas versões os mos frameworks e tal mas não surgiu nada muito diferente diferente né E aí entra a minha curiosidade aqui de saber como funciona o Web assembly boa vamos falar de web assembly antes é webassembly eu não sei tá antes até para fazer um paralelo dizem que com um pouco de Durepox JavaScript você recria o mundo né faltou o mtex Talvez um mtex no You clip mtex e JavaScript é clips mtex JavaScript você faz já que a gente vai falar de assembly PR web Eh esses motores de JavaScript eles são extremamente complexos e completos né são são Porque como que funciona isso por exemplo a gente já eu já vi eh porte do kerne do Linux rodando em JavaScript velho A galera faz umas mágicas com com JavaScript Eu já vi o Windows 98 rodando no Browser com JavaScript Cara essa é nova para mim aí eu tô dando esse exemplo por quê Porque cara para você se você consegue rodar um set operacional dentro do browser com JavaScript O que que você não consegue que que você não consegue a gente teve um equipamento uns anos atrás chamado Chrome OS que era aquele notebook que era um browser onde você rodava todas as aplicações ali dentro né verdade aliás que fim teve o chromeos é boa pergunta não sei se alguém souber aí aproveita também deixar nos comentários né do chros se alguém chegou a ter também bota aí no no comentário bom você que tá vendo esse podcast da hora tá vendo um monte de problema aqui que a gente tá colocando né e Quer uma ajuda aí na sua empresa faz o seguinte entra no site aqui da VMB que a gente pode te ajudar vem be.io nós somos uma empresa relacionada a arquitetura de soluções a modernizações de aplicações também atuamos na frente devops para ajudar vocês a serem extremamente ágeis então dá uma olhada no nosso site que vai tá aqui embaixo vb. e lá você vai poder ver um pouquinho da nossa história dos nossos profissionais e aproveitando se você for um profissional da área de tecnologia que tá a fim de trabalhar numa empresa legal um monte de colega gente boa e tecnologia de ponta manda o e-mail para people [Música]

57:19[Música] care@gmail.com pra gente falar de web assembly na verdade a gente tem que dar um um passinho um pouco antes ali né de uma tecnologia ah de de entre aspas não de de web na verdade né mas que acho que trouxe o JavaScript para fora do browser porque a gente tinha essa questão do do JavaScript ser dentro do browser e você era Ali era teu playground ali e acabou Depois disso né do do node JS você liberou o JavaScript para ser uma linguagem não só web o que aconteceu foi que levaram o motor para dentro doal exatamente você tirou o V8 ali de dentro do Chrome isolou ele a Engine só de JavaScript porque como eu tinha comentado a gente essa separação de Engine de html CSS e JavaScript ajudou você ter um um V8 ali pronto para fazer um node né então acho que isso daí começou a coçar a galera falou pera aí se a gente tem hoje um um uma tecnologia que consegue tirar o JavaScript de dentro do browser levar para outros lugares então a gente provavelmente consegue fazer mais coisa para ou levar para dentro do browser ou rodar em outros lugares né e e até aproveitando a questão do node é um Marco no no pro JavaScript pra linguagem em si né porque hoje se você tá desenvolvendo com angular com react com View você vai ter o seu início ali do projeto baseado no node É ele que vai dar o start node tudo baseado em node exato as bibliotecas né como você vai cara o node é sensacional que eu acho que eu uso do jeito mais difícil do mundo dou um npn rodo ali direto no Browser containerize e boto para rodar na no kubernetes até que tá bonito viu É tá tá organizadinho tá organizado go do jeito mais e rudimentar digamos assim mas geralmente eu uso para fazer um web service alguma coisa mais vistinha é então mas até você Parando para olhar você fala assim cara todos esses frameworks hoje em dia você usar node né usar a infraestrutura que o node te permite para criar esses frameworks JavaScript pô é a roda né o o o ciclo se fechando né sim e e eu percebo que nesse momento a gente conseguiu criar o conceito de fato de uma aplicação Web sim com a parte que é front end de fato ali HTML CSS Mas ele tem um pré-processamento no backend com node também né exato então consigo subir uma coisa só né que vai me servir os os estáticos os processados mas eu tenho também ali um um um uma parte rodando também em server Side certo que antigamente na minha época a gente fazia ali com PHP etc e o HTML CSS na outra ponta né É hoje com nextt você consegue ter tantas apis quant frontend tudo no mesmo projeto o Next permite você fazer isso também né a parte de server deles de de adicionar testes também né você tem eh a gente já vai chegar no no no web assembly mas assim questão do do node por exemplo você tem Abstrações de browsers por exemplo puppe Tier ou outras outras ferramentas para você fazer testes unitários e testes funcionais em browser sem precisar renderizar o browser ele faz isso em em em modo texto digamos né pra galera entender você faz isso no no no teu ah console ali né então Mais uma vez você conseguir desmembrar o browser a um nível de você não precisar renderizar o a visualização dele você não precisa estar com ele aberto você rodar teste de html CSS e JavaScript tendo outras coisas então a galera começou pera aí né a gente não precisa mais ficar exatamente preso dentro do browser tipo Chrome um driver que é uma abstração que eu consigo rodar para fazer teste unitário automação etc isso o potir é baseado no no no chron Drive né e enfim aí o pessoal começou a olhar falou bom a gente depende ainda de JavaScript PR rodar dentro do browser então agora é o caminho de volta a gente saiu tirou ele botamos pro node levamos JavaScript para fora do browser A galera falou bom vamos tentar voltar como vamos botar o JavaScript de novo não a gente tem c tem C mais mais tem Java tem Rust tem Python tem uma cetada de linguagem boa que a gente poderia rodar dentro do browser né E aí entrou a questão do Web assembly assemble se eu não tiver errado foi criado em 2015 pessoal começou com um projeto chamado asm JS que era assembly é assembly alguma coisa E aí evoluiu pro web assembly que aí eles o pessoal da w3c absorveu olhando falando olha isso daí pode dar um padrão né Vamos absorver E aí w3c você tem ah Mozilla você tem Microsoft Você tem Google você tem Apple você tem outras empresas que também estão ali para desenvolver um padrão Ou seja hoje o o we assembly não é mais uma só um projeto Inicial ele já tá começando a criar corpo para ter padrão Mas voltando aqui à definição o que que é o Web assembly é você poder executar códigos criados na verdade aplicações criadas em outras linguagens dentro do browser dentro do browser entre aspas porque você tem um sandbox e você não executa Aquela aquele código diretamente no Browser o JavaScript só chama ele para ir sim ser renderizado né E quando você fala de código gerado por outras linguagens é Rodar um binário não importa onde ele foi criado Exatamente é um binário no final ele vira um binário n ele vira um um assembly mesmo só que é uma uma especificação de assembly feita exatamente pro browser poder entender e o jav poder puxar isso para poder renderizar no Browser né então você tem você tem algumas etapas agora a gente brincando lá com as questões de de arquitetura de linguagem né e arquitetura de de de de Engine por exemplo de Git aquelas coisas todas quando você tá escrevendo teu código você vai escrever normal em C hoje em dia o Web assembly tá suportando C c+ mais Rust dnet ah Python go tem várias linguagens que eles já tão Então já tem o compilador do Web assembly para essas linguagens Então você consegue gerar uma um código intermediário ali ah pro web assembly entender basicamente é você tem o seu código o Web assembly o compilador dele vai gerar um código intermediário que tem duas fases que uma é texto mesmo ele escreve é como se fosse um texto mesmo em em em assembly E aí assembly mesmo é aquele move blá blá blá que a gente tinha lá na faculdade só que é um assembly um pouquinho diferente né que é o padrão que eles estão fazendo no webassembly daquilo ali ele gera o binário né então você tem o o o o Web assembly é como se fosse uma máquina virtual para poder rodar tudo isso e aí tem aquela velha história você fala Tá mas para que que eu preciso desse negócio uma que você vai ter a habilidade de escrever aplicações pro browser rodando em outras linguagens né você não vai precisar ter tudo em JavaScript você vai ter a sua as aplicações feitas em C em dtnet E por aí vai rodando dentro do browser Ou seja você vai ter entre aspas chamar binários que não são inscritos em JavaScript para rodar dentro do seu browser com mais velocidade porque aquilo ali já tá compilado uhum né você não vai ter um interpretador como o JavaScript que faz em tempo real que faz em tempo real que é o jus in Time compiler lá né o Git eh então você olha fala ok então você abriu o leque do browser para não depender só de JavaScript e ainda adicionou uma questão de velocidade e poder de processamento porque se você tá rodando aí uma um binário dentro do browser você não tá mais jogando essa responsabilidade pro browser executar ele só vai ler né então isso adiciona mais camadas dentro do browser e mais camadas PR sua aplicação que você fala olha minha aplicação pode ser um pouco mais robusta que o browser não vai entre aspas falhar ali quando eu precisar de mais processamento porque já não depende mais dele né você meio que isola tudo bem Que isso é rodado em um sandbox tudo isolad bonitinho para não ter aquela bagunça de Ok vulnerabilidade ataque e tudo mais eu ia perguntar do ponto de vista de segurança porque quando a gente fala de execução de binário uhum primeiro Alerta que vem é sobre privilégio segurança etc é então e aí isso estaria preso ali Dent dentro de um de uma área diferente dentro do browser que provavelmente você não tem acesso ao resto da máquina é isso Você tem alguns eles estão começando a fazer algumas apis para você poder acessar coisas do da máquina mas quem vai fazer esse acesso não é o teu binário o browser em si vai chamar essas apis entendi tanto que tem uma uma outra é meio que se for pensar um fork da galera do Web assembly que tem o pessoal da w3c que tá criando os padrões e tem o o pessoal da bite code Alliance que são outras empresas que também estão trabalhando com com web assembly só que o foco desse dessa dessa organização que também tem Empresas Grandes tipo shopify tem pessoal da vamer do do docker Head Hat Tem uma galera grande ali focada nessa questão de segurança porque eles estão desenvolvendo os padrões junto para falar olha pera aí não é só você enfiar isso aqui dentro do browser e sair usando a máquina do cara cara [ __ ] ISO do ponto de vista de render dentro do browser é sempre é a parte mais delicada a parte mais sensível do sistema e é por onde vai acontecer algum ataque ou alguma coisa ali então segurança é ponto crucial PR caramba nesse nesse ponto uhum porque o se a gente já tem esse problema hoje com o código malicioso web Uhum você exponencia isso absurdamente quando f de Bin colocando um binário ali você tirou um monte de camada de segurança sim ou que fosse atrasar o cara né você tá deixando ele mais na cara do go tá na na na na portola É verdade cara que [ __ ] eu fiquei interessado para entender como é que funciona essa arquitetura behind the scenes é legal inclusive Esse foi o tema do meu TCC na faculdade foi mostrar o processo de compilação de ponta a ponta de como fazer o e assembly sair de um c de uma linguagem C até rodar esse resultado dentro dentro do browser Caraca Que muito louco cara quem diria que a gente ia voltar pro Java appl hein Né foi exatamente o que eu pensei foi exatamente porque a hora que eu olhei eu falei Ok Isso é uma uma VM tá bom né o Java appl Só faltou o J é até até uma curiosidade interessante assim né o pessoal fala ah mas tanto que se você acessar o o a documentação do webassembly dentro do mdn que é o Mozilla developer Network até para quem acessa aí é uma boa documentação de um monte de coisa de web eles falam que ainda é uma tecnologia experimental ou seja não tá ainda Caraca desde 2015 ainda experimental de tão pancada aqui é exatamente o negócio ainda tá ele tá na versão 1.0 mas ainda né aquela coisa de ó vamos com calma não tá tão estável mas tem projetos muito grandes que provavelmente Vocês dois já usaram ou já ouviram falar que estão usando web assembly por debaixo dos panos para melhorar Quais quais quais quais chama figma ah usamos entendeu figma é um cara que tá usando webassembly US Para poder melhorar a performance dele porque ele foi criado fora do browser o figma depois que eles trouxeram para para dentro do browser né era uma aplicação apartada e com o Web assembly eles conseguiram ter mais Performance em questão de renderização de de de de interface trabalhar com imagem lá dentro e tudo por conta do web assembly então tem coisas que não são escritas em JavaScript ali Eles escrevem fora Muito provavelmente essa informação não consegui encontrar mas deve ser um c da vida ali um Rust alguma coisa assim uhum para poder jogar de volta ali via web assembly Deixa eu ver se eu entendi o Web assembly basicamente é um nível absurdo de modularização de aplicação basicamente você pode desenvolver o Core do teu negócio em web assembly e ele pode ser eh pode rodar dentro do navegador ele pode ser um pon xz ele pode ser um um ponto ISO El Mais ou menos mais ou menos na verdade ele não vai ser um ponto xe Porque como você tá escrevendo alguma coisa muito específica você vai você vai modularizar só uma parte você não vai fazer o todo do teu pelo menos o o coração do negó compilador é diferente né ele não gera um exz como se f rodar pro pro processador da máquina interpretar não ele gera um ponto asm wasm mas aí não tem como converter ível esse cara para para para rodar dentro de um electron da vida por exemplo caso ele foi escrito em JavaScript não você pode você pode você pode porque como o electron é um browser ali você pode na verdade assim e você não vai colocar ele dentro do do seu pacote você pode chamar ele via web como se fosse uma CDN entendeu Essa é a grande sacada Você pode ter funções que fazem Exatamente exatamente cara você falando eu eu eu me lembro já de ter fuçado aí nos código fonte nos os developer Tools já ter achado uns pontos asmin por aí já Exatamente é por isso o que que significa asmin é web assembly o é com w né É wm É web assembl module se eu não me engano é isso é um nível de abstração absurda você modularizar tua aplicação a ponto dela rodar em qualquer lugar tipo outra aplicação interessante que muita gente conhece e muita gente usa na web chama AutoCAD que também tá usando web AutoCAD AutoCAD por tem AutoCAD pra web tem eu fiquei queijo caído por até ontem pisava de um caminhão de máquina para rodar agora tá rodando no Browser tá rodando no Browser só falta falarem que o Spring boot é é web acen víde Spring puton vai ter um troço Spring [ __ ] rodando no Browser imagina que beleza olha só tem um kubernetes rodando no bral velho docker e até falando até falando em kubernets e docker e eu li um post do criador do docker falando assim se na época que ele começou a criar o docker já tivesse o e assembly teria feito e seria um caminho diferente que eles iam seguindo no desenvolvimento a gente ainda vai descobrir que a gente tá numa Matrix e o mundo tá rodando no Browser de alguém não do vídeo A gente é o The Sims do cara isso a gente é o The Sims do cara que a gente tá rodando na verdade num dom de um de um Fire foox gigante é eu não sei se se hoje hoje em dia com celular e aplicativos acho que essa questão ficou um pouco mais espalhada mas eu e você eu não sei se ele chegou a pegar não que cria um bebê é um bebê mas assim antes né a a gente você não usou nem MSN usei Ah então tremia muito a tela dos outros usando o o ai o Amp lá como é que era aquele player de de de música Winamp usei o Winamp para criar rádio online usei muito não é tão é tão menino assim minha época minha época de Rabu lá tinha a nossa tinha tinha rádio lá eu criei minha rádio tinha dois ouvintes minha mãe e eu mas tinha a mãe você é um primo né Ah é E mas assim o interessante de ver essa caminhada porque antes do HTML5 você ainda tinha algumas coisas que você ficava estalando muito na sua máquina né E você vê que a importância do browser é que um monte de coisa migrou pra web então hoje em dia você faz muita coisa na web tudo bem que muitos desses sites viraram aplicações por exemplo no celular né Mas se você for parar para pensar ali provavelmente tá rodando um webview da vida né então você tem um aplicativo Mas o que tá rolando é web tem até uma a a uma frase que o pessoal usou numa campanha da Mozilla que era de todos para todos então se você for olhar esse de todos para todos você vai ver que a web é feita para rodar uma cacetada de coisa né de todo mundo para todo mundo então hoje em dia você tirou essa responsabilidade do Browser em si mas a web como conceito ela tá em todo lugar né Então essa questão de você ter Outras aplicações interferindo entre aspas na web sem ser escritas em JavaScript te dá um mundo diferente tem jogo sendo escrito em JavaScript com web assembly se eu não estiver enganado tem coisas dentro da Unity que o pessoal estava cogitando a fazer com webassembly imagina criar seu jogo dentro do próprio navegador já tem com un já tem entendeu Então eu vejo uma tendência de o navegador ser o próximo sistema operacional né uma abstração de um por isso que a gente tinha lá o Chrome OS né que foi a tentativa da acho que não deu muito certo não é é que os Car botaram os chromeos NS not parecia os notebook do ceninha tá ligado você ganha da xa é você compr você comprava uma sandalinha pro seu filho e o notebook de prind pô não tinha como aquilo dar certo né mano Ah cara que absurdo mas mas assim até uma coisa que o o pessoal eu cheguei a acompanhar uma época o grupo de discussão de padronização do e assembly lá na na w3c e e o pessoal sempre falava cara a ideia do e assembly não é matar o JavaScript pelo contrário mais Liberdade pras pessoas usarem outras coisas fora do browser E aí quando for usar no Browser o JavaScript ser só o cara que vai fazer as chamadas ali ele não vai renderizar nada mas ele vai fazer as chamadas ali por trás dos panos seria o orquestrador al do process a pergunta do edington me preocupou um pouco referente à segurança como que tá hoje a segurança referente a web assembly Eu sei que existe aí várias várias estratégias e várias técnicas de de segurança hoje em dia de criptografia xá 1 xá 5 e essas paradas aí isso se aplica também para para esse Universo de web de criptografia de garantir a segurança de permitir que o teu build seja seguro de fato Entendeu Uhum é porque se você for pensar que ali você tá rodando um binário né para você trazer aquilo de volta já é mais difícil né você não tá rodando um JavaScript Unificado por exemplo angli ficado D exatamente Então mas mas é possível fazer a engenharia reversa do binário não sim sim tanto que tem alguns testes que que eu fiz no na na parte do do paper que era você trazendo do ah do do entre aspas pré compomil né o o a parte do assemble mesmo que ele gera trazendo de volta pro código C Então você tem como fazer isso e assim eu penso que o o tudo surgiu dentro de binário S hoje sim e eh tudo é binário tudo surgi do binário tudo volta para binário então a gente hoje hoje eu posso afirmar que temos tecnologia suficiente para transformar códigos em binário e destransformar também mas estar em binário não acho que seja a o fator de segurança máximo entendeu Não na verdade ele é um complicador de segurança né porque a engenharia reversa para mim ela é pouco relevante porque P JavaScript você você acessa JavaScript qualquer site se você quiser qualquer lugar né E E você tem acesso direto ao fonte então não estranho mas tem sim então não não seria um problema fazer uma engenharia reversa de um de um I assembly né Eh o o ponto principal é que você não tem uma inspeção em tempo real daquilo que foi build dado com no Browser é porque tá em binário é tá em binário Então você não sabe exatamente o que que tá rodando ali né exatamente eh diferente do código interpretado que você consegue em tempo real sei lá você não vai conseguir eh fazer alguma coisa em tempo real que o browser não tem acesso né então isso tem que ser equivalente também pro código compilado né mas eu já já sinto segurança um pouco maior com quando o o Clauber explicou que você tem tem uma VM ali e ela é limitada né então você vai ter apis de acesso à máquina local portas específicas que vão aí quem vai delimitar isso daí é AVM né é que a gente tem um instinto de [ __ ] vai rodar binário no brower tipo como se você fosse baixar um xe e rodar na tua máquina é a primeira você tem Você imagina algo mais imediato assim né na verdade você tá rodando dentro de uma cápsula ali que que vai ter suas limitações né Exatamente é inclusive assim até de curiosidade O pessoal já tá já criaram um projeto chamado wasmi time que é para você rodar wasmi em linha de comando é apartado do browser tudo que você quiser você vai como se fosse um node né Entendi então você pô pô mas vol vai se vai rodar chama você fez o negócio em ser para rodar no Browser depois você pega o fez o browser lá faz logo em você [ __ ] é pode ser alguma coisa para sei lá escrever teste Não sei ainda tá bem no começo esse esse projeto sim porque aí você pode automatizar um pipeline e tal e deixar faz faz sentido né Você pode tanto usar ele num node ali da vida com asm direcionar pro browser você pode sim né até usar num docker por exemplo sim não tem independência do do browser para apessar muito bom exatamente meus amigos eu gostaria de continuar esse assunto com vocês mas estamos no limite do nosso tempo né Depois o editor me mata a gente pass agradecer a presença de vocês aqui eu tive um refresh de tecnologias frontend hoje tem certeza que os nossos ouvintes também interessados nessa trilha também se se beneficiar bastante quero deixar uma última pergunta aqui para vocês o cara que quer entrar no do Fronte hoje por onde ele começa eu vou eu falo ou você fala vai aí eu complimento tá E para onde o cara quer ir é primeiro não entre no Não entre na área front Change só porque tá no Hype só porque o pessoal tá todo mundo indo pô eu vou também até a gente que já tá anos aí tem mais de 8 anos ele você também já tem ano para PR caramba de de desenvolvimento frontend dá 5 minutos dá vontade de desistir de jogar tudo pro alto mas a gente cara é o que paga nos frontend is é ti é o geral né cara é não é fácil tá pessoal tem o frontend tem a a fama de ser mais fácil porque é só interface do usuário é só isso é só aquilo mas só interface do usuário é hoje em dia cara as Buzz Words que tem aí as palavras as frasezinhas que tem de bem SS SAS HTML5 HTML 3 JavaScript JS tem uma sopa de letrinha gigante Git é e x e y tudo Tá tudo faz parte do front chend ali então é um absurdo grande então a minha dica para quem quer entrar na área é conheça tudo de fato porque a área frontend não é só o desenvolvimento tem também a parte de desenvolvimento de tela que é uxi é interfaceado tá você vai pensar na experiência do usuário isso é considerado sim fronti o pessoal fala que não mas é então Eh como um bom Dev front Senior depende Depende do que você quer cara tipo você é mais fã de código vai estudar é os primórdios né não seja desenvolvedor Framework de Framework cara aprenda o básico aprenda o JavaScript o HTML o CSS porque em cima disso você vai tirar qualquer Framework qualquer biblioteca JavaScript de letra Se você conhece o Cord do negócio você vai tirar de letra qualquer coisa então é uma é uma coisa que eu acho que as pessoas não falam muito hoje em dia né simplesmente vai você vai ganhar entra na área que você vai ganhar um salário alto não é assim é a minha dica é estuda os primórdios estuda JavaScript puro é chato mas vai te ajudar muito e vai te dar muita mais credibilidade na área e recrutadores né ão estão olhando para quem conhece de fato e não só aprendeu como é que se faz mas sim como faz entendeu vai dar uns get elemento Bad primeiro ex ISS vai conhecer o Cord tudo que é é importante conhecendo isso você vai entender como que o Como que o angler Funciona porque que existe um ng4 lá você entende como que o ng4 funciona por dentro cara isso é tipo é ouro na na no mercado hoje entendeu é a Trindade do do front é o HTML CSS JavaScript eu falo isso há anos e não muda né então Mud e e conheça o seu browser como funciona um browser independente ser Chrome ser Firefox ser Ed Brave se tem gente usando oper ainda deve ter mas mas conheça o seu é o browser porque muita coisa do frontend hoje ainda depende do browser mesmo a gente falando aqui de web assembly e tudo mais mas inode né mas assim estude a Trindade do do front que é o JavaScript 7 HTML e conheça como o browser Funciona porque tudo que você tá usando ali de html CSS JavaScript nasceu para poder rodar dentro do browser né então pelo menos você saber o que ele falou saber de onde veio para depois estudar o Framework que você quiser tecnologia que você quiser de fronte então aí o c limite é tem bastante empresas como por exemplo a Dill Não não é públ poderia ser tá D mas é digital innovation One Para quem para quem quiser entrar na área e eles pegam bastante gente que tá começando chama digital innovation One só jogar no Google lá primeiro link eles são bem grandes aí e eles te pegam para te ensinar você não paga nada Até onde eu sei pelo menos não não não paga nada e eles te ensinam ali o básico e eles têm parceria com as empresas avanade Accenture IBM E essas empresas abrem vaga de estágio ou desenvolvimento Júnior por exemplo para você eles vão te pagar praticamente você aprender e é o começo de tudo aonde tudo vai deslanchar aí tá então tem conhece algumas pessoas que começaram pela digital innovation One e cara tão tão na tão no mercado aí como desenvolvedor já há um tempo então e falando até de documentação Mozilla developer Network que esse negócio é Anos Atrás a galera vem colocando e material ali definição de Java script definição de CSS HTML uma porrada de coisa então tem em português tem tradução lá mdn procura aí no no Google e use as ferramentas e as documentações certas para poder aprender muito bom vou deixar os links aqui na descrição então você que se interessou estará muito bem assessorado aqui pelos links dos meus amigos Clauber Obrigado meu velho como sempre dando aula aqui com a gente cara obrigado isso Bruninho eu Obrigado cara tamo junto qualquer qualquer convite estamos aí que dia volta o POG cara dia 2 de Fevereiro estamos com estamos com novidade legal aí dia 2 de Fevereiro a gente volta ao vivo tá nessa sala inclusive Voltaremos e vai ser bem legal a nossa volta show de bola vou deixar o o link aqui também marcar o podcast ou retorno @ podcast oficial aqui no YouTube isso aí acompanha que os cara são bom is e me convida hein Quero voltar lá vamos fazer um assunto sobre arquitetura vai dar um bate-papo legal pá quero quero tá lá você que acompanhou a gente tá aqui muito obrigado pela audiência de vocês não se esqueça de se inscrever no canal de encaminhar esse episódio para aquele seu amigo frontend ou aquele seu amigo backend que quer aprender algo além depois do jquery exato que sofre para fazer CSS que sofre Então manda para ele aí que vai ser interessante e agora você pode ser membro do nosso canal né novidade se você gosta do nosso trabalho se você quer apoiar a gente de alguma forma se você quer pagar o Red Bull do Clauber se você quer pagar minha cerveja que hoje eu não estou bebendo mas quer pagar alguma cervejinha você po podcast de frontend é assim né não tem cerveja não tem saveu cara os caras tudo no R Bull porque vira à noite você pode contribuir e mandar um super pra gente você pode ser membro do canal e colaborar se o nosso trabalho contribui de alguma forma com o trabalho de vocês e você pode contribuir fica aqui o nosso Muito obrigado meus amigos Obrigado até o próximo episódio valeu

87:04[Música] [Aplausos] [Música] [Aplausos] falou