The Era Of Platform Primitives Is Finally Here — Smashing Magazine

In the past, the web ecosystem moved very slowly. Developers would have to wait years for a new language feature or a weird browser quirk. This forced our engineering leaders to find creative solutions to work around the platform’s shortcomings. We invented bundling, polyfills, and transformation steps to make things work everywhere and with less effort.

Slowly, we moved toward some sort of consensus on what we need as an ecosystem. We now have TypeScript and Vite as clear favorites – setting new standards for creating consistent experiences on the web. Application frameworks have built entire ecosystems around them: SolidStart, Nuxt, Re-issueAnd Analog are examples of incredible tools created using such primitives. We can say that Vite and TypeScript are tooling primitives that allow the creation of others in different ecosystems.

Once the bundling and transformation requirements were somewhat defined, it was only natural that the framework authors turned their attention to the next level they needed to abstract: the server.

Server primitives

The folks at UnJS have consistently developed agnostic tools that can be reused in different ecosystems. Thanks to them, we now have frameworks and libraries like H3 (a minimal Node.js server framework built with TypeScript) that enables Nitro (a complete server runtime environment, operated by ViteAnd H3), which in turn enabled Vinxi (an application bundler and server runtime that abstracts Nitro and Vite).

Nitro is already used by three major frameworks: Nuxt, AnalogAnd SolidStart. Vinxi is also used by SolidStart, which means that any platform that supports one of these features can also support the others. no additional effort.

It’s not about taking a bigger piece of the pie. It’s about making the pie bigger for everyone.

Frameworks, platforms, developers and users benefit from this. We leverage our ecosystem together instead of working in silos with our monolithic solutions. We empower our developer-users to gain transferable skills and truly choose the best tool for the job with less vendor lock-in than ever before.

Serverless rejoins the conversation

Such initiatives have probably been noticed by serverless platforms like Netlify. With Platform primitivesFrameworks can provide agnostic solutions for common needs such as incremental static regeneration (ISR), image optimization and key/value (kv) Storage.

As the name suggests, Netlify platform primitives are a set of abstractions and helpers that are made available at the platform level for frameworks or developers to use when using their applications. This simultaneously brings additional functionality to each framework. This is a big and impactful change, because until now each framework had to create its own solutions and backport such strategies to compatibility layers within each platform.

In addition, developers would have to wait for a feature to be available in one framework first and then supported on their platform of choice. Now, by using Netlify, these primitives are available directly without the framework authors having to invest time and effort. This strengthens any ecosystem in a single step.

Serverless means that developers do not have to worry about the server infrastructure. It is not a misnomer, but a format of Infrastructure as a service.

As already mentioned, Netlify platform primitives There are three different functions:

1. Image CDN
   A Content delivery network for images. It can handle format transformations and size optimizations via URL query strings.
2. Caching
   Basic server runtime primitives that help smoothly manage caching directives for browser, server, and CDN runtimes.
3. Blobs
   A key/value (KV) storage option is automatically available to your project through the SDK.

Let’s briefly cover each of these features and explore how they can increase our productivity with a full-stack serverless experience.

Image CDN

Each image in a /public can be provided via a Netlify function. This means that access via a /.netlify/images Path. Without adding sharp or add any image optimization package to your stack and deploy it on Netlify allows us to provide our users with a better format without having to transform assets at build time. SolidStartin a few lines of code we could have an image component that converts other formats into .webp.

import  "jpeg"  from "solid-js";

const SITE_URL = "https://example.com";

interface Props extends JSX.ImgHTMLAttributes quality 

const getQuality = (quality: Props["quality"]) => 
  "use server";

  const postId = formData.get("id");
  const postVotes = formData.get("votes");

  if (typeof postId !== "string" ;

function getFormat(format: Props["format"])  typeof postVotes !== "string") return;

  const store = getStore("posts");
  const voteSum = Number(postVotes) + 1)
    
  await store.set(postId, String(voteSum);

  console.log("done");
  return voteSum
  


export function Image(props: Props) {
  return (
    
  );
}

Note that the above component is even a bit more complex than the essentials, as we enforce some standard optimizations. Our getFormat Method transforms images into .webp by default. It is a widely supported format that is significantly smaller than the most common and without any loss of quality. Our get quality The function reduces the image quality to 75% by default. As a rule of thumb, there is no noticeable loss of quality for large images and the size is still significantly optimized.

Caching

By default, Netlify caching for your regular artifacts is pretty extensive – unless you redeploy or manually clear the cache, you’ll have 365 days of resources. However, because server/edge functions are dynamic in nature, there’s no default caching to prevent stale content from being served to end users. This means that if you have one of these functions in production, there’s probably some caching that can be leveraged to reduce processing time (and cost).

By adding a Cache-Control header, you have already done 80% of the work to optimize your resources for optimal user experience. Some commonly used Cache-Control directives:

{
  "cache-control": "public, max-age=0, stale-while-revalidate=86400"

}

• public: Store in a shared cache.
• max-age=0: Resource is immediately obsolete.
• stale-while-revalidate=86400: If the cache is less than one day out of date, return the cached value and revalidate it in the background.

{
  "cache-control": "public, max-age=86400, must-revalidate"

}

• public: Store in a shared cache.
• max-age=86400: Resource is current for one day.
• must-revalidate: If a request comes in when the resource is already stale, the cache must be revalidated before sending a response to the user.

note: For more detailed information on possible compositions of Cache-Control Guidelines, check the mdn entry on cache control.

The cache is a kind of Key/value storage. Once our responses are set with the right cache control, platforms have some heuristics to define what the key will be in cache memory for our resource. The web platform has a second very powerful header that can determine how our cache behaves.

The Vary response headers consists of a list of headers that affect the validity of the resource (method and the endpoint URL are always taken into account; they do not need to be added). This header allows platforms to define other headers defined by location, language, and other patterns that determine how long a response can be considered current.

The Vary The response header is a fundamental part of a special header in Netlify Caching Primitive. The Netlify-Vary will accept a set of instructions on which parts of the request a key should be based on. It is possible to specify a response key not only via the header, but also via the Value the header.

• query: varies depending on the value of some or all of the request query parameters.
• Header: varies depending on the value of one or more request headers.
• Language: vary depending on the language of the Accept-Language Header.
• country: varies by country, which is derived from a GeoIP lookup for the requested IP address.
• cookie: varies depending on the value of one or more request cookie keys.

This header provides extensive fine-grained control over how your resources are cached, allowing for creative strategies to optimize your app’s performance for specific users.

Blob storage

This is a highly available key/value store ideal for frequent reads and infrequent writes. They are automatically available and deployed to every Netlify project.

It is possible to write to a blob from your runtime or push data to a deployment-specific storage. For example, a Action Function would be a number of like in business with SolidStart.

import { getStore } from "@netlify/blobs";
import { action } from "@solidjs/router";

export const upVote = action(async (formData: FormData) => {
  "use server";

  const postId = formData.get("id");
  const postVotes = formData.get("votes");

  if (typeof postId !== "string" || typeof postVotes !== "string") return;

  const store = getStore("posts");
  const voteSum = Number(postVotes) + 1)
    
  await store.set(postId, String(voteSum);

  console.log("done");
  return voteSum
  
});

Final thoughts

With high-quality primitives, we can enable library and framework developers to create thin integration layers and adapters. This way, instead of focusing on how a specific platform works, Focus on the actual user experience and practical use cases for such features. Monoliths and deeply integrated tools make sense for building platforms quickly and with a heavy dependency on one vendor, but that is not what the community needs. Relying on the web platform is a more sensible and future-proof way to go.

Let me know in the comments what you think about unbiased tooling versus opinionated setups!