What is SolidJS (vs React and Svelte) ?
Вставка
- Опубліковано 6 чер 2022
- What is Solid JS, the relative newcomer to the JavaScript frameworks scene, and what is it worth versus React or Svelte ? In a sense, Solid JS is inspired by both. It draws on React JS's familiar syntax, without using a Virtual DOM, and on Svelte for it's reactivity, without overloading the assignment operator. In that sense, Solid JS is way more than just the sum of its parts. #SolidJS #JavaScript #reactjs
-------
Want to go into further depth? Head to kodaps.dev/ - Наука та технологія
Let me defend Svelte a bit: I claim that its "magic" isn't a bad thing at all. In my experience, not understanding what's happening under the hood isn't a problem if the abstraction is reliable and doesn't introduce unexpected/buggy behavior. A good example is that few web developers know how a CSS layout engine works internally, but this doesn't stop anyone from using CSS. Svelte's approach lets me write less glue code making the code of a Svelte component typically 30-40% shorter compared to React. Introducing a bug when writing React hooks (or Solid signals) is more likely than finding an edge case in which the Svelte compiler messed up (which I've not encountered yet). Looking at it from that side, one could say that Svelte components are actually less magical. Their business logic code isn't cluttered up with glue code and therefore more obvious. As you say, in the end it is "a matter of taste" :)
I totally agree that we should not fear reliable abstractions. I loved trying out Svelte because of the brevity of the code. I loved that I could write markup on column 1 of a *.svelte file where as for React/SolidJS I've got to indent at least twice (function ... -> return ... -> ..., or thrice if we're using fragments). I loved that I could just write the CSS in the same file without creating and importing extra *.css files, which made my source tree very small.
What I found alarming was the fact that I had to use explicit assignments when I wanted to change state. This is a minefield for a lot of developers who are transitioning from React. So many devs would waste a lot of time assigning to obj.prop and wonder why the change to obj does not reflect in the UI. I like that React forces me to call setX(...), so I cannot get it wrong. But then again what Svelte does is pretty much similar to what Redux did, so maybe with time this peculiarity will become second nature.
Totally agree ! This is the purpose of encapsulation and abstraction in OOP, if I'm not wrong !
There is one case where Svelte's black magic messed me up. Good or bad i was using the presence of a css value in to determine if something was to be included or not. So effectively my "Included/NotIncluded" was to toggle and update the styles... As nothing at first on the page was "Included" svelte silently removed the style altogether. The annoying thing they should default to not break stuff. No warning, no message anything was removed... I fixed the issue but only found how to by asking on the Svelte Discord, have to say on there got good help quickly, but one shouldn't need to, should be documented, or some warning... For something to auto-fix up and break code... Really bad. Sadly the response was the bug was my fault...
I would add that even a runtime can be considered "magic" since we call useState or useSignal but nobody really knows what is happening there.
This is one of the few or only contexts where "magic" is entirely a problem.
And if trusting compilers is a problem, I guess we are going back to writing assembly.
Mainly I just want a real world example of how one framework is better and or worse in specific situations. Saying you have a problem with magic doesn't really tell me what if any real problems exist. If the compiler works as expected, as intended, what is the problem?
EDIT: I really do want to know about the benefits of solid, real benefits and real svelte drawbacks as a developer.
My problem with Svelte is not with the magic per se, and it is not a personal problem. But I have trainee developpers in my team. And Svelte looks like JavaScript, except the Svelte compiler adds reactivity. I would be wary of putting it in their hands because some of them are still learning how JavaScript works, and Svelte looks so much like JavaScript that they might not understand that it is in fact the compiler doing the work. That's less true of Solid, it gives them the opportunity of learning how message handlers works. On a personal level, I like and appreciate both, and would go with either depending on the context as both are low in boilerplate and provide fast performance.
@@KodapsAcademy alright, so I guess I learned two things.
1. Svelte being too similar to JavaScript, for better and/or worse, may miss lead new developers. Seems like really good point.
2. Manners.
Thank you for the insights:)
I'm glad to have been of service, thanks for your reply :)
Wait, why are trainee developers jumping into a library before they even understand the underlying language? That’s such a disservice to them and their growth as a developer.
@@KodapsAcademy I can’t comment on Solid but I think I can still disagree there. Svelte was my first framework (or rather library-like compiler) and because it’s so close to javascript and html, I spent lots of time on MDN Web Docs and learned a lot about actual web technologies. After completing my first "actual" large project in Svelte I learned React and voila, suddenly you just google "how to do thing in React" instead of "how to do thing in HTML". And I found myself just installing shittons of React libraries, copying code and examples I didn’t really understand and drilling props as if I was looking for oil with them...
Again, I don’t know how that translates to Solid, but React’s heavy abstraction of, well, literally everything made me a worse developer as a beginner. React only makes you learn React, not Javascript. Sveltekit actually makes you learn Javascript, and it’s actually pretty clear where Javascript ends and Svelte’s magic begins. Much clearer than in React for me.
Plus, you’re encouraged to write actual Markup and actual CSS, while in React you’re usually encouraged to do CSS-in-JS or abstract everything away with UI libraries again. You also learn absolutely nothing about semantic HTML or accessibility, while Svelte (even their interactive tutorial series) teaches and pushes both those things a lot.
I am an entirely self-taught web developer and so I spend way too much time watching youtube videos around web frameworks (many hours a day for many years).
I can honestly say that you are the best technological communicator I have encountered when it comes to web development, I'm not sure how exactly you pull it off but you have a real sense of Humble Authority; you speak in an opinionated way without any arrogance, which makes your opinion trustworthy.
Hopefully the youtube algorithms pick you up soon and you obtain the success you deserve.
Wow that’s *very* kind of you, I’m touched. I’m not sure anyone else has ever described me as humble but I’ll take it… proudly :D
Thank you for the good explanation. But I dont know why everyone talks about svelte "magic" I mean its a compiler, thats the idea of it, taking a higher code level that human can easly understand and leave the hard work to the machine. Its my opinion but I still think that svelte sintax is more natural, I mean what more natural than writing code almost like vanilla js, css and html
But that’s my point. When you write let item = 1; you might if you are coming from JavaScript, think that you are just setting up a variable whereas in fact things are slightly more complicated than that.It’s fine if you understand that, my concern is if a junior developper gets confused and believes the behavior also exists in vanilla JS :)
@@KodapsAcademy yeah I actually get the point, but in that case I think it would be even worse to see something like const [i, setI] = createSignal(0) which yeah it is valid js, but overcomplicated for a junior.
@@HeyDan1983 Look for Ryan Carniato's article "Building a Reactive Library from Scratch". In
[i, setI] = createSignal(0)
`i()` is referred to as a "getter"; but it's actually a(n automatic) subscription function that happens to return the current value of the signal.
One issue with SvelteScript's reactivity is that it's only valid within Svelte components. If you want to organize reactive functionality outside of components you have to resort to Svelte Stores which aren't as seamless as reactive assignments inside of .svelte files.
Based on Ryan Florence's talk "When to Fetch" it seems to be finally dawning on the React community that they have been putting too many capabilities into their components (i.e. components are now being segregated from business logic; welcome to 2014's "Segregated DOM").
If you want to move functionality out of a Svelte component for the purpose of code organization or headless testing you lose reactive statements.
SolidJS isn't encumbered in that way; it's reactivity works as long as it operates within a reactive context (the thing that handles all the automatic subscriptions at runtime). That context operates from behind the `render()` function in an app but can be established independently for testing purposes.
@@PeerReynders Im not bashing on solid, I think its a good alternative for react. Im just saying I feel cleaner svelte syntax, also Im not saying svelte its perfect.
@@HeyDan1983 It's not about Svelte bashing either.
It was a breath of fresh air in a space that is dominated by React, Vue, and Angular; "Write Less, Do More" is great but its focus on lean JS bundles to support even resource constrained devices was even better. And is rollup ever a nice change from webpack. But ultimately there can't be a one-size-fits-all framework/architecture (React and SPAs are being used in a lot of places they shouldn't be).
One needs to critically examine one's tools on a regular basis and be aware of their particular limitations. Also a lot of DX just boils down to personal preference which doesn't necessarily improve the technical excellence of the product that the end user has to interact with. I personally don't care for JSX but I like the decomposability of SolidJS.
Team Harris and Team Carniato are both doing great work in their respective spaces.
"Svelte seems magic" is hardly a reason to dislike it. Since when is "it works like magic" a bad thing !? If Svelte is hiding complexity - well, why should I care about knowing about the complexity? When I fly a plane, i dont care how it works - just that it works.
My point is not that is is magic, but that magic that looks like normal JS can be misleading for the junior devs I work with :) And don't get me wrong : I like Svelte :)
This is really poor reasoning. As a passenger I would prefer the pilot who also knew how the plane worked to one that didn’t. It’s more like a master chef choosing not to use a rice maker because they know the process intimately and don’t want anything to distance them from the process. Not that all pilots should be engineers, but if a pilot simply didn’t care how planes worked I 100% would not fly with them lol
@@KodapsAcademy Have you actually looked at the Svelte compiled code? It looks substantially like your input but with some instrumentation (eg. the $$invalidate function). You might be pleasantly surprised by how little actual "magic" is introduced into the mix.
Fewer lines of code = fewer bugs.
@@onechaintwobinerz5402 Try looking at Svelte-compiled code. You might be pleasantly surprised. It just looks like your code with instrumentation. Boilerplate should be handled by computers, not people.
New to JS SPA's, but why is solid/react so much more confusing than svelte? The whole createSignal(0) thing- why? UseState, why? Why doesn't it just work.
Yeah, I think Svelte has a simpler and cleaner syntax. Because Solid with createSignal and React with useState syntax is actually what makes the "magic" word stick to SolidJs and React, right?
Excellent video, it's the first one I've watched and I loved the narrative mode. I looked a little at both frameworks and I confess that I'm more inclined to Svelte, in the end they are frameworks, what SolidJS gives me in the end is also magic, because I don't know its internal code, and I probably won't know how to solve it if I have any bugs .
Thanks for such a useful video on Solid using comparisons to Svelte and React to help explain differences. So many existing projects already work well (if slowly) in React that it will take time to shift to a mindset of "ship-less-javascript", but gradually more devs will see the upside of disappearing frameworks...helped by seeing your vids!
I’m really pleased you found my video useful, I’m glad to have been of service :)
This was an amazing video! Thanks so much for sharing this
Although I still prefer svelte. I just love the DX and how it feels really fast and light to work with, and some stuff just make more sense to me than react.
Yeah I agree that Svelte's DX is really nice :)
Great! What's your Vscode theme? Thanks.
Hey the theme is called Luvia, you can find it here : marketplace.visualstudio.com/items?itemName=maciekkoks.luvia-theme
lol I love the "I'll sprinkle a lil bit of solid js" lol
co worker showing up to an old component thinking everything is in react just to realized someone sprinkled some solid into the page lol hahhahaahhahaa
great video bro
That would be funny :) but I actually meant within a PHP stack, not within a React app :) Also, thanks for the kind words :)
Good video. This really made SolidJS easy to understand. It's just a framework aimed at people who like working with React's non-standard architecture. Not sure why they would switch though.
SolidJS and AstroJS is killer combo.
And Astro is going to be the subject of my next video :)
@@KodapsAcademy I see that web with this frameworks, moves more toward this islands architecture, and be more client as possible without re-rendering. But what I have in my mind is we not seeing the potential of only using rxjs what can do. U don't think about what and how to re-render things, just what values will arrived at some time in future. Even u can use rxjs for things like kafka or rabbitmq on backend, I don't see why so much effort with different frameworks, even I think Astro, is really something more interesting that fresh or next.js, but still, with open channels and reacting just to values, u expect over time with rxjs, I don't see the hype over new frameworks and architectures for more lean re-rendering. For example as microservices needs to be decoupled and u react to topics arriving from kafka or rabbitq, in microfrontend architecture u can achieve the same with rxjs, and u can use native js signals to send from one microfrontend and everything else to listen and react to those changes over time. With that said, I don't see the time we lost in trying greenfield in new frameworks. Or I miss the point somewhere.
“Compilers do strange stuff to my code that i don’t understand”. Yea, thats what compilers are. What did you expect?
The problem is when the compiler overrides vanilla JS syntax to override the behavior of the assignment operator. It’s the kind of thing that is bound to introduce confusion in junior développera.
@@KodapsAcademy when does Svelte override the = operator? Every svelte component behaves exactly as you would expect if you were writing a single html page (with its style and script components). They just add some special syntax like reactive code ($:) and stores, nothing crazy that you can totally opt out
Svelte’s docs state that “assignments are reactive. To change component state and trigger a re-render, just assign to a locally declared variable.”
Thanks for the overview on Solid. You can really tell when someone takes any criticism of their favorite framework personally. A sign of the fee fees generations.
thanks for the explanation
Your narration is top class!
I have been thinking of building a data science driven dashboard. Which framework do you think is good for dynamic websites? Vue? Svelte? Solid?
I searched on the internet and it said that Svelte is good for static websites.
Use whichever one you want. All of them are more than capable of building a data science driven dashboard, and they all support ssr. I personally use svelte, but you can use whatever you want.
Man I love the way you talk. Its dynamic
Svelte is awesome though
Thanks for the kind words (and I like Svelte too, to be honest :) )
What's the point of being a developer if you don't trust compilers?
You misunderstand the point I was making :) Svelte's compiler overloads JS syntax to add interactivity, and could easily lead junior devs into believing that the features it adds are a part of the JS language. As such, Solid's syntax is more straightforward, whereas Svele's reactivity is compiler-based. I like both, mind you :)
@@KodapsAcademy I'll just take your word on how junior devs react (heh) to Svelte's syntax. I'm a junior myself however, and it was pretty obvious to me with a JS background that what svelte is doing is not JS. Do your juniors not come in with HTML/CSS/JS+JQuery background? I feel like if you have that, and are aware of how script tags work in HTML, then it's an obvious deduction what Svelte is doing due to the .svelte template layout having it's own script tag and the '$' reactivity marker. Given my background, I suppose I was just always going to see Svelte as less "magic" than react style component functions that return JSX. But that's all anecdotal I suppose.
@@KodapsAcademy To sum my experience, Svelte really did feel like the second coming of JQuery - both enhance JS in the ways that matter.
Very good introduction to solid. I am using solid in my personal projects & I should say it is fast & It is also makes so much sense compared to react in regard to developer experience or resource usage. I am using react by the way.
Thanks for your encouragement! :)
All frameworks are essentially compilers they make model-dom-binders aka web conponents for every component.
And it honestly wouldn’t even be too hard to figure out which component needs to be rerendered if the component itself is coded to notify the framework that it observed a change.
It’s all about how the framework essentially handles the dom binding of the component.
Angularjs long ago had the dreaded loop, but vanilla web-components (you know that ancient technology that nobody uses?) they render themselves. If your vanilla web-component is coded to receive observable, they just update themselves, and there’s no reason they could also be coded to notify a framework that they observed a change.
Top down, vs boots on the ground. Not magic
Svelte's syntax is infinitely more clear and easier to work with.
Opinions on DSL are extremely subjective though and entirely based on preference. Ease-factor matters most for beginners is what I'd argue. Svelte may fit the mindset of certain people but is anyone considering how the DSL scales with complexity? I suspect Svelte starts easy and becomes complicated. Solid takes a bit more effort to onboard and remains consistently simple. This makes both frameworks relatively good for certain types of builder tasks. A major goal of Solid is to scale out with complexity so it is consistent at any scale small or large. It's the "do more with less" mentality whereas Svelte is a batteries-included approach.
I agree. In addition to that, svelte devs work hard to not reinvent the wheel and use existing web api as much as possible. It is the closest thing to writing vanilla js, with amazing readability and performance. If I’m going to support any of the frameworks, it’d be svelte, based on objective reasons such trying to follow existing web api.
@@ofeenee saying Svelte is more vanilla isn't an accurate statement. Svelte uses DSL enhancement to make writing reactivity easier - in the end the magic of the DSL gets transformed into something radically different to wire up your reactivity.
Solid also uses a compiler however the type of compilation work being done is not as intensive and doesn't obfuscate your knowledge of what's going on. The JS output is mostly equivalent to what you would have written. So an argument can be made that Solid is actually more vanilla.
When it comes to readability, that's purely a subjective opinion. Personally I find Svelte DSL magic gets in the way of understanding what I'm writing, but that's just me. To each their own I suppose.
@@daviddibiase4391 I now understand better the difference between the two, and now I agree with you 100%. Thank you for taking the time to explain that.
Agreed. Perfect for people who've been using Angular, Vue and even the random jQuery project. But if you're coming from reactland, solid makes for an easier transition
Hi Academy, thanks for the video, but when you started to compared with svelte and magic ( like other youtube did already), it not a right thing to do and you should think twice or even more before upload the video. it is like oil on fired, which it is wrong. if you only enjoy to work with react why wasting time talk or even compare to other framework, if you are even not try be impartial or be transparent on your opinion, it is better talk about only on react.
All frameworks have all kind of magic, even react, working with DOM in vanilla js ( or even with jquery) it is a painful, you have to appreciate more frameworks authors and even more those that dont have or dont had at the start, the support of a company like google or facebook or none at all. If you will keep compare language or frameworks, please choose the words better. Thanks .
It's React without the vdom, it's truly reactive so no strange State and useEffect behavior, React is not intuitive at all, you have to understand how it updates the Dom to be able to use State and hooks and even after that it's still confusing, useCallback inside useEffect inside wtf 😆
React now is trying to compile code, and Svelte now is trying to use Signals. But SolidJS have done that way ahead of them already.
Nice video
At the end of the day, everything ends up being 1s and 0s. So everything we write is magic. Every layer of abstraction allows more people to do web development. But it also means more people that does not understand what they are actually building :) which can be scary... Where is the right spot? Hard to say. But lack of manpower and companies' "growth at all cost" philosophy will surely continue to put pressure on even more abstraction.
Scary compiler right ? ...
sprinkle in that solid!
For me solid seems correct. React wanted to be functional but state management wasn't anything functional. Solid seems to fix it. For me solid is a clear next step. Hope other framework pick this signal pattern
Please, talk about Tauri.
by the time this video finishes, there's a new library in town called "smiggle", then after you make a video about it, there will be a new library called "sutur", and by the time...
Why does this video has such a dramatic read? Feels more like an artistic or cinematic read.
Nobody is copying svelte, everyone is copying solid. All the right people are on solid side.
You have summarised my thoughts! Thank you! I feel the same.
Solid like regular js/ts, while Svelte feels as magic with its .svelte and syntax rules.
Glad you liked the video :)
I feel like I'm watching harry, potter.
Svelte is so much better than anything JSX. This guy misses so much of the point.
Haha what a biased content, you should've excluded svelte here, they are different in a sense
Both you and ryan are bashing svelte for its simplicity, but here you are empowering jsx syntax as if it's part of the standards in w3
Not sure if you are really serious with the word "magic" you just said for svelte, but there's actually more magic inside useState or createSignal from the rest of react devs who loves svelte too, I think you cant move on about the reactivity meme posted in twitter 😅
Btw, your content reflects your personality 😏
Hi :) I’m not bashing Svelte, firstly, I actually like it. I just wouldn’t put in in the hands of junior developers because of the way it invisibly overloads JS syntax. Once you understand what it is doing it is fine, but I wouldn’t be able to use it with the team I manage. Because they would most probably end up with weird ideas about how JS works.
Conversely, JSX is very clearly not HTML syntax not vanilla JS, and that distinction means confusion is less likely.
I’m sorry you’ve ended up with the wrong idea about what I’ve tried to say. And yes, the fault for that probably does lie with me and maybe even my personality :)
(And I haven’t even seen the reactivity meme you mention, I should probably spend more time on Twitter :D)
Are you being serious? I'll give you example, a div that's part of return then in TS the data type must be React.Component, how about in svelte? You are controlling HTMLElement type especially when creating event handlers and element bindings, but remember, that's vanilla and you should use that often.
Well, dont limit yourself with new stuff, alao dont limit someone from trying out new stuff if you cant accept it.
Oh for the meme, I dont have twitter but I have youtube and reddit that always brings a good content, you can watch this m.ua-cam.com/video/HUgZHf--qVo/v-deo.html
hi, i agree with you ( D Cariño), when he in the video, starts compare with svelte and talk about magic. he just screwed the video, he just put sh*t in the video.
For me hooks are also too magical for me and even JSX ( as template engine), LOL, Frameworks like svelte, solidjs and vue, you can see, in a playground, what kind of transformation its done behind the scenes, Where with react, can only see some degree of transformation from JSX when putting in babel playground , not for hooks. All frameworks have magic, that serves to make our lives, as developers, easy and more efficient and focus what is important.
And like he did a comment about a junior work with svelte, i have more afraid of junior starting to work with framework like react, preact, solidjs than with frameworks like svelte, vue and angular (2+) , and if he is afraid than he should not hire junior or blame whochoose the junior dev. LOL
@@KodapsAcademy Whats odd though is that as an online trainer on youttube you put a knock against svelte on what junior developers might not understand. Thats exactly what a trainer is supposed to negate.
react just needs to disappear into the ether. of all the JS frameworks it is the most cumbersome and clancky
Like what you said, React is so much like brainwashing you out of JS simplicity
svelte, a vanishing framework.. I couldn't keep listening the video.
Svelte's tagline is (or at least was when writing the video) : "Svelte, the magical dissapearing framework"
Nice video. I feel like it would have been nice to include Vue though. Out of all the popular frameworks Vue makes the most sense to compare to solid since Vue and Solid have the exact same fine grained reactivity model. Vue refs are basically the same as solid signals. In fact not basically, more like exactly the same. The only difference is the syntax.
The only real diffirence between solid and Vue is vdom, but Vue is getting something called vapor mode later this year. Which is actually inspired by solid and would allow Vue to drop the vdom just like solid. Ryan has even said that he expects Vue to become as performance as solid when that happens. Beside that the only other difference is of course that one uses JSX and the other uses SFC. I hope we get to place where the two most popular choices are Vue and solid. And the only thing you need to know to decide which is is just whether you prefer to write html in html syntax or in JS syntax