with
Oluwasetemi Ojo
Lagos, Nigeria.
whoami
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.
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.
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
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
Let's take a deeper look at the Process Framework
To track when someone contributes to Gatsby. A contributor raises a PR and it is reviewed by the maintainer.
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.
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
use the mailchimp API to send automated emails
Handles the discount code and product you decide to add to your cart
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?
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.
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.
Everyone present here👨👩👦👦
Thanks to Brent Jackson @jxnblk
for creating MDX-DECK