Thinking out loud: I like that there is a "marker" to indicate when a variable points to a signal, which wraps a reactive value, in contrast with a plain js value. However, as a newcomer I don't particularly enjoy that this marker is a function call. I think I'll write a babel or plaintext parser to change this reactive-signal--parser ala clojure atoms, where unwrapping the signal value is done with @ instead. Then, I can count on count() being a proper function call (on another context; pun intended) and on @count in this context to mean the retrieval of the signal value. I can easily see when a signal in used upon glancing code, and what is meant to be a js function call.
I would like to have more tutorial like this. Especially if it can go deep into explanation of the inside of each solidjs functions. Also, can the next, if possible, tutorial is about how to change a whole html component (add new, remove old, or replacing)?
While I have nothing against Svelte, I always felt that I had too much free reign. On a larger scale, the solutions I created with the freedom created sub-optimal solutions, which had to be refactored later. Solid, in this sense, feels a lot more ergonomic. The declarative path that Solid has taken has not limited me from progress while also providing my projects with a lot more stability, less weird-looking code, and (of course) performance.
On a side note, Svelte 5 will bring Runes to the table. I would like to see how the new Svelte would compare against SolidJS. Being in the SolidJS and Svelte camps has been the best part of my professional development career. Thanks, Solid, for making web development much easier and more ergonomic.
@@zedespook Svelte 5 is definitely a huge improvement. As their Svelte 5 release post mentions under the hood it's basically Solid's FGR philosophy and of course signals. It'll ultimately come down to DSL preference. Either way it's great seeing Solid's direction and core philosophy being affirmed by others (Vue Vapor being another) willing to adopt it's ideas. 🙂
@@neneodonkor I'm working on a live sports competition tracker. It's pretty cool! But hey, don't stress too much about which framework to use. Whether it's Solid, React, Vue, or whatever - pick what feels right for you. This is especially true for side projects or if you're the only dev at your company. Experimenting with different tools is the best way to find what you like.
3:53 When you transform lines 7,8 into 14 ("createElement, innerText" into "") how does it know to update only innerText later on? Or is it creating element every time when signal changes?
SolidJs has the best reactivity(while Svelte is catching up), and is very similar to React(easy to port React into SolidJs). Very easy to work with. I AM SOLD!
Svelte's reactivity and rendering model is actually Solid's (Svelte is compiled reactivity, Solid is a reactive runtime). If you re-read the Svelte 5 announcement they directly mentioned borrowing it.
I'm confused by the example at 1:35. The count should be incrementing by one every 2 seconds, while the multiplier should be incrementing by one every 3 seconds. Yet the logs that are being printed show seemingly random values for count and multiplier that do not abide by that logic. To focus on a specific example: The first two log outputs show "2 x 2 = 4" immediately followed by "8 x 2 = 16". So how and why is the value for count going from 2 to 8?
Hey, @vjzb3 ! I'm the voice there! Thanks for the feedback. the timings may not have been exactly right in the footage because of some cuts and how the playground auto-compiles the code. The logic in the example is correct to the best of my knowledge and I think the start time of each interval is just not synchronized in that case. It's hard to tell because between the playground refreshing and the little cuts I may have done (memory escapes me), it may have gotten a little off.
@@daviddibiase4391 Na, too much boot-strapping, lot of code having to be done just to get it to behave properly, when you have other frameworks that do all that automatically for you.
Now, that's a solid introduction. Well done, Atila!
Thaaaanks, Jesse!! I'm glad you liked it!! 🙌
Ideed! A truly impressive intro
SolidJS best of the best reactive framework, simple to use, unmatch Performance, easy integrated with anothe web component like smarthtmlelement, ❤❤❤
Great intro to SolidJS. I'll try it for some personal projects and it seems good to push for it's usage at where I work as well.
The video was absolutely beast.
Thinking out loud: I like that there is a "marker" to indicate when a variable points to a signal, which wraps a reactive value, in contrast with a plain js value. However, as a newcomer I don't particularly enjoy that this marker is a function call. I think I'll write a babel or plaintext parser to change this reactive-signal--parser ala clojure atoms, where unwrapping the signal value is done with @ instead. Then, I can count on count() being a proper function call (on another context; pun intended) and on @count in this context to mean the retrieval of the signal value. I can easily see when a signal in used upon glancing code, and what is meant to be a js function call.
I would like to have more tutorial like this. Especially if it can go deep into explanation of the inside of each solidjs functions. Also, can the next, if possible, tutorial is about how to change a whole html component (add new, remove old, or replacing)?
While I have nothing against Svelte, I always felt that I had too much free reign. On a larger scale, the solutions I created with the freedom created sub-optimal solutions, which had to be refactored later. Solid, in this sense, feels a lot more ergonomic. The declarative path that Solid has taken has not limited me from progress while also providing my projects with a lot more stability, less weird-looking code, and (of course) performance.
On a side note, Svelte 5 will bring Runes to the table. I would like to see how the new Svelte would compare against SolidJS. Being in the SolidJS and Svelte camps has been the best part of my professional development career.
Thanks, Solid, for making web development much easier and more ergonomic.
@@zedespook Svelte 5 is definitely a huge improvement. As their Svelte 5 release post mentions under the hood it's basically Solid's FGR philosophy and of course signals. It'll ultimately come down to DSL preference. Either way it's great seeing Solid's direction and core philosophy being affirmed by others (Vue Vapor being another) willing to adopt it's ideas. 🙂
What are you building with Solid?
@@neneodonkor I'm working on a live sports competition tracker. It's pretty cool!
But hey, don't stress too much about which framework to use. Whether it's Solid, React, Vue, or whatever - pick what feels right for you. This is especially true for side projects or if you're the only dev at your company. Experimenting with different tools is the best way to find what you like.
3:53 When you transform lines 7,8 into 14 ("createElement, innerText" into "") how does it know to update only innerText later on? Or is it creating element every time when signal changes?
SolidJs has the best reactivity(while Svelte is catching up), and is very similar to React(easy to port React into SolidJs). Very easy to work with. I AM SOLD!
Svelte's reactivity and rendering model is actually Solid's (Svelte is compiled reactivity, Solid is a reactive runtime). If you re-read the Svelte 5 announcement they directly mentioned borrowing it.
haha while this video was being release I was literally watching the old video and now I reloaded the tab and it's unlisted
So sorry about that! The previous video had a technical error in it and YT doesn't let us change the content once it's uploaded 😞
Haha, my bad... but it was for a good cause!
It's now more accurate and better! 💪
I'm confused by the example at 1:35. The count should be incrementing by one every 2 seconds, while the multiplier should be incrementing by one every 3 seconds. Yet the logs that are being printed show seemingly random values for count and multiplier that do not abide by that logic.
To focus on a specific example: The first two log outputs show "2 x 2 = 4" immediately followed by "8 x 2 = 16". So how and why is the value for count going from 2 to 8?
I set up this same example in the playground and it worked as expected, so unsure of why we're seeing this in the video
Hey, @vjzb3 ! I'm the voice there! Thanks for the feedback.
the timings may not have been exactly right in the footage because of some cuts and how the playground auto-compiles the code. The logic in the example is correct to the best of my knowledge and I think the start time of each interval is just not synchronized in that case. It's hard to tell because between the playground refreshing and the little cuts I may have done (memory escapes me), it may have gotten a little off.
Looks like react without the nasty part.
what nasty part?
@@dalu_ Hooks, reactivity model, VDOM, state management ? For a start
this like svelte and react's child but only got the best genes from them. long live the new king.
Actually svelte 5 upcoming runes seem to make Svelte the child of react and solid. 😊
let's say daddy got some behaviours from child :D @@pierre-lucgingras4130
what's the font used in HOW IT WORKS part
I was wondering this exact same thing
Seems "Victor Mono", you can find it in Google Fonts
Pretty sure that's Victor Mono.
can you render to individual custom elements?
Hey mate, the code indention in the `createSignal` example is not proper.
There is also a clicking in the audio that happens roughly every second from 2:15 - 3:58 and it makes it difficult to watch the content
You mean the background music...?
fix indentation in your code examples for readability
But why jsx 😢😢
Please allow native html
Looks just as awful as React...
It may not be your cuppa tea but it's good. I promise. ;-)
@@daviddibiase4391 Na, too much boot-strapping, lot of code having to be done just to get it to behave properly, when you have other frameworks that do all that automatically for you.
@@kaibe5241 What other frameworks are you referring to here?
@@kaibe5241 what framework that do that better than Solid?
@@aissa-dev1 svelte or vue for starters…