React vs SolidJS, Fight!

Ғылым және технология

Let's compare React with the upstart newcomer Solid-JS in an eCommerce showdown!
00:00 Introduction
01:31 Project introduction
02:45 Project setup
04:42 Creating the header
08:09 Creating the app state
12:30 Creating the home page
18:40 Creating the shared store
22:20 Creating the detail page
24:58 Creating the mutable cart
27:30 Supporting local storage
28:35 Why SolidJS is so fast
31:28 How much faster is SolidJS
32:15 How much smaller is SolidJS
33:25 A history lesson
36:08 Outroduction
Example Code: github.com/jherr/react-vs-sol...
SolidJS: www.solidjs.com/
Getting Started: www.solidjs.com/guide
Tailwind on SolidJS: dev.to/wobsoriano/install-tai...
Router: github.com/solidjs/solid-app-...
👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 More Typescript videos: • JavaScript to TypeScri...
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#react #solidjs

Пікірлер: 323

  • @ryank9719
    @ryank97192 жыл бұрын

    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.

  • @TheFroskie

    @TheFroskie

    2 жыл бұрын

    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.

  • @alisonhj

    @alisonhj

    2 жыл бұрын

    Totally agree!!!

  • 2 жыл бұрын

    indeed!

  • @green_universe

    @green_universe

    2 жыл бұрын

    it's all about discovery

  • @chanep1

    @chanep1

    2 жыл бұрын

    that is exactly what I thought when I came across this channel. He is a step ahead the rest

  • @okerror1451
    @okerror14512 жыл бұрын

    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.

  • @RobKohr
    @RobKohr2 жыл бұрын

    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.

  • @talhaakram
    @talhaakram Жыл бұрын

    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!

  • @NishantTilve
    @NishantTilve2 жыл бұрын

    22:03 Damn, this de-coupliing of state from the components is awesome! Gives me the vibes of React custom hooks.

  • @imjulianeral
    @imjulianeral2 жыл бұрын

    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

  • @siematos1099
    @siematos10992 жыл бұрын

    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.

  • @TheEbrahimi
    @TheEbrahimi Жыл бұрын

    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!

  • @techhguy
    @techhguy2 жыл бұрын

    No VDOM, Built-in state management, and super lightweight, Awesome! I will definitely give SolidJS a try.

  • @rayon9353

    @rayon9353

    2 жыл бұрын

    Glad to see another nepali blink 182 dude in programming

  • @techhguy

    @techhguy

    2 жыл бұрын

    cheers and namastey my dude!

  • @rayon9353

    @rayon9353

    2 жыл бұрын

    @@techhguy 🤣

  • @dannydevs

    @dannydevs

    2 жыл бұрын

    Soon to be built in router, I believe. Should be for sure with Solid Start (metaframework)...

  • @henrikfriberg8210
    @henrikfriberg82102 жыл бұрын

    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.

  • @kevindean8312
    @kevindean8312 Жыл бұрын

    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!

  • @deamorta6117
    @deamorta61172 жыл бұрын

    Man i hope your channel booms. The amount of new infornmation im learning from you is tremendous and really2 useful.

  • @PhilipAlexanderHassialis
    @PhilipAlexanderHassialis2 жыл бұрын

    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.

  • @juanferrer5885
    @juanferrer58859 ай бұрын

    Best solid video i have seen, thank you so much Jack! The way you explain is super simple to follow

  • @ComisarioLobo
    @ComisarioLobo2 жыл бұрын

    Wow, this was pretty fun to watch and very eye-opening. Thanks for such a great content

  • @bryson2662
    @bryson2662 Жыл бұрын

    I just started using Solid and I love it. Hope KZread keeps producing more Solid and Solid-start material. Thank you for this video.

  • @xtinctspecies
    @xtinctspecies2 жыл бұрын

    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

  • @jherr

    @jherr

    2 жыл бұрын

    I'll probably do a few more videos on solid. I like it a LOT. I will add testing to the list of those.

  • @hamzahmd_
    @hamzahmd_ Жыл бұрын

    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.

  • @safinrinat87
    @safinrinat872 жыл бұрын

    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.

  • @jherr

    @jherr

    2 жыл бұрын

    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.

  • @jasonsebring3983
    @jasonsebring39832 жыл бұрын

    You sold me on your content more than a couple times now. Thanks for tip on SolidJS.

  • @harin76
    @harin762 жыл бұрын

    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.

  • @jherr

    @jherr

    2 жыл бұрын

    Oh, wow! That's old school! Thank you!

  • @yb3985
    @yb39852 жыл бұрын

    The createMutable give me a vibe of ChangeNotifier in Flutter. Worth a try, since my main tools is Flutter. Thanks Jack! for introducing SolidJS

  • @Geomaverick124
    @Geomaverick1242 жыл бұрын

    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.

  • @Geomaverick124

    @Geomaverick124

    2 жыл бұрын

    @@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.

  • @runonce

    @runonce

    2 жыл бұрын

    @@Geomaverick124 what about the performance differences between React and Solid?

  • @aquaductape

    @aquaductape

    2 жыл бұрын

    @@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/

  • @aquaductape

    @aquaductape

    2 жыл бұрын

    @@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?

  • @bains273

    @bains273

    2 жыл бұрын

    @@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

  • @1235niki
    @1235niki2 жыл бұрын

    Thanks Jack, your channel has become a routine to keep up to date with constantly changing frontend ecosystem 🍪

  • @maddada
    @maddada2 жыл бұрын

    Loved the explanation! Subbed I love Solid's architecture, some really smart decisions were made.

  • @esu7116
    @esu71162 жыл бұрын

    wow...... it opens my eyes on good & useful frameworks. Very good educational content, thank you SO MUCH

  • @diwakarshukla555
    @diwakarshukla5552 жыл бұрын

    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.

  • @FilipCordas

    @FilipCordas

    2 жыл бұрын

    What you are talking about is called a ViewModel

  • @splitpierre
    @splitpierre Жыл бұрын

    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.

  • @robertotomas
    @robertotomas2 жыл бұрын

    very cool - watching your videos, I am wishing you would provide a tutorial/walk-through of agile use of gedit

  • @seanknowles9985
    @seanknowles99852 жыл бұрын

    Already excited for this puppy, if someone starts an SSR framework on solid I am in like Flynn! :)

  • @majahanson311

    @majahanson311

    2 жыл бұрын

    At the same time, SSR seems less urgent when the js bundles are so much smaller

  • @maximebeaudoin4013

    @maximebeaudoin4013

    2 жыл бұрын

    Astro + Solid

  • @mortezatourani7772
    @mortezatourani77722 жыл бұрын

    Mind blowing How solid the SolidJS addresses the issue Love it

  • @avisalon4730
    @avisalon47302 жыл бұрын

    WOW! It is the best framework I have ever seen!

  • @nickborodin4385
    @nickborodin4385 Жыл бұрын

    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.

  • @ericsan1561
    @ericsan15612 жыл бұрын

    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.

  • @batmansmk
    @batmansmk Жыл бұрын

    Impressive video, impressive opinion. Impressive framework. Loved it!

  • @MrLdcaponi
    @MrLdcaponi2 жыл бұрын

    Fantastic video as always. Thanks Jack!

  • @ishanksharma9051
    @ishanksharma90512 жыл бұрын

    you can use multi curosrs to copy lines in separate places at once :), great vid

  • @offroaders123
    @offroaders1235 ай бұрын

    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.

  • @jasontruter4981
    @jasontruter4981 Жыл бұрын

    Wow this looks so easy. I'm loving this state management...

  • @Vedmalex
    @Vedmalex2 жыл бұрын

    Thank you for such a cool presentation of solid.js

  • @ditizen
    @ditizen Жыл бұрын

    Awesome job as always, Jack. May I ask what shortcut/extension did you use to auto select/place cursor on selected text?

  • @jherr

    @jherr

    Жыл бұрын

    Can you send me a time reference so that I can figure that out?

  • @skylerjknight
    @skylerjknight2 жыл бұрын

    Theme in the description… thank you 🙏

  • @designcoded7585
    @designcoded75852 жыл бұрын

    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

  • @alisonhj
    @alisonhj2 жыл бұрын

    SolidJS state management is freaking beautiful!

  • @anon24kf95
    @anon24kf952 жыл бұрын

    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.

  • @lydianlights
    @lydianlights Жыл бұрын

    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.

  • @codezero6023
    @codezero60232 жыл бұрын

    That’s real impressive Jack!

  • @eduard7746
    @eduard77462 жыл бұрын

    Amazing content, thanks for sharing

  • @green_universe
    @green_universe Жыл бұрын

    Thank you this was well made.

  • @antonpieper
    @antonpieper Жыл бұрын

    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)

  • @vdavid84
    @vdavid842 жыл бұрын

    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!)

  • @jherr

    @jherr

    2 жыл бұрын

    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.

  • @MrJfergs

    @MrJfergs

    Жыл бұрын

    @@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.

  • @iduran
    @iduran2 жыл бұрын

    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.

  • @basil127
    @basil127 Жыл бұрын

    This is actually mindblowing

  • @user-hv8fh8gm5s
    @user-hv8fh8gm5s2 жыл бұрын

    Good comparison! Transition between local and global states is really easy. And there is no VDOM here. Does it have any disadvantages?

  • @jherr

    @jherr

    2 жыл бұрын

    Just that it's new and the ecosystem is still evolving.

  • @patrickngnet
    @patrickngnet Жыл бұрын

    It’s a good time to let react developer knows that what is truly reactive is. Vue , svelte, solidJS do before

  • @nightcoder5k
    @nightcoder5k Жыл бұрын

    Good stuff. Thank you!

  • @matejukmar
    @matejukmar Жыл бұрын

    That's it :) I'm done with React! Great video.

  • @Mixesha001
    @Mixesha0012 жыл бұрын

    That’s a rock solid framework..

  • @diegoherrera462
    @diegoherrera462 Жыл бұрын

    The best teacher, really thank you

  • @zsytssk5176
    @zsytssk51762 жыл бұрын

    the code completion look great. what extension do you use?

  • @jherr

    @jherr

    2 жыл бұрын

    GitHub Copilot

  • @softwaredevelopment3894
    @softwaredevelopment38942 жыл бұрын

    Very cool, thank you.

  • @gno3939
    @gno39392 жыл бұрын

    Dang- React just seems dull/old after seeing this. Definitely giving Solid a shot.

  • @juanragm1324
    @juanragm13242 жыл бұрын

    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.

  • @jherr

    @jherr

    2 жыл бұрын

    Wooooot! Yes yes yes!

  • @ahammadalipk
    @ahammadalipk2 жыл бұрын

    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?

  • @ryansolid

    @ryansolid

    2 жыл бұрын

    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.

  • @ChumX100

    @ChumX100

    2 жыл бұрын

    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.

  • @philheathslegalteam

    @philheathslegalteam

    2 жыл бұрын

    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.

  • @dannydevs

    @dannydevs

    2 жыл бұрын

    Nope. Dan Abramov has said as much.

  • @claus4tw
    @claus4tw2 жыл бұрын

    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?

  • @jherr

    @jherr

    2 жыл бұрын

    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.

  • @Retro.one4
    @Retro.one4 Жыл бұрын

    Video Idea: SolidStart w/ Prisma or some DB integration

  • @betasetupper6103
    @betasetupper6103 Жыл бұрын

    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

  • @torkage
    @torkage2 жыл бұрын

    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 ?

  • @jherr

    @jherr

    2 жыл бұрын

    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.

  • @torkage

    @torkage

    2 жыл бұрын

    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 ! :)

  • @dzmitryperashchuk7083
    @dzmitryperashchuk70832 жыл бұрын

    Cool stuff! Thanks.

  • @jermb8326
    @jermb8326 Жыл бұрын

    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?

  • @jherr

    @jherr

    Жыл бұрын

    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.

  • @ashish_prajapati_tr
    @ashish_prajapati_tr2 жыл бұрын

    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

  • @CriminalClinton
    @CriminalClinton4 ай бұрын

    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

  • @krishnajikulkarni8775
    @krishnajikulkarni87752 жыл бұрын

    Nice . Can u make video on adding skeleton loading to images in react

  • @elamandeep
    @elamandeep Жыл бұрын

    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.

  • @hamidrezakazemi7746
    @hamidrezakazemi77462 жыл бұрын

    Really cool, Thanks

  • @guilhermeprezzi7783
    @guilhermeprezzi77832 жыл бұрын

    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!!

  • @jherr

    @jherr

    2 жыл бұрын

    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.

  • @nikmish1
    @nikmish12 жыл бұрын

    thanks for this useful video

  • @santosharakere
    @santosharakere Жыл бұрын

    Excellent, thanks.

  • @shashikantmarskole
    @shashikantmarskole Жыл бұрын

    thank u, nicely explain

  • @green_universe
    @green_universe Жыл бұрын

    Ok. I'm spoiled now. Can you do Solid with Server Side Rendering 🙏

  • @Adam-ds4ey
    @Adam-ds4ey2 жыл бұрын

    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

    @jherr

    2 жыл бұрын

    Which use directive?

  • @Adam-ds4ey

    @Adam-ds4ey

    2 жыл бұрын

    @@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!

  • @jherr

    @jherr

    2 жыл бұрын

    @@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.

  • @Adam-ds4ey

    @Adam-ds4ey

    2 жыл бұрын

    @@jherr Fair enough! Appreciate the quick responses. Keep up the great work and thanks again.

  • @jherr

    @jherr

    2 жыл бұрын

    @@Adam-ds4ey My pleasure.

  • @Norfeldt
    @Norfeldt2 жыл бұрын

    Looks really great. How about React native is there a solidJS native alternative?

  • @jherr

    @jherr

    2 жыл бұрын

    I looked around and nothing pops out.

  • @Norfeldt

    @Norfeldt

    2 жыл бұрын

    I also googled it and could not find anything. Asked because you seem to be on top of latest tech👌

  • @serhioromano
    @serhioromano Жыл бұрын

    Mesmerizing staff.

  • @alvarobyrne
    @alvarobyrne2 жыл бұрын

    solid drummachine, anyone, anywhere: thanks in advance!!!!

  • @sreekar_s
    @sreekar_s Жыл бұрын

    1:30 solid transition 😅

  • @alii4334
    @alii43342 жыл бұрын

    awesome! How about the ecosystem comparison? for example Nextjs, react-query ...etc Because switching from a framework means the previous ecosystem becomes irrelevant!

  • @jherr

    @jherr

    2 жыл бұрын

    Ecosystem is definitely not there at the moment. There are a bunch of modules written for it: github.com/one-aalam/awesome-solid-js/ But there is definitely not the depth of ecosystem that we have with React. That being said, some things, like state managers, aren't required.

  • @alii4334

    @alii4334

    2 жыл бұрын

    ​@@jherr will keep my eye on it! it is definitely interesting!

  • @RuiLopesFR
    @RuiLopesFR2 жыл бұрын

    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.

  • @jherr

    @jherr

    2 жыл бұрын

    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).

  • @RuiLopesFR

    @RuiLopesFR

    2 жыл бұрын

    @@jherr cheers! We don’t have the notion of tonics or duration in French, so you might get creative on that one :-)

  • @angry_moose94

    @angry_moose94

    2 жыл бұрын

    @@jherr Like the former (Pit)

  • @CalicoArchives
    @CalicoArchives Жыл бұрын

    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?

  • @jherr

    @jherr

    Жыл бұрын

    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.

  • @CalicoArchives

    @CalicoArchives

    Жыл бұрын

    @@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?)

  • @jherr

    @jherr

    Жыл бұрын

    @@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.

  • @thepetesmith
    @thepetesmith Жыл бұрын

    Conclusion for me is Angular got it right. RxJS and observables is the way to do “Reactive” ui .

  • @ankitkumarjat9886
    @ankitkumarjat98862 жыл бұрын

    Can anyone provide information regarding browser support for solidjs?

  • @naturegoggle
    @naturegoggle2 жыл бұрын

    just awesome 😍

  • @jasonsebring3983
    @jasonsebring39832 жыл бұрын

    You'd have to use "memo" on a functional component to prevent it from rendering every time in react.

  • @jherr

    @jherr

    2 жыл бұрын

    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.

  • @nyambe
    @nyambe Жыл бұрын

    How does it compare with Vue 3 that already has great reactive state management?

  • @KuzyoYaroslav
    @KuzyoYaroslav2 жыл бұрын

    Is it copilot suggests snippets of code while you typing ?

  • @jherr

    @jherr

    2 жыл бұрын

    Yes.

  • @roodborstkalf9664
    @roodborstkalf96642 жыл бұрын

    Excellent

  • @yasin_osman
    @yasin_osman2 жыл бұрын

    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

  • @dannydevs

    @dannydevs

    2 жыл бұрын

    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.

  • @shubhampawar7247
    @shubhampawar7247 Жыл бұрын

    Can someone tell me, What is the IDE theme being used in video?

  • @sevaarutyunov7301
    @sevaarutyunov73012 жыл бұрын

    Auto change detection looks like one in old knockout js observable )

  • @AjayBhatia
    @AjayBhatia2 жыл бұрын

    Nice comparison. The only question is that how we can use Apollo Client with solid.js?

  • @jherr

    @jherr

    2 жыл бұрын

    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

    @AjayBhatia

    2 жыл бұрын

    @@jherr thanks

  • @robinkehr1160

    @robinkehr1160

    2 жыл бұрын

    @@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

  • @AjayBhatia

    @AjayBhatia

    2 жыл бұрын

    @@robinkehr1160 yeah was thinking same. But it's difficult to go with solid.js in case if backend is using graphql.

  • @appurist
    @appurist2 жыл бұрын

    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.

  • @archmad

    @archmad

    2 жыл бұрын

    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

  • @appurist

    @appurist

    2 жыл бұрын

    @@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.

  • @archmad

    @archmad

    2 жыл бұрын

    @@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

  • @dannydevs

    @dannydevs

    2 жыл бұрын

    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.

  • @appurist

    @appurist

    Жыл бұрын

    @@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.