{"id":21961,"date":"2019-10-16T15:49:08","date_gmt":"2019-10-16T15:49:08","guid":{"rendered":"http:\/\/developer_experience_for_a_modern_web_jamstack_delivers"},"modified":"2022-03-03T17:21:23","modified_gmt":"2022-03-03T17:21:23","slug":"developer_experience_for_a_modern_web_jamstack_delivers","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/developer_experience_for_a_modern_web_jamstack_delivers","title":{"rendered":"Developer Experience for a Modern Web: JAMstack Delivers"},"content":{"rendered":"

Off and on, the model of architecting software shifts. Over time, programming principles, best practices, toolkits evolve to accommodate the contemporary way of building fast, resilient, and reliable apps. Right now, the buzzword is J-AAAAAAM-STACK.<\/p>\n

What Is JAMstack?<\/h2>\n

JAMstack is a modern web-development architecture that contains strictly client-side JavaScript, reusable APIs, and prebuilt markup, whose principles the architecture closely adheres to. With JAMstack, front-end developers can develop apps without<\/strong> setting up a web server or back-end, saving a load of time and effort. That\u2019s thanks to serverless platforms and APIs, such as Firebase, Webtask, and Amazon Lambda, which enable connections from the front-end framework.<\/p>\n

Before JAMstack became available, tightly-coupled software monoliths based on stacks like Linux, Apache, MySQL, PHP (LAMP), RaspberryPi, MySQL, Python (RAMP), and others, e.g., WordPress and Drupal, abounded. They are still in use. However, JAMstack ushered in a new era in which you can decouple software systems and build apps on the front-end while leveraging reusable APIs for the back-end, data storage and processing, authentication, and other key capabilities.<\/p>\n

Why JAMstack?<\/h2>\n

Several major attributes of the JAMstack architecture are a significant help for app development.<\/p>\n

Performance<\/h3>\n

If loaded and served to users from a content delivery network (CDN), front-end apps built primarily with JavaScript could potentially load fast. Furthermore, you can lower the Time to Interactive and Time to First Byte impressions by applying fast-loading techniques, such as code splitting, route-based chunking, tree shaking, scope hoisting with Webpack, and the Push Render Precache Lazy-Load (PRPL) pattern.<\/p>\n

No Need for a Back-End Infrastructure<\/h3>\n

This one is a major reason for leveraging JAMstack for building apps. With JAMstack, instead of having to set up your own web server, you can run functions on a function-as-a-service (FaaS) platform on a remote server, invoking them only when necessary. Not having to manage your own back-end infrastructure saves time, effort, and cost.<\/p>\n

High Security<\/h3>\n

The domain expertise of reusable, third-party APIs ensures no loopholes through inadvertent errors on your part. Furthermore, those APIs lower the risk of security attacks because deliberate hacks or compromises of the API platforms must first occur before exposure of your app\u2019s private data becomes at risk.<\/p>\n

Excellent Developer Experience<\/h3>\n

The overall experience of developing and maintaining apps relies on how several app components of the underlying architecture work together. Loose coupling along with the advantage of having third-party services perform the cumbersome, labor-intensive tasks make for a smooth developer experience, freeing you up to focus on your app\u2019s business logic and other important issues.<\/p>\n

Scalability<\/h3>\n

Scaling apps is a daunting task. JAMstack\u2019s scalability is baked in. Because your app\u2019s interaction with reusable APIs over HTTPS is stateless, you can scale your app content through CDNs to several regions while drawing closer to your users. Replication of your app to multiple servers then proceeds fast.<\/p>\n

How Does JAMstack Work?<\/h2>\n

JAMstack contains three main sections.<\/p>\n

Client-Side JavaScript<\/h3>\n

This is the front-end in which your JavaScript frameworks come into play: Vue.js, React, Angular, and, um, Vanilla JS, which is no framework, but of course. You can build a front-end, stand-alone app by fetching or modifying data from a dummy API. Furthermore, you can replace the dummy API with a custom-built or third-party API of your choice with nondummy content before production.<\/p>\n

After setting up client-side JavaScript to connect with third-party APIs or a serverless back-end, simply host them on platforms like Netlify, ZEIT, or Surge, which are ideal for front-end apps. Other alternatives are CodePen and CodeSandBox.<\/p>\n

Reusable APIs<\/h3>\n

Reusable APIs in the JAMstack context are reliable and reusable services geared for developers in the form of pluggable APIs. Gratifyingly, most of them have proven to be effective and robust. See a later section of this article for an extensive list of reusable APIs.<\/p>\n

Reusable APIs eliminate the need for a back-end because you can connect over HTTP many app components to service APIs, which perform all the required tasks. Just ensure that your client-side JavaScript can properly communicate with those APIs.<\/p>\n

Prebuilt Markup<\/h3>\n

During deployment, you must prebuild this markup to be displayed to users. Static site generators, such as Gatsby and Hugo, fit into this spectrum, generating markups and serving them to clients afterwards.<\/p>\n

Note:<\/strong>

Jason Lengstorf<\/a> has built a Gatsby Cloudinary Plugin<\/a> that enables Gatsby websites or apps to upload all their media assets to Cloudinary and deliver them to users through Cloudinary\u2019s fast CDN. Look no further if you\u2019re searching for a way to leverage Cloudinary transformation and storage capabilities with Gatsby.<\/p>\n

I just realized this @cloudinary<\/a> transformer plugin I\u2019m building for @gatsbyjs<\/a> will support using animated GIFs with `gatsby-image`.

[alt: GIF loaded with gatsby-image using the \u201cblur up\u201d technique] pic.twitter.com\/zsyRWVxWX2<\/a><\/p>— Jason Lengstorf lives in airports now, apparently (@jlengstorf) September 25, 2019<\/a><\/blockquote>