This closing chapter summarizes the concepts learned throughout the book and how the Jamstack community is evolving. The chapter will discuss the various external projects and how to contribute to them. The main topics that we will cover in this chapter are as follows:
We began with an outline of the history of web development, showing how dynamic technology, such as Server Side Includes, eventually worked its way into static pages, adding functionality. These techniques, while adding more dynamicity, eventually led to server-side heaviness, increasing load time. Next, we introduced Sanity, a content delivery platform, and Sanity Studio, as a decoupled way to manage content, abandoning the monolithic approach that was pervasive for many years. Then we showed how its proprietary query language, GROQ, created an easy and terse way to interact with content and Sanity schemas.
Next, we compared GROQ with the familiar Standard Query Language (SQL). We introduced GraphQL, as a new way to query content as a specification, breaking away from RESTful. We introduced the GraphQL Playground as a way to easily and quickly create GraqhQL queries and visualize results.
Next, we introduced Gatsby, a framework for creating websites and apps, showing how, through its extensive collection of plugins, it is able to source multiple pieces of data, such as files on the filesystem, Sanity, and other headless content management systems such as Drupal. We showed how Gatsby can use GraphQL to source content from the content source, such as with Sanity. We learned how to create parts of pages using underlying React framework components and how they work together to generate pages. We learned how Gatsby integrates cascading style sheets using CSS frameworks such as Tailwind. We also showed how Alexa can integrate with Sanity, enabling speech-to-text on Amazon devices.
Lastly, we learned how to use the powerful Netlify continuous delivery cloud-based hosting platform. We learned how it connects to GitHub and can automatically deploy a website whenever updates are made to its source code and how to use its collection of plugins to minify content, generate site maps, and even launch testing tools, such as Lighthouse.
Now, let's take a quick look at the Jamstack ecosystem, and learn about a few of the exciting upcoming events and features on its various platforms.
We hope that you have enjoyed reading this book. There are many topics we would have liked to have covered, because the Jamstack is a constantly evolving concept. Many of the code examples may be improved upon as the various frameworks mature and newer versions are released. We wrote this book split between two time zones, one in the United States and one in Europe. We also wrote this book during a difficult time in the history of the world, when a pandemic caused massive lockdowns.
Despite these difficulties, we have shown that technical collaboration is possible in any situation. In fact, the state of the art regarding cloud-based and networking technology has been pushed to its limits. It has, in a way, been brought to the forefront, both in the news and in many industries. The time for the Jamstack arrived—digital consumers want responsive and adaptive content as fast as possible.
To reinforce this concept, Brian Rinaldi, developer advocate at StepZen, writes the following:
Even though we have arrived at the end of this book, we have merely scraped the surface. We have demonstrated just one simple example using one of the many versions of the various technology stacks that will together form a Jamstack. There are limitless combinations of headless CMSes and frontend frameworks that can be used to create many different types of products, both digital applications and also print media and PDFs. Since the frontend can be anything that sources content from an API, this architecture can be leveraged to take advantage of its pluggable nature.
The Jamstack community is constantly refining what it believes to be the best way forward, including the word Jamstack itself. Even during the writing of this book, the word Jamstack has mutated: The Jamstack community has been discussing how to capitalize the word Jamstack, so JAMstack, and even JAM Stack are present in many places.
Regarding Sanity, it is just one of many similar content management platforms. Other platforms include Contentful, Contentstack, Ghost, and Prismic, so we encourage you to learn about these as well.
Lastly, similar to Netlify is Vercel, previously known as ZEIT. Also, Microsoft has now released an app service called Static Web Apps on the Azure platform, so we expect to see more options in the future.
In the next section, we will look at each technology that we have worked with in this book and discuss the community and future of each component.
Sanity Studio has evolved tremendously during the writing of this book, so the screenshots in this book reflect the latest version of the Studio user experience. Sanity will continue to focus on content as being similar to a fluid substance that fills its container, and not the container itself, which has, for many years, been the traditional web page. Knut Melvær, head of developer relations and support at Sanity, writes the following:
We are excited to see what will come as Sanity continues to grow at a very rapid pace. Next, we will look at the exciting evolution of GraphQL's tools.
Graphiql 2 will be the next version of Graphiql, the tool used for designing GraphQL queries. It will eventually merge features of the GraphiQL experience with the GraphQL Playground experience. Prisma, the company that developed GraphQL Playground, has donated it to the official GraphQL Foundation. Currently, the maintainer, Rikki Schulte, is focusing on reducing the need for GraphiQL or web-based IDEs entirely, by improving its language server and its reference implementation, which is the vscode-graphql extension, with many installations, and is preparing it to become the official GraphQL extension for the VSCode editor.
That project is located at https://github.com/graphql/graphiql.
Here is a very short list of ways to learn more about the Jamstack community:
CMS Comparison: https://cms-comparison.io
Headless CMS: https://headlesscms.org
The New Dynamic: https://thenewdynamic.slack.com
Education: The Digital Humanities website at Massachusetts Institute of Technology, https://digitalhumanities.mit.edu, was built using the Jamstack. Also, Rollins College (https://rollins.edu) is recreating their website using the Jamstack. Since higher education content is largely seasonal, the Jamstack lends itself well to this need.
Health: Jamie Bradley has developed a health-oriented application to help people with diabetes better manage their blood sugar, proving that the Jamstack is useful outside of the technology space.
This shows how the Jamstack may be easily leveraged to provide life-changing solutions.
Here is an example of how Sanity was used to build a healthcare website, showing how the Jamstack is present in the sciences: https://www.mjhlifesciences.com.
Not only can we learn and chat with other like-minded developers, but we can actually work with code, as well. In the following section, we'll learn about how to do this.
A great portion of the technologies used in this book are open source, so we encourage contributions to each of the platforms. It's a wonderful way to have a lasting impact on both your own future and the future of the Jamstack ecosystem, in general.
The Sanity community has a Slack group located at the following address: https://sanity-io-land.slack.com. You can receive an invitation to join by visiting https://slack.sanity.io. There are various channels including a channel for help, channels for announcements and beta features, and even a jobs channel. The community is rapidly growing.
Since Sanity Studio is an open source project, you too can contribute to it. The source code is located at https://github.com/sanity-io/sanity.
As a standard GitHub repository, it can be cloned, and a local version can be maintained. Issues can be reported, and through pull requests, a developer may request that changes become integrated into the main code base and included in the next version. In fact, the feature branch containing the future version is actually called next, so that is where pull requests should be created.
The starter kit that was used for this book, located at https://sanity.io/create, is one of a growing list of starter templates used to quickly create a Jamstack-based website. Sanity has opened the creation of starter templates to their user community.
The naming convention for these starter kits is as follows:
So, for example, sanity-template-gatsby-blog, means using Sanity with the Gatsby frontend to create a blog. Another example is sanity-template-kitchen-sink, which is used to demonstrate most of the features that Sanity has to offer. There are starter templates that use various frontend frameworks, such as Next.js, Nuxt.js, and Eleventy.
Using the basic instructions located at https://www.sanity.io/docs/starter-templates, we easily created https://github.com/chrispecoraro/sanity-template-jigsaw-blog, which uses Jigsaw, a popular Static Site Generator (SSG) created by Tighten, and is based on the Laravel modern PHP Framework, and the Blade templating system.
The Sanity create page can be called by using the following format, where template is a parameter and chrispecoraro/sanity-template-jigsaw-blog is the GitHub repository: https://www.sanity.io/create?template=chrispecoraro/sanity-template-jigsaw-blog.
The community templates are located at this page near the bottom: https://www.sanity.io/create:
Integrating Sanity with other code bases is easy, thanks to a set of tools available to present portable text in different usable formats, such as hyperscript and Markdown and libraries for PHP and .NET: https://www.sanity.io/docs/presenting-block-text.
Also, a set of tools for importing HTML content from other content management systems into Sanity may be used to convert it into a format that Sanity will use as portable text at https://www.npmjs.com/package/@sanity/block-tools.
Sanity also has a series of plugins, both official and community contributed, located at https://www.sanity.io/plugins:
Plugins should be tested, uploaded as a package to https://www.npmjs.com, and then shared in #I-made-this channel in Sanity's Slack.
Here is a screenshot of this new functionality:
DEV, a software developer community, has a Gatsby community located at https://dev.to/t/gatsby, as well as a hashnode URL, https://hashnode.com/n/gatsby, and there is a Gatsby Discord located at https://gatsby.dev/discord, which is very full and active.
Gatsby's GitHub URL is located at https://github.com/gatsbyjs.
Contributing to the Gatsby community has an added incentive: if a pull request gets accepted, the Gatsby community currently gives points that may be redeemed for swag such as a t-shirt or a water bottle.
There are many separate repositories. For example, starter themes similar to the theme used for the example in this book have names beginning with gatsby-starter and are located at https://github.com/gatsbyjs/gatsby-starter-theme.
These are good starting points to learn how Gatsby can be used with different parts of the Jamstack ecosystem.
Netlify plugins, similar to the plugin that we tested in Chapter 14, Deployment Using Netlify and Azure, may be created and contributed following the guidance provided in the repository located at https://github.com/netlify/plugins.
We are proud to have added this book to the Jamstack ecosystem and hope that it will be remembered as one of the first books to be released on the topic. We encourage you to add to the growing ecosystem and await contributions. Thank you immensely for having participated in our project and we wish you the best of fortune during your learning adventure and career.