You did a stellar job presenting SolidJS in a fair way, to show how it aligns with ReactJS at the same time. I think it's very obvious that SolidJS is an evolutionary step from ReactJS. ReactJS developers shouldn't be sad about this, but instead welcome that this work is done on the alongside, to prove what we have learned. The React team didn't know what the SolidJS team knew when they started. So obviously the architecture is different, and now ReactJS is locked in a situation where they can't just change everything. Since the similarities are so big, it's not really a big deal having multiple frameworks/libraries. Software engineers deal with this all the time. And it's absolutely silly to pretend like evolution doesn't happen in technology, and say that SolidJS is just a clone, which it clearly is not. Its a step on the evolutionary track.
I am a long time React developer who got interested in Solid, but just never was sold hard enough to switch to it. I watched lots of videos and read blog posts, but it just wasn't practical enough to bring me around. This video did it. Watching the transformation from one framework to another, I got to see it's true value. Thank you! Now I am building a real time node.js backed game with solid moving all the elements around, and with no performance issues. This is something that would clearly been impossible with React.
Hi Jack, I'm an angular developer. I'm now looking to all jsx frameworks and testing them because I consider my self as a frontend engineer, So it's resonable to me to know my stack's frameworks. The way that you presented in this video and compare Solidjs with React it's very valuable to me. Thank you for your great work!
Your videos are so great and easy to follow, if you make a solidjs series or just another video talking about solidjs + SSR I will be grateful for life :D
We get Svelte, then Alpine, and now Solid. The purpose of these frameworks are to solve issues that React has...though it will be a while before they become a marketable skill. I feel the will become relevant in a few years but not replace React. If you like one of these newer frameworks and want to get a job with them, either freelance and use it as your primary tool or build side projects with them and wait until a dev at another company uses it and leaves.
@@agenticmark to be honest I dont think there is a real need for Solid, Svelte, or Vue. They pretty much do the same thing that React does but in a different way. It's like picking brands of water...all of them will quench your thirst, it's just a matter of what packaging you like the most.
@@agenticmark React is awesome, you get to write declarative code in readible productive manner and you get to share them as reusable components. The cracks start to show once move from simple pages to writing complex applications, where you end writing a deep component tree which has to connect to global state where constant updates are normal. At that point you're fighting against React's Rerendering. It's doable but it takes a productivity hit and you could end up more imperative code/structure just to avoid unnecessary rerending, Examples would be splitting components into sub components just for the sake of performance, making sure that local state is close to children as possible, using `useRef`, a hook that was meant for referencing DOM elements, will be commonly used for holding callback references, to avoid stale closures. How about using Redux to manage global state and avoid rerenders? That's fine but you now have to mindful how that state is organized and how it's grabbing that state from its selectors, because that can turn into a bottleneck too. With Solid, when writing complex applications, you don't have mindful, and you end up a fairly fast application. Here's a comparison I found on discord, where YagamiLucifer built the same app in react and then in solid (work in progress). - React version: epic-hugle-6d4468.netlify.app/ - Solid version: agitated-poitras-5889ac.netlify.app/
@@agenticmark that's fair, Redux can be a hassle. Sure it's best to avoid global state, but once you need communication between many different components and prop drilling becomes too much, there has to be global state to take care of that. What state library do you use for your large React project?
@@agenticmark nice to see you here do mentor old junior broke web devs like me for free sometime😀 ,saw a react filtering video of urs,crisp and full of knowledge.. I would like to get employed using code
Fantastic video! Great format to rewrite that react e-commerce site. You're a good speaker and you're keeping it interesting all thought the video. Thank you! Solid-js seems to fix most of the thing that I don't like with React.
The way of your explanation is so good that I felt like I already know SolidJs. I must say that you're the best content creator in the React community.
I really enjoyed watching this video. High informative value while staying light on the mental load. Highly suited for recreational learning, I very much appreciate the effort that went into this.
Hi, Jack Herrington! Your channel and content are the best and highest priority for me in the Front-End world! Thank you for your hard work, it means a lot to me and my colleagues! P.S. I don't know how to solve the problem of the customer not caring about solutions that are not the most popular? it is very difficult to convince outsourcing companies to work with new technologies... Until these technologies became mainstream.
These kinds of technologies usually take off from POCs, admin tools, one off product marketing sites, etc. We had to sell folks on React "back in the day" too. jQuery was (and is) very popular.
Quick fact: it's not vAIt. It's vEEt. That's how it's pronounced, after the French word vite which means fast. Other than that, amazing video. Also, Solid is looking up preeeeeetty good from where I am sitting. Too bad that most companies will not give it a chance since it's not a "known" quantity, hopefully this will change.
Hello Jack, very nice job on tutorial. After going through the SolidJS tutorial from their website, this video helped to understand how I might use SolidJS in the real World. I will definitely checkout what other videos you have to offer. Keep up the fantastic job!
Wow, this is so well done, I was planning on skimming through the video but ended up watching through to the end. Really goes to show the incredible amount of experience you have and the amount of effort that was put into making this. Thank you so much!
This looks cool to me, Especially the state management part, I always wanted to manage using classes with the reactive systems. I know this is not exactly class here. but it at least encapsulates like that. which makes your whole business logic part more grouped and manageable/understandable.
I really like this pattern, managing "prop drilling" (great term to describe that!) has been a bigger holdup for me in terms of understanding how to get started with React.
This is the first time I see someone try out SolidJs. Really cool. No Hook rules. React Hook is a really hard to grasp concept. I'm hoping to see a video showing SolidJs pitfalls and issues so we can see a complete picture of what to expect before adopting SolidJs. Adopting a new framework is a massive undertake. SolidJs look really promising but no one ever implemented it in PRODUCTION environment yet. I'm hoping early adopters will share their experiences with the community.
Another superb video, thanks a lot. Big fan since the days of "Code Generation In Action". I don't think anyone can present concepts in such an elegant and lucid manner. Thank you once again.
The Neo's wow.... was just like my own wow... OMG I can't belive it is that easy to have global state... btw thanks for amazing explanation and comparison on how to go out from react to solid... blazing cool. You rock!!!!
solidjs has many inbuilt features than react but many uses react once comfortable, some will definetly choose solid because concepts almost similar and easy than react also no virtual dom a kick ass feature
Definitely a sub from this. Great job! The paradigm shifts as our development needs evolve, is very interesting to observe, I've worked with react-web-native for years, and state management has Always been one of the main reasons I don't like React, its terrible (you said well, not designed for it), Redux is unnecessarily big, dependencies are a pain for long-life applications.... Now learning more about Svelte and SolidJS, so much of it makes a lot more sense. - Distance yourself from increasing complexity/dependencies - Solve the front-end needs well without over complicating state management. - I like that it is similar to React, makes transition easier for MANY devs. Overall seems like i'll be a happier dev =], will be giving a try on my next small project.
vanilla is superfast and react is very slow. when i created note app with react and vannila js. vanilla note app's DomLoadingTime was 40ms and react note app's was 400ms. Solid.js is very good and i am going to learn it
Great video, can't wait for Solid to become the new standard (hopefully). Honestly it's in a great position for it -- super similar to React which everyone already knows but waaaaay better in terms of performance and bundle size, not to mention developer experience. Not having to debug rerenders ALONE is such a productivity boost. Not to mention how much easier complex state management is. Imagine if the React team themself had released Solid as "React 2" or something -- everyone would have switched instantly.
man, you are really cool! thanks a million for your videos. they let me be up to date)) and I totally agree we always have to think how to do regular stuff as better as it possible.
I loved the video: it gave me a good understanding of SolidJS in a short time, and I'm grateful for that. The only thing that confuses me is Jack's hair. I associate this hairstyle with banking/bureaucracy/boredom. This made me a lot less interested in the video in the beginning. It might only be me, and with such great content, it's probably possible to make a pretty successful channel with any hairdo, but for me, it's just not a great match for his relaxed style. (I must add that I haven't checked out any of his other videos, plus that I just love the background!)
Hahaha, ok. I usually don't think about it too much. As long as it's not bed hair or something. In the future I will see if I can make it more playful or sassy or something.
@@jherr I like your hair alot actually I think it really suits you really well. The comment above seems quite random haha. Your videos are incredible quality too of course.
You talk about SolidJs like it’s new technology, but Ryan has been working on the concept of Reactive Primitives for over a decade now, of course taking much inspiration from ember and knockout js
Hello everyone. Material UI (MUI) has arrived to Solid.js: suid.io First of all sorry for the publicity. The project is new and has been submitted to SolidHack 2022, so any support when the voting started will be very helpful.
22k wow, pretty amazing. I thought i will go for Svelte js next but this looks promising. Can we expect react to adopt what solid js is doing underneath?
It's extremely unlikely. Architectural it is very different. Execution model is different. React had Dom, creator of Inferno one of the fastest VDOM libraries on the team and even that had difficulty aligning. I wouldn't expect this direction from React.
One day we might see it. Similar to how angular js became angular. However that day will not be anytime soon, especially as react is trying it’s best to produce workarounds for its vDOM performance. For example, they are working on auto memoization with a compiler and concurrent mode is already out.
Thank you very much, this video encourages me a lot to try making a couple projects with solidjs. However despite it seems « better » than react in a lot of aspects, I wonder if there is some cons/gotchas to take into account before considering a migration ?
Make sure that there are enough ecosystem libraries available to support your project, or be ready to make the for yourself. In addition Solid Start, the NextJS equivalent for Solid is on the way, but not out yet.
Thanks for your answer, that’s a reasonable point regarding the time React has on the market compared to SolidJS. Taking that into consideration, I’ll definetely give it a try. Please keep all this great content coming sir ! :)
Solid Js is really awesome but underrated framework. Actually I am working on GIS application and using js library openlayers . But I am using react and facing diffculty. If you are using JS , then it will be easy to handle operations because all operations are directly attached to real DOM. So , I decided to give try a to solid JS.
I've just started following your channel. 1 episode explained the differences between Solid.JS and React. There is a possibility I want to change an existing project from React to Solid.JS. I do have a couple of questions if i may ask? Is Solid.JS good for large online auction Applications? And how does Solid.JS hold itself back with Webp extensions?
Both Solid.JS and React can build the same types of applications. The difference is on how Solid.JS handles updating the DOM versus React. Solid's approach is fundamentally faster. In addition the size of the JavaScript sent to the client is smaller. On the other hand, React is more widely adopted, has more libraries and more developers. It really depends on what's important to you. "And how does Solid.JS hold itself back with Webp extensions?" I don't understand this question.
Wow. The only way to accomplish something (far) like this is using an observable impl (like rxjs + observable hooks) but it will still be hardwork compared with solid :D awsm!!
There are bunch of state managers out there that can give you something similar; mobx, valtio, etc. But they are all external to the framework, and then you have to make sure that they are giving you performant re-renders. Becauase the re-render cycle on React, compared to Solid (where it doesn't exist) is punishing.
Unless the component has state, or you change the properties. And then you get a full run of the component function; the hooks, the creation of the react elements, the diffing against the VDOM elements, and finally the DOM update. Which is what Solid is avoiding by using its "fine grained update". Personally I like both frameworks, but as for speed, nothing that feels as close to React, has anywhere near its performance numbers. And even outside of that, it's just a touch slower than hand coding vanilla JS.
Thank you for this amazing video. I really liked solidjs. But i am sad that I think the React is going to be like the new php :( Everybody hates it yet everybody has to use it lol
I am currently heavily invested in stencil as it compiles down to webcomps and has a really nice loader. As a developer for components of an cms, can you build without much configuration independable comps than can be included as snippets in an exisiting html-page and tap into a Shared store with solidjs?
You could probably connect this with Module Federation in webpack and get a really nice loadable set of Micro-FE style components. If I'm understanding what you are going for there.
Hi Jack. May I ask what font is that in you VSCode? I saw a reply to a comment below to a link to your vscode settings but that's not operator mono as mentioned in the settings.
What are your thoughts on headless UI libraries? Solid has a much smaller community than react, but with those libraries (i.e. TanStack Table/Virtual), I can easily create a component just for this framework. Though I wonder if that is as efficient and whether it's kind of makeshift in a way (like using a react component in svelte)
Awesome video introduction to SolidJS, especially for React developers. But I almost skipped it due to the "Fight" in the title. Each framework borrows ideas from earlier ones in an effort to produce a "greatest hits" framework, while using hindsight to avoid some of the hard lessons learned earlier. Solid is just an evolutionary step from React. I don't think we should be considering it an adversarial battle, but rather just the next step in an obvious process. React will continue to be king for a while due to existing projects and job markets, but those with more flexibility to choose the better framework will transition to Solid. Eventually it will be a larger group than the React devs and projects that stayed behind. I see this as inevitable now. It is just too good to be avoided by React developers, because it effectively *is* React, just better in almost every category, and without the weird restrictions and rules and problems.
this is not true, will never be. react will evolve, any improvement done by solid or other framework that are derivative of react will just copied/porter over to react
@@archmad It's good to see some optimism, but it seems to be made without an understanding of Solid. Solid is not derivative, it uses similar high-level concepts and syntax (e.g. JSX) but it's implementation is completely different. Solid is fundamentally different than React and React will not be able to adopting the main differences that make Solid easier, with reactivity and state management a foundational concept, less quirky and so much more performant.
@@appurist you got to ask why would you move. a copy-cat is fundamentally different, why not move to a copy-cat. Vue, React and Angular are different. Look at the past trend. majority wont jump ship because it's fast, it's because it solved programming issue
The reason I consider it adversarial are the psychological tactics of React/React core team. They will deflect and divert, and not admit the shortcomings of React, which we all know by now: bloated size, poor performance. Instead, they market and hypnotize etc. There are so many pain points that its inevitable that React will decline. The React team has done some amazing work, but they've also done a lot of harm (I'm a React dev for 2+ years). When you see what Vue 3, Svelte, and Solid are doing, you will breathe a sigh of relief and build stuff that would take you twice or more as long to build in React. Goodbye, React. You've done well in your time, but your time is up, now begone.
@@dannydevs Nailed it. And yes, all of my future work is with Vue or Solid (or maybe Svelte). I have been doing Vue work for years but like what they took from React for Vue (it's fine for it to be a greatest hits). Svelte took a different approach and gained a lot of my support, but then I needed to return to React for work, but then Solid came along and took the compiled approach of Svelte with no virtual DOM, with the best parts of React for familiarity for devs, and still looks great to Vue developers. I like that it leaves those choices (like where to put your state) up to the dev, while providing all the core features of a framework without seemingly arbitrary rules and limitations, complex functionality or performance bloat. I think it's inevitable that React developers will slowly start looking at Solid (especially since it will be so familiar to them) but just see how it makes the awkward handcuffs come off, and the excuses unnecessary.
Hi There, Great tutorial. Can you do another one explaining how to use solid-js native page transition animation? Is there that on solid? Thanks in advance
When using Solid with PHP (Laravel) does the front end have to be a single page application? Or can I do server side rendering in PHP? If I understand how Solid works correctly, I can compile and then place the compiled code (vanilla JS) into my PHP/HTML web page. Or does Solid kind of/sort of require a Javascript backend like Node?
If you want SSR where you get the page pre-rendered to tags before it's sent to the client then you would need to run Solid on the server and that would require node.
@@jherr I see, so I can compile my Solid code with Node on the server side and then add that code to my Laravel Blade (Html) files? Also if I want to communicate with the server from the client side, how is that typically handled in Solid? (Like jQuery would use Ajax calls. What's the equivalent?)
@@CalicoArchives you would use fetch on the client side from Solid. As for SSR. Server Side Rendering means that you run all of the Ajax requests from the server before you send the HTML to the client. Then you build all the HTML based on the results of the query on the server, presumably in Solid. And then once you have the complete HTML you send that to the client. The presumption is that this model of SSR is better for Search Engine Optimization (SEO). But Google long ago started searching Client Side Rendered (CSR) pages. CSR is more in line with what you are talking about. Sending the Solid application bundle to the client and then having the client send fetch requests back to the server for data and then rendering the result.
Solid js also reRender many times, the only difference with react is that react subscribe the whole function and solid subscribe the returned function, (JSX may count as a function too) so which means that solid js also reRender many times as react, you can check the logs with this example which is the same they have in the official website and I just updated the function a bit to prove that it also reRender every time as react does: import { render } from "solid-js/web"; import { onCleanup, createSignal } from "solid-js"; const CountingComponent = () => { const [count, setCount] = createSignal(0); const interval = setInterval( () => setCount(count => count + 1), 1000 ); onCleanup(() => clearInterval(interval)); return () => { const counter = count() console.log(counter) return ( counter is: {counter} mi contador es: {counter} ) } }; render(() => , document.getElementById("app"));
I think we need a better definition of what "render" means. In the video I used what I would consider the React version of "render" which is that the component function gets re-run. Even in the example you provided the CountingComponents function only ever gets run one, or "rendered" once if we use the React definition of render. If you write the SolidJS component normally: const CountingComponent = () => { const [count, setCount] = createSignal(0); const interval = setInterval( () => setCount(count() + 1), 1000 ); onCleanup(() => clearInterval(interval)); return ( counter is: {count()} mi contador es: {count()} ) }; Without returning a closure that is itself subscribed to count, the only thing that is re-run is code within `insert` that is subscribed to the count. import { template, render, createComponent, insert } from 'solid-js/web'; import { createSignal, onCleanup } from 'solid-js'; const _tmpl$ = template(`counter is: mi contador es: `, 6); const CountingComponent = () => { const [count, setCount] = createSignal(0); const interval = setInterval(() => setCount(count() + 1), 1000); onCleanup(() => clearInterval(interval)); return (() => { const _el$ = _tmpl$.cloneNode(true), _el$2 = _el$.firstChild; _el$2.firstChild; const _el$4 = _el$2.nextSibling; _el$4.firstChild; insert(_el$2, count, null); //
@@jherr I just tested it and I like how it works, solid js just subscribe the part where it is called, I’m starting to like it more, is there any plan for mobile version as react native ? cause I think it would be better that flutter but with react experience 😉
@@FERnandezJjuan you’d have to ask the author of solid-js on that one. I think it’s doable but the compiler would need to know the target and change the code that would update the native elements. The compiler right now is pretty tightly bound to the DOM, which is how it gets the speed improvement over react.
Who's to say it wont become a standard or commonly used? Solid's proximity to React might EVEN be a benefit for job acqusition. It's accessible to a corporate developer crowd and in many ways more friendly. It could basically be an easy transition alternative when a corporation wants to table in something new.
This guy is too good to be getting 6k views, I believe his even better than some other youtubers I've seen with over 100k views.
As someone who has the pleasure of saying "We've worked in the same company", I can only say it's a matter of time. Jack is freakin' amazing.
Totally agree!!!
indeed!
it's all about discovery
that is exactly what I thought when I came across this channel. He is a step ahead the rest
You did a stellar job presenting SolidJS in a fair way, to show how it aligns with ReactJS at the same time. I think it's very obvious that SolidJS is an evolutionary step from ReactJS. ReactJS developers shouldn't be sad about this, but instead welcome that this work is done on the alongside, to prove what we have learned. The React team didn't know what the SolidJS team knew when they started. So obviously the architecture is different, and now ReactJS is locked in a situation where they can't just change everything. Since the similarities are so big, it's not really a big deal having multiple frameworks/libraries. Software engineers deal with this all the time. And it's absolutely silly to pretend like evolution doesn't happen in technology, and say that SolidJS is just a clone, which it clearly is not. Its a step on the evolutionary track.
I am a long time React developer who got interested in Solid, but just never was sold hard enough to switch to it. I watched lots of videos and read blog posts, but it just wasn't practical enough to bring me around.
This video did it. Watching the transformation from one framework to another, I got to see it's true value. Thank you!
Now I am building a real time node.js backed game with solid moving all the elements around, and with no performance issues. This is something that would clearly been impossible with React.
Hi Jack, I'm an angular developer. I'm now looking to all jsx frameworks and testing them because I consider my self as a frontend engineer, So it's resonable to me to know my stack's frameworks. The way that you presented in this video and compare Solidjs with React it's very valuable to me. Thank you for your great work!
No VDOM, Built-in state management, and super lightweight, Awesome! I will definitely give SolidJS a try.
Glad to see another nepali blink 182 dude in programming
cheers and namastey my dude!
@@techhguy 🤣
Soon to be built in router, I believe. Should be for sure with Solid Start (metaframework)...
22:03 Damn, this de-coupliing of state from the components is awesome! Gives me the vibes of React custom hooks.
Your videos are so great and easy to follow, if you make a solidjs series or just another video talking about solidjs + SSR I will be grateful for life :D
You have done such a fantastic job Jack! You must have saved about 10 hours of my life. I would love to see what Solidjs testing story looks like
I'll probably do a few more videos on solid. I like it a LOT. I will add testing to the list of those.
We get Svelte, then Alpine, and now Solid. The purpose of these frameworks are to solve issues that React has...though it will be a while before they become a marketable skill. I feel the will become relevant in a few years but not replace React.
If you like one of these newer frameworks and want to get a job with them, either freelance and use it as your primary tool or build side projects with them and wait until a dev at another company uses it and leaves.
@@agenticmark to be honest I dont think there is a real need for Solid, Svelte, or Vue. They pretty much do the same thing that React does but in a different way. It's like picking brands of water...all of them will quench your thirst, it's just a matter of what packaging you like the most.
@@Geomaverick124 what about the performance differences between React and Solid?
@@agenticmark React is awesome, you get to write declarative code in readible productive manner and you get to share them as reusable components.
The cracks start to show once move from simple pages to writing complex applications, where you end writing a deep component tree which has to connect to global state where constant updates are normal.
At that point you're fighting against React's Rerendering. It's doable but it takes a productivity hit and you could end up more imperative code/structure just to avoid unnecessary rerending, Examples would be splitting components into sub components just for the sake of performance, making sure that local state is close to children as possible, using `useRef`, a hook that was meant for referencing DOM elements, will be commonly used for holding callback references, to avoid stale closures. How about using Redux to manage global state and avoid rerenders? That's fine but you now have to mindful how that state is organized and how it's grabbing that state from its selectors, because that can turn into a bottleneck too.
With Solid, when writing complex applications, you don't have mindful, and you end up a fairly fast application.
Here's a comparison I found on discord, where YagamiLucifer built the same app in react and then in solid (work in progress).
- React version: epic-hugle-6d4468.netlify.app/
- Solid version: agitated-poitras-5889ac.netlify.app/
@@agenticmark that's fair, Redux can be a hassle. Sure it's best to avoid global state, but once you need communication between many different components and prop drilling becomes too much, there has to be global state to take care of that. What state library do you use for your large React project?
@@agenticmark nice to see you here do mentor old junior broke web devs like me for free sometime😀 ,saw a react filtering video of urs,crisp and full of knowledge.. I would like to get employed using code
Already excited for this puppy, if someone starts an SSR framework on solid I am in like Flynn! :)
At the same time, SSR seems less urgent when the js bundles are so much smaller
Astro + Solid
You sold me on your content more than a couple times now. Thanks for tip on SolidJS.
The createMutable give me a vibe of ChangeNotifier in Flutter. Worth a try, since my main tools is Flutter. Thanks Jack! for introducing SolidJS
Fantastic video! Great format to rewrite that react e-commerce site. You're a good speaker and you're keeping it interesting all thought the video. Thank you!
Solid-js seems to fix most of the thing that I don't like with React.
The way of your explanation is so good that I felt like I already know SolidJs.
I must say that you're the best content creator in the React community.
I just started using Solid and I love it. Hope UA-cam keeps producing more Solid and Solid-start material. Thank you for this video.
I really enjoyed watching this video. High informative value while staying light on the mental load. Highly suited for recreational learning, I very much appreciate the effort that went into this.
WOW! It is the best framework I have ever seen!
Best solid video i have seen, thank you so much Jack! The way you explain is super simple to follow
Mind blowing
How solid the SolidJS addresses the issue
Love it
Hi, Jack Herrington!
Your channel and content are the best and highest priority for me in the Front-End world!
Thank you for your hard work, it means a lot to me and my colleagues!
P.S. I don't know how to solve the problem of the customer not caring about solutions that are not the most popular?
it is very difficult to convince outsourcing companies to work with new technologies... Until these technologies became mainstream.
These kinds of technologies usually take off from POCs, admin tools, one off product marketing sites, etc. We had to sell folks on React "back in the day" too. jQuery was (and is) very popular.
Quick fact: it's not vAIt. It's vEEt. That's how it's pronounced, after the French word vite which means fast. Other than that, amazing video. Also, Solid is looking up preeeeeetty good from where I am sitting. Too bad that most companies will not give it a chance since it's not a "known" quantity, hopefully this will change.
Hello Jack, very nice job on tutorial. After going through the SolidJS tutorial from their website, this video helped to understand how I might use SolidJS in the real World. I will definitely checkout what other videos you have to offer. Keep up the fantastic job!
Wow, this is so well done, I was planning on skimming through the video but ended up watching through to the end. Really goes to show the incredible amount of experience you have and the amount of effort that was put into making this. Thank you so much!
wow...... it opens my eyes on good & useful frameworks. Very good educational content, thank you SO MUCH
This looks cool to me, Especially the state management part, I always wanted to manage using classes with the reactive systems. I know this is not exactly class here. but it at least encapsulates like that. which makes your whole business logic part more grouped and manageable/understandable.
What you are talking about is called a ViewModel
Thanks Jack, your channel has become a routine to keep up to date with constantly changing frontend ecosystem 🍪
I really like this pattern, managing "prop drilling" (great term to describe that!) has been a bigger holdup for me in terms of understanding how to get started with React.
SolidJS state management is freaking beautiful!
Man i hope your channel booms. The amount of new infornmation im learning from you is tremendous and really2 useful.
This is the first time I see someone try out SolidJs. Really cool. No Hook rules. React Hook is a really hard to grasp concept. I'm hoping to see a video showing SolidJs pitfalls and issues so we can see a complete picture of what to expect before adopting SolidJs. Adopting a new framework is a massive undertake. SolidJs look really promising but no one ever implemented it in PRODUCTION environment yet. I'm hoping early adopters will share their experiences with the community.
Another superb video, thanks a lot. Big fan since the days of "Code Generation In Action". I don't think anyone can present concepts in such an elegant and lucid manner. Thank you once again.
Oh, wow! That's old school! Thank you!
The share store concept was mind-blowing. Being a react noob, I hate using third party stores and I always forget how to use contexts in react.
Wow this looks so easy. I'm loving this state management...
Wow, this was pretty fun to watch and very eye-opening. Thanks for such a great content
very cool - watching your videos, I am wishing you would provide a tutorial/walk-through of agile use of gedit
Loved the explanation! Subbed
I love Solid's architecture, some really smart decisions were made.
Theme in the description… thank you 🙏
you can use multi curosrs to copy lines in separate places at once :), great vid
The Neo's wow.... was just like my own wow... OMG I can't belive it is that easy to have global state... btw thanks for amazing explanation and comparison on how to go out from react to solid... blazing cool. You rock!!!!
solidjs has many inbuilt features than react but many uses react once comfortable, some will definetly choose solid because concepts almost similar and easy than react also no virtual dom a kick ass feature
Thank you for such a cool presentation of solid.js
Impressive video, impressive opinion. Impressive framework. Loved it!
That's it :) I'm done with React! Great video.
Good stuff. Thank you!
That’s real impressive Jack!
This is actually mindblowing
That’s a rock solid framework..
Very cool, thank you.
It’s a good time to let react developer knows that what is truly reactive is. Vue , svelte, solidJS do before
Definitely a sub from this. Great job!
The paradigm shifts as our development needs evolve, is very interesting to observe, I've worked with react-web-native for years, and state management has Always been one of the main reasons I don't like React, its terrible (you said well, not designed for it), Redux is unnecessarily big, dependencies are a pain for long-life applications....
Now learning more about Svelte and SolidJS, so much of it makes a lot more sense.
- Distance yourself from increasing complexity/dependencies
- Solve the front-end needs well without over complicating state management.
- I like that it is similar to React, makes transition easier for MANY devs.
Overall seems like i'll be a happier dev =], will be giving a try on my next small project.
Fantastic video as always. Thanks Jack!
vanilla is superfast and react is very slow.
when i created note app with react and vannila js.
vanilla note app's DomLoadingTime was 40ms and react note app's was 400ms.
Solid.js is very good and i am going to learn it
Great video, can't wait for Solid to become the new standard (hopefully). Honestly it's in a great position for it -- super similar to React which everyone already knows but waaaaay better in terms of performance and bundle size, not to mention developer experience. Not having to debug rerenders ALONE is such a productivity boost. Not to mention how much easier complex state management is. Imagine if the React team themself had released Solid as "React 2" or something -- everyone would have switched instantly.
man, you are really cool! thanks a million for your videos. they let me be up to date)) and I totally agree we always have to think how to do regular stuff as better as it possible.
Mesmerizing staff.
I loved the video: it gave me a good understanding of SolidJS in a short time, and I'm grateful for that. The only thing that confuses me is Jack's hair. I associate this hairstyle with banking/bureaucracy/boredom. This made me a lot less interested in the video in the beginning. It might only be me, and with such great content, it's probably possible to make a pretty successful channel with any hairdo, but for me, it's just not a great match for his relaxed style. (I must add that I haven't checked out any of his other videos, plus that I just love the background!)
Hahaha, ok. I usually don't think about it too much. As long as it's not bed hair or something. In the future I will see if I can make it more playful or sassy or something.
@@jherr I like your hair alot actually I think it really suits you really well. The comment above seems quite random haha. Your videos are incredible quality too of course.
Dang- React just seems dull/old after seeing this. Definitely giving Solid a shot.
Video Idea: SolidStart w/ Prisma or some DB integration
Thank you this was well made.
Awesome job as always, Jack. May I ask what shortcut/extension did you use to auto select/place cursor on selected text?
Can you send me a time reference so that I can figure that out?
You talk about SolidJs like it’s new technology, but Ryan has been working on the concept of Reactive Primitives for over a decade now, of course taking much inspiration from ember and knockout js
You Sold me Solid
Is it copilot suggests snippets of code while you typing ?
Yes.
OMG, SolidJS is insane
1:30 solid transition 😅
Hello everyone. Material UI (MUI) has arrived to Solid.js: suid.io
First of all sorry for the publicity. The project is new and has been submitted to SolidHack 2022, so any support when the voting started will be very helpful.
Wooooot! Yes yes yes!
22k wow, pretty amazing. I thought i will go for Svelte js next but this looks promising. Can we expect react to adopt what solid js is doing underneath?
It's extremely unlikely. Architectural it is very different. Execution model is different. React had Dom, creator of Inferno one of the fastest VDOM libraries on the team and even that had difficulty aligning. I wouldn't expect this direction from React.
When a library reaches a certain size, it becomes almost impossible to change fundamental aspects of it. So, React is pretty much stuck with its vDOM.
One day we might see it. Similar to how angular js became angular.
However that day will not be anytime soon, especially as react is trying it’s best to produce workarounds for its vDOM performance. For example, they are working on auto memoization with a compiler and concurrent mode is already out.
Nope. Dan Abramov has said as much.
Amazing content, thanks for sharing
solid drummachine, anyone, anywhere: thanks in advance!!!!
Thank you very much, this video encourages me a lot to try making a couple projects with solidjs. However despite it seems « better » than react in a lot of aspects, I wonder if there is some cons/gotchas to take into account before considering a migration ?
Make sure that there are enough ecosystem libraries available to support your project, or be ready to make the for yourself. In addition Solid Start, the NextJS equivalent for Solid is on the way, but not out yet.
Thanks for your answer, that’s a reasonable point regarding the time React has on the market compared to SolidJS. Taking that into consideration, I’ll definetely give it a try. Please keep all this great content coming sir ! :)
Really cool,
Thanks
Solid Js is really awesome but underrated framework. Actually I am working on GIS application and using js library openlayers . But I am using react and facing diffculty. If you are using JS , then it will be easy to handle operations because all operations are directly attached to real DOM. So , I decided to give try a to solid JS.
Good comparison! Transition between local and global states is really easy. And there is no VDOM here. Does it have any disadvantages?
Just that it's new and the ecosystem is still evolving.
thanks for this useful video
I've just started following your channel. 1 episode explained the differences between Solid.JS and React. There is a possibility I want to change an existing project from React to Solid.JS. I do have a couple of questions if i may ask? Is Solid.JS good for large online auction Applications? And how does Solid.JS hold itself back with Webp extensions?
Both Solid.JS and React can build the same types of applications. The difference is on how Solid.JS handles updating the DOM versus React. Solid's approach is fundamentally faster. In addition the size of the JavaScript sent to the client is smaller.
On the other hand, React is more widely adopted, has more libraries and more developers.
It really depends on what's important to you.
"And how does Solid.JS hold itself back with Webp extensions?" I don't understand this question.
Wow. The only way to accomplish something (far) like this is using an observable impl (like rxjs + observable hooks) but it will still be hardwork compared with solid :D awsm!!
There are bunch of state managers out there that can give you something similar; mobx, valtio, etc. But they are all external to the framework, and then you have to make sure that they are giving you performant re-renders. Becauase the re-render cycle on React, compared to Solid (where it doesn't exist) is punishing.
You'd have to use "memo" on a functional component to prevent it from rendering every time in react.
Unless the component has state, or you change the properties. And then you get a full run of the component function; the hooks, the creation of the react elements, the diffing against the VDOM elements, and finally the DOM update. Which is what Solid is avoiding by using its "fine grained update".
Personally I like both frameworks, but as for speed, nothing that feels as close to React, has anywhere near its performance numbers. And even outside of that, it's just a touch slower than hand coding vanilla JS.
The best teacher, really thank you
thank u, nicely explain
Thank you for this amazing video. I really liked solidjs. But i am sad that I think the React is going to be like the new php :( Everybody hates it yet everybody has to use it lol
Everybody hates it but the core team and devs who've invested a lot of time into it are desperate to rope other folks into the death star of React.
Conclusion for me is Angular got it right. RxJS and observables is the way to do “Reactive” ui .
Excellent
Ok. I'm spoiled now. Can you do Solid with Server Side Rendering 🙏
I am currently heavily invested in stencil as it compiles down to webcomps and has a really nice loader.
As a developer for components of an cms, can you build without much configuration independable comps than can be included as snippets in an exisiting html-page and tap into a Shared store with solidjs?
You could probably connect this with Module Federation in webpack and get a really nice loadable set of Micro-FE style components. If I'm understanding what you are going for there.
Auto change detection looks like one in old knockout js observable )
Is there a material ui equivalent for solid js?
Looking at github.com/one-aalam/awesome-solid-js/ it doesn't look like a material is available yet but there is this atk.github.io/solid-blocks/
@@jherr Wow I got a reply from the man himself!! Thank you very much, your videos are the best and so are you!
Hi Jack. May I ask what font is that in you VSCode? I saw a reply to a comment below to a link to your vscode settings but that's not operator mono as mentioned in the settings.
What are your thoughts on headless UI libraries? Solid has a much smaller community than react, but with those libraries (i.e. TanStack Table/Virtual), I can easily create a component just for this framework. Though I wonder if that is as efficient and whether it's kind of makeshift in a way (like using a react component in svelte)
the code completion look great. what extension do you use?
GitHub Copilot
just awesome 😍
Nice . Can u make video on adding skeleton loading to images in react
Awesome video introduction to SolidJS, especially for React developers. But I almost skipped it due to the "Fight" in the title.
Each framework borrows ideas from earlier ones in an effort to produce a "greatest hits" framework, while using hindsight to avoid some of the hard lessons learned earlier. Solid is just an evolutionary step from React. I don't think we should be considering it an adversarial battle, but rather just the next step in an obvious process. React will continue to be king for a while due to existing projects and job markets, but those with more flexibility to choose the better framework will transition to Solid. Eventually it will be a larger group than the React devs and projects that stayed behind. I see this as inevitable now. It is just too good to be avoided by React developers, because it effectively *is* React, just better in almost every category, and without the weird restrictions and rules and problems.
this is not true, will never be. react will evolve, any improvement done by solid or other framework that are derivative of react will just copied/porter over to react
@@archmad It's good to see some optimism, but it seems to be made without an understanding of Solid. Solid is not derivative, it uses similar high-level concepts and syntax (e.g. JSX) but it's implementation is completely different. Solid is fundamentally different than React and React will not be able to adopting the main differences that make Solid easier, with reactivity and state management a foundational concept, less quirky and so much more performant.
@@appurist you got to ask why would you move. a copy-cat is fundamentally different, why not move to a copy-cat. Vue, React and Angular are different. Look at the past trend. majority wont jump ship because it's fast, it's because it solved programming issue
The reason I consider it adversarial are the psychological tactics of React/React core team. They will deflect and divert, and not admit the shortcomings of React, which we all know by now: bloated size, poor performance. Instead, they market and hypnotize etc. There are so many pain points that its inevitable that React will decline. The React team has done some amazing work, but they've also done a lot of harm (I'm a React dev for 2+ years). When you see what Vue 3, Svelte, and Solid are doing, you will breathe a sigh of relief and build stuff that would take you twice or more as long to build in React. Goodbye, React. You've done well in your time, but your time is up, now begone.
@@dannydevs Nailed it. And yes, all of my future work is with Vue or Solid (or maybe Svelte). I have been doing Vue work for years but like what they took from React for Vue (it's fine for it to be a greatest hits). Svelte took a different approach and gained a lot of my support, but then I needed to return to React for work, but then Solid came along and took the compiled approach of Svelte with no virtual DOM, with the best parts of React for familiarity for devs, and still looks great to Vue developers. I like that it leaves those choices (like where to put your state) up to the dev, while providing all the core features of a framework without seemingly arbitrary rules and limitations, complex functionality or performance bloat. I think it's inevitable that React developers will slowly start looking at Solid (especially since it will be so familiar to them) but just see how it makes the awkward handcuffs come off, and the excuses unnecessary.
Bruh solidjs, this is insane
Can anyone provide information regarding browser support for solidjs?
Awesome
Hi There,
Great tutorial.
Can you do another one explaining how to use solid-js native page transition animation?
Is there that on solid?
Thanks in advance
When using Solid with PHP (Laravel) does the front end have to be a single page application? Or can I do server side rendering in PHP? If I understand how Solid works correctly, I can compile and then place the compiled code (vanilla JS) into my PHP/HTML web page. Or does Solid kind of/sort of require a Javascript backend like Node?
If you want SSR where you get the page pre-rendered to tags before it's sent to the client then you would need to run Solid on the server and that would require node.
@@jherr I see, so I can compile my Solid code with Node on the server side and then add that code to my Laravel Blade (Html) files?
Also if I want to communicate with the server from the client side, how is that typically handled in Solid? (Like jQuery would use Ajax calls. What's the equivalent?)
@@CalicoArchives you would use fetch on the client side from Solid.
As for SSR. Server Side Rendering means that you run all of the Ajax requests from the server before you send the HTML to the client. Then you build all the HTML based on the results of the query on the server, presumably in Solid. And then once you have the complete HTML you send that to the client.
The presumption is that this model of SSR is better for Search Engine Optimization (SEO). But Google long ago started searching Client Side Rendered (CSR) pages. CSR is more in line with what you are talking about. Sending the Solid application bundle to the client and then having the client send fetch requests back to the server for data and then rendering the result.
Solid js also reRender many times, the only difference with react is that react subscribe the whole function and solid subscribe the returned function, (JSX may count as a function too)
so which means that solid js also reRender many times as react, you can check the logs with this example which is the same they have in the official website and I just updated the function a bit to prove that it also reRender every time as react does:
import { render } from "solid-js/web";
import { onCleanup, createSignal } from "solid-js";
const CountingComponent = () => {
const [count, setCount] = createSignal(0);
const interval = setInterval(
() => setCount(count => count + 1),
1000
);
onCleanup(() => clearInterval(interval));
return () => {
const counter = count()
console.log(counter)
return (
counter is: {counter}
mi contador es: {counter}
)
}
};
render(() => , document.getElementById("app"));
I think we need a better definition of what "render" means. In the video I used what I would consider the React version of "render" which is that the component function gets re-run. Even in the example you provided the CountingComponents function only ever gets run one, or "rendered" once if we use the React definition of render.
If you write the SolidJS component normally:
const CountingComponent = () => {
const [count, setCount] = createSignal(0);
const interval = setInterval(
() => setCount(count() + 1),
1000
);
onCleanup(() => clearInterval(interval));
return (
counter is: {count()}
mi contador es: {count()}
)
};
Without returning a closure that is itself subscribed to count, the only thing that is re-run is code within `insert` that is subscribed to the count.
import { template, render, createComponent, insert } from 'solid-js/web';
import { createSignal, onCleanup } from 'solid-js';
const _tmpl$ = template(`counter is: mi contador es: `, 6);
const CountingComponent = () => {
const [count, setCount] = createSignal(0);
const interval = setInterval(() => setCount(count() + 1), 1000);
onCleanup(() => clearInterval(interval));
return (() => {
const _el$ = _tmpl$.cloneNode(true),
_el$2 = _el$.firstChild;
_el$2.firstChild;
const _el$4 = _el$2.nextSibling;
_el$4.firstChild;
insert(_el$2, count, null); //
thanks for your answer, I'll check your last example deeply on my free time. I'm sure that I'll learn a lot thanks to it, so thanks again
@@jherr I just tested it and I like how it works, solid js just subscribe the part where it is called, I’m starting to like it more, is there any plan for mobile version as react native ?
cause I think it would be better that flutter but with react experience 😉
@@FERnandezJjuan you’d have to ask the author of solid-js on that one. I think it’s doable but the compiler would need to know the target and change the code that would update the native elements. The compiler right now is pretty tightly bound to the DOM, which is how it gets the speed improvement over react.
How many jobs are available for SolidJS?
Good question. None.
Who cares. Not everything is about getting a job. Sometimes it's about doing something different and learning new skills.
Who's to say it wont become a standard or commonly used? Solid's proximity to React might EVEN be a benefit for job acqusition. It's accessible to a corporate developer crowd and in many ways more friendly. It could basically be an easy transition alternative when a corporation wants to table in something new.
@@thenewbrand what enterprises backups or uses SolidJS like NodeJs, etc.?
SolidJS looks like a child of React and VueJS :)