🕸️ Web development trends we will see in 2024 👀

As we're already chugging along into the new year, it's the perfect time to take a look into what trends started gaining traction in web development in 2024. Reflecting on the whirlwind of updates from 2023, here's a rundown of some hot topics for the upcoming year.

Back to self-hosting

Self-hosting was the initial and default way for web developers and companies to host their applications for many years. Developers had to go deeper into inner workings of IIS, Nginx, or similar tools in order to host their web applications. Then came cloud services, swooping in to make deployment a walk in the park compared to the "do-it-yourself" approach. No more server maintenance nightmares, right?

Cheaper and more convenient cloud deployments meant that it was easier to learn and maintain your deployment somewhere else, as compared to the “standard” self-hosted solution. After all, you had to own a server, maintain it, update it, solve bugs, etc. At the same time, Docker became a thing and slowly but surely, the “it works on my computer, but not in production” started looking like a thing of the past.

However, it was not enough to replace the convenience of just shipping your application on some of the external providers. The convenience of of not being forced to learn too much about networking, administration, and handling VMs still wasn’t there. The rise of cheaper home servers, using Network Attached Storage (NAS) and their wide array of options, made it much easier to handle the self-hosting needs for lightweight use. We now have tools like Proxmox and Portainer, which make self-hosting your own Docker containers a breeze. We even saw DHH’s (who is a creator of Ruby on Rails, among other things) company moving completely to a self-hosting model, which prompted a big debate.

Back to server

In the world of React, there is a strong drive towards servers as the way of rendering apps. Spearheaded primarily through Next.js, React Server Components gained a lot of space in the public discourse, despite being very new tech. These tools are stirring the pot – some devs see them as groundbreaking, while others think they're simply reinventing the wheel. Regardless, the promise is faster page loads, less client-side code, and a smoother dev experience.

React Components enable execution and rendering of the React code exclusively on the server, which should bring benefits such as faster page loads, a lower amount of code shipped to the client, and better developer experience. One big DX advantage to it is safely accessing the database layer directly from the component itself, without the need for API.

HTMX is another library that gained popularity due to its server-first approach to rendering data, although seeking a much simpler way of appealing to developers.

Back to SPA

Hold up, isn’t this a bit of a contradiction? While server-side rendering is gaining steam, there’s also a solid camp refining the good ol' Single-Page Application (SPA) approach. The main reason for that is the feeling that we went so far in terms of experimenting with the server-first approach that we’ve forgotten that not all applications should be living on the server. Some could be highly dynamic, with loads of complex client-side validations, or you simply want to migrate your old Create-React-App architecture to Vite.

BTW, if you're wondering what the hell is a SPA and when should I use it over React Server Components, let me quickly explain. A single-page application (SPA) is a web application that loads only a single web document initially and then dynamically updates the content on that same page without the need to reload the entire page. SPAs interact with users by rewriting existing web pages instead of loading completely new pages from the server.

One of the examples of newer approaches to SPA is the Remix SPA mode. It uses Vite to create a setup that is basically React Router and Vite, with additional Remix-specific features, such as file-based routing and more.

Another example of a React framework utilizing Vite to give their users a SPA experience is Wasp - a full-stack framework for React & Node.js that drastically cuts the boilerplate. Despite being a full-stack framework, it focuses on the standardized approach of deploying a client-side React app with a Node.js server to be as portable as possible. With this approach, you can deploy your app pretty much anywhere, as well as self-host it, which is also a thing that we mentioned before in this article.

For the even faster start, it also features Open SaaS - a 100% free and open-source boilerplate starter for React & Node.js. Just clone it and get a working app with auth, billing, Open AI API, user dashboard and more!

Finding this article useful?

We're working hard at Wasp to create content like this, not to mention building a modern, open-source React/NodeJS framework.

The easiest way to show your support is just to star Wasp repo! 🐝 But it would be greatly appreciated if you could take a look at the repository (for contributions, or to simply test the product). Click on the button below to give Wasp a star and show your support!

⭐️ Thanks For Your Support 💪

Rise of low level languages

Leaving the world of JavaScript just for a bit, we find many examples of low-level languages making their way into the mainstream, especially when it comes to the tools for JavaScript. This is a trend that has already started during the last couple of years and should continue well into 2024 and beyond. When JavaScript ecosystem started to flourish, there were many great tools that were built with JavaScript, making it easier for developers to contribute to them and allow them to create their own plugins customize them to their liking.

One of the big reasons why we should be excited about this is the performance that those tools bring to developers when compared to JS-based tools. Tools like SWC (Speedy Web Compiler) and Turbopack (Vercel’s self-proclaimed successor to Webpack) are built in Rust. On the other side, Bun, which is an all-in-one JavaScript toolkit bult with Zig. It not only enables users to use it as their default JavaScript runtime, but also as a bundler, test runner, and Node.js-compatible package manager. What is great is that many new tools don’t remove the compatibility with pre-existing concepts, making it relatively easy to transition.

Conclusion

As with everything, we should take all predictions and potential trends with a grain of salt. It is easy to get carried away by the hype of new technologies and tools that are constantly being available today. If you read this article carefully, you might think to yourself “ok, where is AI here?”. I deliberately didn’t include any AI-based predictions to create awareness of other cool developments and trends in the industry that are overlooked.

What do you think of those trends? Are you noticing them as well? Or even better, doing some of this stuff yourself? Let us know in the comment section below and share your opinions!