Hottest React competitor is having a major release - Stream With Ryan Carniato about SolidJS

gonna be soon okay boom uh right now your stream is let's say in the system i'm just showing only the cameras and we can leave it like this the only thing is when i switch into presentation mode i don't get to see myself but i guess i don't get to see myself at all if i'm not in this window right um that's fine i it's something it's something i'll just keep inspiration i will try not to sway back and forth too much that's my that's my little thing okay cool we're good okay we're good i'm gonna start streaming right about now uh wait a second we were streaming a few seconds for a few seconds already but that's good that's good okay hello everyone today we have ryan carneato the creator of the solid js framework which we are going to discuss today hey ryan how are you doing hi i'm doing pretty good how are you doing i'm doing super fine i would be doing much better if it wouldn't be so hot here in stockholm uh where do you live how how what is the temperatures where you live it's it's pretty hot here i'm uh i i'm living in san jose uh california i moved there from canada and uh yeah we we've been in uh it's hard because i still think in canadian metrics so i'm like we've been mid 30s but you know uh what is that in it's like 85 90 um fahrenheit all right for me canadian measuring system or like european or whatever it's like easier to understand 30 is pretty harsh already yeah everything above 30 is crazy crazy not yeah i have hello everyone who's in the comments right now uh let us know what is the temperature where you live how do you sustain yourself during this hot uh weather times how do you survive and we are gonna discuss uh solid because there was a major release of this framework right that's the reason why we gathered here yeah 1.0 uh it's been a long time coming uh but we have finally uh you know put the seal on the apis and uh looking forward to get ready to using it in uh production apps that's that's fantastic news so as far as i know you've prepared a bunch of topics i so the thing about this stream is i believe uh that it will be of the biggest value to people who already work with react because what in my opinion makes solid special and try and like correct me if i'm wrong but that's is because it's it has familiar mental models for react developers sometimes it's even easier to grasp because react has a lot of things that you just need to know how it works it's not that it's logical it's just this is the way it's done uh in solid it's even a little bit more intuitive in some ways right yeah i mean that's my goal that's my hope uh i'm gonna show you guys what that means in a few minutes here shall i get started yeah i think i think we can get started uh if you're whenever you're ready just let me know okay yeah um yeah so let's let's get started all right awesome let's go okay so yeah right off the start what is solid and why you should use it well it's a ui framework built um from its own reactive primitives as core solid is a reactive library and we just happened to make the renderer from the same library and uh uh what that ends up meaning is like uh mexico was just saying react like api but an intuitive execution model um and i'd like to quickly show you an example what i mean by that um let's see here i'm gonna load up the solid playground here and um you might have seen an example uh like this before uh you know with a counter but what i wanted to do was kind of show you the kind of de facto automatic counting example right um and basically you know we're gonna set count here to count plus one already you're noticing a slight difference um from from react because uh our signal which is our primary uh which i call it our primary uh um primitive our our our kind of like our hook is accessed via a function call um instead of just being the plain value but this allows for a few nice things right um as you can see i have just put a top-level set interval here and have it update every second um and the reason we can do this in solid is because components only render once but you know you still might want to clean this up so um there's an on cleanup function here which lets us do this but i think this is the first kind of obvious difference for people coming from react is that um basically the clear interval t basically that's really that's really interesting because in react as component renders on every state or props update uh you have to put all your side effects like this set counter you have to put them into use effect here you don't have to bother right as you said it's run once yeah i'm just seeing uh yeah there we go yeah sometimes the playground it's a little bit new a little bit buggy sometimes doesn't propagate the updates in real time while i'm doing it but essentially you can see it the counter is working we we didn't need to make an effect because the component itself is an effect and that's sort of the mental model difference with uh with with with solid right with react you've been accustomed to this you know view equals function of state that's still relatively true but in react it's it's actually a little bit uh trickier than that because it's more like vdom equals function of state and then ryan could you make could you please make the font a little bit larger like press command plus a couple times yeah thank you so right read on the function state where in you know and then you basically in the background react has a patch function or reconciler let's call it reconcile and it takes in the dom and it takes in this vdom so there's two main phases when you when you build your react app in that you know it's uh it basically has a pure rendering state and then it has a side effect time i'm going to get more into that in a minute but i just want to kind of just as an introduction like here is solid um you know it's react like you see hook like syntax but right away we've noticed that there aren't you know the same hook rules um and yeah to illustrate this uh um i'm gonna kind of show this right um is that um the compiled output is actually one of the nicest things we have here in this playground and it really kind of illustrates um the power here and actually i'm gonna i'm gonna make a i'm gonna make a quick little little change here let's actually go count i'm just gonna just so it's a little bit clearer what's going on right now whatever um i'm going technically speaking if i was to show you this output um here you know i'll do it right here you'll you'll see that the code looks almost identical to the code you wrote that's because um our our our uh reactive is run time based um unlike spelled it we we only really need to transform the jsx and you can kind of already you can just see almost a one for one thing we we make a template here which is just an html template of your element and then we when we render your function we just clone those dom nodes and then we insert this content and return but i wanted to kind of really quickly show here just how um it's gonna use text content it's it's it's it's a property on dom elements uh that you can set and the reason i want to do this is i wanted to show how simple this is especially if you're kind of coming from react's mindset right because i was able to kind of simplify this example quite a bit here because essentially now in this case we know that it's text um when it's an insert it could be you know it's jsx it could be anything it could be a component it could be it could be other you know strings it could be any value it could be anything you can pass into dsx but i'm just restricting it down to text content just to really illustrate for you um what's going on here because basically again we clone our template so we create our template at the beginning then we clone it and in this case because it's text content it knows that there should be a text node so it actually clones the text node and just walks to that first child and then inside here this is an internal function but it's just create effect you can think of it or use effect and react it just calls use effect on that text node sets the data to count basically no matter what's going what else is going on in our component here the only thing that really needs to rerun is setting that text inside that button just just simply that one text node gets updated the rest you can kind of already see this the the only uh the only functions getting imported from the library here that aren't being imported by you are the this template the create component and the effect and the effect as i said is just um like our standard create effect or use effect and react create component is is therefore a reason for for reactive purposes but it's basically uh an identity function and by that i mean it literally just calls counter with the props so you can always pretend it's not there it's just it's just a function call um and the template just makes it into uh it turns a string into dom nodes so like you are in this example literally looking at the whole um like pretty much almost everything minus the reactive system um there isn't really much of a library it's like you're seeing all the work is happening right here in front of you it's just an effect that sets some text content and that's kind of one of the key powers of this approach both from the perspective of being very performant as you can tell it could just be a single pinpoint update but also from just code simplicity and and size right um and let's see here oh looks like my slides didn't update but basically i wanted to show you guys a quick demo in terms of size to show you what i meant um recently um we we created a hacker news a demo um using a beat um with solids new starter and uh and um cloudflare deployed and one of the cool things here you can kind of see is that uh where am i looking for sorry i'm on am i on the right tab i want no no i want to there's no there's no there's no xhr fetches here because it was server rendered um but what i wanted to show here and uh actually it looks like i have some chrome extensions i'm gonna switch this other window here what i wanted to show here was um that of course hacker news is is that um you know the solids main bundle here is about for hacker news example is about 12.2 uh kilobytes and um the page for stores is 1.6 kilobytes um gzipped are uh actually i think it's broadly and and served out over cloudflare and then if we load like another page um like this page um it's about another 164 kilobytes so in total on these two pages we've loaded 15.4 kilobytes right and just for comparison so you can kind of understand um another small framework like spelled um it's it's very comp um which generally is the smallest framework when it comes to uh um most things here uh like simple demos it starts smaller at 10.3 kilobytes but its first components three kilobytes when we go to load the other page um and that's pretty cool's fault has preloading there um it's you know 3.2 my my point is um solids um both is small and scales really well right um as you can see i mean this is still really good the 16.5 kilobytes for the for the for the main pages on the hacker news example but basically once you get past something of this demo size you know um solids size scaling really kind of comes comes into the into picture in terms of um uh bundle size savings um you know it will it will not be the smallest at making it to do mvc or a simple benchmark but um basically anything larger than a hacker news demo um solid is one of the smallest frameworks out there so hopefully that kind of gives you an idea of some of the you know high level benefits of solid yeah that's i think it looks fantastic it's a small footprint like really small bundle size it's fast it's performant and it has familiar api whoa that's really impressive so let's let's dig in into like how to transition my react knowledge that i already have and i clinch to it a little bit like okay it's familiar i like to operate in familiar realm how can i transition to solid exactly yeah so um how to learn solid as a react developer well let's see here like i'm going to point this out right away the similarity here is intentional um we actually kind of had to go a little bit out of our way as you can tell solid at its core is a reactive library but i really i really liked a lot of things react does and that was why i chose um you know to go this way with the with the api um solid has its roots actually in older frameworks like knockout js from the early 2010s time period but those frameworks um you know basically cease to exist after react came out and i think for a really good reason honestly um and i over time begrudgingly uh gain more and more respect for react and i knew that if i was going to come up with a solution that used reactivity um you know in a similar way to knockout we had to learn a few lessons otherwise you know we're doomed to repeat the same mistakes again so things like unidirectional flow read write segregation immutable interfaces is really kind of core and it should be familiar to you as a react developer um so that's where the familiarity comes in right but components run only once and i mean i can't you know emphasize this enough but i i like you you've been watching this demo where you know the account keeps on incrementing i'm just i'm just gonna like really just spell it out for you for everyone here right like this you know this this console log um is let me sorry i have my where is it just this yeah this console log um it only i don't know why there's a all right because that's typing but this console log only appears once right like like this this component is updating this console logs once this is this is still true when you you know when you come up with a nested component like um i don't know let's pretend we wanted to have like uh let's make a nested right and give it some props and whatever okay like let's pretend now that we're we're putting this in a native right something and we're going to we're going to we're going to put props.count through and instead of our button now you know we're going to just go nested oh actually yeah i i did it this way i could have done children but whatever let's let's just call count equals count right and um i should actually clear the console here because it kept on refreshing but let's say you know this this outer components wants this inner component you know so let's clear this again what whatever basically um we we have kind of perfect granular updates here um in that the components themselves don't update just the just the closures over the bindings like i showed previously with that um text text content binding so we we basically having incredible power in that each prop independ independently updates um all the way through the whole tree and it doesn't really end up getting subscribed until you get to that final point right showing the compiled output again what we're actually doing here is we're just wrapping i told you that the quick component basically does nothing it's the compiler the compiler just wrapped that count in a getter this is a getter object you this you can pretend this is your prop object everything that's happening in solid is transparently on the surface in front of you so basically basically you you're seeing this lazy evaluation here right so this count it just goes oh i know this could be reactive so i'm going to wrap it in a getter so when you execute profs.count over here um it's it's only getting executed inside this insert which as i mentioned this is just an effect essentially that does inserting um you're passing it all the way through your tree and it's only actually doing any work at the the leaf node at the where where the dom is being inserted so um you get this kind of almost like streams running all the way through your app um and the main you know um component construction only actually happens on initial render um let's see if i can kind of yeah so um yeah components run once dynamic dependencies yeah i'm going to bring this one up too because it's another kind of difference for you coming from react you might be i i've been using uh the rendering which is kind of obvious need to diff but you might be thinking well these effect functions haven't needed to show their show their um uh i'm gonna i'll keep that there for now but they they they they haven't needed to show their um has its own um console log the count is you know count and i need to import create a fact basically solid has its we're going to be getting some stuff in the console here let's just yeah the it has its own runtime reactive tracking system right which is similar to mob x review and that's just kind of built in that's what everything's built off of it here so um essentially you don't need um you don't need to put the dependencies we know because you execute count as a function for this effect that it's a dependency we know that it's a signal something that we can listen to and it just automatically tracks and the reason this is powerful um wasn't really obvious to me at first because sure i mean we saved writing that array but what the reason it's powerful is that it happens at run time um instead of um at compile time like um some compiled reactive frameworks or even the eslint rules that you're kind of used to in react and what what this means is that um i mean i'm going to set up a slightly um slightly more advanced example here and it's going to just show we're going to we're going to show we're going to pretend we have like a name card okay and you know excuse my simple html that i'm going to use for this we're going to have a full name here that i'm going to do here the reason we're going to do this is i'm going to i'm going to basically make a couple signals we're going to have first name last name right and let's just start this edge or something okay and i'm really uncreative i always use like john smith as like all my examples um oh sorry all right um actually i'm going to change this actually sorry to display name and what i'm going to show off here is that um i'm going to use create memo which is similar to use memo in react and this might be like a little overkill for a simple example like this but i i just i think it really kind of highlights what i want to show here which is that we can we can basically make our dependencies conditional like actually i'm going to add one more signal here um let's pretend we had a toggle between you know maybe it's for some kind of responsive thing or whatnot between showing um between basically showing the full name and only showing the last name and um you know you might have something like if um not show full return first name otherwise we'll return first name last name right so yeah we see our john smith here and we probably need to have some way to change that uh change that last name um so to speak and i'm just gonna refresh the playground here it looks like it's it's getting locked up in some previous update um but basically let's add a click handler here and on click let's um let's basically um set last name to um i'm just going to use the functional form we have that somewhere to react so hopefully when i click this yeah okay so that's great so um and we probably also need a button here to so i'm gonna return fragment and we need a button to toggle show full flash just for our case so let's just add that whatever and and we'll just kind of go uh like similarly um set show full equals [Music] thank you type script um where is my code error fine let's just forget about that for a second and just do not show for those who just for those who've just joined uh a quick reminder that we are right now learning how to transition from react to solid what are the similarities intentional uh ones and what are the differences and right now we're learning about the dynamic dependencies and why don't you have to define this dependency array for everything every hook that you use inside of your solid components yeah yeah no definitely so i'm gonna i'm gonna i'm gonna i mean basically the reason this is really powerful and now that i've kind of got the setup here is that i mean it it might be kind of obvious when you think about it but i just want to really point this out because we're gonna we're gonna calculate i'm gonna put a calculate display name here right just so people can see when we enter this function right and so let's clear let's show our console okay so now we've got our setup we we have a button that toggles between full name and last name um and we have an update so whenever when right now if i click on this what you're going to see is we're calculating display name again because we're adding those exclamation marks on the end now if i toggle this off so that we don't show the last name we're still we need to calculate the display name but now we're only showing the first name we are no longer listening to the last name so what of course when i say that it's not actually doing what it's supposed to do right great demo um that's awesome it's fine yeah i have must have muddled something up here um let me try refreshing doing it one more time but yeah see now it works it's thank you yeah i'm okay i'm gonna try that again it's the playground uh still registering dependencies from the previous edits so when we update the name since the playground is written in solid itself yeah right yeah like this this this this mechanism works right if we toggle off the name and we click you will see that we're not we are no longer um listening so we're not writing out to the console anymore even though i clicked a lot of times so when it comes back you're going to see a whole bunch of exclamation marks but it'll only start logging again when it's there not logging again right so what i wanted to basically show is that at um at runtime we can dynamically change um the array so to speak right in in react it's fixed but in solid depending on what's currently being executed um we we know um basically what has to cause updates so it's not just granular but it's smart um is the best way to put it um is that is that exactly is that clear uh for you yeah i guess so uh hey people in the in the comments section like if if you got questions i think it's a good point to ask right ryan yeah it's a pretty good point i have a couple more react things but i think this is a good point we've covered a lot of stuff so so far yeah so if we sum it up uh so far that we have components that run once we have dynamic dependence series and what am i missing what else yeah uh components run once uh yeah i mean those are the key things for for for for here right closer around dynamic dependencies um and this has a side effect which i haven't got into but you noticed in my examples before is is that it we saw this when we were looking at our nested component where we made the getter um it's that props and everything evaluate lazily um this is part of that run once thing we don't actually evaluate the data until you get into the leaf notes until you where you get we're actually using it um and for that reason um uh things that uh we have to be very conscious of when we access our values right there there is obviously there's these function calls it's pretty easy to tell like if if i went and i um did something like this let's say and put it outside and went const i'll name equals this and then use it here that would be it it wouldn't it would stop updating because it would calculate only once there is a question from the from the audience is there uh like redux style hook just like in react like reuse reducer something similar in solid um i haven't built one in like natively you mo the thing is um it wouldn't be hard to it just wasn't it wasn't the uh it's not the most in react the used reducer is like the most primitive uh hook and they build everything from it because solids like more based on mutation internally use reducer isn't the appropriate um default but making a reducer in solid is fairly trivial um and and the reason for that is because almost all our our uh our primitives um base primitives um actually support reduce of uh reducing functions so i already showed you here that the setter um can can work right from the previous value and um let me that's fine i'm just showing both ways you can set but even this memo this is the previous value here so i i mean we it's very easy for us on a change to i mean i mean this is probably going to be kind of silly but let's let's just do it anyways you know to to to do something like like uh yeah okay i'm just causing i'm just causing i'm just causing chaos here um but you you get what i'm saying right yeah that you can mimic the reducer behavior it's just not needed and the mental model that you is used here is more like as i understand the idea here is that you should treat your data management as like a tree just another tree like we have two of components yeah and we also have a tree of observable things depending on each other for example and they will be and they will be obstructed in the custom hooks that you build basically exactly to the last section today i'm actually going to show uh some redux so um and that kind of mentality so we we will get there a bit later that's nice i really like that components run once because just a week ago we were discussing this weird behavior of user f in react if you update the ref value the current ref dot current uh inside of the body of the component you you you perform a side effect basically you do it in the body of the component and your ref value is just an integer just a number and you say current plus plus you add one you increment it by one it won't increment just by one when you render the component it will silently add plus uh one or two uh additional numbers to it invisibly just because it's doing some funky behind the uh curtains and i i mean this is this is one of those things that you got to be aware of here and and and i'm just i'm just going to throw this example right this still works obviously like doesn't react but i i you know what do you think this bee is like so this is kind of fundamental here and why it and it'll influence you know a few of our decisions but like what what is this b that we're looking at here um because in react you would never probably do this because it's it's essentially just some vdom node doesn't make any sense to you but in solid but in react it would be it would be uh jsx code it would be a function called to react create element you would store like literally a function this would compile to a function called to create element but then what you're actually returning no one does this right you never go like assigned yeah but unless you're trying to insert it somewhere else but this would this would be a b dom node essentially like this compiles to a create call the create call runs when this button here and then return the v dot in solid this is a dom element you are looking at actual button i know it's a little small but this is the ht like the dom html button element here being returned um directly and um this is this is kind of why we run once but it's also kind of really powerful because it just it's it's a very low level abstraction right you you're you're we still use stuff like refs because it keeps our code structured yeah exactly you get them for free basically with this thing as well right you don't have to worry about using refs to extract mutable values and stuff like that like you're saying the really complicated example like i used that use interval at the beginning because if you've ever read the dan abramoff has an amazing article on kind of getting your mindset around um hooks and it's not just hooks it's actually i'd say any kind of declarative data pattern um and in a sense the same kind of mentality is present and sold like when you start defining your data in a way um where you're kind of describing its behavior and kind of moderate like um modularizing it together into reusable pieces it's a lot of same stuff applies but because of react's execution model you have to be aware that the stuff on the outside always reruns and by the end of that example um you know our simple uh you know use interval or whatever like i showed in our first example becomes quite a mess of refs and use callbacks to to basically do something that like intuitively you as a developer would have just like why can't i just write you know uh set interval right and that's that's that's that's what solid kind of brings it's kind of return to like uh you know the simple uh model simply because it's just that much closer to the metal um and there is a question about the b so that's gonna be just a dom actual dom element that's going to be rendered that's going to be just a reference to it exactly yeah fantastic yeah i mean and you know if if we had a fragment here you know uh i think solid might do something smart here but let's put two buttons just to make sure it's a fragment solid might like go oh there's only one thing in the frame get rid of it but i've made two buttons here um you know what what do we got uh it's an array and we're gonna zoom in a little bit uh notes wow that's awesome right uh yeah let's see if i can this is so much more direct i i love it i love it there is no this level of indirectness that is like we are used to it to this virtual domain that here you would get something like json-like describing the the the structure of the of the nodes instead we get direct reference to the things that are in the browser exactly but as i said this comes with a little bit of consideration which i'm going to talk about in our next section if there isn't any any other questions right now should we continue or any more questions um yeah yeah i think i think we can continue i'm checking the comments and there is just amazement from this uh more straightforward way of working with um elements that's super cool but i don't see any questions per se maybe i'm not not seeing them yeah folks if you see that i've missed any questions just please let me know and we can get back to them a bit later i think ryan we can continue now yeah so why use components for control flow this one's a little bit controversial um is it can you please explain what is using components for control what does it mean uh solid has like a four component instead of using map and i am it might be just easier to show you right um i'm gonna i'm gonna show you in steps because i think this is is gonna be valuable so i'm gonna i'm just it's it's related to what i just showed you in terms of stuff just being a dom element let's let's just go back to square one here um with our examples and let's let's actually you know i'm going to open a new playground window just so that we're back at square one okay so now our count is going to be a list and i'm going to set the list and i'm just going to go apples oranges that's whatever i'd probably do that in the wrong order i think there's like a but and uh let's not worry about incrementing it just yet but um actually whatever we'll worry about the button later too so um because solid only does a transformation inside actually i'm not going to worry about explaining that yet let's just let's just return to div for now and let's just do what we know how to do which is list map um let's take the item and this show let's just give item let's let's do this or apples aren't just bananas um you you know you've you've seen this before right and the the thing is there we go it works in solid as does um you know doing stuff like ternary operators right if um if we changed our list so that let's say on click and up with a button anyways um more or less um when we went instead let's go set list this you know and then let's start what if typescript will complain at me probably let's go list and yes thank you typescript i don't feel like dealing with that right now uh yes no check i think [Music] what am i not doing here [Music] it's always the fun part when you realize that you're missing something fun oh no i'm just being dumb of course i'm not seeing anything because i i made it nothing which means i have nothing to click which means this is a really bad setup for this example let's make a button that we can actually uh we can actually see um silly me um so let's get our fragment in place and let's make a button and click and and this is probably just because this is not on the same line as this and that's pretty printed okay my my point is you know you've seen this kind of control flow and react right um and technically this this works in in solid but you you remember something from what i just showed you these divs we're returning are divs they are actual div dom elements so you might be able to guess that there's a slight problem here because essentially i'm going to go back to our original example here it's essentially if we wanted to take this list and say append something new on the end like i don't know tangerines um essentially this works too tendering tendrian's tangerines but what a map function goes over the whole list and returns the new mapped version of the list um this is not good and i i can't i can i can i can show you why um in a second here because let's look i i mean let's see can i can i inspect this specific little thing okay sure it's perfect let's refresh again and i'm going to show you why because when i click this button see how everything redrew this is not great this is actually really really quite terrible when people approach reactively naively and fine grain and try and like build their own renderers and stuff they almost immediately hit this this is why you know there's diffing and vdom you know every framework diffs lists even stealth there is runtime diffing so just using map is fine if you never add items never sort never do anything but with a reactive library you know you do actually need to kind of do a little bit of memorization or diffing so um for that reason um solid has maparade all right and sure we can go you know it might work like you expect see the thing is for ternary operators and conditionals um which um is that everything yeah returning our operators and conditionals i can look at the language i can look at the and symbol i can look at the you know the question mark and i can do really smart stuff like hoist the conditions and do a bunch of memorization for you automatically you don't need anything special there but for a map who knows where that's coming from right like someone might you know it might not be this dot map it might be some custom map it might be some kind of thing that we can't analyze it purely from the syntax so solid provides a helper function and as you will see um if all right let's clear the console here um and then we inspect this now when we click an ad it's only the new item at the end getting added right beautiful this is what we expect the thing was you know this this is kind of our progression right we have we have to do a special helper here and i was looking at this code and i was like oh what like what if the list is empty maybe we should add you know some more options like a fallback what if this is an expression what if you want to filter it then you've got to be like turn this into a function and then because you got to access as a function then maybe call filter on it because this i mean you you can you can do all of this um with the helper and it works but i was just like why aren't we just using components for this components are composable components are you know components basically and one of the nice things about components is that instead of jumping straight into the curly braces you kind of get this structural thing going on especially obvious when you when you use components for conditionals oh you know what i'm not gonna do that just let's let's let's let's not throw away everything here it's funny when we're zoomed in that error is just so large uh let's just grab this i'm sorry let's put in our for loop and let's do this and let's go for each list i'm pretty [Music] let's refresh keep on thinking that i'm missing something just so obvious but this is always fun i probably am this is what happens you turn typescript off um basically we have a four component here and essentially it works similar to what we were doing before with our with our map um maybe restart the sandbox again you know this is just fine i don't want to make that mistake but that's that's hilarious um there sorry yeah so essentially uh yeah there we go so this for loop is is essentially gonna do what we were doing before right just adding the last element but what the end result here is um and it might not be obvious right ways it it it actually ends up tightening up your code a lot i find and it's also fairly explicit and the thing is what i love about this is you've already seen um kind of precedence for um for you know for for components here right i like that they're basically they're authorable um and they're composable right you can wrap you can wrap your own obviously you can wrap functions but you can also wrap components and components but also when you when you think of things like suspense right like what if you wanted you know it's there's already patterns for this kind of stuff like you know like like why not right like i'm just gonna get rid of this for a second you know um like why why can't we just do this right um it actually makes it less verbose than using the helper functions and in so you know when you look at things like error boundaries um you know as i said suspense context there's there's a whole context part there's a whole bunch of components that we're using um for control flow and data injection um already in react you know what if you have a paginated list you know the second you try and build layouts to do anything that's above you know first order you're going to probably be wrapping it in a component so why not just provide a few ones with with solid out of the basis very like of the core we uh you know you can always write your own this is a completely runtime mechanism so if you don't like how my for loop or you know what what i thought was a good for loop is write your own for loop you know you could have just written the map function and called it my4 and run it you know if you don't like this um that's really kind of part of you know this building block uh mentality you you have these simple reactive primitives and you have the components you know the two parts of the puzzle and um you know i find that this experience makes it um really nice for kind of creating your own behaviors but what kind of components for control flow do you get i see that someone asked to show the filter component right there is one yeah no i don't i don't have a filter one specifically like you can always just filter this list right i was just saying that like the difference between the last example is gsx art autumn automatically um takes care of you know wrapping the reactive wrappers for you so you don't have to worry about you know we could just be like filter i don't know i got rid of my data so let's see apple orange um nana now we can go filter and t dot um whatever p equals banana i mean this cannot be very interesting because it's never going to add anything but um let's let's go t equals tangerines you know what i mean like the the the you basically uh for that kind of stuff we're just using javascript but yes the core ones that i talk about is for like this um there's show which is what does it do it's basically like an if statement so like show when list right um we already have the fallback for the for loop so we don't necessarily need this here right now but um you know show show one list and it it is basically again solid actually auto imports these control flows but when you use typescript you have to import them yourself just a nice convenience to type script adds to the whole experience but again you know um um yeah i mean i'm gonna remove my filter but essentially now if i remove this the show should hijack it before the four does right like so we basically have show which is again a conditional it has a when and then it shows the children otherwise it's fallback um we have switch match which is kind of like a router kind of setup which lets you uh like switch um a whole bunch of conditions and then pick the first one that matches um suspense um portals dynamic which is let you do like there's a lot of them um i i'd say well not a ton there's about eight of them um if ever in question i actually have tutorials ontologies.com about these um which kind of give um good examples right what we got show for index switch dynamic portal error boundary and there's the suspense and stuff and suspenseless and stuff around there too but like uh so we go through everything basically all of those control flow components right for example here we have show show show show you nest a bunch of shows you're like no i don't i don't want to nest a bunch of shows i'd rather just switch match match you know and basically and using the fallback on the switch you can basically create um kind of if else changes using this it's this is good for when you just want to kind of like throw together some simple like tab navigation routing kind of stuff um basically a lot of the the simple pieces are here made for you um you know i'll show one more off dynamic um which again starts probably as a switch match where you're kind of choosing which component you use based on the switch match but you can also just iterate over them as a sorry you can also just use the options in a dynamic and this will this is doing a lookup where it basically looks up which component you need you want to use and just renders it in place based on on which one you pass is the component prop to the dynamics so we we have a few different patterns here for control flow but yeah if you if you look at most uh frameworks that support stuff like dynamic like spells component or view i mean this is kind of where we bridge the gap here is that for reactor libraries you do need those helpers right and it comes a bit with like running once but um it just felt like components were already really powerful composition tool to use here cool um any other questions on on this on this topic uh yeah there was one question about the sync but i think you're going to talk about the about it a bit later yeah we'll see time to get into async i'm gonna we're gonna talk about stores here which is is is a little bit um sort of related so um yeah as a let's wrap up on components for control flow and look at state management sold and um the first thing that i'm going to bring up here is the contact api and let's see i'm going to maybe use one of my previous examples here yeah this is this is a good one here and i do this a little i do this sometimes when i'm i'm in here just because i don't like wrestling with types when i'm in a live demo um and this context always requires some some typing as you can imagine because um and yeah because you have to be able to pass this through your your old your whole state so let's make let's make a counter context right um context works a lot like react um i actually even use use context in a similar fashion um it's it's just a good pattern for dependency injection and it's one of the re one of the reasons that i use this pattern is because reactivity um works on like kind of like a tree and nested hierarchy so it actually fits really really well with it so um let's make a let's call it uh counter provider this should look familiar to you if you've if you've used um if you use react contacts before what we're going to do is we're going to we're just going to i'm just going to pop this whole thing up here like why not right and then return what was it counter provide counter provider value equals yeah generally i'm actually i'm actually going to make a store here i'm going to call it store just to make it a little easier because i like couples i i ever since i saw react hook i've been i've been i've been a pretty big fan of these um you don't have to use couples with solid i just i i just have this this like of them so whenever i when i get the opportunity for full name probably is an internal detail it's a display name um i just i just like separating my reads from my rights um go let's go we want to um toggle um toggle display name and grab some stuff here bear with me a second as you can see i'm just hoisting this stuff out into uh into into um my buddy um into a i should just pick some of these errors right now so it stops complaining at me um [Music] this is context up provider and counter context provider and format format that for a second and we have one other function right which is um append last name let's call it and and as you can imagine this isn't going to be any different than react right we're just going to go like uh cons see for our purposes we actually don't even need everything we only need display name here i think and okay so i'm actually just gonna do this okay so we're gonna go display name toggle display name and append last name equals um whether views context um i call it counter context that's fine it's not a counter um and then this simply becomes toggle display name and this simply becomes and last name and then i'm going to go counter provider here sorry i know that's a little bit long on the setup but all right let's i'm going to quickly recap for those who have just joined that we are looking at the demo of solid js context and how is it different or similar to react so are we back in our yeah okay so i just hoisted everything everything out into uh context provider and we're basically passing in the store now without passing it through props right we're setting up our provider around our component and it's it's basically setting up a bunch of reactive values we're sticking them in in a in a store that we're providing to the provider and then wrapping the children um and from there we have the ability to toggle first name last name like we did before and append it um the the the really cool thing about using um context with solid and why i recommend it besides the fact that it lets us handle disposal of subscriptions automatically because the thing with the reactive library is it's based off subscriptions you're always like firing events more or less so by putting it part of the tree all the disposal and everything is hand and scheduling is handled for you so it's really beneficial but the the thing is unlike react i mean we already did the demo right you console logged all throughout the component tree there's there's no actual um need to worry about overhead or performance right uh um basically like one of the big things that comes up a lot is like oh you can just use reducer plus context and replace redux that's not true um and you know basically the reason is you you can do stuff to guard but in general look where the context provider is it's at the top of your tree right so you know it's wherever you inject it so if you're not distributing it at a really um you know like where it's being used what's what's going to happen is you're telling the whole react tree to re-render to get you that value sure you can memo components and do smart stuff there but generally speaking setting context is just setting state high up in the tree and causing the whole thing to re-render um whereas in solid i already showed you that none of the components we render it's just you know pinpoint upgrades or subscriptions to where they used like so in the same way you know this display name is the only thing that's updating that that effect wrapping that insert is the only thing that's updating even though we're doing a bunch of this mechanics it doesn't matter how you how you abstract this out um that that is you know this is the only work being done um you know this completely scales from that perspective that's so cool so it's like it's it's very similar to react context but the subtle difference is that the whole underlying mechanic is different and it allows you to think much less about the optimization because it's like it's way safer in terms of wasting re-renders they they just won't happen you see stuff like recoil right and people are like oh you know like recoil you get these atoms and only those components update well in solid it's it's not even the components it's sub-component level updates and you don't have to do anything special you just use the data you know that's provided for you and you automatically get sub-component updates um you don't need recoil or anything you know fancy to do that um that's fantastic that's really awesome yeah so um yeah this this is this context mechanism is that um let's see how we doing yeah uh so context api that's that's that that's the thing uh the the you know the main workhorse here of how we get uh you know global or shared state solid also provides a store mechanism which i'm just going to keep on going with this example a little bit and even though this example is really simplistic here um you know in terms of just you only need the display name and only need a couple kind of toggle things um i we have a primitive called create store and where its value really comes in is it allows us to use proxies and this is something common um in reactive libraries you find in mobx you find it in view and this can reduce the need to create like a billion signals right um but i'm going to uh i'm going to create a store here and there's a few subtle differences stores and solid are immutable uh by default um there's a produce helper that works kind of like immer and there's a fully mutable store form that works like mob x review but in general i'm we've been trying to promote like uh you know unidirectional flow and immutability so um but we can we can now let's let's let's let's transform our example here to using storage so now let's what's nice about stores is you just get to just kind of um just use plain objects um and what it was this one uh i called it show full by default and we have one more thing don't we we have display name so let's let's do that get this my name i don't support setters but i support getters because why not um and i'm gonna have to i'm gonna have to edit this a little bit um right and how is this uh solid jazz store different or similar to svelte store is it same concept like is it similar oh let's see well cell store is more like what we were just doing if you if you just like made a signal somewhere like if you just in a file went like create signal and imported it that's a spell store it's it's it's just like uh it like i mean the the the they set up the api more like rx but you can just picture literally if you just open a file and create export default create signal that that's a spell store um there's really nothing to it um i felt with solid that we needed to do something a little bit more sophisticated because i mean anyone can just go create single like that's not that that's not providing that much value like that's part of our core primitives and solid everything's the same like whether using a component or not a component so we don't need to like call out you know a simple like basically let in a felt in this felt component does simple updates ins and then when you want to pull it outside of a template you have to use a store in solid the let can be used outside of the template you just don't need a different mechanism to do the same thing so uh for stores this is for more sophisticated cases because um the the and the reason this is important is that like like in this example we already showed it these pieces all update independently right like you could not listen to last name or only listen to first name and you don't want you know everything to to to re-fire right you want independent updates so i wanted to make a mechanism such that um that it would be possible so that you know and so it would be possible so that users could more or less just write plain objects and get those fine grain updates automatically like each of these separate keys updates and subscribes separately so you're not just like you know like a typical immutable store you're not like going okay now that you set the whole value everything that listens has to update no it's only the pieces you care about um so this this lets you you know write stuff in a really kind of simple way but actually still fully leverage uh granularity um so yeah so in our case now we don't have all these specific setters so we're not now we have to do stuff like how do we set full name well we just go set state um i'm actually gonna i'm gonna finally upgrade this one to this but what were we doing we're showful you can use object form too if you want um but i'm just going to um i'm just going to use the recursive like the function form center but basically our our setters uh support objects and merge objects like like uh like react class components used to but they also support nested paths um so this this way we don't lose the information about what has changed here um last name right one of the biggest problems with immutable changes is you you basically have to update the whole thing and then diff it later to figure out what's changed in this case we know what's changed right it's just full uh you know last name or whatnot so um you know this should just you know be working and then let's go here let's let's call this store and we kept this and then the only difference i have to do here is now instead of display name as a function we should just be able to go store.display name now if i did everything perfectly right this this will work of course my chances of doing that are on this demo today seem to be almost almost none so um let's see if i got an error oh of course me it's it i'm right before the 1.0 release i moved create store into its own its own um sub module there we go toggle toggle right so there we go so instead of having you know all that uh all that kind of logic before as a whole bunch of signals we now were able to just create um create a single store object with all our information and get that same level of granular updates um through our context provider just through you know exporting it and accessing it like normal variables that's that's really impressive by the way ryan will the code examples that you're showing right now be available after the stream somehow can you share the links maybe yeah uh i'm doing these on the fly but the truth of the matter is all these examples are actually in the tutorials i just thought it would be i i thought it would be uh you know beneficial to kind of work through it as we went although at times it's a bit late awesome then i'm gonna just add the link to the tutorial so that people can practice and try them the trade for themselves yeah i think it's always better to just like try it out yeah um we've been fixing some bugs on the tutorials i'm hoping that they're they're they're in a good state for you to use but uh um yeah uh in general all the lessons are there all the learnings are there uh we've written 40 plus tutorials for all the mechanisms um on the topic of state management i just i'm going to actually use a tutorial for the next one because it just takes too much setup for me to show i want to show you one thing because stores i showed you how you can use contacts i can show you how you can upgrade that to kind of make really easy nested components but we could still use third-party state management right you know i i'm a big fan of x-state as people know and and um you know patterns like uh redux and why not still apply here you know especially in immutable data stores the thing is solids um fine green reactivity sometimes makes it less interesting to use with reactive libraries simply from the fact that we've already got those pieces built in right you you know things like recoil or joe tie you know maybe don't aren't necessary um someone did make a uh port of z stand i think i think for solid but i'm generally speaking uh the place where we kind of end up getting some extra added value is if you if it's it's often easier with global stores to represent them in like large immutable data structures because you want to uh um have real control over the flow and even though solids own state ensures that by being you know read-only and by you know having these explicit set of kind of patterns you know redux has great tooling so like let's leverage it you know x dates visualization tools wonderful ways to kind of keep track of what you're doing and um i want to just kind of show this next example here because i i did it i just imported redux you know um and and you know i wrote a simple redux uh wrapper now to be fair uh you know there is some code here so to speak um so you know maybe i should publish into a library at some point but you can also see that it's actually not a lot of code this is 22 lines for i use redux hook and the reason for that is that um solid stores incidentally have a reconcile or data diff function and this lets you take immutable data and then pour out granular updates so in the case of something that follows like rx js style subscriptions or something you know which redux does you know any subscribable um it takes a little wiring but i basically we create our store from the store's initial state from redux if you're familiar with and then we subscribe to the store and basically we call set state with a modifier i call it which is reconcile we also have one called produce which lets you do stuff like immer but what this does is a simple data diff and this same pattern applies in an um x state as well i made an example um where you when you get the next state you simply diff just the data and then and and then when through the setter function and then all you have to do is set up the cleanup so you unsubscribe from the store and then all i needed to do besides that which is more from my convenience is i wanted to map the actions so to speak so you've probably seen this before you know this is a simple to do example we have the ability to add and we have the ability to toggle a to-do right um and what what you know i basically mapped these action getters um in here and i i realized i'm kind of quickly going through this but the the point is that in the end it's our tuple again we have a store and we have our our actions um that basically called dispatch in the background for your redux store and then um then you just kind of listen to it and and here's the thing you know i'm just using the actions in place like you'd expect and then i'm iterating over each of the to do's stored out to do's and displaying them and it might not be terribly obvious from this example um but i put a console log inside the for loop just to kind of prove that even though we're using um redux so this is our store sorry just for your information see this is a typical redux store we're we're we're we have our to-do's we're spreading them and adding the new to-do when we're toggling them we're doing a map and we're you know returning the new state this is this is straight redux right but i i what i wanted to to show is that through that reconcile function in our that's kind of abstracted away in our hook here or primitive um we we essentially are doing the data difficult i'm putting a console log right in this for loop to ensure this because this should only run once per item that we add because um the diffing should be smart enough to know that when we add new items not to recreate them so when we add this to do now we added the new one but when i toggle this it's not console logging because updating that nested completed value is even though redux is spreading and cloning it solid knows that it's only that pinpoint update of completed that needs to be updated again it's just this style binding that is updating it's not re-rendering the whole tree it's just re-rendering this one style binding and that's that's with just your normal redux store so you can pull in something like xdate or something like redux and use it all immutable essentially and in the end you still get pinpoint granular updates when you use solid i don't know that's that's that's that's just fantastic i i really like how you get this granularity not for free because that's the whole point of this framework but but kind of kind of you don't get the screwed updates where the whole thing has to like be updated when one little part of it changes yeah exactly like it's it's just like the the this whole mentality of of kind of building it up and to be fair um this used to be slow like knockout if you go find benchmarks in 2014-15 you know even old ember and stuff you'll this used to be slow thing to do subscriptions are expensive to set up you know that's what you're thinking but yeah because the compiler it solves that part the compiler gives us all um optimized creation paths so we this approach is always the fastest to update but it was never the fastest to create but the compiler bridges the gaps and allows us to have both the fastest creation time and the fastest update and then boom we have it now yeah that's that's cool um that's that's mainly what i want to cover in the session today in terms of our lessons but i am i think it's a good time probably to kind of do some questions um q a and kind of uh you know answer yeah i i kind of like a banner saying that we have a q a your questions okay yeah i can't see the questions because the way the streaming setup is yeah i'm gonna i'm gonna read them up yeah i screwed up a little bit with the setup today if i would create it through the stream yet you would see them but unfortunately the stream is created through youtube and it cannot hook uh the comments section so i'm gonna read the questions now uh please ask dear folks would be cool to see a sync data like how much time do we have i think how long would it take ryan do you think would cover it it would take me a while to type the stuff but if we want to just go over a couple of tutorials and i explain it i think i can do this pretty quickly um yeah let's do this let's let's let's go through the existing tutorials right because what what basically the whole async section here is um the basic thing in the same way it was introduced with react was this idea that um that we have uh lazy components right and um the the the underlying mechanism isn't too important but if in our typical app you just imports you know greeting but i'm gonna i'm gonna solve this with the async okay so lazy looks works just the same way it doesn't react you just wrap the it and it expects the default import and you get greeting and then you just use it as a function and you pass the props and this loaded so fast you didn't even see it happen um in this example unfortunately but you can this this is the most basic part of async i don't think we need to dwell too much on this just know that there's no suspense boundary i think it's very important to note that you can use the in the async stuff in solid without suspense um it just suspense gives us a way of orchestrating it but solid is just signals and it's all granular anyways so we don't need suspense in order to to use async stuff we can use lazy components as it is but like suspense is important for orchestrating things like server-side rendering um so there's lazy and then there's resources and resources um are this special kind of signal and you might wonder why even bothering with this but it lets us remove the coloration from our code so instead of basically uh instead of uh like having a weights and asyncs you know permeate through your code we now just turn it into a signal again this example doesn't have suspense um our resources have a few states built into them like loading that'll be helpful here so what i'm going to do is i'm going to solve this one and essentially create resource takes in an input usually a signal something dynamic that updates and then it's provided a fetcher which takes and what's in the tuple uh yes uh the the the tuple returned is the first one is just the resource which is a signal um and then the the the other side are mutators you might need it's not too common but like if you need to re-fetch or like any kind of like extra function type stuff like uh yeah refetching's one directly mutating the underlying cache is another um i modeled this after swr and react query it doesn't have the caching built in so that's something for the you know community to build better patterns on but the basic mechanism has a very similar uh api so what we did here is the fetch takes the id and you know this is an async function that returns the json and the user it's driven by this user id um and so you know as we update the user id we it will automatically re-fetch with the new data and handle race conditions for you and then we can even show the loading state if we want and i'm just going to stream file so here i here i am i'm just going to fetch this so this is the the star wars api you've probably seen it before and you know as we load you can see the loading spinner come in and you know i went really fast it basically it handles race conditions um and i wish there's more to show here but really it's quite simple you just you just have a driving signal and kind of like your cash key even though it's not using cash generate your query and then you have an async fetcher the reason these two are separated um is because for ssr we can do really cool stuff like start fetching on the server and then stream the results into the resource on the client um so i need them separate so that we can still track the reactive stuff on the client yet basically sub out the promise so that we can basically like as i said stream from the server into the client um is it demo somewhere like in in this tutorial is it somewhere uh that the ssr isn't in this tutorial um but the hacker news demo that i showed you does that it's it's doing using streaming ssr um on a cloudflare worker um which is pretty cool feature i know people are really excited for that when it comes out next year in react 18. yeah and the another question was about object 18 and partial hydration um yeah uh yeah i mean partial hydration is a tricky problem um i'm not really we have what i call progressive hydration in that we capture the click events and the events that are happening on the page before this the like main bundle loads and then replay them um and solid has some smart stuff where top level templates uh don't need to get shipped to the browser but for nested templates that are under stateful things i don't have an equivalent for um server components as of yet although admittedly i don't think people should be focusing on partial hydration in the server component side it does reduce size to be sure but yeah it's it's if you're in a single page app you're routing from the the top like you're almost always gonna have a nav and then and that those parts solid can eliminate like the nav and up but once you're navigating the page you're swapping out that content and sure you can with server components you could potentially re-render that on the server however um there's there's basically there's only the interactive parts need to get shipped to the browser anyways it's the best way i can put it and if you if you've seen solids um uh compiled output like i showed earlier we are only creating code for the reactive parts right um if if if i took this example and just went like i don't know like something stupid like like let's just let's just go let's go if hello you can pretend this is some something that just doesn't need to be written you know um sorry i kind of just to kind of show you what i mean um but look look look look at our component code you were i'm sorry this there's this you know we don't even need the signal look at our component code we're just cloning something and if you look at our hydration code um it it goes get next element which means possibly use this template or not so what i'm trying to get at here is components that are static anyways which are basically the things that are server components in react don't really shift any code in solid anyways except for the templates so like and you have to ship the template anyways for real exactly if so it's just lazy loading it's it's not even like true partial hydration like you find in a multi-page app like you know something like marco um is is different it literally never has to shift that code right even to do server components react you still have to ship that 50 kilobyte runtime you know like i i i think sir i think partial hydration is an area that's going to involve a lot of work and improvement in the future and it's going to be a place where you're going to see like improvements but like honestly most like spa frameworks today like i just won't really concern yourself with the solutions really are apples to oranges between like marco astro like if you've seen astro astros doing islands and partial hydration as well but but like nextgs you know it and you know server components these are not equivalent things um they the benefit for them is you get to write an api in your component you get to write this single experience you don't need graphql you can just you can just uh you know write your apis do all the special per route formatting the problem is in your typical client-side app you've got to bring in low dash and moment and all the stuff to basically format your apis because you're not going to write an api for each component you have you you write a generally and then you do all the formatting work what server components do is let you go oh no i'm going to do that formatting work on the server so it saves a lot in your in your bundle and you know i i'm definitely you know in our new starter that i'm coming up with i've been working on gonna have ways to do achieve similar things where basically we have you know built-in kind of api endpoints you know per component kind of like server component kind of set up but generally speaking um it's just it's it's not the same as marco or astro which like never have to ship that javascript all right so we have another a bunch of questions which i would summarize as can we have a cancelable request mechanism like with the consolable promises or something yeah yeah that's interesting um i've actually played with it but i mean since the mechanism is just promises you can cancel them um i haven't i don't know how that works in terms of like if they get rejected i don't see haven't played with cancel um much but it seems like a good feature to look into or to add um because essentially uh we have error boundaries so like if if if requests fail what resources do which is kind of smart is they fail in the service layer but then they they catch that error and then they put in the resource so if you read the resource somewhere in your view it's actually the view that throws the error and then it gets caught by the air boundary so um like i don't know if cancellation ends up falling into the same category but by using resources we know we basically detect everything where they're red so we can kind of push the processing to like so you can display the right stuff in your view um but otherwise i would i would suspect this just has to come with like this is this is a very baseline api it's very prim like very simple it would be building stuff around create create resource or you know special promise handling stuff i just the creator resource itself is literally just a signal that's aware that um its data can be stale so it's just a matter of you know handling the promise of appropriately um i might need to i might need to look at how cancellation is handled but i don't have a solution for that but if anyone wants to come to our discord and help you know let you know give me some ideas i'm i'm definitely interested in working through it yeah and i will add the link to your discord in this video description please send it to me in private messages so i added to the to the to the description and let's answer the last question and before we wrap up and it's about routing like can you do multiple pages applications uh because i believe there was something about routing in the major this major release yeah uh we we didn't yeah i right not in the release itself but i've been working a lot on routing um i started the work a while ago because i'm a big fan of amber router and nested routing and um basically there was a new release of solid app router which basically brought a lot of um uh brought a lot of like react router 6 features in um we kind of do the same thing where we kind of marry both jsx routing and config based routing uh so you can do like file based routing and uh gsx routing to be fair the routing solution like react routers felt router pretty much every single page app router is still you know um you know it's for single page apps type design you can do static rendering right all single page app means is your application has a single entry point um exactly and then you can generate as many pages as you want or you can serve them dynamically or statically whatever but that's that's the fundamental difference between a single page app and a multi-page app when you have a multi-page app your application has multiple entries and presumably obviously you can put a router on each of those pages or whatever if you wanted to but i think um the beautiful thing about multi-page apps is they don't require a client-side router you just you don't need a routing library you use express or polka you know in cloudflare or whatever like you know or you know i'm sorry polka's like express or the the new one from luke edwards i remember the name of it but but essentially you just you you just you just use server routing for a multi-page app if that was the question it it's it's you know v can handle that in your dev setup and then you based on you know whatever you deploy it to you just kind of handle that um i i think there's a lot of knowledge and area that we need to really kind of look at in terms of differentiating multipage and single page apps for people because ninety percent of what we talk about now with single page apps even if it does stuff like static pre-rendering and stuff and i think i think there's a lot of confusion here that i i'm going to write some articles more about this in the future yeah and you have some amazing articles i love the one explaining the granule like fine grain reactivity patterns that's fantastic that really improves the understanding of like react and puts it into perspective you start getting it like okay this is what they meant with the hooks yeah i i try my best to make these complete topics simpler it's it's it's it's interesting to see the stuff through through my eyes i suppose um because obviously i have like uh i have a kind of a different uh perspective on um how these things work but i i have found that if you learn some of these fundamentals um other frameworks will hopefully make more more sense for to you right you kind of get this higher level language to describe them because instead of learning them from scratch every time you see every new framework you're like okay this is this thing it's in this framework and that framework it's implemented a bit differently and like you you get like bigger blocks which you can use to build your knowledge yeah i think it's super awesome yeah and and as i said this came from kind of a very honest place i i was benchmarking i i when i i started i was like okay i'm gonna make knockout fast so i just spent a lot a lot of time benchmarking and then to benchmark the first thing you realize is most benchmarks are garbage and they they've been written to tailor to a specific library or whatnot um so you know i i went through a whole bunch from 2015 stuff from demos and i i tried you know making the best version through them all and i kind of learned a lot of stuff along the way and then eventually you know i found the js framework benchmark um which to my surprise like avenue rich harris like uh big contributors people like to their libraries have actually committed code to those benchmarks like um the this is about as official as you're gonna get for a a benchmark you know we you know i actually wrote the react hooks implementation um because i'm very familiar with that stuff and you know i had dan kind of chipped in and was like no yeah do do this pattern you know so we have input from the core maintainers on that benchmark and uh i just i i've at this point i've i've looked at you know dozens of frameworks because of that i both like audited like all 80 at one point to see like how all of them work and then and then also like i've written implementations for about 12 or 13 of the of the frameworks um kind of as i said working with maintainers and people who aren't as familiar with the benchmark um to kind of uh get the best performance of their libraries and kind of like understand the mechanics behind them so uh all of that experience is really tailored into how i've approached solid um just kind of understanding how most frameworks work at a fundamental level and i hope i can kind of express that knowledge back to to to you guys when you you know read my articles and whatnot yeah awesome and to wrap it up i would like to ask you to share a bunch of links first of all to this benchmark to your articles maybe a couple ones to start with if people are just getting to know who is ryan cornell to what is solid and maybe where should people start learning about solid and how should they approach uh beginning to work with it we've been working on this website and i hope like i hope it does a good job we have documentation now in english uh chinese japanese italian spanish french and portuguese i believe are on the way um so we we you know there's there's docs there's that uh resource section a lot of my articles are here um um not all of these are mine some of them are actually falsely credited to me i think but there's there's at least 50 some odd articles on solid here um we've got some videos libraries um the the site actually has almost everything you need to get started there's the tutorials we have some examples linked to the playground i was using um even media resources if you want to promote or you know make your own stuff for solid um and yeah benchmarks uh i i get the specific links but uh yeah i'll get this i'll get some specific links to the js branch mark on our on our um and our um stuff but um yeah i think just in case anyone hasn't seen this um i'm going to this is sort of where where things are currently sitting um on the js framework just kind of give you an idea of performance here right um this is solid this is hand optimized vanilla this is mikado you can check it out it's an interesting library um legit fastest approach to rendering that i've seen um has some trade-offs but really cool um this is solid with proxies so you can see that using the store mechanism here is actually not much slower than just using solid naked and then you know there's felt um uh view um where are we react angular basically every framework here is there and you can kind of take a look um let me copy that into the chat and then uh i'm not sure if you will be able to send it to the youtube chat but you can just send it to me yeah here and then obviously uh sorry where's our website here links to github reddit discord twitter like honestly just go to solidjs.com and hopefully we have everything you need awesome yeah people go to solidges.com and learn it awesome thank you ryan that that was that was amazing uh you're a fantastic job thank you uh it was a lot of fun i i love talking about this stuff when i get the chance and i love the questions yeah uh thanks everyone uh have a great evening morning day nice week nice end of the summer see you next time bye bye bye see ya

Channel: Maksim Ivanov

Views: 3,368

Rating: 4.9172416 out of 5

Keywords: react js, solid js, solid js vs react

Id: StLjM0Ki6iA

Length: 98min 25sec (5905 seconds)

Published: Tue Jul 27 2021