Are New Frameworks Replacing React?
Key Takeaways
The video discusses the current state of React and its position in the market, with the introduction of new frameworks like Svelte and Solid, and the upcoming features in React such as server components. It also mentions the React Simplified Course, which covers everything needed to know about React.
Full Transcript
it seems like every other day in the JavaScript ecosystem a new library or framework comes along and shakes up how everything is done things like spelled drastically changed how front-end Frameworks work because they made things so much easier and the way that they compiled things beforehand really changed up the ecosystem for front-end Frameworks and there's lots of other things that have come out since then that really start to shake things up and you start to realize wow many of these Frameworks are actually doing things better or differently than react is react getting too old is it falling behind is it becoming old news a lot of people are starting to think react is dying but is it really the short answer is no reacts not dying it's not going anywhere anytime soon but it's a lot more complicated than you'd think foreign Dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and one of the many reasons people think that react is starting to die is because they see charts like this where if you look at react you can see since 2019 in this particular graph is starting to decline well first of all we need to understand what this graph is even looking at to figure out if this is even a meaningful decline or if it has any value and then we also need to look at the actual percentage values as you can see it's only gone from 89 to 83 and 83 percent is still quite High depending on what we're measuring in this case I'm looking at the retention graph which if we look down here retention is just the number of people that would use react again divided by the total number of people that responded and essentially it's saying the people that said would not use again so 83 percent of all people that took the state of JS survey in 2022 said that they would use react again and that's a quite good indicator even though it has declined from 89 that's still saying that essentially four-fifths of all people that use react would use react again now you will notice there are are a few other Frameworks that are higher rated one of them I mentioned at the beginning is spelled they have a lot of really cool improvements that they added to it on top of react that just make it easier to use which is why I can see a lot of people wanting to use felt over top of it solid is another one that has a lot of things added into it just to make it easier to use and that's one thing that react does not have going for it in general doing things in react is a little bit more verbose than other you know Frameworks such as felt or such as solid now just based on this graph alone though it's hard to say that react is dying I mean 83 is already incredibly dominant with people wanting to come back and use it again which is great and if you compare this value to other Frameworks that I would actually say I would consider are dying if we look down here like angular and Ember these are Frameworks that are on the way down they're definitely declining as you can see they went from really high you know 60 plus percent market share all the way down to 40 and Embers even worse they went from 40 something percent all the way down to below 20 so these are things I would consider that are you know on the decline and dine as you can see they have drastic drops between years like this is a 25 dip in people that would want to come back and use it again it's a really big change well with react it's like a couple percentage points either way each year also this graph doesn't explain everything if we go over and we look at for example awareness this says that pretty much every single person that took this survey knows what react is same thing for angular view which makes sense those are the top three big players and they've been around for a long time usage I think is the big one though if we look here react is by far and away the dominant winner and has been and every year this survey has been taken 82 percent of all developers use react well the next highest is actually angular at 49 which you may think that's kind of interesting because if we look at the retention graph angular is definitely dying but there are going to be jobs for angular for a long long time because companies built their entire business on angular so they need to have angular devs to continue to develop that code base so obviously there's going to be jobs for angular for a very long time to come I mean there's a reason there's jobs for kobold developers even though nobody actually writes code in kobold anymore for new projects but there are all things written in it so they need Developers for those jobs now I'm not saying react is obviously declining but even if it was declining obviously there's still going to be tons of react jobs out there because tons of people are using react I mean 82 of all developers are using react which means you know potentially 80 of companies are probably using react in some way if they're using a front-end framework now it's great to know that even if react was declining that there's going to be jobs for it out there just like there are for angular but obviously if react isn't a down client you don't want to actually spend time learning it just to realize that your skills are pigeonholing you into an older technology that has limited growth potential so what I want to do in the second half of this video is I want to talk about why I don't think react is actually going to die and why I think some of the new things coming to react are really going to revitalize it and make it even more popular than it already is so to do a good comparison between react and another language like spelled I'm going to be using some code from fireship this is actually based on a video he did a while ago where he made the same exact application in 10 different Frameworks I'm just going to be using react and svelte but I'll link that video in the description and cards for you if you want to check out the full video of him going through all of this but if we look here in the react version if you're used to react this is pretty straightforward stuff we have some state that we're using we're using a reference here for certain stuff we have this effect right here to do some loading of data and then we also have this effect right here which is going to be adding some data into local storage for us then if we go down a little ways you can see that we actually have the jsx that's rendering all this information out for us overall this application is super straightforward it's not super complex but if you want to do really basic things inside of react it requires you to know a lot of really rather complex things requires you to know how you state works it requires you to how to use effect works which are both complex Concepts and also it requires you to do certain things like if you wanted to actually use this input value instead of using a ref I would need to set the value here to you know our input value and then I would need to make sure that I also have an on change on here because we only have one-way data binding so then I would need to say set input value to e.target that value so there's kind of a lot of boilerplate when you want to do this kind stuff we just go back here to what he had before there we go also if we wanted to be able to update our to-do's the proper way because right now the way that they're doing it with fireship he's actually doing it in a way that could lead to bugs we would need to use the actual function version inside of here instead so we would do the function version that has the previous to-do's and then we can come in here and essentially just return this there we go and this will just be our previous to-do's like that if we wanted to make sure that we were doing this properly and also this local storage to set the items we need to either be inside of here somewhere or it would need to go inside of its own use effect that depends on our to-do's changing and again you can see there's a lot of complexities and a lot of things that you need to understand about react in order to write what's really a rather simple application now if we look at these felt application you'll notice that the code is much simpler if I open this up in the source folder there are literally two files and this file is essentially empty so there's really only one file in this entire application as you can see this file is small I mean there's not very much inside of here and all of it is rather simple we have our you know mounting here so that's handling our different life cycle methods we have some variables up here for storing information and we're just kind of treating this like a normal JavaScript application we're just saying update this variable update local storage and it's just automatically going to re-render and do everything for us just by changing around these variables so it's very easy to get started because it works more like normal JavaScript I don't need to understand how immutability works I don't need to understand how all these crazy hooks work I don't need to understand how the virtual Dom works and all these other things like compiling and bundling all I need to know is just how to modify some variables and it's just going to do everything automatically for me it's kind of magic these features that spelled bring along and some of the other Frameworks bring along that make writing your code easier are some of the things that react really lacks and that's one of the reasons that people think react is kind of doomed and going downhill because it doesn't have all these nice easy to use features but the one thing that react does have that most of these other Frameworks does is not only a robust layer of libraries you can use on top of it tons of actual support from people using it but it's also extremely customizable and it's going to work for almost any situation you need one bad thing about things like svelt that have a lot of magic is they become difficult to actually do certain things because sometimes the magic is a little bit difficult to understand and you need to really understand it at a low level in order to do certain things the right way well with react since it's a little bit more low level on its own it's a lot easier to do some of those more customizable things now that on its own isn't enough to make react the winner and this case but there is a new feature coming out for react called server components which I really think is going to Skyrocket react let me just close out of this real quick you can see I have the documentation pulled up for next JS the nice thing about server components is they're going to be in pretty much any framework you use whether it's next JS remix Blitz it doesn't matter whatever you're going to be using with react for your full stack framework is going to include something related to server components and as these become more and more fleshed out more and more Frameworks are going to include it but server components essentially give you a way to really easily render out components on the back end and then serve them to the client side and it's going to get rid of a lot of the really annoying parts of react because like I said doing that to use State and use effect stuff is kind of annoying but it's not too bad it's fairly easy to work around a lot of times libraries take care of all that for you but what is really annoying with react is making sure you deal with all of the data fetching and stuff that you need to deal with so you have to fetch data from the server on the client you have to deal with making sure it's in sync dealing with loading States error States and so on all of that is really annoying a lot lot of the newer libraries kind of take care of that for you where they make it a little bit easier to do and that's kind of what server components is doing for react it's making it so that you don't have to worry about doing all this data fetching on the client you do all the fetching on the actual server and then you just send down the information you need over onto the client so as you can see here you kind of have your server stuff that does all your server stuff and then you have separate stuff that runs on the client for handling the different interactivity of your application if you've been around for a while in the web development world you may realize this looks just like a normal web application like way back in the PHP days and I think that's actually a good thing because react is going more towards that you know server client kind of relationship instead of pushing everything to the client we're now pulling back and taking the stuff that should be done on the server and putting it back on the server which makes writing your overall application much easier to do and as you can see if we just keep going here it just does a lot of stuff for you as you can see there's a clear separation between what should be done on a server and what should be done on the client and this makes writing your code easier and makes connecting the two easier and overall it's going to make a lot of the boilerplate Annoying difficult stuff that react has to make you do to do all that data fetching and syncing up all your state and it's going to get rid of a large majority of that this is why I think that react is definitely here to stay if you asked me maybe a year ago you know what are some of these other Frameworks going to take over I was like hey you know what some of these Frameworks are really cool they're doing a lot of great things that react should think about or should think about doing and now react has seen what a lot of those Frameworks are doing and they're saying you know what we have our own way of handling this kind of stuff we're going to clean up react make it easier to use make it more of a server client relationship deal with all that server side generation for you these things that these other framers have been doing for a while react is now finally getting around to adding that into their own framework and it's going to make it so that react lasts so much longer as well so if you've been holding off on learning react because you're worried it's going to get overtaken by something else don't worry react is the number one right now and it's going to continue to be number one for quite some time and if you want to actually learn react I highly recommend checking out my full react course covers every single thing you need to know about react to go from knowing nothing to be in an intermediate react developer I'm going to have a link in the description to that course right now the course isn't quite complete so I have an email field you can just enter your email and I'll let you know as soon as it's done but if you're watching this far enough in the future it may already be done so if you're interested in learning react I highly recommend you check out that course Linked In the description below with that said thank you very much for watching and have a good day
Original Description
React Simplified Course: https://reactsimplified.com
React was one of the first frameworks to adopt the modern component model which is one of the reasons it is so popular today. React did many things to simplify frontend development, but now there are tons of new frameworks that can do everything React can, but with even more features and quality of life improvements. Does this mean React is doomed to become obsolete?
📚 Materials/References:
React Simplified Course: https://reactsimplified.com
Fireship 10 Frameworks Video: https://youtu.be/cuHDQhDhvPE
🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:52 - React Trends
04:30 - React vs Svelte
08:00 - Future of React
#ReactJS #WDS #FrontendFramework
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from Web Dev Simplified · Web Dev Simplified · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Introduction to Web Development || Setup || Part 1
Web Dev Simplified
Introduction to Web Development || Understanding the Web || Part 2
Web Dev Simplified
Introduction to HTML || Your First Web Page || Part 1
Web Dev Simplified
Introduction to HTML || Basic HTML Elements || Part 2
Web Dev Simplified
Introduction to HTML || Advanced HTML Elements || Part 3
Web Dev Simplified
Introduction to HTML || Links and Inputs || Part 4
Web Dev Simplified
Learn Git in 20 Minutes
Web Dev Simplified
5 Must Know Sites For Web Developers
Web Dev Simplified
10 Best Visual Studio Code Extensions
Web Dev Simplified
Learn CSS in 20 Minutes
Web Dev Simplified
How to Style a Modern Website (Part One)
Web Dev Simplified
How to Style a Modern Website (Part Two)
Web Dev Simplified
3D Flip Button Tutorial
Web Dev Simplified
How to Style a Modern Website (Part Three)
Web Dev Simplified
Animated Loading Spinner Tutorial
Web Dev Simplified
How to Write the Perfect Developer Resume
Web Dev Simplified
Animated Text Reveal Tutorial
Web Dev Simplified
Learn Flexbox in 15 Minutes
Web Dev Simplified
Custom Checkbox Tutorial
Web Dev Simplified
Start Contributing to Open Source (Hacktoberfest)
Web Dev Simplified
JavaScript Shopping Cart Tutorial for Beginners
Web Dev Simplified
Responsive Video Background Tutorial
Web Dev Simplified
1,000 Subscriber Giveaway
Web Dev Simplified
How To Prevent The Most Common Cross Site Scripting Attack
Web Dev Simplified
Transparent Login Form Tutorial
Web Dev Simplified
The Forgotten CSS Position
Web Dev Simplified
How to Code a Card Matching Game
Web Dev Simplified
10 Must Install Visual Studio Code Extensions
Web Dev Simplified
Learn CSS Grid in 20 Minutes
Web Dev Simplified
Learn JSON in 10 Minutes
Web Dev Simplified
10 Essential Keyboard Shortcuts For Programmers
Web Dev Simplified
What Is The Fastest Way To Load JavaScript
Web Dev Simplified
Differences Between Var, Let, and Const
Web Dev Simplified
How To Install MySQL (Server and Workbench)
Web Dev Simplified
Learn SQL In 60 Minutes
Web Dev Simplified
How To Solve SQL Problems
Web Dev Simplified
What Are Design Patterns?
Web Dev Simplified
Null Object Pattern - Design Patterns
Web Dev Simplified
Your First Node.js Web Server
Web Dev Simplified
How To Setup Payments With Node.js And Stripe
Web Dev Simplified
How To Learn Any New Programming Skill Fast
Web Dev Simplified
Asynchronous Vs Synchronous Programming
Web Dev Simplified
JavaScript ES6 Arrow Functions Tutorial
Web Dev Simplified
Are You Too Old To Learn Programming?
Web Dev Simplified
JavaScript Cookies vs Local Storage vs Session Storage
Web Dev Simplified
JavaScript Promises In 10 Minutes
Web Dev Simplified
Builder Pattern - Design Patterns
Web Dev Simplified
JavaScript == VS ===
Web Dev Simplified
JavaScript ES6 Modules
Web Dev Simplified
8 Must Know JavaScript Array Methods
Web Dev Simplified
CSS Variables Tutorial
Web Dev Simplified
JavaScript Async Await
Web Dev Simplified
How To Choose Your First Programming Language
Web Dev Simplified
Easiest Way To Work With Web Fonts
Web Dev Simplified
Singleton Pattern - Design Patterns
Web Dev Simplified
Responsive Navbar Tutorial
Web Dev Simplified
CSS Progress Bar Tutorial
Web Dev Simplified
Learn GraphQL In 40 Minutes
Web Dev Simplified
What is an API?
Web Dev Simplified
Learn How To Build A Website In 1 Hour!
Web Dev Simplified
More on: AI Pair Programming
View skill →Related Reads
📰
📰
📰
📰
Starting the Frontend for a Full-Stack E-commerce Store (Auth Store, Axios, and Public vs. Protected Routing)
Dev.to · Chinwuba
Practice Frontend Typeahead Interviews With AbortController and ARIA
Dev.to · Karuha
Building Maintainable Frontend Systems
Dev.to · Ufomadu Nnaemeka
Using the Publish–Subscribe Pattern in React with Native Browser Events
Medium · JavaScript
Chapters (4)
Introduction
0:52
React Trends
4:30
React vs Svelte
8:00
Future of React
🎓
Tutor Explanation
DeepCamp AI