DEV Community

Cover image for The best Javascript UI framework to use in 2023
Kinanee Samson
Kinanee Samson

Posted on

The best Javascript UI framework to use in 2023

Untill we achieve singularity with AI and all coding is handled with AI there will always be a war for the browser. And we've come to where the real war is, this is where the major players stake their claim, there's no shortage of frameworks in this particular category all trying to shove so many options into our faces.

Maybe we developers are just black and red ants in a Jar while these Tech companies creating these frameworks are shaking the Jar we're inside causing us to constantly be at each other's neck over which one is the best, you all know where I stand when it comes to this section but I'm going to be as unbiased as possible, for simplicity and time's sake we will only consider the four major Javascript UI frameworks, let's start in no particular order with Svelte.

Svelte

Svelte is a cybernetically enhanced way of building web applications, what this simply means is that Svelte provides quite a unique way for us to build a web app by shipping as a compiler. Yes, you heard that right, all of the Svelte code you write gets compiled down into a Javascript executable and this has some amazing benefits, first, the compiler can perform some optimization before spitting out the final executable and this can result in performance gains as with the case in apps built with Svelte.

You generally write less code than you would in most other frameworks and your bundle size is also considerably smaller than bundle sizes from other frameworks. Whereas Angular uses handlebars templating syntax, and React uses JSX, svelte has its templating syntax although it's a bit similar to that of Vue and a bit like JSX. Svelte does not make use of any Shadow DOM and there is built-in reactivity, it's also incredibly simple to create a stateful variable, just prefix it with a $:.

Svelte also comes baked in with its custom store and that's if you want to go into advanced state management. However everything is not all rosy with Svelte, first it has a considerably less ecosystem of third-party libraries and plugins when compared to frameworks like React, and Vue. Second although Svelte is well-loved and appreciated in the Javascript ecosystem. Svelte's ecosystem within that Javascript ecosystem is not that big when compared to its rivals but it's worth a shot.

Angular

Angular, the very first Javascript framework I learned. I remember how I felt when I started working with Angular, untouchable. Fast forward over three years later and I hate using Angular, and I would say for the very same reason that I did like it so much back then. You see Angular is a robust framework and it is the only framework in this category that enforces a particular application structure on you. Angular supports typescript out of the box which is a good thing if you're on to some complex web app development but can become a nightmare when you want to do something simple.

Angular also has a built-in reactivity with two-way data-binding, it also comes with a complete state management solution (Store) by default. Angular also supports test-driven development out of the box so you can do unit and end-to-end tests, Angular also possesses a built-in Router that is capable of all your needs. Angular ships with a full-blown CLI for generating components, modules, interfaces, and test files. Angular is suitable and very much used amongst large teams and corporations.

Angular has a steep learning curve because if you don't know how to use Typescript, you have to learn it first. And this will take some time, when you're done with Typescript, you now have to come back to learn Angular, which is what I did when I was getting started. Another thing that we can all agree on is that sometimes, Angular is an overkill for most applications, Think using a sledgehammer to kill a fly, some times you just want something simple.

Vue

Vue is a framework that is often labeled as the best Javascript UI framework on Twitter. Vue is incredibly easy to get started with, in fact it is the easiest on this list to get started with. You can just use a script tag with a link to a Vue.js CDN and you are ready to start using Vue. This is one of the biggest perks of Vue. It is incredibly easy to learn with their focus on incremental learning. Vue is a robust framework for building UI applications that give developers the best part of working with Angular and React as a single tool.

This does not mean that Vue does not have its own identity, Vue Js has a robust ecosystem of third-party plugins, libraries, and a huge community behind it. Vue has a built-in store but you have to opt into it explicitly to use it. Reactivity in Vue is so easy to set up and handling animations on your component or page is what we dream of in React. Vue also ships with a router but you also have to opt into it, Vue has a CLI for setting up projects that will make all of these configurations for you based on your prompt.

Vue has been adopted graciously by the community and has found a nice place amongst some developers however I feel like Vue's Identity is somewhat obscured and that has largely kept it in the shadow of React and Angular but no doubt it's one of the best Javascript frameworks out there. There's an amazing ecosystem of developers and third-party plugins for your Vue app so you can go from simple to highly complex with Vue.

React

The king of all Javascript UI frameworks, this is the framework other frameworks want to be like when they grow, they will not say it outright but we know. React has taken this war by storm from the very first day it came into the fray and since then it has not looked back. React is plain Javascript, try to beat that! The learning curve for React for developers is incredibly short. Some people even know how to use React without understanding how Javascript works fundamentally.

React is a component-based UI library that provides developers with the tooling, support, and third-party plugins and libraries to build their applications the way they want them! The only thing React provides to you is the React DOM and all other tools are installed as needed. This gives developers the freedom to express themselves the way they want. The introduction of functional components was another major blow to its rivals, hooks then took React a step further and cemented its status. Now signals are here and React does not look like it's slowing down.

The community behind React is impressive with over 184k starts on Github, and over 1.8M million weekly npm installations. The ecosystem of third-party plugins for your React application is quite impressive. React is head and shoulders high above every other on this list, and is deservedly King!

Solid.js

Solid.js like Svelte is quite new when compared to React, Angular, and Vue however it might be that pocket Hercules we've all been ignoring because we are so addicted to other frameworks. Solid.js is an interesting framework that deserves to be a part of this discussion. Solid.js pioneered the concept of signals when other Javascript frameworks made reactivity and state management a nightmare for developers, a factor that has contributed to the growth of Solid. Solid.js is incredibly easy to adopt and it aims for a simpler syntax and learning curve compared to other frameworks. It emphasizes the use of pure Javascript functions and avoids concepts like hooks.

Solid.js is also really concerned about the performance of your application and thus it avoids the potential pitfalls that come with using things like a Virtual DOM, coupled with the unique way Solid manages reactivity you get a framework that allows you to build apps with flash-level speed. I hope your users will also realize that the App is now .0005secs faster.

Jokes aside Solid also supports SSR out of the box? The only framework in this category that can do this without incorporating any meta-framework on top of it. Solid.js components are highly composable and reusable, promoting modularity and maintainability in your codebase.

As good as Solid.js may seem some flaws have kept it in the shadows for so long, As a relatively new framework, SolidJS has a smaller community and ecosystem of libraries and tools compared to established frameworks like React and Vue. Solid might be easy to learn but there's also a learning curve, especially with signals. It's a concept that's quite new to some developers.

What's your thought on Javascript UI frameworks, do you agree with me that React is the King or do you think it should not be the king, who deserves the crown? Did I do justice to other frameworks on the list? Are there frameworks you think should be on this that I omitted?

Please let me know and also share your thoughts on the state of Javascript UI frameworks using the comment section, I look forward to reading your thoughts and opinions. If you want to learn React for free then you can check out my React for Javascript Developer, It contains over 15 videos designed to help you get started with building web applications with React.

Top comments (56)

Collapse
 
hugaidas profile image
Victoria

React is not a framework, better to say Next JS which is indeed framework based on React library, you can also mention Astro as its popularity grows

Collapse
 
brense profile image
Rense Bakker

Its a framework, its just not as opinionated as something like Angular for example. NextJS is comparable to Nuxt, SolidStart, SvelteKit, etc.

Collapse
 
hugaidas profile image
Victoria

Please take a closer look at the Docs
And this article might make it clearer as well

Thread Thread
 
kalashin1 profile image
Kinanee Samson

Definitely take a look at it, thanks for sharing with us.

Thread Thread
 
brense profile image
Rense Bakker

Yes I'm aware of what the react docs say. However, what matters here is the comparison. If you call Vue, Svelte and AngularJS a framework, than React is also a framework. It is used for the same thing. Similarly, a Toyota is just as much a car as a Bentley, even if it comes with less add-ons and luxury nonsense compared to the Bentley. Comparing NextJS to Svelte and Vue is factually wrong. Those frameworks have their own versions of Nextjs, called SvelteKit and Nuxt.

Thread Thread
 
dikamilo profile image
dikamilo

Not valid argument. React is just view lib, don't event have routing etc. Angular is a full package, MVC oriented with dependency injection.

Thread Thread
 
kalashin1 profile image
Kinanee Samson

You couldn't have said this any better? What difference does it make if it still gets the job done?

All things being equal these frameworks are just different ways to do the same thing.

Thread Thread
 
brense profile image
Rense Bakker

Yes I agree Angular is the weird fish in the sea. Show me where svelte and vue have built-in routing.

Thread Thread
 
hugaidas profile image
Victoria

Vue has Nuxt) I guess it is like Next for Vue and they should have the same routing out-of-the-box

Thread Thread
 
brense profile image
Rense Bakker

Exactly, angular is the weird fish in the sea as per my original comment. If you're comparing frontend frameworks like Vue, svelte and Angular, react is in that list as well. If you're comparing full stack solutions like next, nuxt and SvelteKit, angular doesn't have a similar solution, mostly because a lot of things are baked into the framework, which makes it uninteresting for people to build something similar to next or nuxt for angular I guess.

Thread Thread
 
hugaidas profile image
Victoria

I think Angular here is like a whole new world and pretty far from this dev friendly frameworks like Next/Nuxt/Svelte. Angular, in my opinion, for big complex projects, in my exp mostly in banks, I think Angular gives you the least freedom among all the mentioned libraries and frameworks

Thread Thread
 
kalashin1 profile image
Kinanee Samson

I hate the fact that Angular restricts you so much. The framework just gets into your way.

Thread Thread
 
hugaidas profile image
Victoria

Unfortunately, this is necessary, it enforces strict rules to make the app work without any issues, at such organizations like governmental companies or banks, the freedom in creating an app has a huge toll

Thread Thread
 
oadrian2 profile image
oadrian2

As professional Angular developer, unfortunately I can't agree. In my experience Angular code bases become just as much of a mess as anything else. Because they insist that you do a lot of things their way and in and almost JavaScript-antagonistic way, you end up having to learn a lot of techniques that don't play nicely with other JavaScript-friendly techniques.

JavaScript is not a very strong OO language and for most of Angular's existence it has eschewed functional style programming, which is at the heart of JavaScript. DI is nice in an object-oriented world, but unnecessary in a functional one. React doesn't have a DI system because it doesn't need one in most architectures.

Angular has long felt to me as a framework that tried to hide the language it lived in as much as possible. It has felt like webdev for Java programmers.

 
brense profile image
Rense Bakker

Yes that's a commonly used argument. There's something to be said for having a little more strict way of working. React is the opposite and sometimes all the different styles of working can be confusing. This becomes very clear if you see how different the approach is between nextjs and remix, which both use react, but in very different ways. Personally I prefer the flexibility, but it definitely does come with pitfalls.

Collapse
 
manvendrask profile image
Manvendra Singh

No, React is not a framework. It is only a UI library.

Thread Thread
 
kalashin1 profile image
Kinanee Samson

Totally agree with you. React isn't a framework it's a library.

Collapse
 
kalashin1 profile image
Kinanee Samson

The distinction doesn't really matter that much as long as you understand the key differences in both frameworks.

Thread Thread
 
hugaidas profile image
Victoria

It actually matters, I ask juniors on interviews this question and they usually can't explain the difference between frameworks and libraries. Still, this knowledge is important and can affect your decision when choosing the right tool to work with and create a project.

Thread Thread
 
kalashin1 profile image
Kinanee Samson • Edited

Yes it's important to know the distinction however this information is only important when you go into very complex project.

If you're just building simple apps then what difference does it make? But React is a Library because it gives you just what you need to do what you want the way you want. A framework will be very opinionated about how you should build and structure your application as is the case with Angular, Stencil and others.

Thread Thread
 
hugaidas profile image
Victoria

We are confusing warm and soft here. When u are applying for a job u have to know the difference and be able to explain, when choosing between framework and library, it makes difference, it makes difference if you are building something more complex than just a landing page. Knowing the difference is a piece of basic knowledge, especially when the dev's grade grows.

If you check out the React official website, they recommend using Next JS instead of pure React if you have routing or some data fetching in your app, and knowing the difference and 'whys' can be very important here.

Thread Thread
 
tsolan profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Eugene

You seriously told that it’s not possible to create complex app in react? First purpose of Next.js is SSR, not better routing or fetching comparing to React.
Now I felt a little sorry for your juniors 🤣

Thread Thread
 
hugaidas profile image
Victoria • Edited

Kindly asking you not to put the words into my mouth. Please do not make it personal about me, just check out the official React/Next documentation, and probably conduct your research when you have some free time. If you think that there is no difference between Next and React except SSR, just keep working with React

Thread Thread
 
tsolan profile image
Eugene

Thanks, but I’m better off going with golang and templ)

Thread Thread
 
hugaidas profile image
Victoria

Oho, my respect! I gave this language a shot about a year ago)

Thread Thread
 
brense profile image
Rense Bakker

There's a big difference. NextJS is opinionated and React is not. If you like the way Nextjs does things, you pick Nextjs. If you want to build something custom, you use react and pick and choose what packages and builders you want to use for routing and SSR.

Collapse
 
nermin_karapandzic profile image
Nermin Karapandzic

YEP, I feel like Astro is doing it right, all these other frameworks now trying to be both frontend and backend is not the way IMO.

Collapse
 
kalashin1 profile image
Kinanee Samson

Absolutely but I did refer to React as a UI library. I just used framework because that's what most people are comfortable with.

Collapse
 
shifi profile image
Shifa Ur Rehman

Same thing with svelte and sveltekit.

Collapse
 
michthebrandofficial profile image
michTheBrandofficial

Is this debate still going on? Like how the hell is react a Library 😂

Collapse
 
hugaidas profile image
Victoria
Thread Thread
 
michthebrandofficial profile image
michTheBrandofficial

I have already checked it out. That's their latest docs, and they said themselves it's a library .

My bad.

Collapse
 
michthebrandofficial profile image
michTheBrandofficial

What exactly are the differences between a library and a framework.

Thread Thread
 
hugaidas profile image
Victoria

I find this article very useful

Collapse
 
redbar0n profile image
Magne

React is half a framework, really.

Collapse
 
hyeonho2010 profile image
hyeonho

It's a library, but it's functioning as a framework.

Collapse
 
igorfilippov3 profile image
Ihor Filippov

If React is not a framework, so tell me please how can I use it when all my content on the page is rendered with, server written on php, for example?

With jQuery I can cuz it is a library.

Collapse
 
michaelneely77 profile image
Michael Neely • Edited

Nuxt.js has recently caught my eye as a framework that runs React as a library.

EDIT: My bad, Nuxt extends Vue. I just revisited the docs.

Collapse
 
kalashin1 profile image
Kinanee Samson

Did you mean Next.js because last time I checked Nuxt.js works with Vue.

Collapse
 
michaelneely77 profile image
Michael Neely

I meant Nuxt but I made a mistake when I said that it ran on React. Oopsies!

Collapse
 
iamspathan profile image
Sohail Pathan • Edited
Collapse
 
kalashin1 profile image
Kinanee Samson

This is a very important graph where did you get the data do you mind adding a link to the source?

Collapse
 
iamspathan profile image
Sohail Pathan

Done

Collapse
 
haydn13 profile image
Haydn Hunt

I have used a handful of JS frameworks over my time in the web development world. Knockout, ember, angularjs, angular, and reactjs . React isn't by itself a framework but acts as the main kernal of a framework of a devs own Creation. I initially when hearing about react was really skeptical. I thought it was too loose when compared to angularjs and angular, (used to be a angular fan boy). Now that I have used it for a while I enjoy the flexibility and the utility it lends to rapid development.

Collapse
 
kalashin1 profile image
Kinanee Samson

Someone that sees things with my eyes. Most times you want the freedom to build your app the way you want instead of being constrained all the time

Collapse
 
andyb1979 profile image
Andrew Bt

100% React, it’s still the market leader and most popular

Collapse
 
kalashin1 profile image
Kinanee Samson

Agree with you on this one. React all the way.

Collapse
 
c4miloarriagada profile image
Camilo Arriagada Vallejos

i love solid js ❤️

Collapse
 
yogini16 profile image
yogini16

Thanks for sharing!!

React is a free and open-source front-end JavaScript library for building user interfaces based on components. It's not a framework.

Collapse
 
valvonvorn profile image
val von vorn

Wow, what an explosion! 🤯💥
At least the poster image looks nice.

Collapse
 
fridaycandours profile image
Friday candour

You didn't mention Cradova it's becoming popular too. github.com/Uiedbook/cradova

Collapse
 
kalashin1 profile image
Kinanee Samson

Okay wow. I know Cordova has been around for a while but I thought nobody uses it anymore.

Collapse
 
paulgordon profile image
Paul Gordon

My money is on Vanilla JS eventually becoming dominant. For anyone looking to exit the web framework rat-race, you might want to take a look at the up-and-coming RawJS: github.com/squaresapp/rawjs

(I'm the author of this... we're growing, I just did a talk on it at TorontoJS!)

Collapse
 
grenmath profile image
Mathieu Grenier

I would change the title of post. Its not JS UI ! They are Frontend frameworks
JS UI is lile Angular Material, Bootstrap, Tailwind..
2 differents things

Collapse
 
matek075 profile image
Matek

Hurry up the year 2023 is ending :-)

Collapse
 
rhrebecek profile image
Radek Hřebeček

I agree that React is a really cool tool that opens a lot of doors. The only thing more useful for developers is for everyone to write the same or similar code and be on the same page.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.