Working in the world of development can be a bit confusing, with lots of trends coming up to interrupt our normal lives and give us a bad case of FOMO. We‘re mostly stuck between learning, relearning and unlearning. Sometimes the new trends are not different from technologies we’ve already been using, other times, it will change your life or in this case, your stack.
In this article, we will be looking at the JAMstack and how it has come to make a huge difference in the way we build web platforms. We will be exploring how this approach to simplifying the technology stack can lead to shorter development times, with better performance and greater security.
What have we been doing?
We have conventionally built web sites and web apps by setting up servers to help interact with a database and yes, that worked, but also we’d have to spend a lot of time worrying about performance and setting up these facilities. Security protocols for these platforms also cost a lot and since we have information moving from the server side to the client side, platforms may be prone to security risks.
What is JAMstack?
With the emphasis on web performance and great user experience, a few trends emerged:
- PWA (offline apps, reliable, native-like UX)
- Serverless (simplified back-end, best-of-breed services, infinite scalability without regard for physical location of servers)
- GraphQL(standardized access to data for apps that use ad-hoc, fast-changing, database schema)
- SSG (using CDN techniques for edge caching of pre-rendered content pages)
The above trends developed independently until JAMstack came and unified them. And now that JAMStack is here, people are starting to pull away from servers. At the same time, they are running after speed, optimization, and snappy websites.
Everyday the line between frontend and backend keeps getting blurry
— Christian Nwamba (@codebeast) May 30, 2019
Meet the stacks
Before we go further into discussing how JAMstack achieves its awesomeness, let’s take a look at the other stacks and how they work, to help better appreciate the JAMstack. Before its existence developers used different tools to set up web platforms and apps as such.
LAMP represents the foundation of a Linux hosted website. LAMP stacks are comprised of, a Linux operating system (L), an Apache Web Server (A), a MySQL database layer (M) and a PHP scripting layer (P). The major problem with this stack is that it has a learning curve. This increases the amount of time to set up a functional app and this can eventually lead to performance issues on applications with simultaneous users, as well as security issues.
How other stacks work
- Building and hosting are coupled
- A user requests a page. The file gets processed and served following a (long) series of interaction between a database, back-end code, server, browser, and layers of caching
- Core updates are pushed to production servers, often through FTP. The database must be maintained or updated
- Content updates are pushed through traditional CMS, like WordPress or Drupal
- Building and hosting are decoupled
- A user requests a page. The file is already compiled and gets directly served to the browser from a CDN
- Core updates are pushed through Git; the site gets re-built entirely via modern build tools like static site generators (Gatsby, Hugo)
- Content updates are pushed through Git or a static site CMS
You might be wondering why you need to use another stack. Well, I have five reasons you should be using JAMstack:
- Better performance: Building with JAMstack helps to get pages generated at deploy time since they are mainly stored as Markup and can be delivered over a CDN.
- High-security: Static websites have a very low potential for vulnerabilities because it is just HTML files and external API-handling served over a CDN. This reduces any possible risk for attack on the website. It is easy to integrate SSL certificate with Let’s Encrypt. Also, it leverages the use of server-side microservice APIs to secure the websites.
- Cheap and fast deployment: JAMstack websites can easily be deployed without going through the hassle of configuring databases and securing the database. We are only dealing with static files which are simple to get up and running.
- Awesome developer experience: One of the most important advantages of using JAMstack is that it is not difficult to learn. With just HTML, CSS and JS experience, developers can build complex websites. The use of site generators removes the need to maintain a separate stack for content and marketing.
- Great community: The JAMstack community is growing over time. New support for various functionality springs up every day. Even more exciting is the local community meetups being created. The online community is also amazing.
Another great feature to consider is the ability to integrate core dynamic functionalities into JAMstack websites. This technology has the ability to handle dynamic server-side features, handling back-end functions with tools like Serverless. Form handling with Formspree or Netlify Forms. Full Search capability Google Search, lunr.js and Algolia, Handle optimal image delivery with Cloudinary. All you have to do is plug and play.
In this article, we have established the advantages of using JAMstack in developing modern web platforms. I would strongly recommend learning more about JAMstack and building faster platforms seamlessly.
Get set up with LogRocket's modern error tracking in minutes:
- Visit https://logrocket.com/signup/ to get an app ID
- Install LogRocket via npm or script tag.
LogRocket.init()must be called client-side, not server-side
- (Optional) Install plugins for deeper integrations with your stack:
- Redux middleware
- NgRx middleware
- Vuex plugin
$ npm i --save logrocket
import LogRocket from 'logrocket';
Add to your HTML:
<script>window.LogRocket && window.LogRocket.init('app/id');</script>