Chapter 15: Conclusion

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:

  • The Jamstack's future
  • The Jamstack community resources
  • Contributing to Jamstack projects

Summary of concepts

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.

The Jamstack's future

The growth of the Jamstack, at the time of writing, is very evident. In the next section, we'll learn about some of the new technologies and trends emerging within the community.

Jamstack, JAMstack, and JAM Stack

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:

"What the Jamstack is continues to evolve. In just five years, we've moved from largely file-system-based Static Site Generator sites to incredibly dynamic sites driven by headless systems and APIs. It's become hard to think of a site that could not be built using the Jamstack, which is not to say that it is always the right fit. Projects like Next.js and RedwoodJS [both similar to GatsbyJS] are pushing the boundary of what the Jamstack means by including selective server-side rendering in Next.js or adding full-stack capabilities out of the box in RedwoodJS. The past of Jamstack was static sites, but the future is static first, but not static only."

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.

Also similar to Gatsby are Next.js, Nuxt.js, Eleventy, Hugo, and Jekyll, and many more, written in programming languages such as JavaScript, Go, and Ruby, and the list is continually growing.

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.

The future of Sanity

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:

"Our position is that the future of Jamstack should embrace structured content and move away from the page approach to content modelling. That is, tooling should better allow for the reuse of content and design based on rules rather than manual editorial work."

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.

The future of GraphiQL

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.

The Jamstack community resources

Unfortunately, there are not enough books yet written on the Jamstack, as it is an emerging technology, but there are several that will be coming soon.

Here is a very short list of ways to learn more about the Jamstack community:

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.

Contributing to Jamstack projects

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.

Contributing to Sanity

In this section, we'll explain how to contribute to the Sanity Studio platform.

The Sanity community

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.

Studio

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.

Starter kits

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:

sanity-template-frontend-type

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:

Figure 15.1 – Sanity starter kits

Figure 15.1 – Sanity starter kits

Migration and integration

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.

Plugins

Sanity also has a series of plugins, both official and community contributed, located at https://www.sanity.io/plugins:

Figure 15.2 – Gatsby plugins

Figure 15.2 – Gatsby 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.

The future

Sanity Studio has added a feature called presence, which shows the document modification history, which allows users to compare any revision and revert any field.

Here is a screenshot of this new functionality:

Figure 15.3 – Presence in Sanity Studio

Figure 15.3 – Presence in Sanity Studio

Contributing to Gatsby

Next, we'll show how to contribute to Gatsby. Gatsby is the most open source product in this version of the Jamstack.

The Gatsby community

The Gatsby community uses several means of communication.

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 repositories

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.

Gatsby plugins

Gatsby plugins were discussed earlier in this book. Plugins can be created for Gatsby by the community.

Contributing to Netlify

Lastly, let's look at how to contribute to Netlify.

The Netlify community

Netlify is one of the largest parts of the Jamstack ecosystem. The Netlify community is found at https://community.netlify.com. The Netlify GitHub is located at https://github.com/netlify.

Netlify plugins

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.

Final thoughts

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset