Why you should be using JAMstack

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?

It’s not a bird, it’s not a plane …… no, it’s not Superman. JAMstack (JavaScript, API & Markdown) is a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and better developer experience. It achieves this by keeping most of the functionality on the client side and abstracting all other functionalities to 3rd party API’s. Basically, all the heavy lifting is done by the API’s.

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

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.

MEAN

The stack is comprised of a MongoDB (M) document database, Express.js (E) which is a back-end web application framework, Angular.js (A) which is a front-end web application framework, and Node.js (N), a JavaScript run-time environment. Platforms are built in JavaScript from start to finish here and it is really recommended for large, non-relational data set, the only set back here is that everything is done in just JavaScript.

MERN

The stack is comprised of a MongoDB (M) document database, Express.js (E) which is a back-end web application framework, React (R) which is a JavaScript library for building user interfaces and Node.js (N), a JavaScript run time environment. Again platforms are built in JavaScript from start to finish and the only set back here is that everything is done in just JavaScript.

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

JAMstack workflow

• 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

JAMstack superpowers

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.

Conclusion

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.

---

Plug: LogRocket, a DVR for web apps

 

 
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
 
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.
 
Try it for free.

---

The post Why you should be using JAMstack appeared first on LogRocket Blog.