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 na 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 o nosso projeto é chegada a hora de conectar a nossa aplicação frontity com WordPress. Para isso vamos num 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" }, }, } ], };
Code language: JavaScript (javascript)

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 série 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; `;
Code language: JavaScript (javascript)

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 o 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 a 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ê traz 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 início 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 da 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 da sua aplicação.
  • @frontity/wp-source: pacote responsável por consultar os dados na 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 na 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 um 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.

Por Fellyph Cintra

Fellyph Cintra é um Google Developer Expert focado em tecnologias web, com participação ativa na comunidade WordPress. Com mais de 14 anos de experiência no mercado, Fellyph já palestrou em mais de 30 eventos ao redor do Brasil e Europa, sempre abordando as boas práticas de desenvolvimento na web.

Deixe um comentário

O seu endereço de e-mail não será publicado.