Svelte, Solid or Qwik? Who Won?

if I had a scent for every time somebody asks me what they should choose between solids wealth and quick I would probably have around 4 cents in all seriousness now that these Frameworks are getting more mainstream it's only natural for you to wonder what's the best option after all most of us can't afford to spend days reading documentation websites and playing around with Frameworks just for the fun of it on top of that nobody is crazy enough to bet their job or their future project on a new framework which might or might not succeed in the long term as developers we are used to the endless debates of which is the best programming language or the best web framework after all the internet is filled with react versus angular articles and more often than not does end up in Echo Chambers where their preferred tools are the only viable option for any type of problem however we probably have around two more good years until coding will become just another automated task so the answer to the question should I learn zwelt solid or quick is that you should learn all of them don't get discouraged though this can be easily achieved these days by following a couple of simple steps let me explain modern Jazz Frameworks have way more things in common than you would expect once you understand the basic concepts everything else will fall into place so we'll spend the next couple of minutes breaking down the Core Concepts behind all these Frameworks we'll also assess and grade how well they are doing in eight core aspects so stick around until the end of the video to find out which one is better zwelt solid or quick so all modern apps are built using components at a basic level components are isolated Elements which associate an HTML template to some JavaScript Behavior they manage their own internal State and can communicate with the outside world via properties and events solid and quick components are similar in nature since they are following closely the react model which relies on functions Hooks and jsx for templating purposes swelt follows a single file component approach made Popular by Frameworks like View and its own HTML based templating system while the approaches might differ visually the fundamental ideas are still the same and picking the best approach is mostly a matter of preference for grading purposes we'll use a simple process where a score of 0 represents a subpar performance a score of 1 is good enough and a score of 2 signifies great performance when it comes to building components I believe that both solid and zwelt are doing an excellent job solid fully relies on the well-known react approach while itsvelt manages to keep things simple and clean Quick's approach is good enough for me but I feel like their heavy use of qrls and dollar signs all over the code is not the best Dev experience URLs are a very powerful mechanism and we look at them in more detail but sadly they come at a price OK next let's look at reactivity the magic under the hood the thing that makes our web app stick in short this is a process that ensures changes in your component state are reflected in the Dom and vice versa again this is a core concept and all Frameworks under the can't follow the same principle just remember this whenever internal state or properties are changed by external events like user actions or server updates the Dom should be updated in an efficient manner I don't think it should come as a surprise when I say that Val's reactivity is simply excellent in our fairness as well as a compiler so it can leverage this detail to create powerful mechanisms such as reactivity through a stagnation or reactive statements the bar is set quite high so in comparison the signal architecture used by solid and quick is just good enough when building web apps you'll usually encounter the most complexity when managing State again most modern Frameworks employ the same mechanism when working with State consider here ideas like the flux pattern or the unidirectional data flow all Frameworks are doing a great job on this topic with Concepts such as well readable and writable stores solid immutable stores or quick recursive stores so as you can see these Frameworks share a lot of common ideas but there is even more to it we've discussed reactivity and state let's now take a quick look at the last piece of the puzzle updating the Dom Soviet and solid are keeping things really simple here when changes are detected the Dom is accurately and efficiently updated quick on the other hand relies on a virtual Dom and in memory representation of the real Dom used to minimize the number of updates to the real Dom while this technique was rather popular for a while recent improvements in both browser performance and algorithms are rendering the virtual Dom obsolete while still a good enough solution one has to take into account both the JS overhead and the memory consumption of using a virtual Dom instead of the real Dom directly another thing all these tools are sharing is meta Frameworks zwelt has kit solid has start and quick Hass City these Frameworks are offering a wide range of features on top of the existing UI capabilities thing here of routing server rendering support or full stack development support swell kit and quick City are a blast to work with but in all fairness solid is lagging here with a meta framework still in beta moving forward to everyone's favorite topic performance I believe all these libraries are doing extremely well in my opinion we are past the point where measuring them updates is a relevant metric and I don't think it ever was actually in the modern web over the wire transfers memory consumption or time to interactive are much more important when quantifying performance again everybody is doing great here with slight variations that don't really move the needle The Meta Frameworks employ various strategies ranging from the Island's architecture to partial hydration and quick deserves a special mention here due to its innovative reasonability architecture OK when it comes to developer experience things will get a little bit more subjective when assessing it I am always considering things such as ease of development Learning Materials the overall adoption and the overall ecosystem I believe swelt is offering the cleanest and most streamlined experience and solid as a really good job improving the already more than popular reactive device writing quick code is a bit more boilerplated though especially compared with the Alternatives finally whenever looking at the framework it's always a good idea to evaluate its adoption and possible prospects in the job market at the end of the day this is what really matters and what turns a hobby Library into a real project we have to be objective here and consider all the Alternatives in the front-end space with all this in mind I feel solid and quick are not cutting it yet and sweld might be good enough due to its larger adoption rate so these are the final results do you agree with them if not voice your outrage in the comments and until next time thank you for watching

Channel: Awesome

Views: 37,660

Keywords:

Id: EL8rnt2C2o8

Length: 6min 37sec (397 seconds)

Published: Mon Jul 10 2023