Categorias
WordPress

Introdução ao Frontity para WordPress

Recentemente conheci o framework front-end Frontity assistindo o Meetup to WordPress São Paulo sobre a ferramenta, foi uma introdução sobre o conceito por trás do framework sem tocar muito da parte do código.

Para você que não conhece o Frontity é um framework escrito em react para realizar integração com uma instalação headless do WordPress. O conceito do WordPress headless utiliza a aplicação somente para servir dados via REST API. A vantagem desse conceito é que conseguimos criar diferentes aplicações utilizando a mesma base de dados.

Depois do meetup decidi fazer minhas pesquisas e acabei achando esse workshop realizado no JSNation em junho desse ano é um workshop(inglês) de 3 horas que aborda bastante coisa do framework:

O workshop esclareceu diversos pontos é um pouco longo mas o ritmo ajuda bastante quem está começando. Resumindo a arquitetura da aplicação com frontity:

Distribuição de uma aplicação utilizando frontity

Esse tipo de integração é possível com outros frameworks como Next.js e Gatsby.js mas com uma diferença Frontity é totalmente focado em WordPress. Podemos descrever o framework como uma alternativa para renderização de uma aplicação WP.

Criando o Primeiro projeto com Frontity

Segundo a documentação do frontity o processo de criação é dividido em 4 etapas:

1 – Criando um projeto

Os pré-requisitos para criação de um projeto frontity são: node instalado em nossa máquina e um terminal de linha de comando. Com esses requisitos o próximo passo é criar uma aplicação utilizando npx.

npx frontity create my-app

O processo de instalação irá criar um passo-a-passo onde você irá definir alguns items do projeto como um tema inicial.

2- Conectando frontity com seu projeto WordPress

Depois que criamos nosso projeto é chegada a hora de conectar nossa aplicação frontity com WordPress. Para isso vamos em um arquivo chamado frontity.settings.js e passamos o endereço da REST API da nossa aplicação WordPress:

//frontity.settings.js export const settings = { packages: [ { name: "@frontity/wp-source", state: { source: { api: "https://blog.fellyph.com.br/wp-json" }, }, } ], };

No meu caso eu utilizei o endereço da rest api do meu blog blog.fellyph.com.br/wp-json

3 – Estilização

Frontity e WordPress conectados é a hora de estilizar o nosso tema para isso precisamos ter conhecimento em dois items chaves React e CSS-in-JS. Mas frontity fornece uma serie de ferramentas que abstraem alguns items com por exemplo na estilização:

import { styled } from "frontity"; const StyledDiv = styled.div` width: 100%; text-align: center; color: white; `;

4 – Publicando seu projeto

Frontity possui ferramentas para ajudar na publicação do seu projeto ou em uma plataforma node.js ou plataforma serverless. Para isso temos dois comandos:

npx frontity build

Esse comando irá gerar uma pasta com os arquivos compilados contendo seu projeto em react e servidor. A pasta gerada pelo build pode ser hospedada em qualquer serviço de hospedagem para aplicações node.

npx frontity serve

Esse comando irá utilizar a pasta criada pelo comando build para lançar sua aplicação em produção.

Mas claro se você já está ambientado com o ecossistema react alguns items que eu comentei parece básico. Caso contrario sera uma nova stack para aprender. Items como React e CSS-in-JS pode ser bastante fora do padrão caso esteja acostumado com php+html+css tradicional.

Mesmo sendo uma Grande mudança todo esse novo ecossistema vem com uma série de benefícios e ferramentas que ajudam a sua produtividade.

Benefícios

E quais são os benefícios de construir uma aplicação utilizando frontity? Para isso vou listar alguns items e entrar em mais detalhes:

React: Podemos dizer que o uso de react é um benefício uma plataforma estável com uma vasta comunidade. Adicionando React você trás uma série de benefícios da plataforma para o seu projeto. A capacidade de componentização da sua interface, melhor controle de estado da sua aplicação e performance.

Atualização de conteúdo em tempo real: Caso desenvolva com React você já está acostumado em ver em tempo real as modificações que você realiza nos arquivos do seu template sendo replicados no ambiente de teste sem a necessidade de recarregar a página no browser.

Pre-configuração de projeto e CLI: Desde o inicio do projeto frontity possui uma série de comandos de terminal que ajuda na criação de projetos, temas, teste, desenvolvimento e publicação.

Pacotes de bibliotecas focadas no WordPress: É possível conectar qualquer aplicação React com um WordPress headless mas o Frontity possui uma série de pacotes que irão ajudar no desenvolvimento de sua aplicação:

  • frontity: possui o core da sua aplicação com styled components, emotion, controle de estato, açõe e as integrações com o core do react
  • @frontity/tiny-router: pacote que faz o gerenciamento de rotas de sua aplicação.
  • @frontity/wp-source: pacote responsável por consultar os dados em sua aplicação WordPress
  • @frontity/components: possui uma coleção de componentes que irão auxiliar na construção de interfaces.
  • @frontity/hooks: possui o comportamento similar ao dos hooks do WordPress
  • @frontity/html2react: auxilia a renderizar conteúdo do post especialmente conteúdo formatado por page builders.
  • @frontity/head-tags: ajuda a dicionar informações em nossa tag head.

Melhorias de performance: Com framework conseguimos realizar code-splitting e trabalhamos com CSS-in-JS isso possibilita atrelar o estilo ao componente assim só carregamos o estilo dos elementos que estão sendo exibidos na tela. Além disso temos a possibilidade de utilizar recursos com lazy loading e prefetch.

Conclusão

Particularmente fiquei muito animado com o framework abre uma nova possibilidade para desenvolvimento de temas WordPress e os primeiros testes foram animadores. Estou preparando vídeos para o meu canal para mostrar passo-a-passo como criar uma tema com Frontity.

Para agilizar o processo de criação dos vídeos pedi autorização da Alessandra Spalato para utilizar o tema que ela desenvolveu como demo:

Esse será o tema que iremos construir nos próximos tutoriais sobre Frotity. Então vamos fechando esse post por aqui para mais posts sobre WordPress acesse a página da categoria WordPress.