Decidi, finalmente, construir um blog e disponibilizar um pouco do meu conhecimento e experiência para os leitores.

Ao optar por desenvolver um blog, eu decidi colocar em uso alguns dos conhecimentos que adquiri nesses anos de carreira. Pensei em desenvolver usando Wordpress, mas apesar do Wordpress ser uma ferramenta já bastante consolidada no mercado, decidi fazer algo diferente, que desafia-se minhas técnicas de desenvolvimento e que me ajuda-se a aplicar meus novos conhecimentos que adquiri, enquanto trabalho na empresa onde estou hoje.

Esse blog possui uma arquitetura relativamente simples por trás, para entregar um blog sem o uso de Wordpress ou outro CMS famoso do mercado, embora ele possua integração com um serviço que será abordado nesse artigo.

A partir essa breve análise, defini as tecnologias e bibliotecas que usei para desenvolver esse projeto, bem como onde eu disponibilizarei o projeto em questão, dado a uma necessidade de desenvolver algo rápido, sem muitas regras de negócio que aumetassem a complexidade desse projeto, além de não ter custos relacionados a infraestrutura, hospedagem e etc...

As tecnologias que escolhi foram:

• Next.JS (Front-end);
• TailwindCSS (Front-end);
• Typescript (Front-end);

E os serviços escolhidos para hospedar e gerenciar o blog foram:

• Hygraph (CMS headless);
• Netlify (Hospedage);

Abordarei cada um em seguida, de forma breve.

Next.JS

Next.js é um framework de desenvolvimento web front-end baseado no React de código aberto que permite a criação de aplicativos web e páginas estáticas de forma eficiente e poderosa. Algumas das principais vantagens do Next.js incluem:

• Renderização Híbrida: Capacidade do Next.JS oferecer renderização de página, tanto do lado do cliente (CSR), quanto do lado do servidor (SSR), garantindo uma melhor performance, principalmente no que diz respeito a SEO;
• Pré-renderização: Geração estática ou dinâmica das páginas, permitindo melhor desempenho no carregamento da página;
• Roteamento Automático: Roteamento da página feita com base nos diretórios inseridos dentro do projeto, permitindo até a definição de templates para cada diretório;
• Suporte a TypeScript.

Tailwind CSS

Tailwind CSS é um framework de estilo CSS de baixo nível que permite a construção de interfaces de usuário altamente personalizadas e responsivas de forma eficiente. Em vez de usar classes pré-definidas para estilos específicos, como em outros frameworks como Bootstrap, o Tailwind CSS fornece classes utilitárias que abrangem uma ampla gama de estilos de design. As principais vantagens do Tailwind são:

• Abordagem Utilitária: Cada atributo do CSS é transformado em uma classe específica dentro do Tailwind. Existem classes para cores, tamanhos de fonte, margens e etc... Dessa forma, é muito mais simples manter a consistência do design por toda a aplicação;
• Personalização Completa: O Tailwind CSS permite uma personalização completa dos estilos, facilitando a criação de designs únicos e distintos sem a necessidade de escrever CSS personalizado;
• Desenvolvimento Rápido: Sem a necessidade de escrever CSS, o desenvolvimento se torna muito mais acelerado, sem falar dos problemas que são evitados como o conflito de estilizações;
• Responsividade Integrada: Não existe a necessidade de se usar frameworks, como o Bootstrap, para construir a aplicação de forma responsiva. O Tailwind CSS já possui padrões de desenvolvimento que auxiliam na construção de designs responsivos, como tamanhos de tela pré-estabelecidos em suas classes.

Typescript

TypeScript é um superconjunto tipado de JavaScript que adiciona tipagem estática opcional ao JavaScript. Desenvolvido pela Microsoft, o TypeScript é projetado para tornar o desenvolvimento de aplicativos JavaScript mais escalável, confiável e produtivo, especialmente para projetos de grande porte. Algumas das principais vantagens do TypeScript incluem:

• Tipagem Estática Opcional: TypeScript permite a adição de tipos estáticos opcionais às variáveis, parâmetros de função, retornos de função e muito mais. Isso ajuda a detectar erros de código durante o desenvolvimento, melhorando a qualidade e a robustez do código.
• Autocompletamento e IntelliSense: Com base nas informações de tipos definidas no código, as IDEs e editores de código oferecem autocompletamento inteligente e IntelliSense, facilitando a escrita de código mais rápido e com menos erros.
• Maior Legibilidade e Manutenibilidade: A tipagem estática torna o código mais legível, facilitando a compreensão do código-fonte e a colaboração entre membros da equipe.
• Compatibilidade com JavaScript: O TypeScript é totalmente compatível com JavaScript existente, o que significa que os desenvolvedores podem gradualmente adotar o TypeScript em projetos existentes sem a necessidade de reescrever todo o código.

Hygraph CMS

O Hygraph CMS é um serviço (gratuito até certo ponto) que disponibiliza um CMS Headless para integrar com sistemas dos mais diversos tipos, como blogs, sites, e-commerces, e assim por diante.

O que é um CMS Headless?

CMS Headless são, basicamente, sistemas de gerenciamento de conteúdo que não possuem uma interface (front-end) para o usuário final (que acessa o site). Eles, geralmente, oferecem uma interface administrativa onde o administrador define, de forma livre, quais os tipos de conteúdo e como será a estrutura desse conteúdo gravado em sua base de dados. Isso permite uma liberdade gigantesca para os administradores de conteúdos definirem como o seu conteúdo será estruturado, sem a necessidade de envolver programadores.

Geralmente, CMS Headless como o Hygraph CMS, permitirão a integração a partir do consumo de API's. No caso do Hygraph, essa API usa o GraphQl, facilitando muito a consulta de conteúdos dentro dele por parte da aplicação front-end que irá disponibilizar seu conteúdo para os usuários finais (que acessam o site).

Pricipais diferenças entre um CMS Headless e o Wordpress

Para facilitar o entendimento do que é um CMS Headless, vamos compará-lo com o Wordpress, o CMS mais conhecido do mundo e listar as principais diferenças entre ambos.

CMS Headless:

• Não disponibiliza um site onde o conteúdo será mostrado. Isso fica a cargo da aplicação front-end externa que irá se integrar com ele. Essa aplicação front-end pode ser feita usando diversas bibliotecas e tecnologias.
• Permite um controle muito maior sobre a estrutura do conteúdo que será disponibilizado no site/blog/e-commerce, sem a necessidade de programadores altamente especializados.
• Estrutura baseada em microsserviço, onde o front-end consumirá o conteúdo a partir de consultas a API's. Desta forma, o front-end e o CMS estarão em ambientes separados, facilitando a manutenção de ambas as aplicações de forma isolada.

Wordpress:

• Disponibiliza um site onde o conteúdo é mostrado, embora a customização desse site seja, para os mais iniciantes, bastante complicada e confusa. Para isso, o Wordpress oferece a possibilidade de integrar temas ao site, facilitando a customização e personalização;
• Para permitir a criação de conteúdos dos mais diferentes tipos, será necessário programar, fazer alterações no tema que está sendo usado no wordpress, para ele permitir a criação de conteúdos diversos.
• Estrutura monolítica. Tanto o "front-end" quanto o "back-end" são uma coisa só. O Wordpress é responsável por tudo e, portanto, estão mais sujeitos a problemas que afetarão todo o site.

Com o passar dos anos, o Wordpress tem se adaptado a essa estrutura baseada em microsserviços e já está permitindo a integração através de consumo de API's, sendo possivel agora, trabalhar com o Wordpress como um CMS Headless.

Netlify

O Netlify é uma plataforma de hospedagem e desenvolvimento de sites moderna que oferece uma variedade de serviços para desenvolvedores web. Sua principal característica é a integração contínua e a entrega contínua (CI/CD), o que significa que ele automatiza o processo de desenvolvimento, teste e implantação de sites e aplicativos da web. Algumas vantagens de hospedar na Netlify são:

• Hospedagem Global e Escalável: O Netlify utiliza uma rede de servidores distribuídos globalmente para garantir tempos de carregamento rápidos e alta disponibilidade do site, independentemente da localização dos usuários.
• Integração Contínua: O Netlify facilita a configuração de pipelines de CI/CD para automatizar o processo de construção, teste e implantação de sites e aplicativos, permitindo atualizações rápidas e frequentes.
• Pré-renderização e Renderização do Lado do Servidor (SSR): O Netlify suporta pré-renderização estática e renderização do lado do servidor (SSR), permitindo que os desenvolvedores escolham a melhor abordagem de renderização para seus projetos, o que melhora a velocidade de carregamento e o SEO. O que é PERFEITO para um site feito com Next.Js como este.
• Integração com Git: O Netlify pode ser configurado para conectar-se diretamente aos repositórios Git (como GitHub, GitLab e Bitbucket), permitindo que as alterações no código acionem automaticamente implantações no Netlify.

Além de todos os pontos acima, a Netlify é de Graça até certo ponto, o que ajuda a disponibilizar projetos em produção com baixo/nenhum custo e validar conceitos. Que bom que existe essa alternativa para os orfãos do Heroku.

E finalmente...

A Arquitetura do projeto

Com base nas tecnologias explicadas acima, como elas estão interligadas entre si? A resposta para isso é bastante simples e cada passo será explicado a seguir.

O passo-a-passo do processo de deploy

• Ao publicar um novo post (roxo). O backend Hygraph (cinza) irá disparar uma rotina para consumir um webhook.
• Este webhook é uma espécie de gatilho, que está configurado dentro da hospedagem (verde) da Netlify. Ao ser disparado este "gatilho", a hospedagem começará o processo de deploy.
• Neste processo, a hospedagem irá construir a aplicação. Durante esse processo, a aplicação (laranja) irá consultar a base de dados do backend Hygraph para saber quais páginas serão construídas. Neste ponto o deploy pode quebrar, pois a consulta dessa base de dados vai depender do backend Hygraph estar disponível, o que nem sempre acontece na versão gratuita.
• Dando sucesso na consulta, a aplicação terminará de construir as páginas e irá disponibilizar as páginas numa pasta dentro da hospedagem. Essa pasta receberá os arquivos estáticos (azul) que estarão disponíveis na internet.

Essa arquitetura me permitiu subir este blog sem qualquer custo de hospedagem e infraestrutura. Claro que, sendo necessário, eu terei que arcar com alguns custos para garantir maior estabilidade a este projeto, embora acho pouco provável essa necessidade.

Conclusões do projeto

Apesar desse artigo gigantesco, onde descrevo de forma superficial, os pricipais aspectos desse projeto, desenvolver algo desse tamanho foi relativamente simples, pois já conhecia as principais tecnologias empregadas e tinha uma ideia de como elas iriam se integrar entre si.

Acredito que haja espaço para fazer melhorias e, com certeza, devem haver bugs que não fui capaz de encontrar.

Levei pouco mais de 16h para realizar este projeto até o ponto onde ele está.