Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    WTF is JAMstack

    Khaled GarbayaKhaled Garbaya
    gatsbyGatsby
    javascriptJavaScript

    What is JAMStack?

    JAMstack stands for Javascript API Markup. It’s a modern way of building a web app based on client side technologies that use Javascript, and APIs to extends its functionality like pulling content or authorization. And a prebuilt Markup

    For example here I have a Gatsby website that pulls the content from Contentful.

    Gatsby is the javascript part because it’s built with javascript it also Provides the M part which is the prebuilt Markup once that is loaded by the user Gatsby will lazily load React and turn my website into a fully fledged React App.

    The API part here is Contentful I am using Contentful's API to pull content and render it at build time in my website but since a Gatsby website is a full-blown React App at the end of the day you can call APIs also at runtime like Authentication.

    What is not JAMStack?

    A monolithic server-run web app that relies on a server technology like Ruby, python or Nodejs. What is also not JAMstack is a website that is baked

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: JAMstack stands for JavaScript API and markups. It's a modern way of building web apps based on client-side technologies that uses JavaScript and APIs to extend its functionalities. For example, pulling content, and finally, a pre-built markup.

    Here, we have a GatsbyJS project. Gatsby uses React under the hood, which is a JavaScript framework. With these tools and frameworks, we can get a better developer experience, like hot reload. You can see here, the page is changing whenever I change something in the code, without needing to rebuild every time.

    To use APIs in Gatsby, we use source plugins that will load the data from any service, like Contentful, and plug it into your website through GraphQL. In this project, I already added the Gatsby source Contentful plugin.

    Now, we can render a list of lessons from my Contentful space into my Gatsby website.

    First, let's import GraphQL from Gatsby. Now we create the query. To do that, we simply export a variable. We call the Gatsby GraphQL. Finally, let's render the data. You can see here the data coming from Contentful render in Gatsby. Finally, when we build this website to production, it will produce a static HTML website.

    Discuss

    Discuss