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 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"
},
},
}
],
};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 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;
`;
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 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.
