What is JAMstack?
JAMstack, according to the project site, offers you a “modern web development architecture based on client-side JavaScript, reusable APIs, and prebuild Markup.” As you can tell by the acronym, it utilizes JavaScript, APIs and Markup as core the components for the development stack. It can be used in any website or web application that does not depend on tight coupling between the client and the server. It sounds simple, but let’s dive a little deeper into the three parts.
JavaScript
The JavaScript is basically any form of client-side JavaScript. It can be used to handle requests and responses, front-end frameworks such as React and Angular, any client side libraries, or plain old JavaScript.
APIs
The APIs consists of any and all server-side processes or database commands that your web app needs to handle. These APIs can originate from third-party APIs out there, or from a custom API that you created for this application. The APIs communicate with JavaScript through HTTP calls.
Markup
This is Markup that is templated and is built at deploy time. This is done using a build tool such as grunt, or a static site generator.
Now that you know the individual parts of how this works, let’s discuss how you could optimize this stack with a few of the best practices.
JAMstack best practices
Hosted on Content Delivery Network
It is a good idea to distribute all the code to CDNs to reduce the load time of each page. The JAMStack websites do not rely on server-side code so they can be distributed on CDNs much easier.
All code in Git
In order to increase development speed and have others contribute to your site, all of the code should be in source control. If using git, should be able to simply clone the repository and install the third party packages that your project requires. From there, developers should be smooth sailing to making changes.
Build tools to automate builds
Use tools like Babel, Webpack and Browserify to automate repetitive tasks to reduce development time. You want your builds to be automatic in order to run in order for users to see your changes
Use atomic deploying
Atomic Deploying allows you to deploy all of your changes at once, when all of your files are built. This allows the changes to be displayed after all files are uploaded and built.
Instant cache purge
The cache on your CDN may hold the old assets after you create a new build and deploy your changes. In order to make sure the client sees the changes that you implemented, you want to be able to clear the cache of CDNs that host your web application.
Enough about best practices already, how about the benefits?
Why should YOU care?
There are a couple of benefits for you as a developer to building your next application using JAMstack. Let’s discuss them.
Security
Here we are removing server-side parts that would normally be closely working with the client-side components. When we remove the server-side components we are reducing the complexity of the application. That makes the client-side components easier to build and maintain. Making for easier development process, and therefore increasing the security and reliability of your website.
Cost
Since we are removing the server-side parts, we do not need as many servers to host the application and we do not need as many backend engineers to handle the server-side functionality. Thus reducing your overall cost significantly.
Speed
Since we are using prebuilt Markup that is built at deploy time, we reduce the amount of work that needs to get completed at runtime. That will, in hand, increase the speed of your site because the page will be built already.
JAMstack – key takeaways
In the end, JAMstack is just a web development architecture that makes its web apps using JavaScript, APIs and prebuilt Markup. It has several advantages such as increased security, reduced cost, and faster speed.
Here is a link to some examples of web apps that are built using JAMStack. Under each one, they list the tools that were used to make the app, including the front-end frameworks, static site builders, build tools and various APIs that were utilized.
If you enjoyed this post share it on twitter! Leave a comment down low and let me know your thoughts on JAMStack and how you will use it in your future applications!
Possible Resources
Check out my GitHub
View my personal blog
Check out my YouTube Channel
This is a great talk on JAMStack