Ciclo de vida e fundamentos

LauraBeatris

Apaixonada por React e todo o seu ecossistema, como frameworks e as comunidades envolvidas no desenvolvimento da biblioteca.

Kyle Mathews - Criador do Gatsby

- Criar uma aplicação web que utilizasse React e Webpack, se baseando em dois pontos principais:

Facilidade para utilização e manutenção
Performance no processo de deploy

- Foco em page speed das aplicações

Speed Index
Time to Interactive

@kylemathews

A dinâmica de um gerador de site estaticos

Ecossistema rico em tratamento das diversas fontes de dados (CMS, banco de dados, APIs, Filesystem)

A dinâmica de um gerador de site estaticos

Ecossistema rico em tratamento das diversas fontes de dados (CMS, banco de dados, APIs, Filesystem)

Templates baseadas em React. Componentes podem executar GraphQL queries para fetch de dados.

A dinâmica de um gerador de site estaticos

Ecossistema rico em tratamento das diversas fontes de dados (CMS, banco de dados, APIs, Filesystem)

Templates baseadas em React. Componentes podem executar GraphQL queries para fetch de dados.

Gera a aplicação estática

Etapas do ciclo de vida

1. Bootstrap

- Validação da configuração (gatsby-config.js)

- Carregamento de plugins

- Criação das páginas

- Construção dos schemas com base nas fontes de dados, via a API do GraphQL

Etapas do ciclo de vida

2. Build

- Semelhante a etapa de bootstrap

- Optimizações para produção

- Output dos arquivos estáticos

3. Browser

- Depois que os arquivos estáticos são gerados e a aplicação esta em produção, o gatsby e seu ciclo de vida comecam a viver no browser

Etapas do ciclo de vida

Arquivos de hooks do lifecycle

Assim como o React possui seus métodos para ciclo de vida, o Gatsby expõe alguns lifecycle hooks a partir de arquivos específicos, como por exemplo:

gatsby-node.js
gatsby-browser.js
gatsby-ssr.js
gatsby-config.js

gatsby-config.js

Informações sobre o site como metadata, plugins e polyfills

Possui a maior base da aplicação, principalmente em relação aos plugins
Source plugins, image plugins, offline support, styling options, e site metadata.

module.exports = {
    siteMetadata: {
        title: 'Agriculture Holding',
        author: 'Laura Beatris',
    },
    plugins: [   
        'gatsby-plugin-sass',
        {
            resolve: 'gatsby-plugin-postcss',
            options: {
                postCssPlugins: [
                    require('tailwindcss'),
                    require('postcss-import'),
                    require('autoprefixer'),
                ],
            },
        },
        ]

gatsby-node.js

O Gatsby roda um processo de Node tanto na etapa de bootstrap quanto na etapa de build.
Durante todos esses processos, são configurados plugins, data schemas, criação de páginas, etc.
O gatsby-node.js e chamado durantes essas etapas e permite que nós tenhamos acesso a varias APIs internas para criação de página e lidar com dados.

Hooks:

createPages
onCreateBabelConfig
onCreateWebpackConfig
onPostBuild

gatsby-node.js - onCreateNode

gatsby-node.js - createPages

gatsby-browser.js

Apesar de ser um site estático, depois do seu primeiro carregando ele se torna dinâmico a partir de alguns hooks que podem ser utilizados nesse arquivo.
Lidar com tracking de rotas, carregando e posição de scroll.
Vários hooks para interagir com o client.

Hooks:

onClientEntry
onRouteUpdate
onServiceWorkerInstalled
registerServiceWorker
shouldUpdateScroll

gatsby-browser.js

gatsby-ssr.js

O Gatsby possui SSR, gerando todas as paginas durante o processo de build.
Utilizado para injetar HTML, CSS ou estados do Redux enquanto os componentes estao sendo renderizados.
Utilizar scripts de third party libraries, como analytics ou pixels - onRenderBody hook

onPreRenderHTML
onRenderBody
replaceRenderer

Hooks:

gatsby-ssr.js - onRenderBoy

gatsby-ssr.js - wrapRootElement

O React é o core do Gatsby, por isso eles compartilham algumas APIs parecidas, como o lifecycle. Esse lifecycle tão poderoso permite com que nós tenhamos acesso a momentos chaves da aplicação, proporcinando uma experiência excelente de desenvolvimento.

GatsbyJS - Lifecycle

By laurabeatriserafim

GatsbyJS - Lifecycle

More from laurabeatriserafim