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!
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
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.
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
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.
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.
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.
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
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.
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!
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.
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.
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!
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!!!!
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.
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.
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.
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.
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.
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.
Events are computed side-effect of user’s interactions Actions are computed side-effect of events Updates or queries are computed side-effect of actions States are computed side-effect of updates or queries Views are computed side-effect of states
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.
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 ! :)
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.
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.
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.
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.
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)
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.
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
I'm unsure what the downsides are here... There doesn't seem to be any? Far smaller, far faster, written in a declarative way similar to react (if you like that anyway. It certainly makes writing JS more straighforward than writing it imperatively with vanilla js). You don't have to manage react complexities such as component re-renders etc... I do like react in general, but never really liked the concept of the vdom. To me, it seems like an extra layer on top that shouldn't really be there. Only having the nodes change that may need to change is very nice. Then having the state management as part of solid is very nice too. I do think that the naming could be improved perhaps, and the docs improved a little. Knowing what some of the hooks are/do is a little confusing at first. Apart from that it seems very 'solid', impressed so far for sure.
The downsides current are a lack of ecosystem support and the developer experience is not as friendly or smooth as React. Both of which are being worked on.
@@sanoj_silva IMHO, I don't think so. One interesting conceptual test is this. Could you rewrite Solid-JS in React? No. Because fundamentally React doesn't provide that level of control easily, or you'd have a lot of overhead for VDOM support that you wouldn't use. But, could you rewrite React in Solid-JS, yes, because you could build a VDOM on top of React's closer to the metal API without ignoring any of Solid's code. This proves, to me at least, that Solid is lower level than React. And the fact that you can write a full application in Solid, using this more lower level API, while still having good component composition, means, again to me, that there really is no downside with the Solid-JS rendering model.
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.
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
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
The main Apollo Client library is hard bound to React. There are ports available for other frameworks. I think you'd have to think about things from scratch with a port on this because of the different nature of state management in SolidJS. There would be a lot of things you could simplify.
@@AjayBhatia Was wondering the same, I think as soon as there is a solid Apollo Client port/ good alternative gql client out there i will definitely gitve it a go for a personal project or two
Hey Jack, great video! I was wondering if you could do a short video on the SolidJS use directive. I had some issues around getting it to work correctly as well getting the syntax highlighting to not get it to think it was an error (in Typescript). Thanks in advance!
@@jherr Sorry, I realize now I wasn't very clear with my comment😅 - What I meant was the custom directives that use the "use:" namespace. www.solidjs.com/docs/latest/api#use%3A___ - Specifically, i was having a hard time getting the modal example defined here: www.solidjs.com/tutorial/bindings_directives to work correctly. Since the "use:" namespace is transformed by the compiler, I didn't know if maybe I was missing a babel package or if something else was going on. Thanks again!
@@Adam-ds4ey Ah, ok. I thought you were talking about the hooks. Alright. That's a bit more in the weeds than I normally go in my videos and I have a long backlog of topics. So you will get faster service chatting on the Solid-JS Discord server.
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.
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.
If I may, and it's totally aside the subject - please forgive me - but "Vite" is a French word, which is pronounced "Vit", not "Vaït". Like "pit" in pitfall, but with a V. Now that the pesky is gone, let me thank you for the excellent quality of this video.
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.
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)...
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!
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
Mind blowing
How solid the SolidJS addresses the issue
Love it
WOW! It is the best framework I have ever seen!
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.
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
SolidJS state management is freaking beautiful!
You sold me on your content more than a couple times now. Thanks for tip on SolidJS.
I just started using Solid and I love it. Hope RUclips keeps producing more Solid and Solid-start material. Thank you for this video.
22:03 Damn, this de-coupliing of state from the components is awesome! Gives me the vibes of React custom hooks.
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.
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.
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.
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!
The createMutable give me a vibe of ChangeNotifier in Flutter. Worth a try, since my main tools is Flutter. Thanks Jack! for introducing SolidJS
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
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.
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
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!
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.
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.
It’s a good time to let react developer knows that what is truly reactive is. Vue , svelte, solidJS do before
Thanks Jack, your channel has become a routine to keep up to date with constantly changing frontend ecosystem 🍪
wow...... it opens my eyes on good & useful frameworks. Very good educational content, thank you SO MUCH
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!
Man i hope your channel booms. The amount of new infornmation im learning from you is tremendous and really2 useful.
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!
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!!!!
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
Dang- React just seems dull/old after seeing this. Definitely giving Solid a shot.
very cool - watching your videos, I am wishing you would provide a tutorial/walk-through of agile use of gedit
Wow this looks so easy. I'm loving this state management...
Thank you for such a cool presentation of solid.js
Best solid video i have seen, thank you so much Jack! The way you explain is super simple to follow
Loved the explanation! Subbed
I love Solid's architecture, some really smart decisions were made.
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.
Impressive video, impressive opinion. Impressive framework. Loved it!
That's it :) I'm done with React! Great video.
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.
you can use multi curosrs to copy lines in separate places at once :), great vid
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
Wow, this was pretty fun to watch and very eye-opening. Thanks for such a great content
This is actually mindblowing
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.
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.
Is it copilot suggests snippets of code while you typing ?
Yes.
Theme in the description… thank you 🙏
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?
That’s a rock solid framework..
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.
That’s real impressive Jack!
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.
OMG, SolidJS is insane
Fantastic video as always. Thanks Jack!
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.
The best teacher, really thank 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.
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.
Events are computed side-effect of user’s interactions
Actions are computed side-effect of events
Updates or queries are computed side-effect of actions
States are computed side-effect of updates or queries
Views are computed side-effect of states
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.
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 ! :)
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.
Ok. I'm spoiled now. Can you do Solid with Server Side Rendering 🙏
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 code completion look great. what extension do you use?
GitHub Copilot
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.
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.
Video Idea: SolidStart w/ Prisma or some DB integration
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)
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!
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.
Nice . Can u make video on adding skeleton loading to images in react
Can anyone provide information regarding browser support for solidjs?
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
I'm unsure what the downsides are here... There doesn't seem to be any? Far smaller, far faster, written in a declarative way similar to react (if you like that anyway. It certainly makes writing JS more straighforward than writing it imperatively with vanilla js). You don't have to manage react complexities such as component re-renders etc...
I do like react in general, but never really liked the concept of the vdom. To me, it seems like an extra layer on top that shouldn't really be there. Only having the nodes change that may need to change is very nice. Then having the state management as part of solid is very nice too.
I do think that the naming could be improved perhaps, and the docs improved a little. Knowing what some of the hooks are/do is a little confusing at first. Apart from that it seems very 'solid', impressed so far for sure.
The downsides current are a lack of ecosystem support and the developer experience is not as friendly or smooth as React. Both of which are being worked on.
@@jherr is there any downside when comparing with the React's re-rendering model?
@@sanoj_silva IMHO, I don't think so. One interesting conceptual test is this. Could you rewrite Solid-JS in React? No. Because fundamentally React doesn't provide that level of control easily, or you'd have a lot of overhead for VDOM support that you wouldn't use. But, could you rewrite React in Solid-JS, yes, because you could build a VDOM on top of React's closer to the metal API without ignoring any of Solid's code.
This proves, to me at least, that Solid is lower level than React. And the fact that you can write a full application in Solid, using this more lower level API, while still having good component composition, means, again to me, that there really is no downside with the Solid-JS rendering model.
@@jherr true. Let's see how things work out in the future 😉
solid drummachine, anyone, anywhere: thanks in advance!!!!
Conclusion for me is Angular got it right. RxJS and observables is the way to do “Reactive” ui .
Can someone tell me, What is the IDE theme being used in video?
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 Sold me Solid
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
Thank you this was well made.
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.
How does it compare with Vue 3 that already has great reactive state management?
Mesmerizing staff.
Looks really great. How about React native is there a solidJS native alternative?
I looked around and nothing pops out.
I also googled it and could not find anything. Asked because you seem to be on top of latest tech👌
I’m new here but may i know what font he uses for the IDE?
Nice comparison. The only question is that how we can use Apollo Client with solid.js?
The main Apollo Client library is hard bound to React. There are ports available for other frameworks. I think you'd have to think about things from scratch with a port on this because of the different nature of state management in SolidJS. There would be a lot of things you could simplify.
@@jherr thanks
@@AjayBhatia Was wondering the same, I think as soon as there is a solid Apollo Client port/ good alternative gql client out there i will definitely gitve it a go for a personal project or two
@@robinkehr1160 yeah was thinking same. But it's difficult to go with solid.js in case if backend is using graphql.
Very cool, thank you.
Hey Jack, great video! I was wondering if you could do a short video on the SolidJS use directive. I had some issues around getting it to work correctly as well getting the syntax highlighting to not get it to think it was an error (in Typescript). Thanks in advance!
Which use directive?
@@jherr Sorry, I realize now I wasn't very clear with my comment😅 - What I meant was the custom directives that use the "use:" namespace. www.solidjs.com/docs/latest/api#use%3A___ - Specifically, i was having a hard time getting the modal example defined here: www.solidjs.com/tutorial/bindings_directives to work correctly. Since the "use:" namespace is transformed by the compiler, I didn't know if maybe I was missing a babel package or if something else was going on. Thanks again!
@@Adam-ds4ey Ah, ok. I thought you were talking about the hooks. Alright. That's a bit more in the weeds than I normally go in my videos and I have a long backlog of topics. So you will get faster service chatting on the Solid-JS Discord server.
@@jherr Fair enough! Appreciate the quick responses. Keep up the great work and thanks again.
@@Adam-ds4ey My pleasure.
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.?
Sir, it's me again! I cannot find a job with SOLID js framework, so, do you know about some companies that use solid js?
You should join the SolidJS Discord server. They have a #job-opportunities channel. discord.gg/ys9BV67k
SolidJS looks like a child of React and VueJS :)
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.
If I may, and it's totally aside the subject - please forgive me - but "Vite" is a French word, which is pronounced "Vit", not "Vaït". Like "pit" in pitfall, but with a V.
Now that the pesky is gone, let me thank you for the excellent quality of this video.
Alright, I'm on it! Vit it is. Though looking around it's not clear if it's "veet" (like Pete) or "vit" (like pit).
@@jherr cheers!
We don’t have the notion of tonics or duration in French, so you might get creative on that one :-)
@@jherr Like the former (Pit)
This makes React feel old and wrongfully designed. This seems amazing.