1 of 42

Pump the JAM(stack)!

...with case study focused on Gatsby and Netlify

1

2 of 42

About me

Working with JavaScript since 2009.�I have used RxJS in 2010.

Working with Node.js since v0.6.

Currently consultant and full-stack employee �with focus on SRE/operations, cloud computing, �distributed, real-time, and highly scalable systems.

Co-organizer of couple meetups in southern Poland �(most popular - Functional Miners).

2

afronski

3 of 42

About Future Processing

3

4 of 42

4

https://giphy.com/gifs/jam-pump-CRSHcFwve0LMA

5 of 42

I hate Wordpress.

5

6 of 42

YAGNI

6

7 of 42

7

8 of 42

What is JAMstack?

Why JAMstack?

Case Study

8

9 of 42

What is JAMstack?

9

10 of 42

10

11 of 42

J is for JavaScript.

11

12 of 42

A is for APIs.

12

13 of 42

M is for markup.

13

14 of 42

Why JAMstack?

14

15 of 42

I like �boring technologies.

15

16 of 42

Static Pages �are bread and butter of the web.

16

17 of 42

PRPL pattern.

developers.google.com/web/fundamentals/performance/prpl-pattern

17

18 of 42

JAMstack is �developer friendly.

18

19 of 42

API-first approach.

Afraid of vendor lock-in?

19

20 of 42

Rise of serverless.

Afraid of vendor lock-in?

20

21 of 42

read.acloud.guru/iaas-paas-serverless-the-next-big-deal-in-cloud-computing

22 of 42

Serverless

Back-end as a Service (BaaS)

Function as a Service (FaaS)

23 of 42

www.doc.ic.ac.uk/~rbc/papers/fse-serverless-17.pdf

Gojko Adzic - Designing for the Serverless Age (GOTO 2017)

24 of 42

Tools

Gatsby.js + Plugins + Netlify CMS

24

25 of 42

25

26 of 42

26

Let’s talk about how it works internally - I will use for that official documentation, which is fantastic - I would love to see such details and precise documentation for any OSS project.

Gatsby pre-renders our static websites from various data sources - those can be provided from almost any source. We can use flat files (e.g., markdown, CSV, JSON), databases, any markup. However, that is not the end, because we can query other services - including headless CMS like Contentful and complete content management platforms like Drupal or Wordpress

After fetching the data, we build our static pages leveraging HTML, CSS, and React.js. We can write custom components which can fetch data with use of GraphQL. Of course, we do not have to write everything from scratch thanks to a big library of community plugins.

The final step is to deploy generated pages in your platform of choice, and Gatsby is compatible and supports most popular providers.

27 of 42

27

28 of 42

Case Study

28

29 of 42

Step 0

Empty repository.

Only gatsby installed.

29

30 of 42

Step 1

Adding layouts, typography and components.

react, react-dom, prop-types
react-flexbox-grid, react-helmet, color
styled-components, typography, typography-theme-twin-peaks
gatsby, gatsby-link
Gatsby plugins:

gatsby-plugin-styled-components
gatsby-plugin-typography
gatsby-plugin-sitemap
gatsby-plugin-favicon
gatsby-plugin-google-analytics
gatsby-plugin-facebook-analytics

font-awesome, react-font-awesome

30

31 of 42

31

32 of 42

Step 2

Generating static pages from markdown content.

Install following plugins:

gatsby-source-filesystem
gatsby-transformer-remark
gatsby-remark-images, gatsby-remark-smartypants
gatsby-remark-autolink-headers, gatsby-plugin-catch-links
gatsby-plugin-sharp

And sprinkle it with small amount of Node.js code.

Of course using lodash here and there.
Also moment and react-moment is also really helpful.

GraphQL as a unified way to fetch content.
Routes to the past events are generated at “compile time”.
Ability to access React components from markdown with use of:

rehype-react

32

33 of 42

Step 3

Components. Components. Components.

Including map, contact form with captcha, and other elements of event page.

The same goes with organizers page.
And obviously the most important component - cookies notification bar.
Useful libraries:

react-google-maps
react-recaptcha

Using Zapier with Google Spreadsheet for as a backend as a service solution.

Nice library for handling forms in React:

formsy-react

Introducing Facebook Comments and other social media sharing buttons:

react-facebook
react-share

33

34 of 42

Step 4

Attaching Netlify CMS.

Way to provide non-technical users access to the content.
Associating existing markdown files with CMS backend.
Leveraging Github accounts for authentication.

Unfortunately that requires writable access to the repo.

Alternative is provided by Netlify service and it is called git-gateway.

34

35 of 42

35

Git �Gateway

36 of 42

Source Code

36

37 of 42

Step 5

Deployment!

To the cloud… and beyond!
My platform of choice - Amazon Web Services.

S3 Website + CloudFront + Lambda@Edge - last one for more complicated use cases.

Canonical example - A/B testing.

Very good tool for that: Scotty.js

Other options:

Surge
Github Pages
Other cloud platform providers.

37

38 of 42

Step 6: PROFIT

38

39 of 42

Summary

39

40 of 42

Summary and Recap

JAMstack is an alternative to traditional solutions.
You cannot stop the SaaS / Serverless evolution.
Gatsby with plugins and Netlify CMS will help you build much smaller, more maintainable and simpler solution for your clients.

40

41 of 42

Thank you!

Questions?

41

42 of 42

References

White Rook website and my blog.
Future Processing website.
Official page of jamstack.org.
PRPL pattern in Google’s documentation.
Explanation how Gatsby leverages the PRPL pattern.
Gatsby official page.
Netlify CMS official page.
Hosting a static website on Amazon S3.

A/B testing for Amazon S3 Websites.

42