Is this the end of SPAs?

To answer you right away: Nah, I wouldn't think so...

BUT: there are lot of interesting things around building modern frontend applications this year! So, let's dive into it!

JavaScript / TypeScript

The most hated programming language in the world - JavaScript, is (still) the king in 2024. Luckily, there are some alternatives to writing code in pure JavaScript, and TypeScript is a great replacement as it brings structured syntax and code checking with it. All the most anticipated SPA libraries and framework use TypeScript as a default flavor of writing code today.

TypeScript provides easy onboarding as of its similarity with JavaScript, but OOP languages, and it's widely adopted already. It builds around optional static typing (duck typing) where you can build you own types, together with unions, generics, interfaces. Currently, 5th most loved programming language in the world.

Frontend web libraries / frameworks

Although not exclusively used for creating single-page applications, libraries like React, Vue and Angular dominate the frontend development world. With React as the most commonly used web lib; Angular the most anticipated enterprise-grade web framework; Vue.js as the most loved one, these libraries lead the community adoption market for years now. Of course, there are others trying to make their way for almost years now, like Svelte, Preact, Ember.js, Backbone.js, Semantic-UI, SolidJS, to name them a few ...

React stays on top, with its wide adoption by web developers. It is the most widely used web library, used by many famous companies like Pinterest, WhatsApp, Instagram, Reddit, Netflix and so on.

Vue.js continues to grow with every version. Its simplicity, modularity and good community, has its advantages. Also, it has excelled documentation, followed by UI libraries, such as Quasar, makes it an ideal choice for many companies.

Angular keeps evolving. Despite being maybe too complex or rigid in structure, it brings solid and extensive architecture for enterprise solutions. It supports all modern trends like server-side rendering, new features like signals and standalone components, that make it more flexible and performant.

JAMSTACK tags along - that's for sure. SSGs, Gatsby, Next.js, Nuxt, Hugo are pretty used and well established, while Remix, SvelteKit and Astro - leading the new kids on the block.

Jamstack

To describe the Jamstack, it often reffered to JavaScript + APIs + Markup.

For fast and secure sites | Jamstack

During the last years, web development wokflow has been changed radically in favor of Git integration (instead of FTP), frontend build tools and API usage. Gulp, Grunt are already being passed over with more advanced tools like Webpack and Vite, and the whole path from browser requests to the server resources has been advanced dramatically.

If web applications are just made simpler and built to produce a simple HTML file, they could be served statically by a CDN and optimized to be fast and performant, then Jamstack gets its value. With APIs that are designed and optimized just for frontend stack (Backend-for-Frontend Pattern), and markup being served as much as statically as possible, like in Astro or Gatsby, the Jamstack brings speed, lower costs, scalability, security and lower maintenance.

Content mesh

With the appearance of Gatsby, which introduced something like content mesh, where the CMS are reimagined, you don’t necessarily have to connect to just only one host for the API, but you can reach out as many as you need. For example, you can use WordPress or Drupal for your web pages, then Veeva Vault for storing your documents, and so on.

Content mesh explains the infrastructure that encircles the web application, in order to produce overall experience, where content management systems are more modular, new modern UI frameworks are used (like React and Vue), and performance optimizations are emphasized.

Here, microservices approach is preferred, where multiple services are combined, and headless CMS preferred (e.g. CMS without a user interface) making them ideal for backend integration.

PWAs

Already wrote about them couple of times before - they are here and de-facto a standard. Progressive web applications (PWAs) were around for some time, and with the advent of more and more capable and robust web libraries, they became a standard when building fully-fledged single-page applications.

Their strong offline-first design, and possibility to install an SPA app, make them a strong competitor of the long-lasting desktop apps.

PWA mandates for the mobile-first approach, that is, prioritizing to create web applications with mobile devices in mind. In this approach, you first start small - focusing on the smallest devices first, and then progressing to offer more and more wider and non-essential features and content. As mobile-first designs with the concept of progressive enhancement, it is good to start with both together, thus providing essential content to all types of users, regardless of their browser capabilities or internet speed.

Rendering and site generation

The SPA itself has become the ruling mass of the web development, and it still reigns today. MVC and other similar frameworks are long gone, but on the other side, there are multi-page application (MPA) architectures that rise again from the ashes.

Server-side rendering, different rendering techniques like dehydration and streaming push forward more coupled development on the UI space. Often it is not solely important to develop client-side code, but where and when it is fetched to the browser, how it's built and how much optimized for different media platforms.

Static site generators (SSGs)

This is also related to the forementioned static site generators, like Gatsby, VuePress, Nuxt.js, or Hugo, which automate the process of creating full static HTML web applications. They take data and markup, and generate the whole static HTML website, thus automating the tasks of coding the apps.

SSGs are the crucial element of the forementioned Jamstack architecture, where you can build flexible, modular and fast websites. For instance, Gatsby builds React-based applications to be a bunch of static websites and assets, served from a CDN that is fast delivered to the user in milliseconds.

No Code / Low Code

With the advent of MS Power platform, particularly PowerApps, and then especially with the solutions powered by AI, it become more popular to offer some sort of predefined and configurable application templates, rather then to invest in a real full-code development.

PowerApps, AppMaster, IBM AppConnect, are all examples of application builders that allow for no-code or low-code approach.

Low-Code vs. No-Code Web App Builders | AppMaster

Low-code usually enables automated code generation through visual building blocks like drag-and-drop and pull-down menu interfaces, whilst no-code is a subset of low-code, emphasizing a completely hands-off approach with 100% dependence on visual tools.

Component-based architecture

Web components

They are essentially building blocks for doing the separation of applications in a more elemental level. With the advent of custom elements that build up new HTML tags with fully-customizable behavior, and shadow DOM that allows to encapsulate DOM subtrees into the web elements, web components make building micro frontends or reusable parts of applications a breeze.

Micro frontends

As the interest for interactivity and progressive UI grows, so is the architecture. Frontend apps are often talking to each other, and they are usually part of a bigger, more abstract and systematic architecture on the client. Therefore, it doesn't come as a surprise that micro-frontends architecture is used to design loosely-coupled modular apps on different web technologies.

During time, most of the anticipated web libraries adopted their implementation of web components and module federation, so it's just a question of when to connect them into a bigger picture.

Serverless architecture

GraphQL

This query language released by Facebook in 2015 continues to captivate the single-page applications. It provides a flexible syntax for querying data from both backend and frontend, and it has been used by many popular companies like GitHub, Pinterest, Coursera, Shopify and more.

It provides fast data retrieval through a single endpoint, so just one call for all the necessary data is needed. It uses graph-based scheme to optimize query retrieval, and the requests can be customized to satisfy all needs (supports arguments for each field and nested object, including scalar fields). Definitely a trend that will be used for some time.

Web Assembly (WASM)

It's a groundbreaking technology that definitely impacts today's and near future web development. Web assembly (WASM) is a binary instruction format targeted specifically to the web browsers. Wasm is a compiled language, instead of being interpreted, as JavaScript does. It is not tied to a specific programming language, so it's versatile and language-agnostic.

By enabling high-performance applications in the browser, it opens up new possibilities for web-based gaming (allows complex games to run smoothly in the browser, rivaling native apps), VR/AR Applications, CAD Systems and Video Editing Tools, just to name the few. Wasm facilitates both client-side rendering (CSR) and server-side rendering (SSR).

To summarize, Its ability to bridge different programming languages and optimize both client-side and server-side rendering marks a substantial evolution in web development practices

Blazor WASM

I can't avoid mentioning ASP.NET web development using Blazor. In it's newest iteration, .NET 8, Blazor offers great flexibility by using C# and .NET. Blazor WebAssembly specifically targets the browser environment. It enables to create interactive web apps entirely in C# and Razor components.

The key feature of every Blazor application is its razor components, which make up for the user interface. Blazor doesn't even have to be in C#, as the components could be shared and distributed as Razor class libraries or NuGet packages. Blazor WebAssembly supports both server-side rendering and client interactivity. You can switch between server-side and client-side rendering modes or even mix them on the same page.

AI and Chatbots

And at the end, if we want to admit it or not, impact of artificial intelligence and machine learning is evident.

• Chatbots, also known as virtual assistants, are AI-driven software programs that interact with users through text or voice interfaces. Chatbots have become an integral part of modern web development, thus revolutionizing user interactions and enhancing overall web experiences. They reduce the need of human support agents, thus automating repetitive tasks and lowering the costs. They are more and more integrated into the existing SPAs and web applications in general.
• A Voice User Interface (VUI) allows users to interact with devices or systems using their voice. VUIs are gaining more popularity in web design, with more web apps integrating this feature into their user interfaces. VUIs offer hands-free interaction, so more users can access the apps (especially the users with disabilities), and end-users can do more parallel operations at a time. VUIs will continue to evolve, with more services supporting them. Also, the designers themselves transition from a canonical UI to UX and VUI design more and more.
• Augmented reality (AR) and virtual reality (VR) are also part of the modern web perspective. AR empowers interactive experiences by overlaying digital content onto the user’s physical surroundings, so it encourage exploration and real-time interaction. Mobile AR (devices) are popular platforms for AR, but still, web apps could be its target too. VR immerses users in a simulated environment, where their actions dictate the narrative. Both AR and VR can use WebXR API for its implication on the web.

WebXR is a JavaScript API that enables developers to create immersive experiences for both AR and VR directly within web applications. WebXR captures real-time data about headset and controller positions, orientation, velocity, and acceleration. It renders stereoscopic views to the headset display based on positional data.

WebXR opens up new possibilities for interactive storytelling, education, and entertainment on the web

Summary

In summary, the future of web development is dynamic, with innovations in AI, performance, and user experiences. With PWAs, that combine best of web and native apps, AI-powered chatbots and virtual assistants, headless CMSs that decouple front-end and back-ends, microfrontend architecture, web assembly that brings near-native performance, UI/UX trends, and WebXR, the future of web is exciting and enthusiastic.

Let’s peer into the horizon of 2024 (and perhaps 2025), where the web’s magic awaits. As frontend developers, we stand at the threshold of this super exciting period, ready to shape the digital tapestry with innovation and wonder.