- 10
- 37 066
SolidJS
Приєднався 4 січ 2022
Simple and performant reactivity for building user interfaces written entirely in TypeScript.
Intro to SolidJS reactivity (in 5 minutes)
An introduction video that walks you through Solid's reactivity in under 5 minutes.
Переглядів: 27 918
Відео
Modern Frontend: The World Beyond Components w/ Ryan Carniato
Переглядів 3,2 тис.2 роки тому
Ryan Carniato walks us through Solid, SolidStart and the future of reactivity. Special thanks to the folks at Modern Frontend for the opportunity to record and post this event.
SolidJS July 2022 Community Meeting
Переглядів 7052 роки тому
A recording of Solid's second Community Meeting hosted on Gotomeeting. This event recapped recent updates to SolidJS in this quarter (April to June 2022). Focus on ecosystem growth, new projects, Solid Start and ecosystem demos.
SolidHack 2022 Winner Announcement
Переглядів 1,7 тис.2 роки тому
A SolidJS community event to announce winners of the SolidHack 2022 competition.
SolidJS March 2022 Community Meeting
Переглядів 7502 роки тому
A recording of Solid's second Community Meeting hosted on Gotomeeting. This event recapped recent updates to SolidJS in this quarter (January to March). Focus on ecosystem growth, new projects, Solid Start and ecosystem demos.
SolidHack - Stephen Saucier of ClearSpend
Переглядів 3482 роки тому
SolidHack - Stephen Saucier of ClearSpend
SolidHack - Steve Sewell of Builder.io
Переглядів 6262 роки тому
SolidHack - Steve Sewell of Builder.io
SolidHack - Shaun Regenbaum of 402 Media
Переглядів 3082 роки тому
SolidHack - Shaun Regenbaum of 402 Media
SolidHack - Julianna Lamb of Stytch
Переглядів 1,1 тис.2 роки тому
SolidHack - Julianna Lamb of Stytch
SolidJS December 2021 Community Meeting
Переглядів 4923 роки тому
A recording of Solid's second Community Meeting hosted on Gotomeeting. This event recapped recent updates to SolidJS, plans for our 1.3 release, new community demoes/show-and-tell and the initial SolidHack launch announcement.
In that 5 minutes, it didn't spend a single second differentiating itself from react. Is this an intro video for people who don't know about SolidJS, or a video for people who already know about it, but need a refresher on useState?
Why? A framework doesn't have to define itself vis-a-vis React. Plus the only things it borrows is JSX which is no long just React-specific and some similar API concepts. Outside of that it works very differently and is *not* compatible.
@@daviddibiase4727 The fact is that someone that needs an introduction to SolidJS has used React or Vue, and they would need to know how specifically SolidJS addresses some of the problems they encounter. Nobody who isn't already a web dev jumps straight into a new framework they never heard of. If it works differently and is not compatible, then how? This video fails to address basic selling points, in my opinion. In React, I can also get reactivity using useState, and I can make a pub/sub using useEffect.
But why jsx 😢😢 Please allow native html
The video was absolutely beast.
Hey mate, the code indention in the `createSignal` example is not proper.
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.
can you render to individual custom elements?
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.
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…
Looks like react without the nasty part.
what nasty part?
@@dalu_ Hooks, reactivity model, VDOM, state management ? For a start
fix indentation in your code examples for readability
3:53 When you transform lines 7,8 into 14 ("createElement, innerText" into "<h1></h1>") how does it know to update only innerText later on? Or is it creating element every time when signal changes?
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.
SolidJS best of the best reactive framework, simple to use, unmatch Performance, easy integrated with anothe web component like smarthtmlelement, ❤❤❤
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.
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
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)?
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.
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...?
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.
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! 💪
Now, that's a solid introduction. Well done, Atila!
Thaaaanks, Jesse!! I'm glad you liked it!! 🙌
Ideed! A truly impressive intro
Amazing content. But not able to watch that.😢
Ja pensou em criar o Solid-Native a bibloiteca de criação de App para android e IOS
Thanks for sharing this with us <3
Video and sound quality aside, a fantastic talk! Thank you for sharing!
God I always love Ryan's talks! Always gets me super excited about the future of js!!!
This has been a great talk and a greater demonstration of why Solid is solid. Thank you, Ryan for your amazing work for all the web developers!
Sorry that the conference didn't have proper facilities, but this is basically unwatchable - should ask @ReactFinland if you can re-use theirs which from what I can tell is mostly the same, but good quality.
Thanks! It’s already posted on the Solid website resource list :)
I watched it fine and was grateful for the content. Quit bitching
I agree with you, I'd also recommend jsnation one -> SolidJS: Reactivity Unchained - Ryan Carniato, JSNation 2022
Been waiting for this. Thanks 🙏
if someone laughes a lot for no reason its probably amerikan
I love the solid video that teach how to use the framework. This really help to try it hope to see couple more of those
Thanks for the helpful comments. We're developing a process to produce more helpful content!
36:00 as an active user of solid, the fact i never have to ever think of performance, that i can just do whatever I want with my state however I want it, is a big factor why i love the framework. It also helps keeping the code clean because there are no performance hacks needed. You choose your abstractions purely in the interest of organization.
I like to make more graphical app-y stuff instead of websites and solid is really the perfect match for that. U want to hook into a mousemove-event and update a global store and do some whacky stuff all over your app, idk render a selection box that highlights some dome elements when it includes it and it all feels still snappy? Go ahead. Besides that what i really like about solid is how you can pretty much do everything you need once you understand createSignal, and then all the other pieces are just added bonus, but like often valuable abstractions. It's fun to discover them while you come across specific problems. Recently played around with the Dynamic tag for injecting props into a component for a custom routing solution. It doesn't come in my way, solid lets me do whatever I want and gives me the pieces to hack away. My biggest gripe rn personally is the debugging. When I do something odd w updating a state in an effect and i just have some cryptic error-message. But besides that it has been a breeze.
1:13:24 yes this exactly 💯
8:50 exactly, this i have been noticing too. And often not on the last spot or anything. I feel it's often now react, then solid and after that Vue or svelte. It's becoming the alternative and I love to see that. Solid Start s gonna be the final push i think.
Bruh where did u buy the shirt from?
Isn't it sick? If you look in the background far right, it seems like the tiling is similar. Hexagons are SO in rn lol
𝙥𝙧𝙤𝙢𝙤𝙨𝙢
Good time! Can't wait for the next one! 😀
Congratulations to the winners, finalists and the whole solid community. With all these submissions, we are all winners here.
Very cool projects! ❤️
I'm calling it, Nikhil is going to win the hackathon! 🙂