Good practices for JAMStack projects

The revolution of websites using an architecture based on JavaScript, APIs and a pre-generated code is called JAMStack. This way to do websites have the objective to relieve the architecture to maintain websites or systems. Take my website for example Tableless.com.br. In there we had maintained an architecture based on Wordpress, this means that we need to have a MySQL database... basically a LAMP architecture. In this way, for sake of organization, we maintain this architecture in two different droplets in DigitalOcean. Today we take off the Wordpress and the Website is all made using Hugo, hosted in Netlify, with the code on Github.

This is not a hard thing to do, but exist some good practices that you can follow to make easy your way.

Use CDN

This is not a required (by the way, none of these topics is), but behind your website is already very light due to the loading of pure static HTML files, it could be improved if we use a CDN. The projects based in JAMStack don't need to server-side code or something like that, they could be distributed more easily.

The most popular CDN is CloudFlare, but there exist a lot of other services that you can put your assets in there, but usually, they already give the most popular JavaScript frameworks and libraries to you use in your projects. Some links:

• Google Hosted Libraries
• Yandex CDN
• jsDelivr
• cdnjs

All the code live in GIT

This is life rule. Today is not normal to see teams that don't use some kind of code version service. The GIT is the most popular and we know a bunch of services like GitHub that make all the hard job to us. In JAMStack projects, anyone needs to download and rune the code on your own machine in minutes. Install databases in many environments, run up the dependencies and so on is not needed. The simplicity of the static stack reduces to almost zero the friction of contributing to projects based on the JAMStack idea, plus we make simple the test and staging workflows.

Build tools

Depending on the project, it is interesting to use a build tool. The idea is that all the process need to be automated. The result will be static HTML, CSS and JS files, but it need be built following the good practices. You can use all that good stuff: pre/post CSS processors, use WebPacks and regulars task runners like Gulp, Grunt, Babel and whatever you like to use to make your build life easier.

Here we basically use only SASS to deliver the CSS and nothing more. We don't have a lot of JS that we need to minify the code. The images are hosted in imgur. The static files generation is made by Hugo. So, I dismiss anything that could bring more complexity to the project. Today, we have more than 1800 articles and posts to build. This takes 5 minutes to build in production, using Netlify.

Automated Builds

Because the JAMStack project is made with pre built code, when we change the content or the interface, this updates will not go to the product until you run the build process. When you upload new code to your repository, your environment needs to know that, to make the build of files and publish automatically your project. I know that exist many services to do that, but all them are more complex exactly because most regular projects depends on some kind back-end language. In a simple JAMStack website, you can make your own webhooks or use some service that gives this feature to you, like Netlify.

Atomic Deploys

Atomic Deploys are deployed where all the system just go to production when the upload of all modified files is ended. It is common to make several changes, either content or interface, needing to make deploys of several files. Until you upload each of the files, there may be a time of inconsistencies until the upload process is finished.

Imagine that: the new HTML code was uploaded first than the CSS, in a brief moment, the layout will break. This can happen all the time depending on the frequency you make changes.

Cache invalidation

We are talking about static files. It is common to have problems with the cache. Cache is the bad and good things of the web. In this case, we have to be sure that the environment is invalidating the cache, especially if we are using a CDN. You need to be sure that the browsers will download the new files.

The Netlify (no, the Netlify is not paying me to say all that) has a feature called Instant Cache Invalidation, that invalidate the old cache without any work.

Conclusion

A lot of what I said are things that we make in our regular days. But, usually, we do that to make easy just a part of the project. But, I already knew teams where the front-ends need to build your assets before pushing the code because the existing workflow does not build this kind of file. When we talk about a project that has light architecture like the JAMStack propose, we can't add manual tasks, but, we can not automate everything to the point of making the project complex.

Obviously, a JAMStack project cannot be compared with complex systems. I'm talking about most websites the live on the internet. Personal little blogs, personal websites, company institutional websites, etc... Here in Brazil, I've seen discussions in companies that want to make their websites using React. What the point here? We need to learn to use the right tool to the right problem. Start small. During a long time, the first answer when we need to create a website was "Use Wordpress". But the technology to make websites already exist a long time before, it is called HTML.