Interesting - Indeed, I couldn't find anything in the docs regarding VDOM now, but I remember clearly a talk where Misko was mentioning it, and I can still find references to a Vdom in the code - github.com/BuilderIO/qwik/blob/main/packages/qwik/src/core/render/dom/render-dom.ts
@@awesome-coding Before September 2022 Qwik used vDOM but Sept. 21 useSignal was merged and announced in a Video on September 28. Qwik: Beta and Beyond
@@awesome-coding maybe they are hiding it because vdom isn't what the cool kids are doing. The only mention I can find in the docs is in the JSX section where it says JSX != VDom in bold even. It seems intentionally obscure. I suppose it's not that important as the performance is exceptional. Love your videos btw.
Qwik does use the VDOM. It might not be relevant in all places as they have some means to do granular updates, but its main rendering mechanism uses the VDOM. Not that that is a huge deal as Svelte doesn't use a VDOM and I'd still consider it generallyless granular in rendering than both other solutions.
@@erickmoya1401 U are saying like u write 1M lines of app in svelte... It's not problem if something is close to js or not, it's about how u approach building the software... and most of developers are total crap in that... The idea is to build the software and change it on the fly tommorow replacing svelte or react or vue with something else...
In relative comparison I would put QWIK atleast one point ahead in the performance tab (due to the basically unmatched approach to the downloading/executing JS in terms of CWV)
To some extent I would agree. On the other hand, my question is the following - is the performance gap so large at this point? I agree Qwik is probably the best, but I believe that Svelte and Solid are soo close behind that it doesn't really matter for 99.99% of scenarios.
For loading mb, but performance in reactivity, I am not so sure. There is a reason they are not yet in the js framework benchmark. That kind of performance just isn't a priority to them rn. It's also a bit of an unfair comparison to compare loading of qwik w purely frontend frameworks like solid/svelte. Qwik is a metaframework by itself, it's all about the server. Would be better to compare it to astro+solid/svelte or solidstart/sveltekit. Especially with astro+solid, I think u can get very similar results regarding tti, if u build for it optimally. If u build optimal qwik you would have an MPA too, bc otherwise you are just delaying the downloading of the whole template to the first navigation.
I am absolutely in love with Solidjs, it just makes sooo much sense, in terms of it's reactivity. I love that I can easily use it outside of jsx, because it's primitives are sooo powerful. Although I love the dsx of svelte! So simple!
I am just in the process of learning Sveltekit and deciding whether to use it or Solid or Qwik for version 2 of our company's product. This is so 100% spot on the video I've been looking for in the past week. Great job :)!
@@awesome-coding I agree, still risky compared to say React or Vue, but for me the tradeoff for better productivity is worth it (and I imagine onboarding to be easy, if new people know html/css/js). The biggest downside is going back to work on a legacy AngularJs app :D.
@@hyprsonic_dev Risky in the sense that it's not as ubiquitous as other frameworks (yet!). Meaning if you select it for a project, it might be harder to find experienced devs when you need to hire more
Not all frameworks are similarly reactive. React (and to a point, preact) is an outlier, which instead of relying on the tried and tested observer pattern uses immutable reconciliation for both its state to virtual DOM and virtual DOM to actual DOM reactivity. Also, I would argue that the implicit reactivity of Svelte, while being very powerful, is not better than the explicit reactivity of Solid or Qwik. In fact, the latter is more obvious and has less hidden pitfalls.
@@awesome-coding Currently web dev seems to be just as dogmatic about components as the mainstream is about class-based object orientation (perceived reuse and all that). Svelte's convenient reactivity is limited to the components, non-component store reactivity isn't that convenient. SolidJS is a state library that happens to render so you can build application-centric apps without involving a separate state library (like Redux for React).
or use vue, which is very similar to svelte code wise (when using sfc composable api), has good reactivity (is also about to have vapor mode without vdom), has great dev tooling, and is one of the largest js frameworks, so isn't hard to bet on in long term production projects I don't think vue gets enough love from js community considering how it combines all the things js devs love about svelte, solidjs, and react
Hey! The idea in this video (a poorly explained idea nevertheless) is that Svelte's component reactivity is better than Solid's from a DX perspective. Signals have an API you have to interact with, while Solid's reactivity (in V4) felt "like magic". Here is a followup video I made on this topic - ruclips.net/video/XB993rQ-5DY/видео.html I think you are referring to Svelte's store reactivity introduced in V3, which was different than the component reactivity (based on dirty checking). It looks like they are unifying the implementation in Svelte 5, with the addition of runes.
I've used all three, and Qwik is my favorite because doesn't introduce a new markup (only very minor diff from React JSX except to account for event handler serialization), data-flow, and the resumabilty/serialization which bring several benefits than just fast page loads. Svelte is too magical for my liking, but no question the easiest/fastest of the three for cutting code. However, all three suffer from lack of ecosystem and tooling, which is easy to discount when lusting after shiny new frameworks. I decided to stay with React for now because I'm more productive with it when considering everything (availability of 3p libs, tooling, etc.), and will wait it out for another year or two before switching (if at all).
This is fair. I understand your decision of sticking with React (A few weeks back I posted a video on this exact topic - the lack of tooling in newer libraries). I can also understand that "Svelte is too magical for your liking". I think there is a valid point here. Sometimes things that "just work" are not the best.
I've used them all and found SolidJS to be faster. Qwik has slower interaction because of the chunks And I agree Svelte is too magical, we are using Svelte and I personally hate all the magical and sometimes buggy features
@@andreilucasgoncalves1416 Solid-Start is still in beta and not progressing at same rate as Svelte and Qwik, which was concern for me, even though huge respect for Ryan Carniato (really like his Solidjs mental model). Overall though, I found Qwik DX to be best fit me, and all three (Qwik, Solid, Svelte) are highly performant in comparison to React -- agree though that Solid is fastest. Practically speaking though, Rect performance has not been an issue for apps I'm building. It's easy for people to get caught-up in such things, but I suspect it's relatively small % of apps that need the added perf (or at least not top most priority relative to other considerations).
i feel like qwik's instant reactivity was not given enough praise for what it can do, the ability to make the builkiest of them all web app but then have the user load it as soon as they type the url is something else, im sure svelte and solid both are very fast frameworks, but when push comes to shove hydration will impact them and the performance the users would get, meanwhile with qwik u could ship 100gb of javascript in an app and have instant loading if you respect the lazy loading and don't overuse useVisible task and force hydration ur self which imo is huge, i think orgs like amazon could benefit a lot from something like qwik since they opted to not use frameworks due to performance, google already has something like that internally. but again, Resumability needs more points here, i would still give svelte and solid a 2 but as a special case qwik should get a 3 since performance should theoretically always be perfect no matter how big the app is
As a person who has done Enterprise level development for years, I've been waiting for something that can handle scale the way that qwik can. Indeed, when I first learned that Angular couldn't handle lazy loading (first gen of angular now referred to as angularjs), I was flabbergasted. It seemed like such a huge oversight for a company like google. Anyway, for smaller apps, the others are likely good enough, but even Vue and React really struggle at enterprise level. Also, when you need to deal with SEO, you're constantly fighting the battle of SSR or SPA, and often find yourself writing both, with lots of redundancy or very complicated code (or both). Qwik handles this with ease. I think Qwik will likely pull out ahead once it starts getting adopted by more enterprise level consumers. There's usually a wait time of 2-3 years after a stable release comes out before they will even begin, however, so my guess is in about 5 years Qwik or something very similar to it will start coming out on top.
In terms of maturity, SvelteKit wins hands down. They have all sorts of packages and 1.0. Qwik (qwikcity) is 1.0 and pretty behind, and SolidStart is still in beta and not even on the map. There is no comparison in reality.
Im a non-web-dev, so I just like the promise of Svelte without knowing what I'm getting into. I am probably fine with what it delivers atm, as I am aiming at internal tooling.
@@awesome-coding i am really glad i am learning svelte... felt like it is only one i can enjoy using... react was really overwhelming, so i hated to learn it.. (may be i tried to make big project for my friend 3 years ago with out knowing anything about react and still having ptsd due to it ).. but currently i my job is in support so hopefully i have time to learn webdev if i ever make a carrier change
I swear, web devs are overreacting all the time. People switch careers in a year while some people are scared of different flavor of what they already "know"
I liked the very first Angular.js I like the idea of extending HTML and you as the user having the control over that. And this is also why I like HTMX, is simpler than angular1.
3:24 - Solidjs can do everything Svelte can do and more in the category of Reactivity. $: in svelte is createEffect and createComputed. But solid can also easily interface with obvservables and create signals from async operations using the from primitive.
I still consider myself very new to web development and so far Svelte feels like a blessing to me, especially when compared to React (which I just struggled with for a couple of hours).
Frontend development isn't all about JavaScript and HTML. There's also need for CSS. To write JSX we had to think which way I should choose, styled component or JSS or module CSS or something else. Thanks to tailwind this problem is almost solved. But still if someone doesn't want to use tailwind, writing style in JSX will be again nightmare. That's why I would always choose svelte over all the JSX frameworks.
@@chisangamumba2961 If you used any jsx library like react. And then you use svelte. You'll understand what I'm trying to say here. Svelte components are combined with js, html and css. Instead of only html and js.
I tried quik but quickly step back due to it's boilerplate experience similar to react. Svelte on the other hand handles all of the complexity during compilation so we can write plain JavaScript which hugely improves DX.
I think the more important insight in the video is this: "However we probably have around 2 more good years until coding will become just another automated task" :p
Its really a hard comparaison , the two of quik and solid have jsx so the translation from react to those two frameworks will not be so hard ,and what you should learn is some more javascript concepts like dignals , functions and some theory how they work , but svelte you will need to learn a new language to let the compiler work correctly
Trust me learning svelte is more easier compared to switching from react to solid/quik (even given you already a react vet), sveltekit is the easiest thing ever lol
Svelte is not a new language, is an extension of Javascript. If you know javascript it takes basically no effort to learn svelte keywords and macros as they are just an abstraction of concepts we already know. I migrated from react to svelte and it didn't even felt lime I was learning something new. Everything is straightfoward and easy to remember
I played with it for a bit, but its use case is too narrow for what I would need in my day to day life. Sure, it's great to build components, but, these days I need the whole meta-framework experience hassle free. It's tough to argue for a component library tool when options like SvelteKit are out there.
Like always great video! But IMHO you missed one very important category witch is "lighthouse score". There is very good reason why qwik exist. I'm working on a project that Core Web Vitals really matters and with nextjs a struggle a lot! We are shipping js where we don't need it at all only because of this how old js libraries works..😢
Thank you! You are right. I should have at least mention that Qwik excels at this. My take on performance was "all of them are doing extremely well, and if one is better, is not that big of a deal" which is not that fair for the one doing better :D
Yes, I believe there is job security in the web dev space. It's going to be tougher in the upcoming years, but people with good skills will do just fine.
Solid and Qwik also scale much better thebmore pages are added, Ryan Carniato pointed out a benchmark where thebpages on a site were gradually added up to 300 and solid and qwik performed the best , svelte was worse than vue in the end even though it started off really fast
@@erickmoya1401heard of like 3 migration stories of people moving their company's websites to solid all 100+ pages , apparently for something that big they usually rely less on the "ecosystem" since they write most stuff in-house and only pull in things like Tanstack and other big agnostic tools
Something has always seemed off with Svelte for me. Qwik not really a serious option. Ryan Carniato is thr top framework guy, nobody has the breadth and depth of knowledge he has in this area. Solid just does things right and thats why all the major frameworks are copying it, including svelte now going with signals. Id be surprised if Solid didnt comfortably win the race between these 3 in the long run, its a class above in fundamentals and so much more potential.
Qwik should lose performance points in my opinion, it uses aggressive lazy loading to gain initial loading speed but loses a lot of performance by turning literally all interactions into calls to the server, which are literally the weakest link of any web app and why developers switched to the spa model in the first place Interacting with the counter in the official demo in localhost with slow 3g took over 1min to react and over half second without throttling (which is still a lot) Slow initial loading is currently only a problem using React, all other frameworks nowadays are light and fast, the initial amount needed for a reactive app in svelte is only 2kb Boosting initial load performance in exchange for slowing down everything else in the app really doesn't seem like a smart tradeoff to me, especially in an age where all frameworks focus on progressive enhancement and work before javascript is even loaded
That's actually a misconception about Qwik. Qwik doesn't lazy load on interaction, it only "lazy executes" the code because it get prefetched via a service worker on a separate thread into the cache. Qwik in dev mode is not using the service worker, so your experiment wasn't showcasing the real value of Qwik. Trying doing the same experiment by running "npm run preview".... Even better - try to compare downloading a SPA on a slow 3g network VS any other meta framework VS Qwik, for each of them add a simple input field that's bounded to a value that shows on screen. Then measure how much time each takes to become interactive (input value shown on screen)
Svelte is ditching their v4 reactivity and embracing SolidJs style signals! SolidStart is v1.0 production ready as of May 2024. So I see SolidJs is leading the way
Love your vids, just wanted to point out a slight correction, Qwik does not use a virtual dom. While I'm not an expert I'll just post a quote here from Qwik themselves "Qwik does not have a virtual DOM (VDOM) like React. Qwik uses a different approach to achieve instant interactivity and server-side rendering. Instead of diffing and updating a virtual DOM, Qwik focuses on incremental rendering and reactivity using signals and components."
Qwik is too much like react and Solid is not much better. Svelte is the cleanest. As a former react dev both solid and qwik is an oasis after using react but i am trying to move away from jsx. I hate that stuff. Svelte feels like a fresh breath of air.
I hear a lot of people say svelte is too magical, I have used react extensively, and I don't care how magical x or y. React FORCES you to stick to react's way of solving problems, you can't use vanilla js. If you tell me this is still not magical I don't know what to tell you. However, I still love it, but since using svelte, I will never go back to react. Svelte ACTUALLY respects vanilla js, you are free to use vanilla js or svelte's way of solving the same problem. It just make common problems easier. I have yet to find any flaw in svelte. As for solid, I have only used it for about a week or so, and I just couldn't make a simple theme switch work as in react. For some reason the reactivity of solid is just a tad different from react, if you make a signal that reacts when another signal change it won't fire. Which made things harder, not simpler. To add fuel to the fire, the community is much much smaller than svelte. And the scope of problems you will have to solve from solid are a lot more than react and svelte. Since it's minimal, unlike svelte. It gives you many things out of the box.
I respect the opinions here and attempt to adjudicate the frameworks but I noticed a lack of objective analysis on many of the points. I hope you consider these suggestions for a future video 🙂 Reactivity - Since you are comparing architecture here I think we need to be *way* more objective. Svelte's reactivity isn't composable and not as efficient at Solid nor Qwiks. This is a major consideration missed by your video. If you're comparing the reactivity DSL-wise then this should be renamed as a category or rolled into DX. Also all three frameworks have a compiler so claiming Svelte has a one-up here is not totally relevant. DOM Updates - I'm having a hard time reasoning Svelte being a 2. Solid is hands down more performant and efficient at this task. I'm not sure if it's fair to put Svelte at the same level as Solid in this category. I'm not sure why this is a category at all because it's tied to performance in general. Either way Solid wins in this category given that it is more specialised at fine-grained reactivity. Signals are a big super power here. Performance - It may be your opinion that performance doesn't matter but I think it's not really just (even disingenuous) to discount two other frameworks *designed* for performance by making them all equally scored. Svelte should have 1 in this category because it's "good enough" compared to Solid and Qwik. These are two frameworks designed with performance in mind. Dev Experience - I believe Solid and Qwik should have 1s. They are behind Svelte which is much larger and more popularized at this point regarding ecosystem. Experience wise the language itself has pros and cons that are far more subjective ie. SFCs and such. If you were to recalibrate these numbers the frameworks would be: Svelte - 12 Solid - 12 Qwik - 12 All these frameworks are equally balanced and you should explore each. I hope that your future videos will strive to be more objective. ❤💙
I almost like Svelte, but as I was going through the tutorial they sprang their own programming language on me that isn't a complete language. It reminds me of C macros compared to C, in that it's an entirely different language with different rules and may/may not be turing complete. So I almost asked on Discord, but they have it locked up so you can't just ask questions, you need to have a technical issue or STFU, so I'm not asking. IMHO, I don't want to write something in Svelte's programming language, because in 5 years when it's no longer the future I don't want to have to rip my entire codebase apart rewriting everything, nor do I want to face the possibility I simply *can't* write something in Svelte because their language is somehow incomplete or broken. So instead I'm likely to turn to either vanilla TSX or SolidJS if I can convince myself that I need this reactivity/state management actually.
I don't think that you went through a Qwik tutorial before making this comparison. You just absorbed some rumors on RUclips about Qwik and made up your opinion. You are complaining about QRLs. You don't have to deal with them. It's a transparent internal mechanism. Therefore creating components in Qwik is barely different than doing so in React. Your take on reactivity and dev experience is completely subjective. You have no basis for what you are saying.
Hey! I actually spent some time working with Qwik - also obvious by the fact that I have multiple video about it on the channel. QRLs are not hidden at all - I had issues with registering event listeners outside JSX because of QRLs, and I ended up on their discord just because of that. You can't say they are a transparent / internal mechanism when you are forced to wrap event listeners in them to make things work. It is not my intention to bash Qwik, but on the contrary. Dev experience is subjective, and I stated that in the video as well.
Hey - I'm pasting my answer form a different comment here: Indeed, I couldn't find anything in the docs regarding VDOM now, but I remember clearly a talk where Misko was mentioning it, and I can still find references to a Vdom in the code - github.com/BuilderIO/qwik/blob/main/packages/qwik/src/core/render/dom/render-dom.ts
Svelte should take the lead in the state category because of compatibility with external state management libraries thanks to the store contract Want to use xstate to create state machines? it just works! RXJS? Just works! Preact signals? Just use the core library! (not even the preact itself does that) NanoStores? Just use the core library! Even libraries that do not 100% follow the store contract can be adapted to work on just 2 lines such as Zustand, redux and even solid signals
@@awesome-coding Given 3 current frameworks : React/Angular/Vue vs new frameworks: Svelte/Solid/Qwik If we have to predict which new framework will be equal to old one in terms of popularity, we will get to the comment It is an over the top prediction, based on current popularity. Everyone loving Svelte thus it is good candidate to be new react, and SolidJS is refined version of current react which might not become as popular if Svelte way of writing app win in next 5 years, thus it becoming next angular. And then Qwik just being there as 3rd alternative like Vue in the past.
My man, please add some freshness to the content. Swap the music for something new, add new stock footage. The content itself is good, but It's getting really irritating and monotonous
"We're proud that Svelte was recently voted the most admired JS web FRAMEWORK in one industry survey while drawing the most interest in learning it in two others." Guess where did I took this from?
It doesn't matter. These comparisons are pointless. Learn everything you can. These are just tools and you should have as many of them as possible to solve any problem you encounter. In the end dx and the adoption matter the most but none of these have any presence in the market. As far as companies are concerned there are only two frameworks angular and react thats it Edit: As far as usage is concerned React is like 5 times more popular than angular and vue Angular and vue are tied Svelte is 1/10 th the usage of angular and vue or put another way react has 50 times more adoption than svelte And nobody uses solid or qwik
I know a few companies which work with Vue (I'm part of one for instance), but Angular and React ar for certain the "safe" bets. I also believe we should learn everything we can, but also people love comparison videos, so don't judge me for that :))
@@awesome-codinglol people do love comparison 😂 I use sveltekit at my company too but we are the exception and all this wouldn't even matter after ai takes over our jobs anyway 🤣
@@awesome-coding I think senior and or very talented devs ( I think I am one of them 😂 ) have like 2 years as you said but anybody else is going to be replaced the next second gpt 5 comes out. Btw find a construction job for me too. We will make RUclips videos about that too "Awesome construction" lmfao 🤣
The VDOM is not obsolete, since it’s the only runtime-only rendering mechanism compatible with declarative markup. The alternative is to generate granular DOM updating code on a component by component basis. This involves a fairly complex build step, which brings about a different set of tradeoffs. VDOM rendering still has its place - In fact, it minimises the bundle size at large app scale. The runtime performance penalty of VDOM rendering is also greatly alleviated by a more granular reactivity model that doesn’t re-render the whole component tree on every update.
Hey! Maybe we have a slightly different understanding of the VDOM? To me the VDOM is a 1 to 1 representation of the real DOM used for one purpose - dirty checking to see what needs to be updated in the DOM. Nothing more, nothing less. Solid has exactly the same declarative markup as React, but one uses the VDOM and one doesn't. The one that doesn't use the VDOM, while still providing the same DX performs better. Why would you need the VDOM then? Another example is Preact which introduced Signals based reactivity and rendering as an alternative to their own lightweight VDOM implementation. I remember reading (take this with a grain of salt) that Vue is exploring alternatives to the VDOM as well. Finally, as a counterargument to the complex build step as the alternative to the VDOM, here is a short video where I'm looking into a library doing granular reactive DOM updates in under 1kb of source code - ruclips.net/video/Oh2IEVqarHs/видео.html
Solid does indeed enable the same declarative markup model without employing VDOM to update the DOM. It keeps the DOM in sync via code that is generated at build time. The framework reads the JSX code and produces objects that close over the signals present in scope, and subscribe to these. When a signal's value updates, this generated code runs and updates the dependant DOM. This is an alternative to VDOM rendering and shifts a substantial amount of the work to the compiler, resulting in a net runtime performance improvement. It's nonetheless important to understand that this is a (rather favorable) tradeoff, and not a case of a technology being superior to another in every respect and therefor superseding it. A compiler adds significant complexity to the toolchain as well as the mental model. For one, Solid, Svelte and Qwik change the semantics of JavaScript, by adding their own code via the compiler. Indeed, the same JavaScript can mean different things in these frameworks. This may be a reasonable tradeoff given the scale of your company. The strength of VDOM is that it can be pure JavaScript. VDOM is a library, not a compiler. You can adopt it without changes to the toolchain. The semantics of JavaScript remain unchanged. It's debuggable straight in the browser. That's why I'm saying that it isn't obsolete, but that it implies different tradeoffs.
Just learn Angular, React, and Vue. Those are enough. Don't jump on top every Flavour of the Month "Framework" that comes along. When will Devs learn? 🤦♂️
After after some time both solid and qwik is gonna be as bloated as react. Svelte is gonna be more complicated as well but that's just inevitable. Being close to vanilla and just looking better.
None of them.. the ecosystem for those is small, job opportunities are even fewer... Just stick with react and next or angular or vue..all these new tools are cool but..a lot of buts.. 😂😂
I'm actually counting Astro as a meta framework since you can use Solid , Svelte and Qwick TOGETHER in an Astro project, but it doesn't work the other way around. I am a big big fan of Astro - just check out some of the videos I posted on this subject :))
@@awesome-coding I mean, sure. Im sorry but recommending Qwik or Solid and not recommending React in 2023 to actual land a job and not do some side project that nobody gives a F, is a monkey thing. I would argue Vue would even be better to pick up than Svelte for actual job market. And I like Svelte, but i see nothing in the current market world where I should pick Solid or Qwik over React. Im not trying to be Theo here, im actually against 90% of his takes, but React is your best bet to land a job and everyone knows this.
No one is arguing that point with you. This just shows you missed the whole point of the video. No where was it mentioned in the video to dump react and use one of these. So your rant isn't needed here at all 😂
@@rnwonder107 Interestingly enough, you'll see on my channel that I have more videos on Solid and Qwik than on Svelte. On top of that, I'm pushing a lot the Astro + Solid stack, so I'm not sure I have a bias for svelte, but anything is possible 😅
@@awesome-coding its very clear in your video and your replies here. You can have 5 million videos on solidjs and qwik doesn't in anyway proves otherwise. Bias can be picked up in a day. And yours was clearly all over the place and even on this comment 😂.
Qwik doesn't use VDOM.
I haven't used Solid but I really enjoy Qwik and Svellte. Qwik has really good DX and this is from a guy who doesn't like JSX.
Interesting - Indeed, I couldn't find anything in the docs regarding VDOM now, but I remember clearly a talk where Misko was mentioning it, and I can still find references to a Vdom in the code - github.com/BuilderIO/qwik/blob/main/packages/qwik/src/core/render/dom/render-dom.ts
@@awesome-coding Before September 2022 Qwik used vDOM but Sept. 21 useSignal was merged and announced in a Video on September 28.
Qwik: Beta and Beyond
@@awesome-coding maybe they are hiding it because vdom isn't what the cool kids are doing. The only mention I can find in the docs is in the JSX section where it says JSX != VDom in bold even. It seems intentionally obscure. I suppose it's not that important as the performance is exceptional.
Love your videos btw.
@@soundrightmusic Thank you!
Yep - you are right - the docs are suspiciously obscure on this.🤦♂
Qwik does use the VDOM. It might not be relevant in all places as they have some means to do granular updates, but its main rendering mechanism uses the VDOM. Not that that is a huge deal as Svelte doesn't use a VDOM and I'd still consider it generallyless granular in rendering than both other solutions.
Don't be a frameworker , don't learn frameworks , learn concepts behind those frameworks
+3000
Learn the concepts, but don't try to do it yourself. you'll only end up (badly) writing your own new framework 😅
Thats why svelte is the best. The closest in syntax to pure JS and pure html with huge power behind.
@@erickmoya1401 U are saying like u write 1M lines of app in svelte... It's not problem if something is close to js or not, it's about how u approach building the software... and most of developers are total crap in that... The idea is to build the software and change it on the fly tommorow replacing svelte or react or vue with something else...
Any resource to learn fundamentals of framework, I guess every framework is different isn't it.
In relative comparison I would put QWIK atleast one point ahead in the performance tab (due to the basically unmatched approach to the downloading/executing JS in terms of CWV)
To some extent I would agree. On the other hand, my question is the following - is the performance gap so large at this point? I agree Qwik is probably the best, but I believe that Svelte and Solid are soo close behind that it doesn't really matter for 99.99% of scenarios.
For loading mb, but performance in reactivity, I am not so sure. There is a reason they are not yet in the js framework benchmark. That kind of performance just isn't a priority to them rn.
It's also a bit of an unfair comparison to compare loading of qwik w purely frontend frameworks like solid/svelte. Qwik is a metaframework by itself, it's all about the server. Would be better to compare it to astro+solid/svelte or solidstart/sveltekit. Especially with astro+solid, I think u can get very similar results regarding tti, if u build for it optimally.
If u build optimal qwik you would have an MPA too, bc otherwise you are just delaying the downloading of the whole template to the first navigation.
I am absolutely in love with Solidjs, it just makes sooo much sense, in terms of it's reactivity. I love that I can easily use it outside of jsx, because it's primitives are sooo powerful.
Although I love the dsx of svelte! So simple!
I am just in the process of learning Sveltekit and deciding whether to use it or Solid or Qwik for version 2 of our company's product. This is so 100% spot on the video I've been looking for in the past week. Great job :)!
Glad to hear! Out of the 3 of them, Svelte is the "safest" option in my opinion.
@@awesome-codingyes
@@awesome-coding I agree, still risky compared to say React or Vue, but for me the tradeoff for better productivity is worth it (and I imagine onboarding to be easy, if new people know html/css/js).
The biggest downside is going back to work on a legacy AngularJs app :D.
@@HVossi92Trust me, sveltekit and risk don't belong in the same sentence :)
@@hyprsonic_dev Risky in the sense that it's not as ubiquitous as other frameworks (yet!). Meaning if you select it for a project, it might be harder to find experienced devs when you need to hire more
Not all frameworks are similarly reactive. React (and to a point, preact) is an outlier, which instead of relying on the tried and tested observer pattern uses immutable reconciliation for both its state to virtual DOM and virtual DOM to actual DOM reactivity.
Also, I would argue that the implicit reactivity of Svelte, while being very powerful, is not better than the explicit reactivity of Solid or Qwik. In fact, the latter is more obvious and has less hidden pitfalls.
I think you are making a very important point - hidden complexity is at times worse than obvious complexity.
@@awesome-coding Currently web dev seems to be just as dogmatic about components as the mainstream is about class-based object orientation (perceived reuse and all that).
Svelte's convenient reactivity is limited to the components, non-component store reactivity isn't that convenient.
SolidJS is a
state library that happens to render
so you can build application-centric apps without involving a separate state library (like Redux for React).
Awesome…I'm always amazed at how frequently you've been updating your videos lately.
Thank you very much! I'm trying to post twice a week whenever the rest of my life allows it 😅
or use vue, which is very similar to svelte code wise (when using sfc composable api), has good reactivity (is also about to have vapor mode without vdom), has great dev tooling, and is one of the largest js frameworks, so isn't hard to bet on in long term production projects
I don't think vue gets enough love from js community considering how it combines all the things js devs love about svelte, solidjs, and react
underrated comment. avoiding the hype is usually the way
also Vue is 100% community oriented, unlike React and Angular which are big tech children
Svelte feels like Vue 2.0
Vue is underated.
Vue 3 🎉
How is Svelte’s reactivity model better than Solid’s signals? Can you go into more detail?
Also, since 3.0 Svelte uses signals for reactivity as well.
Hey!
The idea in this video (a poorly explained idea nevertheless) is that Svelte's component reactivity is better than Solid's from a DX perspective. Signals have an API you have to interact with, while Solid's reactivity (in V4) felt "like magic". Here is a followup video I made on this topic - ruclips.net/video/XB993rQ-5DY/видео.html
I think you are referring to Svelte's store reactivity introduced in V3, which was different than the component reactivity (based on dirty checking).
It looks like they are unifying the implementation in Svelte 5, with the addition of runes.
I've used all three, and Qwik is my favorite because doesn't introduce a new markup (only very minor diff from React JSX except to account for event handler serialization), data-flow, and the resumabilty/serialization which bring several benefits than just fast page loads. Svelte is too magical for my liking, but no question the easiest/fastest of the three for cutting code. However, all three suffer from lack of ecosystem and tooling, which is easy to discount when lusting after shiny new frameworks. I decided to stay with React for now because I'm more productive with it when considering everything (availability of 3p libs, tooling, etc.), and will wait it out for another year or two before switching (if at all).
This is fair.
I understand your decision of sticking with React (A few weeks back I posted a video on this exact topic - the lack of tooling in newer libraries).
I can also understand that "Svelte is too magical for your liking". I think there is a valid point here. Sometimes things that "just work" are not the best.
I've used them all and found SolidJS to be faster.
Qwik has slower interaction because of the chunks
And I agree Svelte is too magical, we are using Svelte and I personally hate all the magical and sometimes buggy features
@@andreilucasgoncalves1416 Solid-Start is still in beta and not progressing at same rate as Svelte and Qwik, which was concern for me, even though huge respect for Ryan Carniato (really like his Solidjs mental model). Overall though, I found Qwik DX to be best fit me, and all three (Qwik, Solid, Svelte) are highly performant in comparison to React -- agree though that Solid is fastest. Practically speaking though, Rect performance has not been an issue for apps I'm building. It's easy for people to get caught-up in such things, but I suspect it's relatively small % of apps that need the added perf (or at least not top most priority relative to other considerations).
i feel like qwik's instant reactivity was not given enough praise for what it can do, the ability to make the builkiest of them all web app but then have the user load it as soon as they type the url is something else, im sure svelte and solid both are very fast frameworks, but when push comes to shove hydration will impact them and the performance the users would get, meanwhile with qwik u could ship 100gb of javascript in an app and have instant loading if you respect the lazy loading and don't overuse useVisible task and force hydration ur self which imo is huge, i think orgs like amazon could benefit a lot from something like qwik since they opted to not use frameworks due to performance, google already has something like that internally.
but again, Resumability needs more points here, i would still give svelte and solid a 2 but as a special case qwik should get a 3 since performance should theoretically always be perfect no matter how big the app is
As a person who has done Enterprise level development for years, I've been waiting for something that can handle scale the way that qwik can. Indeed, when I first learned that Angular couldn't handle lazy loading (first gen of angular now referred to as angularjs), I was flabbergasted. It seemed like such a huge oversight for a company like google.
Anyway, for smaller apps, the others are likely good enough, but even Vue and React really struggle at enterprise level. Also, when you need to deal with SEO, you're constantly fighting the battle of SSR or SPA, and often find yourself writing both, with lots of redundancy or very complicated code (or both). Qwik handles this with ease. I think Qwik will likely pull out ahead once it starts getting adopted by more enterprise level consumers. There's usually a wait time of 2-3 years after a stable release comes out before they will even begin, however, so my guess is in about 5 years Qwik or something very similar to it will start coming out on top.
This comparison is three of the four frameworks I'm most interested in learning at the moment, so good information.
Glad it was helpful!
In terms of maturity, SvelteKit wins hands down. They have all sorts of packages and 1.0. Qwik (qwikcity) is 1.0 and pretty behind, and SolidStart is still in beta and not even on the map. There is no comparison in reality.
Absolutely! Sveltekit is the best choice now.
Im a non-web-dev, so I just like the promise of Svelte without knowing what I'm getting into. I am probably fine with what it delivers atm, as I am aiming at internal tooling.
Yes - Svelte is a good safe bet!
@@awesome-coding i am really glad i am learning svelte... felt like it is only one i can enjoy using...
react was really overwhelming, so i hated to learn it.. (may be i tried to make big project for my friend 3 years ago with out knowing anything about react and still having ptsd due to it )..
but currently i my job is in support so hopefully i have time to learn webdev if i ever make a carrier change
Svelte is the GOAT now.
I swear, web devs are overreacting all the time. People switch careers in a year while some people are scared of different flavor of what they already "know"
I liked the very first Angular.js I like the idea of extending HTML and you as the user having the control over that. And this is also why I like HTMX, is simpler than angular1.
3:24 - Solidjs can do everything Svelte can do and more in the category of Reactivity. $: in svelte is createEffect and createComputed. But solid can also easily interface with obvservables and create signals from async operations using the from primitive.
Right - things will change in Svelte 5 though.
thanks @awesome for another awesome video. i am sure that these types of videos will help a wide range of developers
Thank you!
I still consider myself very new to web development and so far Svelte feels like a blessing to me, especially when compared to React (which I just struggled with for a couple of hours).
what is the website at 5:29 that has information about patterns?
www.patterns.dev/
can you compare these 3 with angluar, react and vue also??
Thanks for the suggestion!
I'm considering doing it, but then I'll be burned alive in the comments - People love their frameworks :))
@@awesome-coding not if you make the right choice and choose Vue.
😂
@@soundrightmusic 😂 but then no one would click the video
@@vaisakh_km sad 😭 but true
I tried SolidJS recently but I don't like the amount of stuff I need to do to get reactivity.
In Svelte is just $.
You don't need to write anything really, what you mean?
Frontend development isn't all about JavaScript and HTML. There's also need for CSS. To write JSX we had to think which way I should choose, styled component or JSS or module CSS or something else. Thanks to tailwind this problem is almost solved. But still if someone doesn't want to use tailwind, writing style in JSX will be again nightmare. That's why I would always choose svelte over all the JSX frameworks.
What's wrong with JSX?
@@chisangamumba2961 If you used any jsx library like react. And then you use svelte. You'll understand what I'm trying to say here. Svelte components are combined with js, html and css. Instead of only html and js.
@@ezaz7Same with Angular, isn’t that right?
@@TheMichaelK I don't have enough ideas in angular.
@@TheMichaelK and vue
I tried quik but quickly step back due to it's boilerplate experience similar to react. Svelte on the other hand handles all of the complexity during compilation so we can write plain JavaScript which hugely improves DX.
Thanks for sharing!
I'm really liking Solid a lot!! But it is lacking in Solid Start and more examples.
use it with astro
I think the more important insight in the video is this: "However we probably have around 2 more good years until coding will become just another automated task" :p
😅 One year left...
Its really a hard comparaison , the two of quik and solid have jsx so the translation from react to those two frameworks will not be so hard ,and what you should learn is some more javascript concepts like dignals , functions and some theory how they work , but svelte you will need to learn a new language to let the compiler work correctly
I agree - it's never easy to compare such things, but, at the end of the day, they are competing in the same space!
Trust me learning svelte is more easier compared to switching from react to solid/quik (even given you already a react vet), sveltekit is the easiest thing ever lol
Svelte is not a new language, is an extension of Javascript. If you know javascript it takes basically no effort to learn svelte keywords and macros as they are just an abstraction of concepts we already know. I migrated from react to svelte and it didn't even felt lime I was learning something new. Everything is straightfoward and easy to remember
@@AyushVachhani I couldn't agree more. I took up svelte and had a working real word prototype in a week.
This is why you should learn JavaScript not "React"
Have you tried Stencil?
I played with it for a bit, but its use case is too narrow for what I would need in my day to day life. Sure, it's great to build components, but, these days I need the whole meta-framework experience hassle free. It's tough to argue for a component library tool when options like SvelteKit are out there.
Like always great video! But IMHO you missed one very important category witch is "lighthouse score". There is very good reason why qwik exist. I'm working on a project that Core Web Vitals really matters and with nextjs a struggle a lot! We are shipping js where we don't need it at all only because of this how old js libraries works..😢
Thank you! You are right. I should have at least mention that Qwik excels at this. My take on performance was "all of them are doing extremely well, and if one is better, is not that big of a deal" which is not that fair for the one doing better :D
bro if I start learning web development to day is it worth or can I get a job please help me
Yes, I believe there is job security in the web dev space. It's going to be tougher in the upcoming years, but people with good skills will do just fine.
You are bringing nice content which aligns with latest techs...
More to come! Thank you!
Solid and Qwik also scale much better thebmore pages are added, Ryan Carniato pointed out a benchmark where thebpages on a site were gradually added up to 300 and solid and qwik performed the best , svelte was worse than vue in the end even though it started off really fast
Interesting! Do you have a link with Ryan's benchmarks? Thanks!
@@0.amonymous didn't get dramatically slower the more pages were added
Yeah if you start a project with sveltekit and build and a blank project already starts with 99 or 95 performance points which is worse than preact
300 pages on your site xD.
@@erickmoya1401heard of like 3 migration stories of people moving their company's websites to solid all 100+ pages , apparently for something that big they usually rely less on the "ecosystem" since they write most stuff in-house and only pull in things like Tanstack and other big agnostic tools
Something has always seemed off with Svelte for me. Qwik not really a serious option. Ryan Carniato is thr top framework guy, nobody has the breadth and depth of knowledge he has in this area. Solid just does things right and thats why all the major frameworks are copying it, including svelte now going with signals. Id be surprised if Solid didnt comfortably win the race between these 3 in the long run, its a class above in fundamentals and so much more potential.
I agree with everything you said here :)
Ryan is really smart and had a major impact in the frontend world in the past couple of years.
which one is best?
whatever they hiring for 🤷♂
😂 Angular it is then!
@@awesome-coding indeed. Angular, React or Vue
Qwik should lose performance points in my opinion, it uses aggressive lazy loading to gain initial loading speed but loses a lot of performance by turning literally all interactions into calls to the server, which are literally the weakest link of any web app and why developers switched to the spa model in the first place
Interacting with the counter in the official demo in localhost with slow 3g took over 1min to react and over half second without throttling (which is still a lot)
Slow initial loading is currently only a problem using React, all other frameworks nowadays are light and fast, the initial amount needed for a reactive app in svelte is only 2kb
Boosting initial load performance in exchange for slowing down everything else in the app really doesn't seem like a smart tradeoff to me, especially in an age where all frameworks focus on progressive enhancement and work before javascript is even loaded
This is a very interesting and legit point!
That's actually a misconception about Qwik.
Qwik doesn't lazy load on interaction, it only "lazy executes" the code because it get prefetched via a service worker on a separate thread into the cache.
Qwik in dev mode is not using the service worker, so your experiment wasn't showcasing the real value of Qwik.
Trying doing the same experiment by running "npm run preview"....
Even better - try to compare downloading a SPA on a slow 3g network VS any other meta framework VS Qwik, for each of them add a simple input field that's bounded to a value that shows on screen.
Then measure how much time each takes to become interactive (input value shown on screen)
Svelte is ditching their v4 reactivity and embracing SolidJs style signals! SolidStart is v1.0 production ready as of May 2024. So I see SolidJs is leading the way
I am making component like templates in django. And data flows by itself.
Interesting - will give it a try.
Love your vids, just wanted to point out a slight correction, Qwik does not use a virtual dom. While I'm not an expert I'll just post a quote here from Qwik themselves "Qwik does not have a virtual DOM (VDOM) like React. Qwik uses a different approach to achieve instant interactivity and server-side rendering. Instead of diffing and updating a virtual DOM, Qwik focuses on incremental rendering and reactivity using signals and components."
Hey!
Thanks for your feedback!
Regarding the VDOM - please check this video's pinned comment, and especially Ryan Carniato's response.
I haven’t gotten to use svelte for a while at my job (been on react projects lately) and I MISS IT
I can believe that :)
sveltekit for dx
Svelte
Qwik is too much like react and Solid is not much better. Svelte is the cleanest. As a former react dev both solid and qwik is an oasis after using react but i am trying to move away from jsx. I hate that stuff. Svelte feels like a fresh breath of air.
I also have most of my background in React. Solid seemed like a nice transition, but Svelte is growing on me recently :D
@@awesome-coding just be carefull, this is like a one way road, when You try Svelte, it's HARD to go back :D
@@mpiorowski Damn.. I have to be careful then... I don't want to turn this channel into a Svelte one 😅
Svelte is the best
I hear a lot of people say svelte is too magical, I have used react extensively, and I don't care how magical x or y. React FORCES you to stick to react's way of solving problems, you can't use vanilla js. If you tell me this is still not magical I don't know what to tell you. However, I still love it, but since using svelte, I will never go back to react. Svelte ACTUALLY respects vanilla js, you are free to use vanilla js or svelte's way of solving the same problem. It just make common problems easier. I have yet to find any flaw in svelte.
As for solid, I have only used it for about a week or so, and I just couldn't make a simple theme switch work as in react. For some reason the reactivity of solid is just a tad different from react, if you make a signal that reacts when another signal change it won't fire. Which made things harder, not simpler. To add fuel to the fire, the community is much much smaller than svelte. And the scope of problems you will have to solve from solid are a lot more than react and svelte. Since it's minimal, unlike svelte. It gives you many things out of the box.
Thanks for the video❤
Thanks for watching!
I respect the opinions here and attempt to adjudicate the frameworks but I noticed a lack of objective analysis on many of the points. I hope you consider these suggestions for a future video 🙂
Reactivity - Since you are comparing architecture here I think we need to be *way* more objective. Svelte's reactivity isn't composable and not as efficient at Solid nor Qwiks. This is a major consideration missed by your video. If you're comparing the reactivity DSL-wise then this should be renamed as a category or rolled into DX. Also all three frameworks have a compiler so claiming Svelte has a one-up here is not totally relevant.
DOM Updates - I'm having a hard time reasoning Svelte being a 2. Solid is hands down more performant and efficient at this task. I'm not sure if it's fair to put Svelte at the same level as Solid in this category. I'm not sure why this is a category at all because it's tied to performance in general. Either way Solid wins in this category given that it is more specialised at fine-grained reactivity. Signals are a big super power here.
Performance - It may be your opinion that performance doesn't matter but I think it's not really just (even disingenuous) to discount two other frameworks *designed* for performance by making them all equally scored. Svelte should have 1 in this category because it's "good enough" compared to Solid and Qwik. These are two frameworks designed with performance in mind.
Dev Experience - I believe Solid and Qwik should have 1s. They are behind Svelte which is much larger and more popularized at this point regarding ecosystem. Experience wise the language itself has pros and cons that are far more subjective ie. SFCs and such.
If you were to recalibrate these numbers the frameworks would be:
Svelte - 12
Solid - 12
Qwik - 12
All these frameworks are equally balanced and you should explore each. I hope that your future videos will strive to be more objective.
❤💙
Hey!
Thank you for your detailed comment. All your points are valid - will try to do better next time✌️
I almost like Svelte, but as I was going through the tutorial they sprang their own programming language on me that isn't a complete language. It reminds me of C macros compared to C, in that it's an entirely different language with different rules and may/may not be turing complete.
So I almost asked on Discord, but they have it locked up so you can't just ask questions, you need to have a technical issue or STFU, so I'm not asking.
IMHO, I don't want to write something in Svelte's programming language, because in 5 years when it's no longer the future I don't want to have to rip my entire codebase apart rewriting everything, nor do I want to face the possibility I simply *can't* write something in Svelte because their language is somehow incomplete or broken.
So instead I'm likely to turn to either vanilla TSX or SolidJS if I can convince myself that I need this reactivity/state management actually.
Good points!
I don't think that you went through a Qwik tutorial before making this comparison. You just absorbed some rumors on RUclips about Qwik and made up your opinion.
You are complaining about QRLs. You don't have to deal with them. It's a transparent internal mechanism. Therefore creating components in Qwik is barely different than doing so in React.
Your take on reactivity and dev experience is completely subjective. You have no basis for what you are saying.
Hey!
I actually spent some time working with Qwik - also obvious by the fact that I have multiple video about it on the channel. QRLs are not hidden at all - I had issues with registering event listeners outside JSX because of QRLs, and I ended up on their discord just because of that. You can't say they are a transparent / internal mechanism when you are forced to wrap event listeners in them to make things work. It is not my intention to bash Qwik, but on the contrary.
Dev experience is subjective, and I stated that in the video as well.
@@awesome-coding! I get it. Thanks for sharing your take!
Svelte very very awesome you are a hero ❤🎉
I don't think that qwik has virtual dom.
Hey - I'm pasting my answer form a different comment here:
Indeed, I couldn't find anything in the docs regarding VDOM now, but I remember clearly a talk where Misko was mentioning it, and I can still find references to a Vdom in the code - github.com/BuilderIO/qwik/blob/main/packages/qwik/src/core/render/dom/render-dom.ts
Sveltekit is the best))))
no, solid
svelte, svelte, svelte!!
What i see , is that you should learn only one of them, they have a big similarity and the difference of them isn't that big
Yep - and that applies to all frontend frameworks.
Htmx with splash of alpinejs using go fiber and templates. 🔥. At the end of the day I use whatever as long as it has paycheck at the end of it.
Fresh or Lit or Qwik or Imba
Svelte should take the lead in the state category because of compatibility with external state management libraries thanks to the store contract
Want to use xstate to create state machines? it just works!
RXJS? Just works!
Preact signals? Just use the core library! (not even the preact itself does that)
NanoStores? Just use the core library!
Even libraries that do not 100% follow the store contract can be adapted to work on just 2 lines such as Zustand, redux and even solid signals
Why are signals "good enough"?
They are good enough compared to Svelte's reactivity which "just works". Compare let x = 0 to let x = useSignal(0). Which one is cleaner?
Qwik 🔥🔥
SolidJS will be new Angular, Qwik will be new Vue and Svelte will be new React.
Wha… what?
Please elaborate 😅
Huh?
I would say (also based on the syntax) if you already say so, that Qwik would be React and Svelte is close to Vue...
but still in realm of fantasy :D
@@awesome-coding
Given 3 current frameworks : React/Angular/Vue
vs new frameworks: Svelte/Solid/Qwik
If we have to predict which new framework will be equal to old one in terms of popularity, we will get to the comment
It is an over the top prediction, based on current popularity. Everyone loving Svelte thus it is good candidate to be new react, and SolidJS is refined version of current react which might not become as popular if Svelte way of writing app win in next 5 years, thus it becoming next angular. And then Qwik just being there as 3rd alternative like Vue in the past.
Svelte
Let go Svelte!
htmX > React + Svelte + Qwik
I got you - ruclips.net/video/huMTT5Pb8b8/видео.html
My man, please add some freshness to the content. Swap the music for something new, add new stock footage. The content itself is good, but It's getting really irritating and monotonous
There is no winning with you guys :))
The answer is Svelte
"The New Wave"
In the next 10 years there will be the new wave as well
We gotta stay busy, right?
Svelte is not a framework, it's JS superset
"We're proud that Svelte was recently voted the most admired JS web FRAMEWORK in one industry survey while drawing the most interest in learning it in two others."
Guess where did I took this from?
Something happens to me when I hear the word ZVELTE
Well at least the video did something :))
Agreed!!!
It doesn't matter. These comparisons are pointless. Learn everything you can. These are just tools and you should have as many of them as possible to solve any problem you encounter.
In the end dx and the adoption matter the most but none of these have any presence in the market. As far as companies are concerned there are only two frameworks angular and react thats it
Edit: As far as usage is concerned
React is like 5 times more popular than angular and vue
Angular and vue are tied
Svelte is 1/10 th the usage of angular and vue or put another way react has 50 times more adoption than svelte
And nobody uses solid or qwik
I know a few companies which work with Vue (I'm part of one for instance), but Angular and React ar for certain the "safe" bets.
I also believe we should learn everything we can, but also people love comparison videos, so don't judge me for that :))
@@awesome-codinglol people do love comparison 😂
I use sveltekit at my company too but we are the exception and all this wouldn't even matter after ai takes over our jobs anyway 🤣
@@TechBuddy_ 2 more years... I'm telling you - I'm already looking for entry level construction jobs...
@@awesome-coding I think senior and or very talented devs ( I think I am one of them 😂 ) have like 2 years as you said but anybody else is going to be replaced the next second gpt 5 comes out.
Btw find a construction job for me too. We will make RUclips videos about that too "Awesome construction" lmfao 🤣
Best option? That would be Angular. *Waits for angry comments*
Shots fired 😂
seems biased against Qwik .. it doesnt have vdom etc. :/
:)) that wasn't my intention. You can check some of my other videos on the channel, where I'm focusing more on qwik and its benefits.
The VDOM is not obsolete, since it’s the only runtime-only rendering mechanism compatible with declarative markup. The alternative is to generate granular DOM updating code on a component by component basis. This involves a fairly complex build step, which brings about a different set of tradeoffs. VDOM rendering still has its place - In fact, it minimises the bundle size at large app scale. The runtime performance penalty of VDOM rendering is also greatly alleviated by a more granular reactivity model that doesn’t re-render the whole component tree on every update.
Hey!
Maybe we have a slightly different understanding of the VDOM? To me the VDOM is a 1 to 1 representation of the real DOM used for one purpose - dirty checking to see what needs to be updated in the DOM. Nothing more, nothing less.
Solid has exactly the same declarative markup as React, but one uses the VDOM and one doesn't. The one that doesn't use the VDOM, while still providing the same DX performs better. Why would you need the VDOM then?
Another example is Preact which introduced Signals based reactivity and rendering as an alternative to their own lightweight VDOM implementation.
I remember reading (take this with a grain of salt) that Vue is exploring alternatives to the VDOM as well.
Finally, as a counterargument to the complex build step as the alternative to the VDOM, here is a short video where I'm looking into a library doing granular reactive DOM updates in under 1kb of source code - ruclips.net/video/Oh2IEVqarHs/видео.html
Solid does indeed enable the same declarative markup model without employing VDOM to update the DOM. It keeps the DOM in sync via code that is generated at build time. The framework reads the JSX code and produces objects that close over the signals present in scope, and subscribe to these. When a signal's value updates, this generated code runs and updates the dependant DOM. This is an alternative to VDOM rendering and shifts a substantial amount of the work to the compiler, resulting in a net runtime performance improvement.
It's nonetheless important to understand that this is a (rather favorable) tradeoff, and not a case of a technology being superior to another in every respect and therefor superseding it. A compiler adds significant complexity to the toolchain as well as the mental model. For one, Solid, Svelte and Qwik change the semantics of JavaScript, by adding their own code via the compiler. Indeed, the same JavaScript can mean different things in these frameworks. This may be a reasonable tradeoff given the scale of your company.
The strength of VDOM is that it can be pure JavaScript. VDOM is a library, not a compiler. You can adopt it without changes to the toolchain. The semantics of JavaScript remain unchanged. It's debuggable straight in the browser. That's why I'm saying that it isn't obsolete, but that it implies different tradeoffs.
Astro ❤️🗿
Easy, they should choose HTMX
Just learn Angular, React, and Vue. Those are enough. Don't jump on top every Flavour of the Month "Framework" that comes along. When will Devs learn? 🤦♂️
Never!
After after some time both solid and qwik is gonna be as bloated as react. Svelte is gonna be more complicated as well but that's just inevitable. Being close to vanilla and just looking better.
That's true... software is always becoming more complex.
fresh
The underdog
Solid is faster than Svelte so this goes to show me you have no idea what you talking about
None of them.. the ecosystem for those is small, job opportunities are even fewer... Just stick with react and next or angular or vue..all these new tools are cool but..a lot of buts.. 😂😂
Pick Vue
I think Vue has the biggest fan community in the comments. No joke - you guys are on each and everyone of my videos.
DX matters, Qwik have best DX so far, clear winner Qwik.
DX is also very subjective. Thanks for the comment!
@@awesome-coding
Yes,
In 1.2.6 Recently they have added jokes on cli.
That's why qwik is better.
@@PRATAPSINGHSHEKHAWAT Well, I'm sold then! :D
Vue+Nuxt, wtf
I am removing legacy made by asp. My choice is sveltekit. So very wonderful, nice, beyond description. I am falling in love sveltekit
Astro: am I joke to you
I'm actually counting Astro as a meta framework since you can use Solid , Svelte and Qwick TOGETHER in an Astro project, but it doesn't work the other way around.
I am a big big fan of Astro - just check out some of the videos I posted on this subject :))
Astro
Now compare them with jQuery
😂 it wouldn't be fair...
tired of svelte changes .. runes dollar sign routes, solid is better
I have a much simpler answer, for me it is and always will be - for the foreseeable future. Vue3 or Nuxt3.
I'm looking into nuxt these days - amazing stuff!
@@awesome-codingplease do svelte/sveltekit vs vue/nuxt
resumeability is just a gimmick which not really that much useful, lazy loading components is enough optimization
Interesting
eww qwik is awfull just like react thats a no no i will pass to anything related to react
😅 Fair enough
Unless you are a monkey, React obviously.
I am a monkey then! 😅
@@awesome-coding I mean, sure. Im sorry but recommending Qwik or Solid and not recommending React in 2023 to actual land a job and not do some side project that nobody gives a F, is a monkey thing. I would argue Vue would even be better to pick up than Svelte for actual job market. And I like Svelte, but i see nothing in the current market world where I should pick Solid or Qwik over React. Im not trying to be Theo here, im actually against 90% of his takes, but React is your best bet to land a job and everyone knows this.
No one is arguing that point with you. This just shows you missed the whole point of the video. No where was it mentioned in the video to dump react and use one of these. So your rant isn't needed here at all 😂
Zvelte..... 😂
Oh c'mon :)) I tried to do it better this time 😅
@@awesome-coding Zvelte, Zolid, ZSS 😂
its only solid or qwik, cuz svelte suuuuuuuuckzs
Svelte is either the best thing that ever happened or the worst ever - there is no middle ground :))
@janvarga Cry louder
@awesome-coding your bias for svelte is so lond.
@@rnwonder107 Interestingly enough, you'll see on my channel that I have more videos on Solid and Qwik than on Svelte. On top of that, I'm pushing a lot the Astro + Solid stack, so I'm not sure I have a bias for svelte, but anything is possible 😅
@@awesome-coding its very clear in your video and your replies here. You can have 5 million videos on solidjs and qwik doesn't in anyway proves otherwise. Bias can be picked up in a day. And yours was clearly all over the place and even on this comment 😂.
Sveltekit > Qwik
Bundle size with 80 components:
Qwik 10kb
Vue 104kb
Solid 104kb
React 134kb
Svelte 150kb
@ivanh1821 - do you have a source for these metrics? Thanks!
@@awesome-coding Sure, ruclips.net/video/4kRFgBC6lJU/видео.html
@@ivanh1821 Thanks so much!
next/svelte/qwik/solid/astro/lit !!
svelte is fun to use and easy 🤌🏼
sveltekit is master piece