【Overseas Event Introduction】Developer Productivity Conference 2021 3 Productivity Hacks for Jamstack by Brian Rinaldi

This session will be presented by Brian Rinaldi, who has written numerous books on Jamstack, and will cover 3 key tips for using Jamstack.

Jamstack Resources

First, let's briefly explain what Jamstack is.

 

It has the following features.

 

• This is a methodology that first focuses on static file delivery.
• Use a static site generator
• Deployed to CDN
• Perform dynamic processing by calling APIs during build and execution.

 

Here, we would like to introduce some resources about Jamstack.

 

・jamstack.org

A portal site for Jamstack, operated by Netlify, the company that coined the term Jamstack. It introduces many concepts and tools that can be utilized. It also includes a link to the active community on Slack.

 

・snipcart.com

A front-end service that allows you to add shopping cart functionality to any website. There is a lot of information available on using Jamstack to build shopping carts freely.

 

・The Jamstack Book

https://www.manning.com/books/the-jamstack-book

 

Of course, I also introduced my own book. There are only two reviews, but they both have five stars.

 

・stepzen.com

Stepzen, the speaker's employer, is a service that allows access to data from multiple data sources through a single GraphQL. Tools and resources related to GraphQL, which is essential when building with Jamstack, are provided.

 

Finally, the wait is over!

 

Let's take a look at three tips when using Jamstack for the main topic from here!

Tip 1: netlify dev

This is a tool provided by Netlify, so using Netlify is a prerequisite.

 

However, there are also similar tools like Vercel available on competing services.

 

This is a common command tool built into Netlify CLI, which greatly improves productivity when building with Jamstack.

 

This core part is used to launch applications and test them in a local environment, but there are actually many more features available.

 

For example...

 

① You can load environment variables defined on Netlify.

 

In a normal development environment, you would need to set environment variables separately in order to use them. However, by using netlify dev, you can inject this information from Netlify, making it easier to manage.

 

② You can run serverless functions in a local environment.

 

This allows for calling functions equivalent to those in the production environment, making it much easier to verify operation.

 

 

This demo generates data from an external MySQL database through a static site generator called Hugo.

 

With netlify dev, you can combine the entire process from data retrieval to Hugo generation into one command.

 

You can call functions locally, so you can reflect data changes in real time.

Tip 2: Starter Kit

One of the great things about the Jamstack community is the variety of starter kits that are available. And, they all maintain a high level of quality.

 

You can find a starter kit that counts up to 1,000 for anything you want to connect.

 

Let's give some examples.

 

● NEXT.js

 

First, it's NEXT.js.

 

There are quite a few starter kits available on Github from NEXT.js.

 

（https://github.com/vercel/next.js/tree/canary/examples）

 

Assuming you want to use Tailwind CSS with NEXT.js as a test.

 

There was a starter kit called with-tailwindcss.

 

How can I use this?

 

npx create-next-app . –example with-tailwindcss

 

Just type in the command!

 

Once the build is complete, the generated code is immediately available for use and can be easily published with a command.

 

● Gatsby

 

There is also a similar starter library for Gatsby.

 

（https://www.gatsbyjs.com/starters/）

 

As you can see from the image, there are so many options to choose from based on what you want to do!

 

You can also choose from a variety of headless CMS options to use. This will save you from worrying about how to connect and other concerns.

 

Starter kits are usually available for each site of headless CMS, which can be easily connected to most frameworks.

 

● Stackbit

 

The last service we would like to introduce as a starter kit is called Stackbit.

 

（https://www.stackbit.com/）

 

This is a tool for generating Jamstack sites, which allows you to quickly and easily launch a website.

 

Choose a theme and select a static site generator, headless CMS, or repository to use.

 

And simply by pressing the generate button, it not only puts these codes on Github, but also builds the website itself on Netlify.

 

You can launch and publish a Jamstack site based on your selected theme in just a few minutes.

 

In addition, you can also edit the published site using a visual editor.

 

It's amazing that these can be completed in just 1-2 minutes.

Tip 3: Serverless Functions

No matter which Jamstack framework you use, you can't avoid calling functions.

 

Netlify, Vercel, and recently announced Gatsby Cloud are all designed to make it easy to call and use functions.

 

 

As an example, please take a look at this image.

 

Created a folder called "netlify" on the left side, and a folder called "functions" underneath it.

 

When you deploy this to Netlify, Netlify automatically understands that this is a function and deploys it to AWS Lambda.

 

Therefore, there is no need to do the work separately, everything can be seamlessly resolved.

Summary

I found the information about various resources that I didn't know about very interesting in the lecture given by someone with a lot of experience as a technical book author.

 

Various sites were introduced that can be used when using Jamstack.

 

The configuration of the LAMP stack is fairly mature, so there is an established methodology for how to do things. In contrast, Jamstack is still in its early stages, so there is a disadvantage of not knowing what to do when trying to achieve something.

 

The various services introduced this time not only complemented the missing points, but also incorporated efforts to greatly increase the productivity of developers.

 

For developers who are learning new front-end technologies, there was an overwhelming appeal that surpassed the effort.

 

I was surprised to find that the process from development to deployment was even simpler than I had imagined.

 

Serverless functions, such as obtaining and uploading API keys separately, seemed like a hassle when there are more combinations, but having them automatically processed just by putting them in a designated folder is exactly what I needed.

 

The "tips" known by these pioneers have once again made me realize that they are a valuable source of information.

 

By doing this at this time, you will be able to confidently explain the advantages of Jamstack to clients by accumulating know-how.

 

Thank you for reading until the end.

 

Human Science Co., Ltd. offers unique solutions for web content and platforms using the combination of "document creation know-how" and "the latest web development technology (Jamstack)" that other companies do not have.

 

If you are interested, please contact us here!

 

Human Science Co., Ltd.

https://www.science.co.jp/document/jamstack.html

 

Source of this document: https://www.youtube.com/watch?v=knoBrl60Z4k