React vs SolidJS, Fight!

welcome to blue collar coder and this week we are going to take a look at solid js it's a new framework that competes directly with react it's pretty exciting stuff but if you're like oh man just we need another javascript framework i'm going to argue that you're wrong it's been about five years since spell which to my mind was the last major framework so we're pretty much due for something new so i want to start off with a viewer comment i've never seen an expletive framework need so many additional libraries to solve something as basic as state joe tile recoil redux and the list goes on and on this aisle points to a serious design flaw in the underlying react technology and you know what i agree so react is being asked to do things that it was never designed to do and like any good engineers we always have to be asking ourselves knowing what we know today can we be doing it better and solid.js is basically a reboot of react that addresses two primary issues the first is the vdom and the fact that these components re-render continuously it's a performance issue and i'll tell you what solid.js is blazingly fast and the second is state management solid.js has all of the reactive state management built into it that we see today in hooks but done better as if we started from scratch knowing what we know today so let's take a look at how we are going to dig into this so we are going to re-implement this application this is a simple e-commerce application it's implemented in react currently and we're just going to port it over to solid so let's take a look at it first i can go and filter stuff down i can go and click into it i can add it to cart i can add it to cart from the home page we can see the cart over here and i can clear the cart but i can also refresh the page and i notice that the cart still remains because it's stored in local storage so we're going to do all of that in solid js now we're going to our starting point is this repository over here it's got the react version it's got the finished version so you can start with that if you want but you can also start with the starter kit which is what we're going to do and that starter kit is based on solid and i use the typescript starter here so i used this part first and then i installed tailwind on top of that and then i installed solid js app router on top of that because this original page has routes on it and we use react router dom on this react page so let's head on over to the terminal and dig right into it i'm in that directory now and i'm going to copy recursively the starter into a new folder called solid ecommerce and then i'm going to bring that up in vs code and from there i'm going to do yarn and then yarn start and that's how quickly that comes up honestly this is vite and it is incredibly fast so i'll option click on that and there's our starter page it's got tailwind it's got typescript it's basically got all of the tools we're going to need so let's go take a look over at our react code and how that's structured just to get kind of a familiarity with it so it uses no state manager it just uses all of the basic react hooks use effect use state use callback the first thing it does is bring in a custom hook called use local storage it's basically just use state but on local storage that manages the cart this is the app component so it's basically the top of the tree it then creates some callbacks for adding to cart clearing the cart then there's a use effect which goes on startup so that's because it has an empty dependency array that hits this fake api store products page basically just a nice little fake store api and then here's some logic for managing the search bar in that when you are on a detail page like this if you start typing then we're going to see that there's a change to that search field and then route you back to the home page so we can display that that's handled by this system here with this use callback it's got this nice dependency array in there and then finally we've got our basic structure with the header the switches for the router for the home page and then for the product details so pretty simple stuff if you're familiar with doing create react app and then react router so the first thing we want to do is bring across that header so i'm going to go and copy all of the header and then go over into our source folder here create a new directory called components and a new file called header.tsx and then paste that in and the first thing i'm going to do is we're going to get this from solid.js and we need a type called component and we can replace this react function component with just components the only types of components we have in solid are function components again we're looking at this as a replacement for the react that we have today completely is that we started from scratch so let's just try and fix up all of the red squigglies as we go the first one is this use memo so in solid.js the version of that is create memo basically does exactly the same thing so we're going to do a create memo there it's not quite right yet but one of the cool things is it doesn't require a dependency array and i'll get to that in a second why that's the case but now continuing on another big change is class name so we're just going to change all of the class name to class pretty easy right now we've got this link here and we don't actually have react right or dom so let's bring in that solid app router that does have a link which is great but in this case the 2 is just href like that now we've got these issues with product okay so we do need to get the product definition let's go over here to products.ts i'll just copy and paste that into the source folder call it product ts paste that in there so that gives us our interface for what we get back from the api pretty easy okay so continuing on this is an interesting one on change is a synthetic event in react and it doesn't exist in solid what you do get are the raw events because it's a much smaller framework and so in this case that would be on key up and you don't get a target you get a current target all right pretty cool now this is an interesting one so when it comes to solid you don't use the map system to go and iterate through something you use a new declaration called four so i'm going to drop this in here and then you give it whatever you're going to iterate over so in this case it's each and we will be iterating over the cart it's not quite right yet but let's go and keep on going to this so i'll drop this in here so the content of the four is a function that when called we'll get each item in the cart in this example and then return out the elements that are required to render that so let's do the key it actually is going to handle that for us in this case and this is actually starting to look pretty good and then the last one in here is that total and okay so here's where we need to start thinking about this as solid so the way that solid does data management and binding is pretty different and let's go over to app and get that started so we can see how that's all going to fit together so over here in app we've got our component we're going to be bringing in that header so let's do that just like so and we are going to be instantiating that right at the top here now there's a bunch of properties that it doesn't have so we're going need to go and create new state for that so we need a cart and we need a search string so let's start with the search string since it's a little easier so in solid js the use date is called create signal so we'll start off with search and we'll just start off with an empty string like that and we can pass that on to header as well as on set search which will get a string and then do a set search on that string okay now notice that this is getting a red curly and why is that well if i do command k command i on this we can see that this is an accessor if i go to the type definition it's an accessor is a function that returns that type so in this case search isn't the atomic type of a string it's a function that returns a string and when you call that function you're essentially subscribing to it and that's how solid.js does reactive state management when you invoke one of these signals you get a subscription to it and then when the value changes you automatically get updated so let's go take a look over at our header and see how we need to change this this is going to turn into a function that returns a string and cart is going to turn into a function that returns an array of products so let's go take a look now at this create memo and what we really have is cart like reduce like that so that actually becomes a lot cleaner and here's the really cool part so when cart changes total changes dynamically automatically and that's very important to understand because this function header is only going to get ever executed once okay so let's go down and see how we're going to use total so in this case total isn't a value it's a function so just like a signal with a cart total is a function and by invoking it you subscribe to it pretty cool stuff okay so let's go down and continue search in this case again it's going to be an invocation like that cart wanted me in a location like that and we're looking pretty good of course we're not passing in cart or clear cart yet so let's go do that i'm just going to go and copy and paste that create cart set cart start with an empty array and you need to find that as a product so we need to import product and we'll define that that is an array of products just like we would with use date okay let's go and add cart and then on clear cart thank you github nicely done okay so in this case we're just going to set cart to an empty array and let's see how we go all right it's blowing up let's see why it's blowing up if i go over here in the console we can see that our app is not wrapped in a router so let's go fix that go back into app let's go over it into index.tsx and then we'll bring in router from the solid.js app router and just wrap the app in it hey look at that looking pretty good looking good great and let's see if that actually works so we'll go over here to app.tsx and we'll just put that search string in here in a div and again it's not an atomic value it's a function so we need to then call that like that looking pretty good you can kind of see it in the corner there looks awesome so the next thing you need to do is bring in that home page so let's go back over here bring in home page and i'll go and create a new component homepage.tsx again we're going to bring in component from solid.js and we're going to bring in the link from that solid app router cool just like that okay this react function component becomes a component and use memo we don't have that anymore we have create memo now where use memo in react was essentially optional in solid.js it is absolutely not optional each component really only ever gets executed once and we'll see that in a little bit but basically if you've got some code in here don't anticipate that that's going to get run over and over and over again like we would in react if you want to have a derived value you have to use something like create memo so let's get rid of that dependency array we don't use those because when you invoke that function like in this case the function that's going to return products then you're automatically subscribed to that so this create memo knows that by invoking this product function we are subscribing to products and whenever products changes then this memo needs to change this filter memo needs to change all right you also get the search string so let's put that in there and we can see that search it also needs to become a function of location just like that now let's go through and change out all our class names and we'll change out the two to an href on link and there's no key anymore okay so this is obviously in a map which it is so let's go and do a four here and we'll do each and give it filtered products which again is a function so we need to invoke that now we can pretty much take this section in here and just copy it in there so let's go get rid of that paste that in let's take a look so that actually worked yeah that's got a product seems to be pretty good okay so let's go back over to end to app and start integrating this so the first thing we need to do is bring in the router so i'm going to go and copy and paste in this and bring in routes and route and we'll start off a section in here with routes and then within that oh that's pretty good all right and we don't want header we want home page just like that and in this case with actually element and we'll do home page and what do we need on that we need on add to cart we need products and search so we have search that's pretty easy and we have on add to cart that should be pretty easy put that on the next line and then set the card to the existing cart with the new product on there okay great okay but now we need the list of products and so we're going to use something different for that we're going to use a resource so i'm going to bring in create resource and create resources effectively what you get if use state and use effect had a baby api okay so let's use this and we're gonna go and create products as a create resource yeah with a product as an array that's gonna be the type of it asks me a function and let's go get the content of that so that's a fetch to that fake store api and we'll just drop that in there very cool okay so what this is basically saying is create resources looking for a promise that is fulfilled by fetch we are then going to do that fetch and then we're going to take the result of that and pick out the json from that and that's going to be what's going to go into products so let's go and put that into our app like so oh looking pretty good okay let's give it a try let me hit refresh and i get a blow up let's see what's happening okay so let's go over to console and we can see that we're trying to run a filter on undefined so what's happening here well in this case create resource is starting as undefined and then once this fetch is completed then we've got an array so what i need to do is give it an initial value which is just a simple empty array so i do that by adding on an optional object give it initial value as an array and away we go hit refresh again and ah looking really really good okay let's give it a try let's add to cart hmm interesting okay so it zips on over there that's okay let's uh see why that is well if we go over to home page and scroll down we have an event stop propagation in there if we do event prevent default does that help let's save all right looking pretty good all right cool so the cart is updating but we're not actually getting any value changes so let's go and see why that's the case so we'll go back over to header and we can see that i'm invoking cart a little wrong here i'm expecting again that kind of primitive type and what i want is that array so i'm gonna do cart like that that's cool and the same sort of thing over here and then the same thing down here current length just like that all right let's add a cart ah perfect awesome so that reactivity is good to go awesome so before we go on let's go take a look back at app.tsx and see if we can do this a little bit better so we're doing a lot of prop drilling here we're prop drilling into header we're prop drilling into home page and if we continued on like this we'd probably be prop drilling into the product detail page as well and sending up products can we do better well we're used to going and defining state inside the component but you notice that create signal here isn't called the use signal it's called create signal which is different and as it turns out that's a genuinely functional difference because you can invoke create signal from anywhere it's really cool so i'm going to go and take this and copy it and then create a new file called store.ts right at the top level here and you can obviously put this anywhere you want it but i'm gonna go bring in all of that just like that and then i can just start exporting out of here all this stuff and then i need to bring in product just like that yeah it looks pretty good okay so what i can do now is i can go over to my app and i can actually get rid of this and i can get rid of a lot of this and a lot of this all right and i know this is all erroring out right now but we'll fix that so let's go over to our header first and fix that so i'm going to be getting a lot of this from that store so let's go and import cart and search from the store so let's go and clear out this and then clear out all the properties just like so and we don't need product anymore that's nice okay but we are missing on add to cart and also on set search so let's go and create those in our store okay that works and then on clear cart is just set the car to nothing and on set search yep that looks pretty good let's export that to the const nice okay great so let's go back in over here and do on clear cart and on set search from the store okay that looks pretty good not complaining and let's jump over here to the homepage do something similar so we're just going to get rid of all this and get rid of all the props from store we will go get the products and on add to cart i think and probably also search right awesome and it's that easy to transition from local component state to global state so if you've got state that you think it needs to be global you just go and create that you can manage context in this that works just fine too but if you just need to have global state you don't need to go and create context just to pass that around it's all just built right in and it's all reactive which is just so cool okay so now that we've done that let's go over and bring in that product detail page we'll create a new one called product detail paste that in again that'll make that solid js and we get use params from the solid app router great okay that's actually right and we're gonna get products from the store and on add to cart from the store so let's change this react function component to a component get rid of our inputs like that very cool now we have a used memo here so let's go and do create memo again and this one is just finding the product so do create memo and then we'll do products again as a function invocation and once again we do not need the dependency array because we don't need to manually track that just by calling products will automatically be subscribed to products so it changes then we change automatically love it all right so if we have a product and let's just change all these like so very cool and we also got to change all our class names all right that looks really good and on add to cart is the current product great awesome okay let's try this out so let's go back over here to our app and we'll add in a new route and from there we need our product detail page and look we no longer need product detail or any of these boy the code's cleaning up fast i love it okay part detail and now if i click on this oh my god that is so cool all right here we go add to cart brilliant and if i just click around inside of this i still get the state which is great but if i refresh then it's all gone so let's see how we can hold that cart in local storage like we did over in react so i'm gonna go close out a bunch of these windows and then go back into store and i'm going to use a different state management mechanism again built right into solid js and that's called create mutable so create mutable allows you to create a more complex shared structure that works a lot like kind of a valio or a mobx so i'm going to go and create one called cart and then do create mutable and you give it an object so in this case it's just a list of products and we'll start off with that as a product and we'll say oh okay so we need a total and we'll make that a getter and that's just going to return the ah that's actually really good this products reduce total product yeah that's actually perfect okay thank you again github co-pilot so that's going to give us the total in price of all the products so let's go and add on add to cart it'll take a product and then this.products.push product love it okay great and then clear cart and that's just gonna set that product rated empty which is great okay and then we can get rid of the cart okay let's go see how we're going to go and fix that over in the header so we don't have on clear cart anymore but we do have cart and we don't need this memo so let's get rid of that get rid of that create memo up there cool and now we got cart.products.length and then we replace this with card.products all right from here we can just make a function that does cart.clearcart and then in here oh look at that we have already our car total that's awesome cool are there any other issues we have in here oh we got again a cart length so let's do that cart.products.length any other issues looking good great okay moving on home page to add a card isn't there anymore so replace that with cart and then jump down here and do cart dot add cart easy peasy and let's go see same thing i think probably same sort of thing here yep so replace that with cart awesome all right let's add a few things of the cart looking good but if we refresh we still have the same problem we're not doing anything with local storage yet so let's go fix that and we'll go back over to the store okay so the first thing we need to do is get the local storage for cart and if we don't find that then we need to return an empty array as a string because we're going to pass that into json.parse because local storage is a string it's not an object and then to set it we're going to do window.localstorage.set item and then give it the cart and that actually looks really good thank you again github co-pilot and let's save that out and see how we go so let's refresh very very cool okay so let's uh jump over here add to cart add to cart looking really good refresh it again and done so we've seen a lot about how solid js does reactive state management but what's this other thing about the vdom so let's go and do something really cool let's go in in app let's do a console log and we'll do app and then index plus plus we'll make index up here and we'll just do the same sort of thing for the header as an example call that header okay so let's go and bring up our console and see how that worked so we can see that app got run once and header got run once now if i go and add to cart now everything's changing but we're not getting any reruns of those functions and that's a really critical difference what's happening here is this function gets it run exactly once when it's instantiated and then from there this it returns effectively a template a dynamic template and when parts of that template change from this case for example the car products then we automatically go and update the template but we don't rerun that function and that's why you get the dramatic efficiency boost when it comes to solid js versus react let's punch it so let's go take a look at the react code and do the same thing and see what happens in that case so over here in our app.tsx we'll go and create an index and i go on console.log it and we'll do the same thing over in the header and we'll console lug it out of there as well now let's take a look at our react app and bring up the inspector and the console and every time we're adding something to this we're getting complete re-renders of basically the entire stack from the app on down and what's happening is that those functions are creating a set of nested react elements and that's being assessed against the vdom and then the updates are being made and the result is in comparison to solid.js a lot slower in fact how much slower what's there well let's go over it to the solid js documentation and click on the performance item and then there you've got vanilla js at the bottom end obviously that's gonna be the fastest thing if you hand wrote vanilla js there's a few interesting things in between mikado which is an entirely different system there's wasm and then there's solid and so solid is just slightly worse than coding yourself in valuable js and that's the really cool part here as a react programmer see how little difference there is basically in how you code between solid js and react but for that you get this tremendous tremendous performance boost and also a great reactive data management system built right into it okay so one more thing on the performance side let me bring up the terminal here and i'm going to do a build on the react side and then do the same thing over in solid.js land and we can see how big the bundle sizes compare so okay it's over it's done here let's open the build directory on this guy so this is the react version and we can see that the react is about 163k for the framework itself and 4k 10k 12k on top of that so 175k for the entire bundle for this little ecommerce app now let's go take a look over at our solid app and see how that compares that's created this directory and we'll jump into that and in there let's see js oh yeah 6k and then 22k for the vendor library so 28k gets you solid.js and an entire ecommerce application so really really cool stuff okay so i promised the beginning this video explaining why i think that react is actually doing something that it was never really intended to in the first place and that's a bit of a history lesson so we kind of started all this with jquery back in the day and that was a great starting point but when the complexity of apps got too large we decided we needed a model view controller type paradigm to go with and so to do that we created systems like backbone and thorax to manage the view state as held separate from the state because the state managers can be complex and so was the view system and we didn't want to get our peanut butter and our chocolate together like that so everybody thought that was cool except for the fact that the view system was based on templates and wasn't encouraging component style reuse within the system so at that point we got two different alternatives you got angular which basically said hey throw out everything but you get great state management and you also get a cool component system and also react which said hey keep your state management system but will manage all of the view state for you and the only reason why react had any state management system at all was because each component could be a smart component say for example a hierarchical tree and you want to be able to manage what the open and closed items were in that hierarchical tree and that was the only reason why you'd have any state in it at all was to manage that kind of view state and all the actual applications date was gonna be managed by what you'd previously done with backbone and then we said well you know that really doesn't work all that well with react so facebook came up with the flux paradigm which is popularized by redux and that became sort of the standard go-to from then going forward but you always had these two systems you always had to pair react with essentially a state management system because react was never meant to be the state manager and then we got hooks and hooks were close enough to being a state management system where we kind of looked over the fundamental flaws but again getting back my original point it's always important as an engineer to say knowing what we know today can we be doing better and the fact of the matter is react was never meant to be a fully fleshed out state management system and so that's what solid is trying to address it's trying to both give you a performance benefit in terms of losing the v dom but also give you a real world production ready state management system built right into the framework and addressing what the original commenter said which was a fundamental flaw in their react system so a little bit of a history lesson there but i hope you understand and conceptualize now why solid js not only exists but honestly needs to exist if the react ecosystem is to evolve at this point i'm sure you have some questions for me about this really cool new framework if you do please put those in the comments section down below youtube loves your comments and i love answering your comments as well and of course feel free to like this video if you liked it and hit that subscribe button if you want to see more videos just like it

Channel: Jack Herrington

Views: 70,794

Keywords: solidjs, solid js framework, solid js tailwind, solid js vite, react vs solid, react vs solidjs, reactjs vs solidjs, solid js next generation react

Id: OqcHoLWyyIw

Length: 36min 28sec (2188 seconds)

Published: Wed Aug 11 2021