⇒ Computer Science & Engineering Student @GUC

Hi! 

Quick Reminder

  • Get up and stretch
  • Drink some water 
  • Correct me if you see any mistakes
  • You can ask questions anytime

Inside GatsbyJS

Overview:

  • What Is GatsbyJS?
  • How Gatsby Works
  • Who Uses Gatsby
  • What Makes Gatsby "Blazing Fast"

What Is GatsbyJS?

Scenario:

You want to start a blog

You end up with something that looks like this:

  • Very hard to manage
  • A lot of copying/pasting

Solution: use a CMS (Content Management System) or a static site generator

What is a static site generator? 

Examples of Static site generators

Static Site Generator vs. CMS 

  •  Handle large amounts of traffic with ease
  •  No security vulnerabilities
  •  Faster
  •  Cheaper
0
 Advanced issue found
 
  • Non-technical people can't use them
  • No real-time content

How Gatsby Works

Showcase

React Docs

Airbnb Engineering Blog

Figma

Nike

Gatsby & Performance

Web Performance

How Do They Do it?

Getting Started

npm i gatsby-cli

gatsby new [projectName] [repo link]

Route-based code-splitting

While this is nice, it's not enough

You might end up with pages that are  fast while others are slow 

The solution?

Gatsby <Link/> Demo

- React Docs >Open Chrome Devtools> Network tab

- Guess. js is a collection of libraries & tools for enabling data-driven user-experience on the web.  ( for guessing which pages to load)

0
 Advanced issue found
 

- Intersection Observer API  

0
 Advanced issue found
 

Optimizing Images

  • Generate multiple smaller images so smartphones and tablets don’t download desktop-sized images
  • Strip all unnecessary metadata and optimize JPEG and PNG compression
  • Efficiently lazy load images to speed initial page load and save bandwidth
  • Hold the image position so your page doesn’t jump while images load

gatsby-image demo

Demo from Gatsby for optimized performance with images. The “blur-up” technique is also used by Medium.

Demo: portfolio website

Demo: portfolio website

https://mahmoudabdelwahab.tech

Before and after using gatsby-image