Why We Should Ditch React 👎

hey guys this video is brought to you by Linode one of my favorite companies I've been doing business with lenôtre eight years now they're growing all over the world they're opening data centers all over the place mine is in New Jersey however they're opening up in Canada Australia India everywhere lonoa makes it easy and affordable to host your app like I pay twenty dollars a month I've scaled it to 250,000 customers in a single month with just using about five to ten percent of my available resources on a $20 a month account so if you guys are looking to host something yourself there's really no better company that I recommend and then Linode so make sure you guys check them out the link is in the description tab below hey guys what's up so in this video this is going to be about why it might be time to ditch react and just hear me out on this now I've been doing react development for five years I've messed with angular view react and all the other smaller ones out there I even got a huge raise one time to actually write react code so I can thank react for that so one of my main gripes in this video is the framework held that we know that we currently exist in right now framework hell is what we're talking about when we look at react we like a view angular and how different all of those are and how they all try to accomplish essentially the same thing so really this whole thing all kind of goes back to jQuery so when jQuery was on the scene back wouldn't react was first getting started jQuery was a miserable way to to develop your website but it was also much much easier jQuery overall is just a library that made Dom manipulation meaning that you could mess with elements on your page make stuff hide and show and it made it a lot easier because it was one single code base that worked across all the different browsers javascript developers used to bang their head against the wall and we still do to a certain extent when we're dealing with IE but Internet Explorer made our lives hell so jQuery came along and made things easier so for a long time jQuery was like the way to write javascript code the problem with jQuery though is when you have jQuery libraries like this even though they're impressive these light boxes here there's a lightbox framework or library that's built on top of jQuery and it's used to obviously display images and capture captions and everything and the product worked really well but problem was is when you go to download this stuff you had a JavaScript file you had a CSS file and you had to have a reliance upon jQuery so when you brought these plugins in there would always be some sort of instantiation code and then the the library itself would be building Dom elements for you and the CSS that you dragged in would essentially be dragged in in a global scope so it would interact and interfere with other JavaScript and other CSS that you have on your page so early on and I guess 2011-2013 somewhere around that around the time that reacted was coming out we started talking about this concept called web components where instead of these plugins that required separate files and you had to drag them all in and they conflict with all these other portions of your page we talked about web components and using something called the shadow Dom which could basically self contain and encapsulate certain pieces of functionality so instead of actually having to drag in a bunch of libraries and such you're dragging in one specific component and that component uses something called the shadow Dom in order to apply the styling and some JavaScript and it was all self-contained so it would not interact and interfere with other parts of your webpage the problem with that is that it actually used real Dom manipulation which was much slower than what job would react was doing when they brought in their library react and when it first got started roughly 2011 or so but it didn't officially come out until about 2013 react basically took web components in a completely separate direction and said hey we're not gonna use the shadow Dom and even to this day it's not going to use html5 shadow DOM and it doesn't it uses a virtual Dom which means that all the Dom manipulation is occurring with JavaScript code that's being downloaded and installed on the clients computer so it's running inside the browser and it's handling all the the HTML so it's all done virtually meaning that it's all JavaScript so it's done with within memory and makes it very quick now react was very successful because of angular is failure now angular 1.0 when that came out everybody was using it everybody was hyping it up and everybody said that this reacting from Facebook was garbage because angular was created by Google and everybody wants to use angle but what happened after 1.3 version1 going through with angular roughly about the time that react was coming out says about 2014 or so angular reacted to what react was doing and decided to rewrite their entire library and version 2.0 basically scrapped everything from 1.0 it wasn't backwards compatible and not only that they decided to use something new and young which was typescript at the time and people absolutely lost their minds because they got really pissed off that like entire code bases would have to be rewritten they'd have to completely relearn angular and they were essentially doing that in response to reiax new library which had this new revolutionary way of using something called the virtual Dom to build out your your UI so when we first started writing react code we were actually there was there was this thing called JSX and we still use JSX which basically takes HTML and well it uses JavaScript and it just combines a bunch of it uses JavaScript to write HTML and it also has a way to embed your CSS and inline using inline styling now this was a big problem for a lot of developers because they hated the fact that you used to want to separate your concerns and you didn't want to mix JavaScript with HTML that was kind of the golden rule up until that point now JSX was also a memory hog so you had to have this JSX transpiler that you would load into your browser and this is before babel was even around so all this learning had to be done right and all this like yet of this JSX compilation even use the react library we were writing in a normal old-school es5 so we weren't even using classes and then eventually Babel came along and Babel took over JSX compilation and then we started getting all these build tools like gulp and now we use webpack and roll-up and all this other stuff but we have to use all these different plugins in order to load components and then have components load and have the JSX trans pile and all this stuff so there's a big huge learning curve headache for react and once es6 came along a react kind of rewrote its library to then use this class-based system where you can see it's actually inheriting from a component and this is where you were you would have a constructor function and that's where you would set up your state and we kind of changed the old architecture I wish I had old react code to show you but I don't - this class-based system and this was a few years ago now about the same time react components started to become widely used they were being used by all kinds of different companies all over the place and one of the problems that we had with the overall architecture of react was that every component had its own self-contained state so what happens when you have components that are living outside of one another so not child components but you have multiple high level components that are all separate from one another and those components need to communicate with each other well it became a nightmare because then we'd have to use all these different event lifecycle hooks from within reiax architecture to do things like send off events so that one component that it could communicate with like a sister or sibling component so that gave way to the flux architecture and then eventually redux because Redux was easier to reason about than flux and flux was basically Facebook's approach to how to deal with a unified state meaning that all the components are updating one a centralized state instead of trying to communicate all with each other the components just had to tap into a shared State so with flux so it was a nightmare people were like oh the you know the architecture sucks like and it really did like when I look back on writing flux like I really did not like that experience so Redux comes along and it promises to be this much easier way of maintaining state but it does so synchronously so one of the things that Redux failed at was a scent like it wasn't built for updating state that could use things like promises so if you had to have Ajax calls to get some sort of piece of data and you needed to update your shared State Redux couldn't do that and even to this day Redux doesn't do that so yeah import a library called redux funk and then now there's things like redux saga and all this other crap but the point is is like the short-sighted architecture of react initially gave way to all these other tools let's be honest nobody likes Dan Abramoff right I'm just kidding and just just joking guys so people started bitching they're like hey this is just too much work for all these different components to be able to communicate with each other it's too much code to write this class based these class-based components using the react library so react then reacted to that and they said you know what this class-based system it's using too much code it's using too much memory and all this other stuff so we're like hey let's use these pure function components instead these functional components that take in some props and they they're basically just JavaScript functions and they spin out some Java so some HTML so here is an example of one of those functional components that does not have the class-based inheritance it does not have to have a constructor or anything like that so everybody's got to pump their brakes restart rethink how they're doing all their react components and and this is like all these different changes going on over a period of a few years and they're like oh I got to be using functional components oh you don't use functional components you're an like I mean like there's like there was that kind of stuff going on it's like oh you use the class-based component there you got to rewrite all that into a functional component and then new libraries come along like swell team and this is actually something where instead of Reax library that you download on the client browser that has to do all sorts of internal manipulation and handling and and dom differing so there's these difference and engines that detect changes and will re render components and such well spell T comes along and says you know what we're gonna do all that work in advance and we're going to compile all that in the JavaScript in advance and it's not going to have to be done on the client so it's a smaller footprint and it's also much more performant on the clients browser so then just like angular reacting to react back in the early days react now reacts to spell T and these in this type of mindset of compiling your application and they come out with something called react hooks so we do away with the function well we don't really do away entirely with functional components but we write functional components in a completely new way we're dealing with state now we also deal and have to relearn and rethink the entire way that we used the component lifecycle and we now declare and build all of our components in this functional way using react hooks and again if you don't use react hooks you're an like one of my recent tutorials that I mean this just came out but one of my recent tutorials on react he's like you didn't use react hooks like what it's like it just came out like the whole point behind this video guys is maybe we should ditch react because all of these changes are because of short-sighted architecture and maybe we all shouldn't be just these herd animals that are constantly you know following the herd from one section of the of the of the field to the other you know I mean we just keep going around in circles and getting nowhere so in addition to all this stuff we have things like ember and glimmer and like react and and angular and view and more and we're all doing the same thing like we keep having to rewrite our code bases and rewrite the architecture through shortsightedness I feel from these companies so instead of just like making the product better and like us making better web apps we're just finding new ways of creating the same web app through the same technology and having to rewrite stuff like to me it doesn't seem like we're getting anywhere HTML and CSS and JavaScript essentially do what most of this stuff does no it's not even mention the fact that there are so many different applications out there that are using these libraries when they absolutely don't have to there are so many applications out there and companies that were using redux just because it was hot and they had no clue why and then we wonder why we have to pay developers 140 thousand dollars a year because they have to relearn this crap like every six months and this is what is called framework hell so what is my proposal I don't really know for sure I'm just spitballing ideas here but I will tell you that when the shadow Dom was first coming out and everybody was like oh the shadow DOM is promising with web components but react kinda did it it's you know built their own component system using the virtual Dom and they seemed to be having success with that well like the shadow Dom was the original intent to kind of solve for these problems these encapsulation problems that we have when it comes to global styling rules and all this other stuff and that's another thing with react components when we first started using react components we ran into the same issue because react components were not encapsulated to the point where like if you wanted to have styling you'd have to put it in line styling from within your react components so then we started getting all these different CSS libraries that would be attached into react so that you could encapsulate your Styles for those specific react components but nothing's worse than a bunch of inline Styles whether it's in the component or not and even if we have tools that can allow us to write CSS outside of the component now there's all these problems to solve when we were trying to solve the problem with the shadow Dom like ten years ago so all that said my thing is that when Google polymer first came out it was an utter piece of crap I think when it was pre version 1.0 because it was so large there was all these different polyfills that you had to download so that this thing could actually run and use the shadow Dom on a bunch of different browsers that didn't support it like earlier versions of ie one of the great things about this project though is that this project's goal is to essentially not exist one day it's essentially just one huge polyfill in order to use the shadow Dom and there's already a bunch of components written and created for us and eventually the idea is that the entire library itself will go away and will be natively supported within the browser through just basic browser technology and as all the browsers get caught up and everybody starts moving and upgrading their browsers to some of the latest versions which you'd be surprised how many people out there still are using like IE 9 and stuff like that it's crazy so if you're a business that's a major problem you have to support a lot of old browsers so I've been writing react for 5 years now I I don't I'm not saying I hate react but what I'm saying is that guys I've had to relearn how to write react for the most part like little tiny tidbits here and there over and over and over again because of the short sightedness and instead of like us just kind of advancing the overall web development field it seems like we just keep rewriting the same libraries and then having to relearn how to use them so the reason why I find Google polymer convincing is because its goal is to not exist one day that your codebase will just work it's just like using the old html5 shim there was a JavaScript shim file that would eventually though that's permits purpose was you had it in your website for so long and then eventually it's just not there anymore because the browser's caught up honestly it's almost to the point where it's like one day and now we have static web sites too when you look at Gatsby jeaious and all this stuff it's like hey we could just spin up some static HTML why not well we could have done that ten years ago but one day there's gonna be a library probably that is just literally gonna write HTML and like every blog is gonna be its own separate HTML page we're gonna lay it just we just keep circling the wagons we just keep doing like we're not getting anywhere it seems like

Channel: Chris Hawkes

Views: 215,312

Rating: 3.7760797 out of 5

Keywords: chris hawkes, framework hell, react sucks, ditch reactjs, ditch vue, ditch angular, angular sucks, vue sucks, google polymer, why polymer is awesome, react 2019, react js, javascript fatigue, you don't know js, ditch react, should i learn react, learn react?, why use react?, react vs angular?, react use case, learning reactjs, reactjs, react javascript, javascript react, react 2020, react 2021, js sucks, hate javascript, ditch js, ditch javascrpt, javascrpt

Id: iRo18pUs61Q

Length: 16min 13sec (973 seconds)

Published: Mon Sep 16 2019

Reddit Comments

[u/Raunhofer]

I agree with many aspects of the video, not all, but many. It's really quite baffling how complex it is to create very simple things in today's web development. It's like we are so accustomed to it that we can't even see the problem anymore.

Remember when you learned HTML, CSS, PHP, JS and some jQuery and that was about it? Now check your project dependencies and see where we've gone. What bothers me personally even more is that I don't really understand my projects anymore. There's so much going on under the hood and realistically no time to investigate it all, so instead, I'm just semi-blindly trusting these 3rd party vendors that they knew what they did. I'd accept this if the final products were more complex than my old PHP sites, abstraction can be great after-all, but no, they're basically the same.

That all being said, as I now know how to do stuff with these modern libraries, it is quite fun to develop with them. And I do enjoy the boosted salary. Was this the plan all along?

[u/pato_p]

TLDW anyone? I am interested at what are his points against React, but have no time to listen through it.

[u/PreciselyWrong]

Aimless, uninformed rant.

[u/tonefart]

Updated video today. https://www.youtube.com/watch?v=p6B_5SubZN0