Fast by Default : Near Instant Load Times at Scale with GatsbyJS

A presentation at GDG Craiova DevFest in in Craiova, Romania by Matthieu Auger

FAST BY DEFAULT ⚡

FAST BY DEFAULT ⚡

PERFORMANCE MATTERS FOR YOUR BUSINESS

PERFORMANCE MATTERS FOR YOUR BUSINESS

THE ETHICS OF WEB PERFORMANCE

THE ETHICS OF WEB PERFORMANCE

PERFORMANCE MATTERS FOR INCLUSION

PERFORMANCE MATTERS FOR INCLUSION

PERFORMANCE MATTERS FOR INCLUSION

PERFORMANCE MATTERS FOR INCLUSION

PERFORMANCE MATTERS FOR INCLUSION

PERFORMANCE MATTERS FOR INCLUSION

PERFORMANCE ENABLES NEW USERS

PERFORMANCE ENABLES NEW USERS

PERFORMANCE MATTERS FOR THE ENVIRONMENT

PERFORMANCE MATTERS FOR THE ENVIRONMENT

PERFORMANCE MATTERS FOR THE ENVIRONMENT

PERFORMANCE MATTERS FOR THE ENVIRONMENT

PERFORMANCE MATTERS FOR THE ENVIRONMENT

PERFORMANCE MATTERS FOR THE ENVIRONMENT

Hi

Hi

HOW TO ACHIEVE PERFORMANCE ON THE WEB?

HOW TO ACHIEVE PERFORMANCE ON THE WEB?

TODAY MARKS THE REIGN OF CLIENT-RENDERED SINGLE PAGE APPLICATIONS ⚙

TODAY MARKS THE REIGN OF CLIENT-RENDERED SINGLE PAGE APPLICATIONS ⚙

SINGLE PAGE APPLICATIONS MADE GREAT PRODUCTS POSSIBLE

SINGLE PAGE APPLICATIONS MADE GREAT PRODUCTS POSSIBLE

BEFORE THEN, SERVER RENDERING WAS KING 👑

BEFORE THEN, SERVER RENDERING WAS KING 👑

OL’ MYSPACE

OL’ MYSPACE

IN THE BEGINNING THERE WAS STATIC 💎

IN THE BEGINNING THERE WAS STATIC 💎

WE LOST PERFORMANCE DURING OUR JOURNEY

WE LOST PERFORMANCE DURING OUR JOURNEY

CAN WE RECONCILIATE INTERACTIVENESS OF TODAY WITH PERFORMANCE OF THE 90”?

CAN WE RECONCILIATE INTERACTIVENESS OF TODAY WITH PERFORMANCE OF THE 90”?

MEET GATSBYJS

MEET GATSBYJS

REQUEST FLOW

REQUEST FLOW

IS GATSBY THAT FAST?

IS GATSBY THAT FAST?

IT ALL STARTED WITH A BEER

IT ALL STARTED WITH A BEER

PARIS HAS A LOT OF COMMUNITIES

PARIS HAS A LOT OF COMMUNITIES

THE JAMSTACK

THE JAMSTACK

GATHERING JAMSTACK COMMUNITY IN PARIS

GATHERING JAMSTACK COMMUNITY IN PARIS

300 MEMBERS, 5 MEETUPS

300 MEMBERS, 5 MEETUPS

WE WANTED A FAST WEBSITE TO COMMUNICATE

WE WANTED A FAST WEBSITE TO COMMUNICATE

WE USE MEETUP.COM TO ORGANIZE THE MEETUPS

WE USE MEETUP.COM TO ORGANIZE THE MEETUPS

OUR NEEDS 📅

OUR NEEDS 📅

HERE IS THE FINAL RESULT

HERE IS THE FINAL RESULT

📅 DISPLAYS MEETUPS FROM MEETUP.COM API

📅 DISPLAYS MEETUPS FROM MEETUP.COM API

DATA FLOW IN GATSBY SITE

DATA FLOW IN GATSBY SITE

PULL DATA FROM SOURCE WITH SOURCE PLUGINS

PULL DATA FROM SOURCE WITH SOURCE PLUGINS

SOURCE PLUGINS ARE NPM PACKAGES

SOURCE PLUGINS ARE NPM PACKAGES

DATA IS FETCHED AND MAPPED AT BUILD TIME

DATA IS FETCHED AND MAPPED AT BUILD TIME

QUERY DATA WITH GRAPHQL 📢

QUERY DATA WITH GRAPHQL 📢

GRAPHiQL TO HELP YOU TINKER WITH QUERIES

GRAPHiQL TO HELP YOU TINKER WITH QUERIES

DATA CAN BE QUERIED IN CODE

DATA CAN BE QUERIED IN CODE

PASS DATA TO REACT COMPONENTS

PASS DATA TO REACT COMPONENTS

ADD A BIT OF STYLING 🎨 … RUN A BUILD ⚙

ADD A BIT OF STYLING 🎨 … RUN A BUILD ⚙

JAMSTACK.PARIS 1.1 🎉

JAMSTACK.PARIS 1.1 🎉

CHECKLIST WHEN WORKING WITH DATA

CHECKLIST WHEN WORKING WITH DATA

📸 PICTURE GALLERY

📸 PICTURE GALLERY

📸 PICTURE GALLERY

📸 PICTURE GALLERY

IMAGES ARE HARD TO GET RIGHT

IMAGES ARE HARD TO GET RIGHT

IN GATSBY IMAGES ARE DATA LIKE OTHERS

IN GATSBY IMAGES ARE DATA LIKE OTHERS

Install and configure related source plugin ⚙

Install and configure related source plugin ⚙

Get your GraphQL right with GraphiQL

Get your GraphQL right with GraphiQL

Get your GraphQL right with GraphiQL

Get your GraphQL right with GraphiQL

IMAGES WERE HARD TO GET RIGHT

IMAGES WERE HARD TO GET RIGHT

📸 FAST RENDERING OUT OF THE BOX

📸 FAST RENDERING OUT OF THE BOX

Get your GraphQL right with GraphiQL

Get your GraphQL right with GraphiQL

📸 SMOOTH TRANSITION

📸 SMOOTH TRANSITION

⚡ PERFORMANCE

⚡ PERFORMANCE

FAST, BY DEFAULT

FAST, BY DEFAULT

ROUTE BASED CODE SPLITTING

ROUTE BASED CODE SPLITTING

MANUAL CODE SPLITTING IS HARD WITH WEBPACK

MANUAL CODE SPLITTING IS HARD WITH WEBPACK

GATSBY AUTOMATICALLY SPLITS YOUR CODE BY PAGE

GATSBY AUTOMATICALLY SPLITS YOUR CODE BY PAGE

SUBPAGES ARE PREFETCHED ON LINK HOVER

SUBPAGES ARE PREFETCHED ON LINK HOVER

OTHER BUILT-IN OPTIMIZATIONS

OTHER BUILT-IN OPTIMIZATIONS

IMO GATSBY DOES FULFILL ITS PROMISES

IMO GATSBY DOES FULFILL ITS PROMISES

GATSBY LIMITS

GATSBY LIMITS

BUILD TIME IS CORRELATED TO CONTENT SIZE

BUILD TIME IS CORRELATED TO CONTENT SIZE

ERRORS MAY BE MYSTERIOUS

ERRORS MAY BE MYSTERIOUS

SUM-UP

SUM-UP

IF YOU WANT TO BEGIN WITH GATSBY

IF YOU WANT TO BEGIN WITH GATSBY

GATSBY IS PART OF A BIGGER ECOSYSTEM : THE JAMSTACK

GATSBY IS PART OF A BIGGER ECOSYSTEM : THE JAMSTACK

BEFORE LEAVING, A QUICK TASTE OF GATSBY THEMES

BEFORE LEAVING, A QUICK TASTE OF GATSBY THEMES

THANKS

THANKS

GatsbyJS is a library that adds powerful static capabilities to React-powered webapps and packs many performance optimizations, making websites load instantly, by default.

Gatsby plugins allows any datasource, including custom APIs, into a Gatsby-powered website with the expressiveness of GraphQL.

In this talk we will cover the following topics:

  • Why Performance plays a major role in the success of any online venture;
  • How GatsbyJS & GraphQL enhance the performance, developer experience and scalability of modern webapps;
  • Tayloring GatsbyJS to your own APIs through Source Plugins;
  • Reusing GatsbyJS code, data and design through Themes.

By the end of the talk, the audience will understand why GatsbyJS may be the next game-changer in terms of performance & DX and when to start with (or migrate over to) GatsbyJS.