What to expect from Frontend Frameworks in 2021?

If you’ve been contemplating what to build your next side-project in, like I have, it can feel like stepping into a mine-field not knowing what might come with your next step. 2021 is shaping up to be yet another year where frontend development doesn’t slow down one single bit. Many developments have started last year of course, but they are well on their way to reaching a climax in the year ahead. What can we expect from the likes of Vue, Svelte and React?

Vue 3.0

Initially released in September 2020, Vue 3.0 is the next iteration of this progressive JavaScript framework. So why include something in a blog about the expectations of 2021, when the release has taken place in the year before? Well, that becomes quite clear when you start working on a new webapp built with version 3.0. The majority of the components built on top of Vue that you’ve come to know and love, are simply not fully ready for v3.0 yet.

Whether we’re talking about support for things like carousels with vue-slider-component, to fully-fledged UI-kits like VuetifyJS; support for 3.0 is simply still in alpha, beta or in even earlier development. With the addition of for example the Vue Composition API, there is simply a lot of development for many added components and libraries that needs to happen, before you can be able to fully leverage the new functionality that v3.0 offers.

So should you already start using Vue 3.0 for development or not? If you heavily rely on code written by others for most of the things you do, then it’s probably better to wait for all your known and loved libraries to have been updated to the new Vue version. If you however have a preference for developing most things yourself, then it’s definitely great to get started with 3.0. The fundamentals are definitely there, and there is no reason you cannot build a great webapp with it. The development experience is still as good as ever. Ofcourse Vue also doesn’t sit still, so if you’re interested in what they are adding in 2021, be sure to check out their latest blog post on the topic.

SvelteKit

Yet another one of those things that was announced in 2020 (November), hopefully we’ll be able to see the next major milestone in Svelte development somewhere in 2021. Do we know for sure whether we’ll even see it come to light in 2021? Well… not really. The news from Svelte has been very vague, but we do know that it’s being worked on.

Right, but what actually is SvelteKit? Simply put, it is the replacement for Sapper, the current app-framework built on top of Svelte. So you’ll get a new way of building your Server-Side Rendered apps in Svelte, with a new framework that does the heavy lifting for you. That’s however not the only thing, according to the words written in the elusive ‘What’s the deal with SvelteKit’ blog post. According to the blog, it also expects to unify the development with Svelte in general. Because, as you might know, you don’t actually need Sapper to develop apps with Svelte. You can just use Svelte on its own, which could be quite confusing, especially for new developers making their way into the world of Svelte.

So can we start using SvelteKit already? Well, yes, you can. There is a quick installation for starting development with SvelteKit, simply run this command in your cli:npm init svelte@next and you’re good to go. But, as the infamous blog already explains, only do so if you’re brave. Why you ask? Well, that command is really all you get. There are no docs, examples, frameworks, libraries and components built on top of it available yet. Even the framework itself is being developed behind closed doors in a private repo. So anything you do with it, is completely up to you. I’ve tried it, and while it does the job just fine, I definitely wouldn’t recommend it yet for production-grade webapps. For that it’s simply too alpha, and who knows for how long it’ll have that status.

React Server Components

With the use of Next.JS, developers have typically been able to implement Server-Side Rendering functionality within React. In this RFC, again, shared at the end of last year (December 2020, do you see a trend already?), React proposes a new way of working with Client- and Server-side code, in the form of ‘React Server Components’. While currently in the RFC stage, it does look like a promising change that might shape the way we do React development in the near-future.

So what are React Server Components exactly? As their name suggests, it is closely tied into typical SSR, but, according to the RFC, not exactly the same. According to the RFC, Server Components offer a way of splitting typical Client-Side Rendering, with Server-side Rendering. While you would still have your typical React code on the client-side for delivering an amazing interface, you’ll also have React code running on the server for data-fetching purposes and for rendering for example static components like a detail page of some webshop product. With React Server Components, it aims to remove the need for tools like Next.JS, so that might have a big impact on how we work with React. For a better and more detailed explanation of what it is actually is, I’ll gladly refer you to the aformentioned RFC.

Summing up

A new year, and many new developments in a world that never seems to stand still. I’ve only highlighted one major milestone for React, Vue and Svelte, and I’m sure there will be many more major and minor milestones that influence the way we develop applications — for this year, and for many years to come. Whether you work with Vue, React or Svelte; keeping up to date with the latest developments will require time and effort, but ultimately it should allow you to become a better developer. And let’s face it, we actually really like working with these frameworks, as they make our lives infinitely more easier and more fun (and maybe also somtimes a bit more difficult). Who doesn’t enjoy building an cool webapp with the help of any of these amazing frameworks?

I hope this blog has given you some small insights in what you can expect for your framework of choice. While I do realise it’s in no way the same as knowing every nook and cranny of a certain framework, these milestones do offer you some perspective if you’re looking for a certain framework for your next pet project. Can you make mistakes with your choice? Not really! Development should be fun, and if you find that something doesn’t work out like you expected it to in the end, then the next framework or development is already out there waiting for you to try it out.

Extra: Not specifically a Front-end framework

While all frameworks I have mentioned are in principle front-end frameworks, when we are talking web development, Flutter should also not be ignored. As you might know, Flutter is not specifically a Front-end framework but more geared towards native mobile app development. That has also changed slightly, with the beta release of Web support at the end of 2019. Flutter expects to release production-grade support for Web in 2021, as well as the addition of several other platforms like MacOS and Windows. While Flutter is not a Front-end framework similar to the other three mentioned, it is worth mentioning for the fact that web support becomes production-grade in 2021. This makes Flutter definitely something to watch in the year to come.

Developer from the Netherlands. Working as a JavaScript Developer at 24i. www.linkedin.com/in/matthijs-langendijk/