So you’re tired of building frontend apps with the usual suspects like Angular, React and Vue? You’re curious what the new up and coming kids on the frontend block have to offer? Well you’ve come to the right place. We’re going to introduce you to 4 new(ish) frameworks that are quickly gaining popularity and just might become household names soon. These fresh young bucks – Svelte, Alpine.js, Solid and Lit – are shaking up the frontend world and challenging the status quo. They offer simpler APIs, smaller bundle sizes and an overall lighter-weight approach to building interactive user interfaces. If you’re an early adopter and like staying on the cutting edge of web design and development, one of these new kids on the block just might become your new favorite frontend tool. Read on to learn more about what they have to offer and see which one sparks your interest!
The Dominance of Angular, React and Vue
The frontend framework landscape has long been dominated by the big three: Angular, React and Vue. While hugely popular and capable, other promising options have recently emerged that are worth checking out.
Svelte is a lightweight framework that compiles your components into highly optimized vanilla JavaScript. Rather than using a virtual DOM, it surgically updates the DOM when state changes. This leads to blazing fast performance and tiny bundle sizes.
Alpine.js is a rugged, minimal framework for composing interactive elements. It has a reactive and declarative API with no DOM abstractions. This makes it extremely lightweight, flexible and easy to learn.
Solid is a declarative, component-based JavaScript library focused on developer experience, reusability, and composition. It features hot module reloading, scoped styles, and a robust component API. Solid hits the sweet spot between a full framework and a library.
Last but not least, LitElement combines the power of web components with lit-html to allow you to create reactive components using native web standards. Backed by Google, it embraces simplicity and interoperability.
While the established players are hard to beat, the frontend ecosystem is ripe with innovative alternatives. Don’t miss out on exciting new possibilities – branch out and try a fresh approach for your next project! The future is unwritten, so go out there and shape it.
Why Consider Alternatives to the Big Three?
If you’re building a new web app, the big three frontend frameworks – Angular, React and Vue – seem like obvious choices. But there are good reasons to consider some newer alternatives.
Less Technical Debt
The big three have been around for a while and have accumulated a lot of features, syntax, and concepts you need to learn. Newer frameworks have had the benefit of learning from the big three, so they often have simpler APIs and syntax. This can mean less technical debt and a shorter learning curve for your team.
Better Performance
Newer frameworks are built with the latest web standards in mind, so they can often achieve better performance, bundle sizes, and progressive web app scores out of the box. For example, Svelte compiles components into highly optimized vanilla JavaScript, so apps tend to load faster and be more responsive.
Stay on the Cutting Edge
Using a newer framework allows you to stay on the cutting edge of web development. You can take advantage of new capabilities like static site generation, server-side rendering, and GraphQL data loading that the big three may not fully support yet. Riding the wave of innovation will make you a stronger developer and help future-proof your apps.
Flexibility & Control
Some newer options like Preact, LitElement and Stencil provide a lot of flexibility because they have a minimal set of opinionated tools and syntax. This gives you more control over architecture decisions and the ability to piece together the exact stack you want. The trade-off is less hand-holding, so these may appeal more to experienced teams.
Overall, while the big three frameworks will likely dominate for the foreseeable future, it’s worth keeping an eye on the new kids on the block. One of them might just be the perfect fit for your next project!
Svelte – The New Kid Making Waves
Svelte is one of the newest kids on the block in the frontend framework world, but it’s making waves with its reactive approach.
It’s Compiled, Not Interpreted
Unlike React, Vue, and Angular which are interpreted at runtime, Svelte compiles your components into highly optimized vanilla JavaScript. This means your app loads faster and runs more efficiently.
Reactivity Baked In
Svelte has reactivity built-in, so you don’t need a virtual DOM. Components are automatically rerendered when their state changes. This allows for better performance since the framework doesn’t have to keep track of changes to determine what needs to be updated.
Less Code
Svelte requires significantly less code than other frameworks. A simple counter component in Svelte is about 30 lines of code, compared to 50-100+ lines in React. This is partly because you don’t need to define props, state, lifecycle methods, and so on.
Easy to Learn
With its simplified syntax and limited abstractions, Svelte has a very gentle learning curve. You can build full-fledged web apps without having to understand complex concepts like virtual DOM, state management, JSX, etc. This makes it ideal for new frontend developers.
Svelte may be the new kid, but it’s proving it can hold its own against more established players. For building fast, lightweight web experiences, Svelte is worth having in your tool belt. As its popularity grows, it’s sure to become a dominant force in frontend development.
Alpine.js – Minimal and Magical
Alpine.js – Minimal and Magical
Alpine.js is a minimal yet magical frontend framework. Unlike the big three, it has a tiny footprint – only 2kb min+gzipped! This makes it ideal for adding interactivity to static sites.
Alpine works by adding behavior to elements with x-data and x-bind attributes. For example, to make a counter, you’d do:
“`html
“`
When the page loads, Alpine will instantiate a counter component on that div with an initial count of 0. It will then keep the span’s text in sync with the count, and increment count when the button is clicked.
Magic! With just a few lines of code we have a reactive counter.
Alpine has a number of other useful directives like:
-
x-if – Conditionally show/hide an element
-
x-for – Render a list of items
-
x-model – Create two-way data bindings
-
x-transition – Animate element transitions
-
And many more!
Alpine works great with Tailwind CSS, another utility-first framework. The two complement each other perfectly to build slick UIs with minimal CSS.
If you’re looking for a simple way to make static HTML interactive, give Alpine.js a try! It has a tiny footprint, simple yet powerful directives, and a wonderful community. Alpine may be small, but it sure is magical!
Lit – Fast and Lightweight
Lit is a minimal JavaScript framework for building user interfaces. Compared to larger frameworks like React and Vue, Lit is tiny – around 3kB minified and gzipped. This makes it suitable for low-resource environments where bundle size is critical, like Progressive Web Apps.
Less is More
Lit embraces a “less is more” philosophy. It has a very small API surface, with only around 20 main exports. This makes it easy to learn and avoids decision fatigue from too many options. The small size also means you don’t have to worry about bundle size bloat from features you’re not using.
Fast Rendering
Lit uses a virtual DOM, but it skips the step of creating DOM nodes for elements that haven’t changed. This intelligent diffing algorithm leads to very fast re-rendering speeds. In benchmarks, Lit consistently beats React and Vue. The simple, functional nature of Lit templates also aids performance.
Easy to Learn
If you know HTML, CSS and JavaScript, you already know most of what you need for Lit. Lit templates are just HTML, and you control rendering with JavaScript. There’s no need to learn a complex component model or JSX. This makes Lit very approachable.
Great for PWAs
Lit was designed with Progressive Web Apps in mind. Its small size helps you hit performance budgets, and it has good support for PWA features like offline caching, push notifications and more. Lit is a great choice if you’re building an PWA.
Overall, Lit is an appealing new option if you want a simple, lightweight framework for modern web experiences. While still quite new, it shows a lot of promise for certain use cases. Definitely one to keep an eye on!
Hotwire – Rails Meets Stimulus
Hotwire is a frontend framework created by Basecamp, the makers of Ruby on Rails. It combines the power of Rails with the flexibility of StimulusJS.
No build step required
Unlike React, Angular or Vue which require a build step to compile components into HTML and JS, Hotwire works directly with HTML and CSS. This means faster development and an easier debugging experience.
Turbo Streams
Hotwire uses Turbo Streams to automatically update sections of a page without reloading. This allows for a fast, reactive user experience without writing any JavaScript. When your Rails app receives new data from the server, it sends a Turbo Stream to update the relevant parts of the page.
Stimulus Controllers
While Hotwire handles updating the page, StimulusJS is used to add interactivity. Stimulus is a lightweight JavaScript framework with “controllers” that can be attached to elements to add functionality. This keeps your templates clean and logic out of the HTML.
Works with Rails
Hotwire fits seamlessly into the Rails ecosystem. It uses familiar Rails conventions like form helpers, URL helpers and rendering templates. This makes it easy to convert an existing Rails app to use Hotwire or start a new project with it.
A simpler frontend
If you’re looking to simplify your frontend and avoid the complexity of JS frameworks like React, Hotwire could be a great option. It provides a fast, reactive UI using technologies Rails developers already know – HTML, CSS and a bit of Stimulus. The end result is an approachable yet modern user experience.
Rails has been combined with Stimulus and Turbo to create a simple yet powerful frontend framework. By using Hotwire, developers can craft engaging user interfaces without learning a new JS framework. This lightweight, full-stack solution brings the best of Rails to the frontend.
Qwik – The Next Evolution of SSR
Qwik is a new frontend framework created by Anthropic, an AI safety startup. Qwik aims to fix some of the perceived shortcomings of existing frameworks like React, Vue and Angular.
Simplicity
Qwik’s main goal is simplicity. It has a small API with only a handful of concepts to learn. This makes it easy to pick up, even for beginners. Qwik also has great documentation with interactive examples to help you get started.
Server-Side Rendering
Qwik was built with server-side rendering (SSR) in mind. It has first-class support for rendering your app on the server and hydrating it on the client. This results in better SEO and performance.
Type Safety
Qwik is written in TypeScript, so you get static type checking. This catches bugs early and leads to fewer runtime errors. Qwik also has type inference, so you don’t have to annotate every variable.
Composition over Inheritance
Qwik favors composition over inheritance. This makes it flexible and easy to reuse logic between components. You can compose elements together like building blocks, without having to extend base classes.
Bundled with Useful Utilities
Qwik comes with a bunch of useful utilities out of the box like:
-
Routing
-
State management
-
Form handling
-
I18n for internationalization
-
And more…
So you can build complete apps without installing any third party libraries. The goal is to keep your bundle sizes small.
Overall, Qwik is an interesting new framework with some promising ideas. Its simplicity and focus on developer experience could make it a real contender versus more established players. The framework is still quite new, so the community and ecosystem are not as big yet. But Qwik is definitely one to keep an eye on!
SolidJS – Reactive to the Core
SolidJS is a lightweight reactive JS library focused on reactivity and performance. It was created by Ryan Carniato in 2020.
Fast and lightweight
SolidJS is small in size (only 9KB) and blazing fast. It uses a virtual DOM but with fine-grained reactivity tracking to minimize excess re-renders. This results in buttery smooth UI performance and a small bundle size.
Reactivity model
At the heart of SolidJS is its reactivity system. It uses Proxy-based observables to track changes at a granular level. This means only components whose inputs have actually changed will re-render.
JSX support
SolidJS supports JSX allowing you to write clean, familiar syntax. Under the hood, JSX compiles to the SolidJS h() (hyperscript) function.
TypeScript support
SolidJS has full support for TypeScript. You can build your app with confidence that you’ll catch errors early.
Routing
SolidJS has a built-in <Router> component that handles client-side routing. It’s flexible, configurable and works great for building single page apps.
Testing
The SolidJS team built a testing library called solid-testing-library that encourages good testing practices. It has utilities to render components, fire events, assert on outputs and more.
What’s next?
SolidJS is still new but gaining more adoption. The future looks bright with plans for server-side rendering, improved debugging tools, and staying on the cutting edge of web standards.
SolidJS is worth checking out if you want a small, fast, reactive library for building web user interfaces. The reactivity model and virtual DOM make it a serious contender against the big players. Welcome the new kid on the block – SolidJS may just become your new favorite framework!
The Future of Frontend Frameworks – Frequently Asked Questions
As frontend frameworks continue to evolve, you may have some questions about what the future holds and which path is right for you. Here are some of the most frequently asked questions about frontend frameworks.
Will React, Vue and Angular still be relevant in 5 years?
These major players have been around for years and continue to dominate the frontend framework space. While new frameworks may emerge, React, Vue and Angular have huge communities and ecosystems that will sustain them for years to come. However, they will likely evolve to keep up with trends like server-side rendering, progressive web apps and web components.
What new frameworks are worth learning?
Some up and coming frameworks showing a lot of promise include:
-
Svelte – A compiler that converts your code into highly optimized vanilla JavaScript. It has a small footprint and fast performance.
-
LitElement – A simple library for creating web components using lit-html. Backed by Google, it embraces web standards and has a minimal API.
-
Solid – Created by LinkedIn, it focuses on reusability, composability and developer experience. It uses web components and lit-html under the hood.
-
Stencil – A compiler for building web components, created by Ionic. It has a simple API, utilizes ES6+ and TSX, and works with major frameworks.
These newer frameworks emphasize reusability, standards, and performance. Learning them will make you well-versed in modern web development and future-proof your skills.
Will web components replace frontend frameworks?
Web components provide a standard way to build encapsulated custom elements in HTML. Frameworks have adopted web components, but also provide extra functionality like state management, routing and build tools. For complex applications, frameworks currently have more to offer. However, web components are a key part of the web platform’s future and a must-have skill. Frameworks and web components will likely co-exist for the foreseeable future.
In the fast-changing world of frontend frameworks, the future is hard to predict. But keeping an eye on trends, learning new skills and diversifying your knowledge will help ensure you stay ahead of the curve. While established frameworks aren’t going anywhere soon, new players and technologies like web components are emerging and shaping the next generation of frontend development.
Conclusion
So there you have it, 4 new frontend frameworks that are worth checking out. Whether you’re a frontend newbie or an experienced web dev, it never hurts to keep your skills sharp and stay on top of new tools and trends. Give one of these new kids on the block a spin and see how it compares to your framework of choice. You might just find your new favorite frontend tool and join a growing community of devs excited to build the next generation of web experiences. The frontend world moves fast, but with so many options out there, there’s no shortage of fun new toys for us to play with! What are you waiting for? Pick a framework and start building something awesome.
