Skip to content
Programing

Inertia.js v3.0: O Novo Cliente XHR Nativo e Atualizações Otimistas

Published: Duration: 4:51
0:00 0:00

Transcript

Apresentadora: Juliana Santos Convidado: Ricardo Oliveira (Desenvolvedor Fullstack Sênior e especialista em ecossistema Laravel) Apresentadora: E aí, pessoal, bem-vindos de volta ao Allur! Eu sou a Juliana Santos e é um prazer ter vocês aqui em mais um episódio onde a gente mergulha fundo no que há de mais quente no mundo do desenvolvimento. Hoje, o assunto é música para os ouvidos de quem ama o ecossistema Laravel: o lançamento do Inertia.js v3.0. Apresentadora: Hoje eu recebo aqui no Allur o Ricardo Oliveira. O Ricardo é desenvolvedor Fullstack, trabalha com Laravel e Inertia desde as primeiras versões beta e é um entusiasta ferrenho de performance no front-end. Ricardo, seja muito bem-vindo ao Allur, cara! É um prazer ter você aqui para falar dessa v3.0 que tá dando o que falar. Convidado: Valeu, Juliana! O prazer é todo meu. Pois é, cara, o pessoal do Inertia não brincou em serviço nessa versão. Eu tava acompanhando as discussões no GitHub e o que eles entregaram agora é basicamente a maturidade total da ferramenta. É um momento bem massa pra quem curte essa produtividade do Laravel mas não abre mão de uma interface fluida. Apresentadora: Com certeza! E Ricardo, vamos começar pelo que eu acho que foi o maior choque pra todo mundo: o adeus ao Axios. Por anos, o Axios foi o braço direito do Inertia, né? Por que você acha que eles decidiram criar um cliente XHR nativo agora? Foi só pra diminuir o tamanho do arquivo final ou tem algo mais "escondido" aí? Convidado: Cara, o bundle size (tamanho do pacote) é um fator, com certeza, mas o buraco é mais embaixo. O Axios é excelente, mas ele é genérico. Quando o Inertia usa um cliente próprio, ele tem controle total sobre o ciclo de vida da requisição. Por exemplo, o gerenciamento de histórico (o tal do pushState) agora é muito mais coeso com o estado da aplicação. Apresentadora: Massa! Mas ó, me tira uma dúvida que eu sei que muita gente tem. Quem já tem projeto grande e usa interceptores do Axios pra injetar token de autenticação ou tratar erro 401 de um jeito customizado... essa galera vai ter muito trabalho na migração? Convidado: Então, vai ter um trabalhinho de refatoração, sim. Não dá mais pra simplesmente configurar o `window.axios`. Agora você vai usar os novos hooks de eventos do próprio Inertia. A lógica é parecida, mas a API mudou. É o preço da independência, né? Mas eu diria que vale a pena pelo controle granular que a gente ganha no rastreamento de progresso da requisição, que ficou muito mais preciso. Apresentadora: Entendi, faz total sentido. Agora, mudando para o meu recurso favorito: as Atualizações Otimistas. Gente, quem nunca quis aquele efeito do Instagram, onde você clica no "curtir" e o coração fica vermelho na hora, antes mesmo do servidor responder? Ricardo, como isso funcionava antes no Inertia e como a v3.0 facilitou esse processo? Convidado: Cara, antes era um "parto", tipo assim (risos). Você tinha que ou usar uma biblioteca de estado tipo Pinia ou Redux pra gerenciar um estado temporário, ou fazer uma gambiarra manual de: muda o estado, manda a requisição, se der erro, volta o estado... era muito boilerplate pra uma coisa simples. Apresentadora: Nossa, isso é sensacional! É a democratização da UX de alto nível, né? E falando em evitar que a aplicação pareça lenta, teve a introdução do hook `useHttp`. Eu vi que ele serve pra requisições que não disparam navegação. Explica pra gente: quando eu uso o `useHttp` em vez do tradicional `router.post` ou `router.get`? Convidado: Legal essa pergunta. O Inertia sempre foi focado em "visitas", tipo "mudei de página, troquei a URL". Mas e quando você quer só atualizar uma lista de resultados enquanto o usuário digita num campo de busca? Ou validar se um e-mail já existe enquanto ele preenche o form? Apresentadora: Cara, que massa. Parece que o Inertia tá realmente se tornando uma plataforma de rede e não só um "facilitador" de ponte entre o Vue/React e o Laravel. E pra gente fechar a parte técnica, eu vi que teve melhorias no SSR (Server-Side Rendering) e na integração com o Vite. Pra quem se preocupa com SEO, isso é um diferencial grande, né? Convidado: Com certeza, Juliana. O First Contentful Paint (FCP) tá bem mais rápido. Eles otimizaram como o SSR entrega o conteúdo inicial. E pra quem é dev, o HMR (Hot Module Replacement) no Vite ficou mais resiliente. Sabe quando você mudava uma coisinha no script e a página inteira recarregava, perdendo onde você estava? Agora ele tá mais "cirúrgico". Ele entende melhor as divisões de código. No final do dia, é produtividade no desenvolvimento e velocidade pro usuário final. Apresentadora: Olha, depois dessa aula do Ricardo, deu até vontade de abrir o VS Code agora e começar a migrar meus projetos pra v3.0! É muito legal ver como ferramentas que a gente usa no dia a dia evoluem ouvindo as dores reais dos desenvolvedores. Convidado: Eu que agradeço o convite, Juliana! Foi um prazer. Quem quiser trocar uma ideia sobre Laravel e Inertia pode me achar no LinkedIn como Ricardo Oliveira ou lá no GitHub. E pra quem quer aprender mais sobre a v3.0, a documentação oficial do Inertia foi toda atualizada e tá excelente. Vale o mergulho! Apresentadora: Valeu demais, Ricardo! E pra você que ouviu a gente até aqui, muito obrigada pela audiência. Se você gostou desse episódio, compartilha com aquele seu amigo que ainda tá sofrendo com o Axios no Inertia ou que tá doido pra implementar atualizações otimistas. Valeu por sintonizar o Allur, eu sou a Juliana Santos e a gente se vê no próximo episódio. Tchau!

Tags

Frontend php inertia.js laravel spa performance optimistic ui