Understanding JAMstack

with

REAL use-case

Oluwasetemi Ojo

Lagos, Nigeria.

whoami

WTF is JAMstack?

JAMstack Definition

πŸ”—Read More About JAMstack πŸ”—JAMstack Homepage

Benefits?

Understanding how to use JAMstack to create powerful apps that will change the future by understanding the approach others have used via the case study.

Our Case Study

πŸ‘Œ Freecodecamp⚑

πŸ‘Œ Gatsby Swag StoreπŸ”₯

Freecodecamp

FreecodecampπŸ‘¨β€πŸ«

Freecodecamp is a non-profit organization that helps millions of people learn to code, and we're doing this using a single API server.

The rest of the platform is handled by CDNs and other glorious services.

Auth0
Freecodecamp Architecture

Step #1: An open source contributor opens a pull request, changing one of freeCodeCamp.org's 6,000+ interactive coding challenges and reference articles - all of which are stored as easy-to-edit markdown files.

Step #2: Our continuous integration tool confirms that the build passes and Git confirms there aren't any merge conflicts.

Step #3: An open source maintainer QA's and merges the pull request on GitHub.

Step #4: Gatsby - a static site builder - turns these 6,000+ markdown files into a single-page React app.

Step #5: Netlify pushes the newly-built app to their CDN endpoints in data centers around the world.

Step #6: A person who wants to practice their coding visits https://www.freecodecamp.org.

Step #7: Their browser pulls down the files from the nearest Netlify CDN endpoint and renders the Gatsby app.

Step #8: Auth0 checks to see whether they are logged into freeCodeCamp.org. If they are, it gives them read-write access to our public API - a Node.js / Loopback server.

Step #9: The API server then reads and writes data from our MongoDB cluster hosted on mLab.

Step #10: The browser can now fetch the user's complete freeCodeCamp profile and progress. When they complete a coding challenge, their browser can write data back to their profile.

NB: πŸ”—To read more about this step or watch πŸ“ΊQuincy Larson's talk during the first JAMstack conf

Analysis

Majority of the processes in the Freecodecamp Architecture could be handled in the browser.Rendering the markdown file from github is done by the React App. Critical requirements - They must be able to track who made the changes and what change was made.Test cases must run in browser.Keep each user's progress on the platform.

When a user completes a challenge, the API endpoint will be communicated to for read and write to save whatever the user has done and keep track on each challenges the user was able to complete in the curriculum.

NB: they understood their need,perculiarity of their process and requirements

Auth0

Gatsby Swag StoreπŸ›’

Gatsby Swag Store is an automated system that would identify, manage, and ship swag to Gatsby Maintainers using SaaS like GitHub, Peril, GitHub App Dashboard, MailChimp, Shopify and Threadbird

Consideration from the Team that worked on the Project

πŸ‘Œ They found out their limitations and Strength

πŸ‘Œ Deciding on how to turn Limitation to Strength

πŸ‘Œ Scalability was key

πŸ‘Œ Process must be repeatable with less human input

πŸ‘Œ A Process framework was designed

Gatsby Store Process Framework

Let's take a deeper look at the Process Framework

GitHub

To track when someone contributes to Gatsby. A contributor raises a PR and it is reviewed by the maintainer.

Peril

Peril is a hosted instance of Dangerjs. So instead of running on CI, it will run on a server somewhere and can respond instantly to webhooks. This gives Danger the ability to respond instantly to PR changes, and to run on more than just PRs. It was deployed to check if the person assessing the store is a contributor or maintainer.

GitHub App Dashboard

It is a service that allows you to build an App using existing Github data to give access to your own service. It was used by the swag store to add a coupon pulled from shopiify when a collaborator agrees to become a maintainer and share email address

MailChimp

use the mailchimp API to send automated emails

Shopify

Handles the discount code and product you decide to add to your cart

Threadbird

Shopify directs to this service for customer support, it receives purchase info from shopify, fulfil and ship order.

Why do I need to know all this?

I am not sure I have interest in all this Jarg😭n this guy is talking about.

Wait for It?

They built an ecommerce website with all the modern sweetness. The Largest platform to learn coding uses this architecture
All built with
JAM

As a developer in Nigeria πŸ‡³πŸ‡¬, I feel we should embrace JAMstack more. Enough of agencies using Server Side Rendering for site that don't need Big complexity

We have one way direction approach that every project must involve a server which comes with huge server cost and less sleep for the DevOps Team. If you know you.....

Read through this article to understand Rendering on the web.

Let use more stuffs like Netlify Function and Serverless

πŸ‘Œ Server Rendering - MVC architecture.

πŸ‘Œ Static SSR - Build the API and then use thing Fetch to prerender each page with data into static HTML.

πŸ‘Œ SSR with ReHydration - Nextjs, Nuxtjs.

πŸ‘Œ CSR with prerendering - Vuepress, Gridsome and Gatsby.

πŸ‘Œ Full CSR - Single Page Apps everything JS.

πŸ‘Œ If most of the operations you need to run can be handled by the Browser or Service laced with Serverless and Lambda Functions.

πŸ‘Œ If you need a very performant website with a consistent template and you do not want unnecessary plugins that you don't care about.

πŸ‘Œ JAMstack architecture is still evolving with the modernization of JavaScript backed by the API as a service economy and Software as a service companies like πŸ”—Zeit, πŸ”—Twillo, πŸ”—Netlify, πŸ”—snipcart, and πŸ”—Gatsby.

I will end by asking how do you create a new project?

How do you start new project?

New Project -> index.html

Vanilla JS

CLI and SSGs

When you have a new project, why not JAMstack? and Make your CLIENT happy.

Client Worries
Startups
I am JS developer because of where it is not what it is.
The future is here, it is not evenly distributed.

Shout out to

πŸ‘Œ @amber1ey

πŸ‘Œ @SchauDustin

for the help with my slides

Everyone present hereπŸ‘¨β€πŸ‘©β€πŸ‘¦β€πŸ‘¦

Thanks to Brent Jackson @jxnblk

for creating MDX-DECK

Thanks for coming