PHP / JavaScript / Symfony / React JS / Vue JS and more...

Faramaz Patrick

Web Maker indépendant since 2016

web developer since 2006

Annecy / Lyon / Genève / Lausanne

Gatsby JS

qu'est ce que c'est ?

Générateur de site statique

Compilateur de web app

Gatsby ajoute une couche pour vous aider à développer une application React (avec une partie statique en plus).

 

Peut facilement remplacer create-react-app.

Quelles technos ?

  • Node JS avec Npm (yarn, Pnpm..)pour la compilation et l'environnement de dev
  • React pour la partie application
  • GraphQL pour la partie Data

🤘 100% JavaScript

Le projet Gastby

Première version en 2015. V2 septembre 2018

Grosse communauté, tout le monde peut contribuer (récompense aux contributeurs)

Système de plugins. A ce jour 1400 plugins disponibles : sources (wordpress, drupal, contentfull...), dev (sass, post-css....), marketing (Google Analytics...)

Plusieurs levées de fonds, la dernière 15 millions d'euros.

Ils ont embauché le créateur de WPGraphQL en juin pour lui permettre de travailler sur le plugin.

Bref, un projet sérieux et ambitieux !

Les avantages du coté front

Un peu les mêmes que pour la JAMStack !

🔥 Performance

Obtenir 100/100 au Google page speed

🔒 Sécurité (fichiers statiques !)

👋 coucou WordPress 

🚀 Déploiement simple

Pas obligé d'utiliser un serveur.

CDN avec now, netlify...

 😍 SEO pour une web app !

🥇

Les avantages pour le dev.

🤓

🤘 Tout l'écosystème React et JS

Hook, Redux, CSS-in-JS...

Pas de changement d'habitudes !

Avec en plus, les helpers et l'API de Gatsby

  • Routing
  • Image
  • GraphQL
  • Preload
  • Optimisation du code CSS
  • ...

🥰

Comment ça marche ?

npm install -g gatsby-cli
gatsby new hello-world

Installation de gatsby-cli

Création d'un nouveau projet

Par l'utilitaire gatsby-cli

npx gatsby new hello-world

ou par npx

Je fais mes pages en React, pas besoin de sources externes.

import React from "react"

import Layout from "../components/Layout"
import SEO from "../components/seo"

const MyPage = () => (
  <Layout>
    <SEO title="My page" />
    <h1>Hello World</h1>
    <p>
    	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    	Compensabatur, inquit, cum summis doloribus laetitia ?
    </p>
  </Layout>
)

export default MyPage

src/pages/index.js => /

src/pages/my-page.js => /my-page

...

exemple 1

exemple 2

  • fichiers (Markdown, yaml, excel)
  • Cloud services (Contentful, storyblok, Prismic)
  • API site headless (Wordpress, Drupal)

 je veux des sources externes

Soit j'utilise un plugin qui récupère les sources

npm install --save gatsby-source-wordpress
// In your gatsby-config.js
module.exports = {
  plugins: [
    /*
     * Gatsby's data processing layer begins with “source”
     * plugins. Here the site sources its data from WordPress.
     */
    {
      resolve: "gatsby-source-wordpress",
      options: {...}
    }
  ]
};
exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
  try {
    // Fetch the data
    const res = await fetch(`https://api.rawg.io/api/games`);

    // Transform the data into json
    const data = await res.json();

    // calling action.createNode on each item in the array
    data.results.forEach(game => {
      const node = {
        ...game, // We copy all of the properties from the game object
        id: createNodeId(`RAWG-game-${game.id}`), // Needs to be unique
        internal: {
          type: 'RAWGGame',
          // We pass in the game object to make sure it's unique
          contentDigest: createContentDigest(game)
        }
      };

      // Create the actual data node
      actions.createNode(node);
    });
  } catch (error) {
    console.log(error);
  }
};

Soit j'utilise l'API pour créer une source

// The GraphQL data is passed into the component via props.data
const IndexPage = ({ data }) => {
  return (
    <Layout>
      ...
    </Layout>
  );
};

// We use the GraphiQL query here
export const query = graphql`
  query MyQuery {
    allRawgGame {
      edges {
        node {
          id
          name
          background_image
        }
      }
    }
  }
`;

export default IndexPage;

Ensuite les data sont disponibles via GraphQL

Ensuite, vous développez votre application React comme d'habitude.

Les fichiers utiles pour customiser gatsby

  • gatsby-config.js : paramètres du site et les plugins
  • gatsby-node.js : customisation du build process (createPages, sourceNode...)
  • gatsby-browser.js : customisation coté browser (Provider..)
  • gatsby-ssr.js : customisation coté serveur (Provider..)

Attention code façon node JS

Demo time !

Mais alors ??

Il faut recompiler à chaque changement de data ?

Oui ! Mais...

est-ce que le contenu du site change souvent ??

Merci !

Gatsby

By Faramaz Patrick

Gatsby

  • 327