Transformando o meu site em PWA com Nuxt

Fala meu caro leitor, tudo bem? Hoje estou trazendo mais um texto sobre Vuejs, mas com um enfoque um pouco diferente. Vou contar um pouco da minha experiência com o que foi a transformação do meu site para PWA com Vuejs usando o framework Nuxt.js. Espero que o texto possa ser enriquecedor para você. Boa leitura!


Hoje 25 de janeiro de 2018, será o primeiro Meetup oficial de Vuejs da comunidade de desenvolvimento do RJ. Para esse evento, me interessou falar sobre Nuxt, mas não tinha muita ideia do que falar sobre ele, e qual aplicação mostrar. Ai eu pensei: preciso atualizar meu site. Foi que ai que juntei o útil ao agradável e pensei em transformar meu site em uma PWA e estudar e aprender um pouco sobre Nuxt.js. Surgiu este texto e a apresentação.

O que é o Nuxt.js

É uma framework para construção de aplicações universais com Vue.js. O Nuxt surgiu logo após o Next.js, que tem o mesmo objetivo que o Nuxt, só que para React. Na própria documentação, eles afirmam este acontecimento:

The 25th of October 2016, the team behind zeit.co, announced Next.js, a framework for server-rendered React applications. A few hours after the announcement, the idea of creating server-rendered Vue.js applications the same way as Next.js was obvious: Nuxt.js was born.

O Nuxt facilita a criação de aplicações universais. O que seria isso? Conheça o SSR

SSR — Server Side Rendering

Renderização do lado do servidor é a técnica que permite que componentes javascript sejam criados no back-end, gerando HTML dos componentes. SSR é importante para SEO em aplicações SPA, pois muitos mecanismos de busca não executam JS para saber o conteúdo de uma página, ou uma rota específica. Veja um exemplo de um HTML do template de Vuejs:

Repare que só possui uma div, e só. Ao ser carregado pelo navegador, essa página terá todo o poder de uma SPA, todavia, para o buscador, ela poderá ser ignorada.

Mas desenvolver usando SSR não é simples…

JavaScript universal é quando o mesmo código JS é executado tanto no ambiente browser quando no ambiente back-end com Node. Todavia, quem já desenvolveu para essas duas plataformas, sabe que em ambas, existem APIs diferentes, o que pode causar certos problemas. Por exemplo, no Node o desenvolvedor não pode executar um window.scrollTo(0, 0), pois no Node não existe o objeto global Window.

Voltamos ao Nuxt

O template Nuxtjs

Eu afirmo que o Nuxt é um framework de alto nível, porquê? Porque ele abstrai muita informação e configuração. Vejamos um exemplo da organização de pastas dele:

Cadê a pasta build? E config? Meu Deus, e os arquivos do Webpack?

palma palma, não primeos canico

Num primeiro momento, eu fiquei surpreso em não ver nada do que eu conhecia de estrutura de pastas entre outras coisas, dos templates comuns do Vuejs

Para quem não sabe o que é um template Vuejs, é uma estrutura de pastas, configuração e afins que nos ajuda a criar nossa aplicação do início, com a parte chata (configurar plugins, module bundler) já pronta.

Não irei me ater a explicação do que é cada pasta, existe uma explicação excelente no próprio guia do Nuxt.

Vejamos mais um exemplo de porque o Nuxt é alto nível: você não precisa configurar as rotas da aplicação. Todas elas estarão na pasta pages . Criado um arquivo lá, é gerada uma rota automagicamente com o nome do arquivo. Subrotas? Crie uma pasta e coloque um _ na frente. E por ai vai…

Para finalizar essa minha prosa sobre o Nuxt, com ele você possui duas formas de criar uma aplicação com SEO:

  • Com SSR, todavia, vai exigir um server Node.
  • Com a técnica de pre-render: essa é sensacional. O Nuxt irá pegar todos os seus componentes em cada page e vai gerar um HTML com o resultado. Claro, ele não vai fazer uma busca no banco de dados para gerar um HTML com dados assíncronos. Todavia, no meu caso, foi massa porque aonde eu escrevia os componentes, no final foi gerada as páginas com os resultados dos componentes. O comando lindo para fazer isso é o nuxt generate .

Progressive Web Apps

Bem, este tópico não irei me estender, tendo em vista a quantidade enorme de conteúdo pela internet, portanto, falarei sobre a contribuição do Nuxt na construção de uma PWA.

Há um módulo para Nuxt chamado pwa. É o nuxtjs/pwa . Esse módulo nos permite configurar tudo em nossa aplicação através do arquivo nuxt.config.js. (Aliás, é nesse cara que iremos configurar TUDO). Já existe um template oficial do nuxt para pwa. Vale a pena a conferida.

Quer ver o resultado final? Acesse meu site e o coloque na tela inicial. O endereço é https://emanuelgdev.com.br/.

Que splash screen linda

Referências


E ai, gostou? Espero que tenha sido muito proveitoso. E as referências possam ser um norte para você. Até a próxima!


Sou Emanuel, desenvolvedor na Decision6, amo tecnologias web, open source e acredito no lema: “to go fast, go alone; to go far, go togheter”. Mais informações sobre mim se encontram no meu site, emanuelgdev.com.br.