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:

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.