[International Event Introduction] Developer Productivity Conference 2021 3 Productivity Hacks for Jamstack by Brian Rinaldi

This session is by Brian Rinaldi, who has authored numerous books related to Jamstack, discussing three tips for using Jamstack.

Jamstack Resources

First, let's briefly explain what Jamstack is.

 

It has the following features.

 

• This is a methodology that primarily focuses on static file delivery.
• Use a Static Site Generator
• Deployed to CDN
• Perform dynamic processing by calling the API at build time or runtime

 

Now, let me introduce some resources related to Jamstack.

 

・jamstack.org

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

 

・snipcart.com

A front-end service that allows you to add shopping cart functionality to any site. It contains a wealth of information on how to freely build shopping carts using Jamstack.

 

・The Jamstack Book

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

 

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

 

・stepzen.com

Stepzen, the speaker's workplace, is a service that allows access to data from multiple data sources through a single GraphQL. It provides tools and resources related to GraphQL, which is essential when building with Jamstack.

 

Thank you for your patience!

 

Now, let's take a look at the 3 tips for using Jamstack!

Tip 1: netlify dev

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

 

However, similar tools also exist in competing services like Vercel.

 

It is a common command tool integrated into the Netlify CLI, but it can significantly improve productivity when building with Jamstack.

 

In that core part, it is used to launch the app and test in a local environment, but in fact, it has many more features.

 

For example..

 

You can load the environment variables defined on Netlify.

 

Normally, in a development environment, you need to set environment variables separately to use them, which requires managing the same information separately. However, by using netlify dev, you can inject that information from Netlify, making management easier.

 

You can run serverless functions in a local environment.

 

This allows for function calls equivalent to the production environment, making it much easier to verify operations.

 

 

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

 

With netlify dev, you can consolidate the entire process from data retrieval to generation with Hugo into a single command.

 

By being able to call functions locally, data changes can be reflected in real time.

Tip 2: Starter Kit

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

 

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

 

Let me give you some examples.

 

● NEXT.js

 

First, it's NEXT.js.

 

There are quite a number of starter kits provided by NEXT.js on Github.

 

(https://github.com/vercel/next.js/tree/canary/examples)

 

Let's assume we want to use Tailwind CSS with NEXT.js as a trial.

 

There was a starter kit called with-tailwindcss.

 

What should I do if I want to use this?

 

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

 

Just type the command!

 

Once the build is complete, code that can be used immediately is generated, and it can be easily published with a command.

 

● Gatsby

 

There is a similar starter library for Gatsby as well.

 

(https://www.gatsbyjs.com/starters/)

 

As you can see from the images, there are plenty of options to choose from based on the theme of what you want to do!

 

You can also choose from the types of headless CMS you want to use. This way, you won't have to worry about how to connect, and so on.

 

Each headless CMS comes with a starter kit that can be easily connected to most frameworks.

 

● Stackbit

 

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

 

(https://www.stackbit.com/)

 

It generates Jamstack sites, allowing you to quickly and easily launch a site.

 

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

 

Not only does it place these codes on Github by simply pressing the generate button, but it also goes as far as building the site itself on Netlify.

 

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

 

Furthermore, you can edit the published site directly using the visual editor.

 

It is surprising that these can be completed in just 1 to 2 minutes.

Tip 3: Serverless Functions

No matter which Jamstack framework you use, calling functions is unavoidable.

 

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

 

 

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

 

I created a folder called netlify on the left side, and a folder called functions underneath it.

 

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

 

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

Summary

The lecture by someone with extensive experience as a technical book author was interesting, providing information about various resources I was not aware of.

 

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

 

The configuration of the LAMP stack is relatively mature, so there is an established methodology for when you want to do something. In contrast, Jamstack is still in the early stages, which makes it difficult to understand how to achieve something when you want to.

 

The various services introduced this time not only complement the shortcomings but also incorporate ideas that significantly enhance developer productivity.

 

There was an appeal that outweighed the effort for developers who were learning front-end technologies anew.

 

I was surprised at how much the flow from development to deployment has been simplified beyond what I had imagined.

 

I thought that serverless functions would be cumbersome as the combinations increase, such as obtaining separate API keys and uploading them, but the fact that it automatically processes everything just by placing them in a designated format in a folder is truly addressing the needs perfectly.

 

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

 

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

 

Thank you for reading until the end.

 

Human Science Co., Ltd. provides solutions for web content and platforms using a unique combination of "document production know-how" and "the latest web development technology (Jamstack)" that is not available from other companies.

 

If you are interested, please feel free to 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