Introduction
2024 is upon us, and we try to plan for the new year and think of the things we could do or learn in the upcoming year. There is no better time to look for frameworks to learn about in the new year, go through their features, and find out what makes them special. We looked at the 2023 JS Rising Stars list for guidance and tried to be as objective as possible. For each of the featured frameworks, we highlighted their biggest pros so you can understand where they excel and what could make you try it out yourself!
HTMX - back to the basics ๐ฒ
htmx-demo
Who is this for:
you want to write less JavaScript
you want simpler, Hypermedia-centric code
It would be a sin not to start with something that prides itself on being the front-end library of peace. HTMX skyrocketed in popularity in 2023, gaining most of its GitHub stars during the past year. HTMX is not your average JS framework. If you work in HTMX, you will spend most of your time in the world of hypermedia, looking at web development from a completely different pair of eyes as compared to our usual JS-heavy outlook on modern web development. HTMX leverages the power of the concept of HATEOAS (Hypermedia as the Engine of Application State), enabling developers to access browser features directly from HTML, instead of using Javascript.
It is also proof that you can achieve popularity and recognition by posting amazing memes and having word-of-mouth as your primary source of marketing. Not only that, but you can also become a CEO of HTMX as well! It hooked many developers to try this approach of building websites and re-think their current practices. All this makes 2024 exciting for the future of this library.
Wasp - full-stack, everything out-of-the-box ๐
open saas
Who is this for:
you want to ship full-stack apps fast
you want to keep using React and Node.js in a great all-in-one solution, without manually picking every part of the stack
you want a free saas template for React & Node.js with everything pre-configured - Open SaaS
For those who want the tool to have full control over their stack simply and easily, look no further! Wasp is an opinionated full-stack framework that leverages its compiler for a fast and easy way to create a database, backend, and frontend for your app. It uses React, Node.js, and Prisma, which are some of the most well-known tools that full-stack web developers are using.
The core of Wasp is the main.wasp file, which serves as the one-stop shop for most of your needs. In there, you can define:
Full-stack Authentication
Database schema
Async jobs, with no extra infrastructure
Simple & flexible deployment
Full-stack typesafety
E-mail sending (Sendgrid, MailGun, SMTP server, ...)
and moreโฆ
The coolest thing? After your Wasp app goes through the compiler step, the output is a standard React + Vite frontend, Node.js backend and PostgreSQL database. From there, you can easily deploy everything to, for example, Fly.io with a single command.
Although some people could consider Waspโs opinionated stance a negative thing, it is the driver behind Waspโs numerous full-stack features. With Wasp, starting a full-stack project for a single developer or a small team is much easier, especially if you use one of the pre-made templates or OpenSaaS as your SaaS starter. Because the core of the project is well-defined, it is very easy to get started with a project and potentially, make your own full-stack SaaS in a couple of days!
Whatโs also cool is the fact that most of the pre-existing knowledge of web developers for most of them still applies here, because the technologies that Wasp uses are established.
Solid.js - first class reactivity โ๏ธ
Solid example
Who is this for:
if you want highly reactive code
existing React devs who want to try something performant with low learning curve for them
Solid.js is a very performant web framework that shares some similarities with React. For example, both use JSX, utilizing the function-based approach to components, but instead of using Virtual DOM, it converts your code to vanilla JS. Still, it is more famous for its approach to fine-grained reactivity by utilizing signals, memos, and effects. Still, the signal is the simplest and most known primitive of Solid. They contain value along with their getter and setter functions, allowing the framework to observe and update the changes as needed in the exact location in the DOM, unlike React, which re-renders the whole component.
Solid.js not only uses JSX but also enhances it as well. It offers some cool new features, such as the Show component, which can enable conditional rendering of JSX elements, and For components to allow easier iteration over collections in JSX. Another important thing is that it also has its meta-framework called Solid Start (currently in beta) that enables users to render the application in different ways, according to their preferences with file-based routing, actions, API routes, and middleware among other features.
Astro - the king of static sites ๐
Astro example
Who is this for:
if you want an excellent tool for blogs, CMS-heavy sites
a framework that can integrate other libraries and frameworks
If you built a content-driven website in 2023, there is a big chance that you used Astro as your framework of choice to make it happen! Astro is another framework that uses a different architectural concept to stand out. For Astro, it is Islands architecture. In the context of Astro, an island is any interactive UI component on the page, standing out from a sea of static content. A page can have any number of islands since they run in isolation from each other, but they can also share state and communicate with each other, which is very useful.
Another interesting thing about Astro is that their approach enables users to employ different frontend frameworks, such as React, Vue, Solid to craft their website. Because of this, it is easy for developers to build sites on their current knowledge and also leverage their existing components that could be integrated into the Astro website.
Svelte - simple and effective ๐ฏ
Svelte demo
Who is this for:
you want an easy-to-learn framework
simple to write and fast code execution
Svelte is another framework that is trying to simplify and speed up web development by being as straightforward and beginner-friendly as possible. It is a very simple framework to learn since to have a reactive property, you have to declare it and use it in your HTML template. Whenever the value updates in the Javascript programmatically (for example, through triggering the onClick event button), it will reflect on the UI and vice-versa.
The next step in Svelte will be the introduction of runes. Runes will be Svelteโs way of handling reactivity, to enable easier handling of larger apps. Akin to Solid.jsโs signals, runes offer a direct way of tapping into the appโs reactive state by using function-like statements. In contrast to the current way of Svelteโs way of working, they will allow users to precisely define which parts of the whole script are reactive so that components are more performant. Akin to Solid and Solid Start, Svelte also has its framework, called SvelteKit. SvelteKit offers a fast way for users to spin up their Svelte apps powered by Vite. It offers router, build optimizations, different ways of rendering and pre-rendering, image optimization, and more.
Qwik - really quick ๐ค
qwik demo
Who is this for:
if you want a highly performant web app
existing React devs who want to try something performant with a low learning curve
Our last, but not least framework that is in this list is Qwik. Qwik is another framework that utilizes JSX and functional components, akin to what Solid.js does, to provide a familiar environment for React-based devs to get up to speed as quickly as possible. Staying true to its name, Qwikโs main focus is achieving the highest possible performance and speed of execution of your application.
Qwik achieves its speed by utilizing a concept called resumability. In short, resumability is based on the idea of pausing execution on the server and resuming execution on the client without having to replay and download all of the application logic. This behavior is achieved by delaying the execution and download of JavaScript code unless it is necessary to handle user interaction, which is an excellent thing. It enables both increasing the overall speed and lowering the amount of bandwidth to the absolute minimum resulting in near-instant loading.
Conclusions
The biggest common denominator between all those frameworks and libraries we have mentioned is familiarity. Everyone seeks to approach potential new developers in a way that builds on their current knowledge, instead of doing something completely new, which is a very cool concept.
Of course, there can be many more libraries and frameworks here that werenโt mentioned in the full article, but deserve at least a shout-out. For example, we have Angular, which, besides a new logo and docs, also includes signals and a new control flow. There is also Remix which is adding support for Vite, React Server Components, and new Remix SPA mode. In the end, we canโt forget Next.js, which became somewhat of a default for React developers in the last couple of years, paving the way with new React features.
Top comments (0)