00:00:00Temos um novo framework JavaScript,
00:00:02um framework full stack,
00:00:04mas me ouça antes de desistir.
00:00:06É bastante interessante porque é feito pelo pessoal do Remix.
00:00:11Então,
00:00:11as pessoas que construíram o Remix JS,
00:00:14Ryan Florence e Michael Jackson.
00:00:16Não, não aquele Michael Jackson.
00:00:19Que também são os autores originais do React Router.
00:00:22Eles compartilharam sua visão e na verdade o primeiro protótipo,
00:00:27digamos assim,
00:00:28ou algumas primeiras demos do seu novíssimo framework JavaScript,
00:00:33Remix versão 3.
00:00:34Então não é realmente um nome novo.
00:00:36É um nome existente, mas é um framework completamente novo.
00:00:41E neste vídeo vou tentar explicar tudo isso.
00:00:44Vou explicar o que é e,
00:00:46claro,
00:00:46qual é minha opinião sobre ele,
00:00:48se você realmente precisa de outro framework JavaScript e quais acho que são as chances de sucesso ou adoção dele.
00:00:57Agora,
00:00:57em uma era onde os modelos de linguagem grandes,
00:01:01é claro,
00:01:01geram aplicações React por padrão.
00:01:04Mas vamos lá,
00:01:05passo a passo: o que exatamente é o Remix e por que isso importa??
00:01:11O Remix, caso você tenha perdido, é um meta framework React.
00:01:15No fim das contas, uma alternativa ao Next.js.
00:01:19E o Remix foi lançado há alguns anos já.
00:01:21O Remix versão 2 foi lançado,
00:01:24acho que em 2022,
00:01:25se não me engano completamente.
00:01:27E então,
00:01:28em 2024,
00:01:28o Remix versão 2 foi essencialmente mesclado com o React Router.
00:01:33É por isso que agora,
00:01:34ao usar o React Router,
00:01:36você pode usá-lo como uma biblioteca de roteamento em aplicações React,
00:01:41como sempre fez.
00:01:42Isso ainda funciona.
00:01:43Ainda é uma biblioteca incrível para isso.
00:01:46Mas você também pode usá-lo no modo framework para essencialmente criar uma aplicação React full stack onde o React Router é mais do que apenas um roteador.
00:01:58Onde ele também ajuda com busca de dados,
00:02:00carregamento de dados,
00:02:02mutações de dados,
00:02:03assim como o Remix fazia,
00:02:05porque ele é o Remix mesclado ao React Router.
00:02:08Mas isso,
00:02:09é claro,
00:02:10trouxe a questão: o que vai acontecer com o Remix então.
00:02:14Com a marca Remix??
00:02:17E acontece que ele se tornará um novo framework com a versão 3.
00:02:22Ele se tornará um novo framework que,
00:02:24importante,
00:02:25é independente do React.
00:02:27Não é um meta framework React.
00:02:29Não é outra alternativa ao Next.js, por assim dizer.
00:02:33Em vez disso,
00:02:34é um framework JavaScript full stack completamente novo,
00:02:38escrito do zero,
00:02:39desde o início.
00:02:40Com todos os recursos e a API que Ryan Florence e Michael Jackson gostariam de ter em um novo framework JavaScript.
00:02:49Então,
00:02:49basicamente resolvendo os problemas que eles veem e viram com o ecossistema JavaScript.
00:02:56Com o cenário existente de bibliotecas e frameworks,
00:02:59se você quiser.
00:03:01Especificamente,
00:03:02é claro,
00:03:02com o React,
00:03:03já que essa é a principal biblioteca e framework,
00:03:07dependendo de como você quer chamar,
00:03:10que temos por aí.
00:03:11Então, do que se trata esse novo Remix.
00:03:14Bem, na última sexta-feira...?
00:03:18Pudemos ter uma primeira demo, um primeiro vislumbre da API.
00:03:21E vou deixar o link do livestream completo onde você pode assistir todo o evento de anúncio abaixo deste vídeo,
00:03:29é claro,
00:03:29caso queira ver tudo.
00:03:31Mas esteja ciente de que serão cerca de quatro horas de demo e explicação sem parar.
00:03:36Eu assisti para que você não precise, se não quiser.
00:03:40Mas definitivamente dê uma olhada se quiser aprender mais.
00:03:43E aqui você vê uma das principais coisas sobre as quais esse novo framework será....
00:03:49Ou melhor,
00:03:50a principal coisa que causou algum alvoroço no X: esse this.update.
00:03:56Não parece muito espetacular, parece.
00:04:00Bem, na verdade implica duas coisas que...?
00:04:04Os desenvolvedores JavaScript não estão realmente acostumados mais.
00:04:08A: o uso da palavra-chave this.
00:04:11Quero dizer,
00:04:11pessoas velhas como eu aprendemos todas as peculiaridades e recursos do this quando começamos com JavaScript.
00:04:19Hoje em dia você não usa muito isso.
00:04:21No React, você provavelmente nunca escreverá this.
00:04:25Mas é uma palavra-chave integrada ao JavaScript.
00:04:28Eles estão aproveitando essa palavra-chave this para expor algumas APIs para você.
00:04:33Onde você obtém acesso a essas APIs?
00:04:36Bem, você ainda escreve funções..
00:04:39Então você não escreve classes,
00:04:40mesmo que possa pensar que sim com essa palavra-chave this.
00:04:44Mas ao trabalhar com o Remix,
00:04:46você ainda estará construindo componentes,
00:04:48e ainda usará funções para isso.
00:04:50Então, assim como você conhece do React.
00:04:52Mas essas funções de componente parecerão um pouco diferentes.
00:04:56Mas vamos voltar ao this.update.
00:04:58Eu mencionei que há duas coisas importantes sobre isso.
00:05:01This é uma delas.
00:05:02Update é a outra,
00:05:03porque no Remix versão 3,
00:05:05você terá que dizer ao framework quando ele deve atualizar a tela,
00:05:09quando ele deve re-renderizar.
00:05:10E isso é, claro, algo a que não estamos mais acostumados.
00:05:14Porque no React,
00:05:15mas também no Vue e Angular,
00:05:16você confia no framework determinando para você quando atualizar.
00:05:20No React,
00:05:21quando você chama setState,
00:05:22você está atribuindo um novo valor ao estado que está gerenciando,
00:05:26e isso também acionará uma atualização da interface.
00:05:29Mas não necessariamente instantaneamente.
00:05:32Em vez disso,
00:05:32o React fará algum agrupamento,
00:05:34coletará múltiplas atualizações de estado potencialmente,
00:05:38e assim por diante.
00:05:39Mas eventualmente ele atualizará a interface.
00:05:41Então,
00:05:42com setState,
00:05:43você meio que diz ao React que ele deve atualizar a interface.
00:05:46Mas você principalmente diz a ele que algum valor muda e que é um efeito disso que a interface será atualizada,
00:05:53que a interface será re-renderizada.
00:05:55Com o Remix é diferente.
00:05:56Com a versão 3 do Remix, eu deveria dizer.
00:05:59Lá você gerenciará seu estado em variáveis padrão,
00:06:02nada de especial.
00:06:03Não há hook useState ou algo assim.
00:06:05Na verdade, não há hooks nenhum.
00:06:07E você então apenas chama this.update sempre que souber que a interface deve atualizar.
00:06:12Então você pode mudar várias variáveis e não chamar this.update e a interface não será atualizada.
00:06:18Ou você muda várias variáveis e chama this.update e a interface será atualizada.
00:06:22É assim que funcionará.
00:06:24E parece que algumas pessoas,
00:06:25você conhece bem a internet,
00:06:27as pessoas na internet são horríveis.
00:06:29Algumas pessoas têm alguns problemas com isso.
00:06:32Eu diria: vamos ver como funciona.
00:06:34Quero dizer,
00:06:35é uma nova abordagem e a abordagem antiga definitivamente funciona bem.
00:06:39Acho que há uma razão pela qual ela está sendo usada em todas essas bibliotecas e frameworks.
00:06:44Mas a abordagem antiga definitivamente também tem o potencial de ser uma armadilha,
00:06:49o que pode levar a situações onde não está realmente claro por que algo atualiza ou não atualiza.
00:06:55E em aplicações mais complexas,
00:06:57especialmente com versões mais novas do React que se tornaram bastante complexas com muitos hooks e tal,
00:07:03pode ser avassalador entender verdadeiramente o que está acontecendo.
00:07:07E essa é uma razão pela qual eles estão voltando a uma API mais simples onde você tem controle total..
00:07:16Eles também estão usando a palavra-chave this para expor algumas outras APIs,
00:07:20mas não muitas,
00:07:21na verdade,
00:07:22porque claramente a ideia é manter o framework simples e focado e proporcionar uma boa experiência ao desenvolvedor e facilitar o uso deste framework também.
00:07:31Porque um objetivo claro,
00:07:33e eles declararam isso em uma postagem no blog que compartilharam no início deste ano,
00:07:38um objetivo claro para este framework é que ele seja fácil de usar por modelos de linguagem de grande porte.
00:07:45Então a ideia claramente é que você possa alimentar artigos de documentação ou exemplos no seu histórico de chat com um modelo de linguagem de grande porte,
00:07:54fornecer algumas informações como contexto e então fazer com que LLMs e assistentes de código ajudem você a gerar o código,
00:08:01porque é claro que eles precisam fazer isso,
00:08:04pois é um framework totalmente novo.
00:08:06Obviamente,
00:08:07nenhum dos modelos de linguagem de grande porte existentes foi treinado nesta base de código e,
00:08:13no futuro próximo,
00:08:14eles não serão treinados nisso porque oitenta por cento de todos os exemplos de código front-end são React,
00:08:20ao que parece.
00:08:21Especificamente React com Shadcn.
00:08:23Então,
00:08:23é claro,
00:08:24eles precisam encontrar outra maneira de permitir que os desenvolvedores tornem o modelo de linguagem de grande porte ciente de como escrever código Remix v3,
00:08:33o que é outra razão pela qual eles estão mantendo a API simples,
00:08:37eu imagino,
00:08:38e por que eles querem mantê-la expressiva,
00:08:40fácil de entender e fácil de usar,
00:08:42porque não são apenas humanos que devem usá-la,
00:08:45mas também modelos,
00:08:46modelos de linguagem de grande porte.
00:08:49Então esse é claramente um objetivo que eles tinham.
00:08:52E você pode ver isso nos exemplos que eles compartilharam.
00:08:55Além disso,
00:08:56outro objetivo que eles têm,
00:08:58e eles declararam isso várias vezes naquela apresentação,
00:09:01é que eles estão usando primitivos da web.
00:09:03Eles estão usando recursos disponíveis em navegadores modernos,
00:09:07e não apenas navegadores,
00:09:09mas também no backend,
00:09:10e vou chegar ao backend em alguns segundos.
00:09:13Mas eles estão usando coisas integradas ao navegador.
00:09:16Eles estão contando muito com eventos nativos e as capacidades integradas para despachar eventos personalizados.
00:09:23Então você pode criar eventos personalizados no navegador e despachá-los,
00:09:27e eles estão contando muito com isso.
00:09:29Eles estão contando com sinais de aborto para comunicar que um componente foi desmontado,
00:09:35por exemplo,
00:09:35e para permitir que você pare seus ouvintes de eventos automaticamente.
00:09:40Então eles estão usando o que está integrado ao navegador porque eu definitivamente sinto que nós,
00:09:45desenvolvedores web,
00:09:47não acompanhamos o que os navegadores modernos são capazes de fazer,
00:09:51e não apenas navegadores modernos.
00:09:53Há certas capacidades que estão lá há anos e nós não as usamos.
00:09:57Podemos nem mesmo saber sobre elas.
00:09:59Se você realmente mergulhar no que o DOM tem a oferecer,
00:10:02o que os navegadores têm a oferecer,
00:10:04quais APIs estão disponíveis lá,
00:10:06há muito que você pode fazer lá e muitas coisas onde você pode não precisar de bibliotecas de terceiros extras,
00:10:13e é isso que eles estão tentando aproveitar no final.
00:10:16Mantenha simples e use essas capacidades integradas.
00:10:19Essa é a abordagem deles aqui.
00:10:21Agora, como eu disse, ainda é um framework.
00:10:24Você não vai criar nós DOM com createElement e todas essas APIs do DOM.
00:10:28Em vez disso,
00:10:29como mencionado antes,
00:10:30você ainda criará componentes criando funções e usando código JSX nelas.
00:10:34Eles mostraram tudo isso.
00:10:36É só que o gerenciamento de estado funciona de forma totalmente diferente,
00:10:40que é geralmente mais enxuto,
00:10:42que você não terá hooks ou algo assim,
00:10:44também porque essas funções de componente não serão chamadas de novo e de novo como é o caso no React.
00:10:50Em vez disso,
00:10:51você terá dois tipos de funções e,
00:10:53dependendo de como você as escreve,
00:10:55elas serão chamadas apenas uma vez ou parte delas pode ser chamada várias vezes.
00:11:00E aqui está algo para as pessoas que podem ter trabalhado com React em 2000,
00:11:05acho que 17 já naquela época.
00:11:06Você pode se lembrar de que tínhamos dois tipos de componentes.
00:11:10Tínhamos componentes baseados em classe com estado que podiam gerenciar estado e que podiam atualizar quando esse estado mudava,
00:11:18e tínhamos componentes sem estado,
00:11:20e esses eram as funções de componente naquela época.
00:11:23E então tivemos os hooks do React e todos os componentes se tornaram funções de componente eventualmente,
00:11:29e eles não podem ser com estado ou sem estado.
00:11:32O Remix versão 3 está adotando essa abordagem do React old-school,
00:11:36por assim dizer,
00:11:37mas não com classes ou funções,
00:11:39mas sim sempre funções,
00:11:40mas tipos diferentes de funções.
00:11:42Se você tem uma função que retorna JSX,
00:11:44é um componente sem estado no final.
00:11:47Você não pode chamar this.update lá e esperar que a função do componente seja executada novamente.
00:11:53Não é assim que vai funcionar.
00:11:54Você pode aceitar props e se o componente pai renderizar novamente,
00:11:58sua função de componente será executada novamente e assim por diante.
00:12:02Mas você não pode gerenciar estado lá.
00:12:05Você transforma uma função de componente em uma função de componente com estado,
00:12:10por assim dizer,
00:12:11não retornando o código JSX,
00:12:12mas sim retornando uma função que retorna o código JSX.
00:12:16Então,
00:12:16uma função de componente que contém e retorna uma função que então retorna o código JSX,
00:12:21isso será ou isso pode então ser um componente com estado.
00:12:25E lá,
00:12:25quando você chama this.update essa função que você retornou será executada novamente,
00:12:30pelo menos é assim que eu entendi.
00:12:32Então temos diferentes tipos de componentes,
00:12:35mas novamente uma API muito simples no final,
00:12:38uma maneira muito simples de diferenciar entre funções de componente com estado ou sem estado.
00:12:43E então há o backend,
00:12:45porque o Remix versão 3 não é apenas um framework front-end.
00:12:48Em vez disso, é um framework full stack.
00:12:51É destinado a ser um framework full stack.
00:12:53Mas,
00:12:54a propósito,
00:12:54eles também estarão lançando uma biblioteca de componentes que torna mais simples construir componentes de formulário complexos e assim por diante.
00:13:03Eu também deveria mencionar isso, mas voltando ao backend.
00:13:07Ele também virá com uma parte de backend.
00:13:09Ele pretende ser um framework full stack,
00:13:12front-end e back-end combinados.
00:13:14Novamente, sem React inteiramente.
00:13:16Em vez disso,
00:13:16eles estão reconstruindo tudo do zero,
00:13:19por assim dizer.
00:13:20Mas no backend,
00:13:21você terá um roteador,
00:13:22um roteador bastante capaz e poderoso,
00:13:24porque obviamente,
00:13:25já que eles construíram o React Router nos últimos 10 anos,
00:13:29eles sabem muito sobre roteamento.
00:13:31Então você terá um roteador poderoso,
00:13:33terá as capacidades de retornar código JSX e componentes Remix em suas rotas e hidratar esses componentes no servidor.
00:13:40Eles criaram sua própria alternativa aos componentes de servidor do React,
00:13:45uma alternativa mais simples que permite que você retorne um componente que pode atualizar após ser servido no cliente,
00:13:52buscando novamente partes do DOM.
00:13:54Então,
00:13:54quando você deleta algo,
00:13:56por exemplo,
00:13:56você pode enviar uma solicitação do cliente para aquele servidor e receber de volta algum código HTML que pode ser hidratado novamente para atualizar partes do DOM.
00:14:06Então eles estão nos dando todos esses recursos para construir aplicações full stack modernas e rápidas,
00:14:13como aplicações de página única,
00:14:14assim como você pode fazer com Next.js ou o modo framework do React Router ou outros frameworks como Tanstack Start,
00:14:21mas de forma mais simples.
00:14:23Esse é o objetivo claro: ter uma maneira simples de construir esses aplicativos.
00:14:28É isso que eles querem fazer.
00:14:30Há mais nesta apresentação.
00:14:31É longa,
00:14:32mas essa é meio que a parte mais importante,
00:14:34eu diria.
00:14:35Essa é a minha principal conclusão.
00:14:37Eles querem nos dar um framework full stack poderoso e simples.
00:14:41Eles estão escrevendo do zero.
00:14:42Temos atualização manual e assim por diante.
00:14:45Então tudo que eu descrevi, precisamos disso?.
00:14:56Essa é a grande questão,
00:14:58e acho que outra grande questão é: Vai ter sucesso?
00:15:02Obviamente,
00:15:02ambas as perguntas são bem difíceis de responder,
00:15:05mas vou tentar o meu melhor.
00:15:07Precisamos disso??
00:15:08Bem,
00:15:08eu acho que temos muitos frameworks JavaScript por aí e claramente haverá muitas pessoas dizendo que temos muitos demais,
00:15:16então a resposta seria não.
00:15:18Eu sempre pensei,
00:15:19mesmo em 2018,
00:15:20quando tínhamos um novo framework toda semana,
00:15:23mesmo naquela época eu pensava que é sempre bom ter inovação e experimentar novas ideias.
00:15:28Eu não acho que precisamos de um novo framework que seja apenas como o React com algumas pequenas diferenças.
00:15:35Eu não acho que precisamos disso.
00:15:37Mas uma abordagem totalmente nova com aquela atualização manual,
00:15:41atualizações acionadas manualmente e todas essas outras pequenas coisas que eles têm,
00:15:47eu acho que isso é uma ótima ideia.
00:15:49Definitivamente vale a pena tentar.
00:15:51Parece interessante.
00:15:52Pode nos dar uma alternativa mais simples ao React,
00:15:56que é incrível,
00:15:56mas se tornou bastante complexo ao longo dos anos.
00:16:00Então sim, podemos precisar disso.
00:16:02Vai ter sucesso??
00:16:04Essa é outra questão,
00:16:05claro,
00:16:05porque especialmente agora na era da IA e dos grandes modelos de linguagem,
00:16:10obviamente esses modelos vão tipicamente recomendar React por padrão.
00:16:14Por outro lado,
00:16:15pessoas que não sabem escrever código,
00:16:17claro,
00:16:18não são necessariamente o público-alvo,
00:16:20pelo menos não diretamente.
00:16:22Vou voltar a isso.
00:16:23Então isso não importa aí.
00:16:25Agora,
00:16:25desenvolvedores experientes,
00:16:27no entanto,
00:16:28podem estar interessados em usar Remix e simplesmente guiar o grande modelo de linguagem com a ajuda de exemplos oficiais e assim por diante para gerar código Remix,
00:16:38simplesmente porque querem ter uma base de código mais simples,
00:16:42porque no final das contas,
00:16:43como desenvolvedores,
00:16:45ainda mexemos no nosso código.
00:16:46Podemos gerar grandes partes dele,
00:16:49mas ainda controlamos o grande modelo de linguagem.
00:16:52Ainda ajustamos partes do código.
00:16:54Podemos escrever partes maiores desse código se tivermos uma funcionalidade muito específica em mente que a IA simplesmente não consegue acertar.
00:17:03Então,
00:17:03obviamente,
00:17:04ainda nos importamos com a pilha de tecnologia como desenvolvedores.
00:17:08Eu ainda me importo,
00:17:09pelo menos,
00:17:10e tenho certeza de que alguns de vocês também.
00:17:13Então aí pode ser interessante experimentar outra coisa,
00:17:16e desde que aquele framework seja fácil de usar com grandes modelos de linguagem,
00:17:21haja recursos suficientes para ensinar o grande modelo de linguagem como usá-lo,
00:17:26o que,
00:17:26claro,
00:17:27é algo em que eles parecem focar e parecem ter como prioridade,
00:17:31isso soa bem para mim.
00:17:32Então isso pode definitivamente dar a eles uma chance válida de sucesso.
00:17:37Obviamente vai ser difícil.
00:17:38Mas ei, esse sempre teria sido o caso, eu acho.
00:17:41Então vejo chances,
00:17:42mas é claro,
00:17:43é um mercado lotado,
00:17:44para dizer assim.
00:17:45Agora, o que é importante é que o Remix pertence à Shopify.
00:17:49Lá em 2022,
00:17:52a Shopify comprou o Remix,
00:17:54pode-se dizer,
00:17:54então a equipe do Remix se tornou parte da Shopify.
00:17:58Agora,
00:17:58a Shopify claramente,
00:18:00é claro,
00:18:00está interessada em ter um framework que seja ativamente mantido e que esteja sendo usado pelo menos dentro da Shopify,
00:18:08e com isso não quero dizer apenas dentro da empresa para suas páginas de marketing e branding da Shopify.
00:18:15Quero dizer para as lojas Shopify.
00:18:18É definitivamente possível que o objetivo seja ter o Remix como uma opção para vendedores Shopify que querem construir suas próprias lojas em cima da Shopify e que querem uma maneira fácil de ajustar essas lojas e construir vitrines ou páginas customizadas que compõem a loja como um todo,
00:18:37e eles estão,
00:18:38claro,
00:18:39tendo um framework que seja fácil de usar e fácil de usar com grandes modelos de linguagem poderia ser enorme.
00:18:46Ainda não é uma garantia,
00:18:48claro,
00:18:48mas ter a Shopify por trás do Remix,
00:18:51claro,
00:18:51vale muito,
00:18:52eu acho,
00:18:52e por isso sou bem positivo sobre o futuro do Remix também,
00:18:56é claro,
00:18:57porque eles têm uma comunidade talvez pequena,
00:19:00mas muito entusiasmada,
00:19:01pelo que posso perceber.
00:19:03Eles têm um histórico incrível,
00:19:05obviamente,
00:19:06tendo desenvolvido o React Router e assim por diante.
00:19:09Então sim, estou super animado para ver o que vamos ter.
00:19:13Estou animado para finalmente usá-lo eu mesmo porque agora mesmo isso não é realmente possível,
00:19:20e esses são meus pensamentos sobre isso.
00:19:22Então,
00:19:23como sempre,
00:19:24me digam o que vocês pensam,
00:19:26se vocês acham que precisamos disso e se eles vão vencer,
00:19:29e assistam a parte inteira de quatro horas da conferência se estiverem interessados e quiserem saber mais..