Jamstack FTW: Static Site Generation with Gridsome

Slide 1

Slide 1 text

Jamstack FTW! Static Site Generation with Gridsome

Slide 2

Slide 2 text

Gift Egwuenu Frontend Developer at Passionate People @lauragift_ giftegwuenu.com @lauragift_

Slide 3

Slide 3 text

What is Jamstack? @lauragift_

Slide 4

Slide 4 text

Jamstack? JavaScript 1 2 3 Dynamic functionalities handled by JavaScript API Markup Websites gets served as static HTML ﬁles to a CDN Access to 3rd Party API accessed via HTTP Requests @lauragift_

Slide 5

Slide 5 text

Jamstack is a technique for building fast and secure sites delivered by prerendering ﬁles and serving them directly from a CDN, removing the requirement to manage or run servers. @lauragift_

Slide 6

Slide 6 text

Traditional Stack @lauragift_

Slide 7

Slide 7 text

Browser Traditional Stack Web Server Application Server Database @lauragift_

Slide 8

Slide 8 text

Jamstack Approach @lauragift_

Slide 9

Slide 9 text

Browser Jamstack Approach CDN @lauragift_ (Content Delivery Network)

Slide 10

Slide 10 text

Why Build this way? @lauragift_

Slide 11

Slide 11 text

Benefits of Jamstack @lauragift_ Better Performance

Slide 12

Slide 12 text

Benefits of Jamstack Great Developer Experience @lauragift_

Slide 13

Slide 13 text

Benefits of Jamstack @lauragift_ Higher Security

Slide 14

Slide 14 text

Benefits of Jamstack @lauragift_ Cheap and Easy Scalability

Slide 15

Slide 15 text

! Jamstack ❏ Sites built with WordPress, Joomla, Squarespace. ❏ Single Page Applications (SPA) that uses Isomorphic rendering to build pages on the server at runtime. ❏ Monolithic Applications that relies on Node.js or Ruby or any backend language. @lauragift_

Slide 16

Slide 16 text

Fun Fact “There’s a HIGH chance that you’ve built a Jamstack website in the past without knowing it had a fancy name” @lauragift_

Slide 17

Slide 17 text

@lauragift_

Slide 18

Slide 18 text

What? Gridsome? Gridsome is a Vue.js powered Jamstack framework for building static generated websites & apps that are fast by default. @lauragift_

Slide 19

Slide 19 text

Why Gridsome? @lauragift_

Slide 20

Slide 20 text

@lauragift_ Automatic Code Splitting 1

Slide 21

Slide 21 text

@lauragift_ Follows the PRPL Pattern 2

Slide 22

Slide 22 text

@lauragift_ Smart Link Prefetching 3

Slide 23

Slide 23 text

@lauragift_ Plugin Ecosystem 4

Slide 24

Slide 24 text

@lauragift_ 4 [Gridsome Plugins] gridsome.org/plugins/

Slide 25

Slide 25 text

@lauragift_ Data Sourcing 5

Slide 26

Slide 26 text

The modern web is decoupled and modular. Gridsome makes it painless to build Jamstack websites using data from multiple sources such as Content API's, Headless CMSs, and other web services. @lauragift_

Slide 27

Slide 27 text

@lauragift_ How it works

Slide 28

Slide 28 text

/about.json /about JSON How it works /about.html HTML @lauragift_

Slide 29

Slide 29 text

Core Concepts @lauragift_ Pages Pages are responsible for presenting your data at a URL. Each page will be generated statically and have its own index.html ﬁle with the markup.

Slide 30

Slide 30 text

Core Concepts @lauragift_ Layouts Layout components are used to wrap pages. Layouts should contain components like headers, footers or sidebars that will be used across the site.

Slide 31

Slide 31 text

Core Concepts @lauragift_ Collections A collection is a group of nodes and each node contains ﬁelds with custom data. Collections are useful if you are going to have blog posts, tags, products etc. on your site.

Slide 32

Slide 32 text

@lauragift_ Collections

Slide 33

Slide 33 text

Core Concepts @lauragift_ Templates Templates are used to create single pages for nodes in a collection. Nodes need a corresponding page in order to be presented on its own URL.

Slide 34

Slide 34 text

Core Concepts @lauragift_ Images Gridsome has a built-in component that outputs an optimized progressive image. It also resizes and crops in real-time when developing if width and height is changed.

Slide 35

Slide 35 text

Extending Gridsome Data Store API Pages API

Slide 36

Slide 36 text

Data Store API @lauragift_

Slide 37

Slide 37 text

Data Store API @lauragift_

Slide 38

Slide 38 text

Pages API @lauragift_

Slide 39

Slide 39 text

Pages API @lauragift_

Slide 40

Slide 40 text

Built with Gridsome @lauragift_

Slide 41

Slide 41 text

What Next? ❏ Gridsome Documentation ❏ Built with Gridsome ❏ Gridsome Articles Dev.to ❏ Gridsome Discord Server @lauragift_

Slide 42

Slide 42 text

Thank You! @lauragift_