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)
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
Its a framework, its just not as opinionated as something like Angular for example. NextJS is comparable to Nuxt, SolidStart, SvelteKit, etc.
Please take a closer look at the Docs
And this article might make it clearer as well
Definitely take a look at it, thanks for sharing with us.
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.
Not valid argument. React is just view lib, don't event have routing etc. Angular is a full package, MVC oriented with dependency injection.
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.
Yes I agree Angular is the weird fish in the sea. Show me where svelte and vue have built-in routing.
Vue has Nuxt) I guess it is like Next for Vue and they should have the same routing out-of-the-box
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.
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
I hate the fact that Angular restricts you so much. The framework just gets into your way.
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
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.
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.
No, React is not a framework. It is only a UI library.
Totally agree with you. React isn't a framework it's a library.
The distinction doesn't really matter that much as long as you understand the key differences in both frameworks.
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.
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.
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.
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 🤣
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
Thanks, but I’m better off going with golang and templ)
Oho, my respect! I gave this language a shot about a year ago)
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.
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.
Absolutely but I did refer to React as a UI library. I just used framework because that's what most people are comfortable with.
Same thing with svelte and sveltekit.
Is this debate still going on? Like how the hell is react a Library 😂
react.dev/
I have already checked it out. That's their latest docs, and they said themselves it's a library .
My bad.
What exactly are the differences between a library and a framework.
I find this article very useful
React is half a framework, really.
It's a library, but it's functioning as a framework.
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.
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.
Did you mean Next.js because last time I checked Nuxt.js works with Vue.
I meant Nuxt but I made a mistake when I said that it ran on React. Oopsies!
Source: Stack Overflow Trends
This is a very important graph where did you get the data do you mind adding a link to the source?
Done
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.
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
100% React, it’s still the market leader and most popular
Agree with you on this one. React all the way.
i love solid js ❤️
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.
Wow, what an explosion! 🤯💥
At least the poster image looks nice.
You didn't mention Cradova it's becoming popular too. github.com/Uiedbook/cradova
Okay wow. I know Cordova has been around for a while but I thought nobody uses it anymore.
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!)
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
Hurry up the year 2023 is ending :-)
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.