Vue Amsterdam 2022: Parte VIII - A Nuxt Web

Bem-vindo! Fico feliz em vê-lo na sétima parte da minha série de resumos da Vuejs Amsterdam Conference 2022, na qual compartilho um resumo de todas as palestras com você.

Você pode ler minha série de Resumos da JSWorld Conference 2022 (em quatro partes) aqui , onde resumi todas as palestras do primeiro dia. Você também pode encontrar as palestras anteriores da conferência Vue Amsterdam 2022 em meu blog.

(Recorrente) Introdução

Depois de dois anos e meio, a JSWorld e a Vue Amsterdam Conference estiveram de volta ao Theatre Amsterdam entre 1 e 3 de junho, e tive a oportunidade de participar desta conferência pela primeira vez. Aprendi muitas coisas, conheci muitas pessoas maravilhosas, conversei com grandes desenvolvedores e me diverti muito. No primeiro dia foi realizado o JSWorld Conference, e no segundo e terceiro dias, o Vue Amsterdam.

A conferência estava cheia de informações com grandes oradores, cada um dos quais me ensinou algo valioso. Todos queriam compartilhar seus conhecimentos e informações com outros desenvolvedores. Então pensei que seria ótimo se eu pudesse continuar a compartilhá-lo e ajudar outras pessoas a usá-lo.

A princípio, tentei compartilhar algumas anotações ou slides, mas senti que não era bom o suficiente, pelo menos não tão bom quanto o que o palestrante compartilhou comigo. Então decidi rever cada palestra, me aprofundar nelas, pesquisar, fazer anotações e combiná-las com seus slides e até com suas palavras exatas em sua fala e depois compartilhar com vocês para que o que eu compartilho com vocês seja pelo menos no mesmo nível do que aprendi com eles.

Um ponto muito importante

Tudo o que você lê nesses poucos artigos é resultado do esforço e do tempo do próprio palestrante, e eu apenas tentei aprendê-los para poder transformá-los nesses artigos. Mesmo muitas das frases escritas nesses artigos são exatamente o que eles disseram ou o que escreveram no Slides. Isso significa que se você aprender algo novo, é por causa de seus esforços.

Por último, mas não menos importante, posso não me aprofundar em todos os detalhes técnicos ou codificações ao vivo em alguns dos discursos. Mas se você estiver interessado e precisar de mais informações, me avise e tentarei escrever um artigo mais detalhado separadamente. Além disso, não se esqueça de verificar o Twitter/Linkedin deles.

Aqui você pode encontrar o programa da conferência.

Nuxt Web

Sebastien Chopin - Co-Fundador da Nuxt

Nossa missão na @nuxtlabs é fornecer a melhor experiência de desenvolvedor para oferecer a melhor experiência de usuário para seus usuários finais. Estamos fazendo isso com o Nuxt há seis anos.

Nuxt é um framework web para criar qualquer tipo de aplicativo Vue. Isso significa que você pode fazer:

• Servier Side Rendering (SSR)
• Geração de Site Estático (SSG)
• Renderização do lado do cliente (CSR)
• Edge Side Rendering (ESR) graças ao Nuxt 3

Desde o início do Nuxt em outubro de 2016, ele foi baixado cerca de 46 milhões de vezes no npm, tem 300 mil sites ao vivo e 18 mil colaboradores do GitHub.

Uma comparação entre Nuxt 2 e Nuxt 3

• Servidor Web: Para o servidor web de desenvolvimento e produção, o Nuxt 2 usa para conectar, que é o núcleo do Express.js, mas para o Nuxt 3 eles criaram o h3 e ele funciona em qualquer tipo de ambiente JavaScript.

• Bundler : o Webpack 4 é usado no Nuxt 2, e para o Nuxt 3 eles começaram com o Webpack 5, mas após o lançamento do Vite, ele é oficialmente suportado como o Bundler padrão.

• Estrutura de interface do usuário: Vue 2 no Nuxt 2 e Vue 3 no Nuxt 3

• Biblioteca de roteamento: Vue Router 3 no Nuxt 2 e Vue Router 4 no Nuxt 3, que não serão incluídos se nenhuma pages/ diretório for encontrado.

• Gerenciamento de meta: Como o Nuxt faz SSR, é importante poder gerenciar meta tags. Vue Meta é usado no Nuxt 2 e VueUse Head no Nuxt 3.

• Servidor (menos) empacotador: Isso é introduzido no Nuxt 3, que compacta o aplicativo nuxt para produção removendo os node_modules para que seu aplicativo Nuxt tenha cerca de 1 megabyte.

Esta é uma comparação de tamanho de pacote hello world entre o Nuxt 2 e o Nuxt 3:

Uma das razões pelas quais o Nuxt 3 é muito menor é que ele pode ser alterado em árvore, como o Vue 3. Portanto, se você não usar um recurso, ele não será incluído no pacote.

O próximo tamanho de pacote equivalente é de cerca de 80kB.

Nesse pacote Nuxt 3 JS, 25,3 kB são do Vue e os 8,7 kB restantes incluem:

• Entrada de aplicativo com hidratação
• Componente raiz com <Suspense>
• Roteador leve e universal: useRouter() , middleware e <NuxtLink>
• Cabeçalho que pode ser composto e componentes: useHead() , <Title> , <Meta> , <Script> , …
• Busca universal de dados: $fetch()
• Páginas de erro padrão: 404 e 500
• Plugins e lógica runtimeConfig
• useNuxtApp() e ganchos: app:created , app:mounted , page:start , …

Renderização Lateral da Borda

Edge Side Rendering - também chamado de contêiner JavaScript por Ryan Dahl - é a capacidade de executar JavaScript nos nós CDN em algum lugar do mundo perto do usuário final.

As vantagens:

• Executa milissegundos de usuários finais
• 0ms partida a frio
• Sem servidores para manter
• Escala automática
• Preços acessíveis

Alguns dos provedores de computação de borda no momento:

• CloudFlare Trabalhadores
• Vercel Edge
• Netlify Edge
• Deno Deploy
• Borda Lambda
• StackPath

Conteúdo V2

Nuxt Content é um módulo Nuxt que lê arquivos Markdown, YAML, CSV e JSON no diretório content/ para criar uma poderosa camada de dados para seu aplicativo e o Content V2 já está disponível com mais recursos.

Nuxt 2.X

O que vem por aí no Nuxt 2.X:

• Vue 2.7
• Ponte Nuxt (beta)
  • vite
  • nitro
  • API de composição e configuração de script
  • TypeScript
  • nuxi CLI
  • Pós-CSS 8

Nuxt 3.0

O que está por vir para o Nuxt 3.0:

• Nuxt Image
• Renderização híbrida: Servidor + SWR + Pré-renderização
• Geração estática completa
• Modo de pré-visualização
• Sessões do servidor e autenticação
• Trabalhadores de serviço (PWA)
• Auxiliares de SEO e suporte i18n

Fim da Oitava Palestra

Espero que tenham gostado desta parte e que possa ser tão valiosa para vocês quanto foi para mim. Nos próximos dias, compartilharei o restante das palestras com você. Fique ligado…

Publicado também aqui .