SolidJS
SolidJS
  • 10
  • 37 066
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.

КОМЕНТАРІ

  • @jonathanchang1574
    @jonathanchang1574 3 дні тому

    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?

    • @daviddibiase4727
      @daviddibiase4727 2 дні тому

      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.

    • @jonathanchang1574
      @jonathanchang1574 2 дні тому

      @@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.

  • @AlamKhan-yt9wd
    @AlamKhan-yt9wd Місяць тому

    But why jsx 😢😢 Please allow native html

  • @AlamKhan-yt9wd
    @AlamKhan-yt9wd Місяць тому

    The video was absolutely beast.

  • @dennisweiershauser8182
    @dennisweiershauser8182 2 місяці тому

    Hey mate, the code indention in the `createSignal` example is not proper.

  • @meka4996
    @meka4996 6 місяців тому

    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!

    • @daviddibiase4391
      @daviddibiase4391 6 місяців тому

      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.

  • @dalu_
    @dalu_ 7 місяців тому

    can you render to individual custom elements?

  • @zedespook
    @zedespook 7 місяців тому

    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.

    • @zedespook
      @zedespook 7 місяців тому

      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.

    • @daviddibiase4391
      @daviddibiase4391 7 місяців тому

      @@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
      @neneodonkor 4 місяці тому

      What are you building with Solid?

    • @zedespook
      @zedespook 4 місяці тому

      ​@@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.

  • @kaibe5241
    @kaibe5241 7 місяців тому

    Looks just as awful as React...

    • @daviddibiase4391
      @daviddibiase4391 7 місяців тому

      It may not be your cuppa tea but it's good. I promise. ;-)

    • @kaibe5241
      @kaibe5241 7 місяців тому

      @@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.

    • @kvpasupuleti5245
      @kvpasupuleti5245 6 місяців тому

      @@kaibe5241 What other frameworks are you referring to here?

    • @aissa-dev1
      @aissa-dev1 5 місяців тому

      @@kaibe5241 what framework that do that better than Solid?

    • @kaibe5241
      @kaibe5241 5 місяців тому

      @@aissa-dev1 svelte or vue for starters…

  • @planesrift
    @planesrift 10 місяців тому

    Looks like react without the nasty part.

    • @dalu_
      @dalu_ 7 місяців тому

      what nasty part?

    • @IStMl
      @IStMl 6 місяців тому

      @@dalu_ Hooks, reactivity model, VDOM, state management ? For a start

  • @markokraljevic1590
    @markokraljevic1590 11 місяців тому

    fix indentation in your code examples for readability

  • @Антон-б2л9у
    @Антон-б2л9у 11 місяців тому

    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?

  • @jou.coding
    @jou.coding Рік тому

    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.

  • @kafelinux
    @kafelinux Рік тому

    SolidJS best of the best reactive framework, simple to use, unmatch Performance, easy integrated with anothe web component like smarthtmlelement, ❤❤❤

  • @asadhshujau1192
    @asadhshujau1192 Рік тому

    what's the font used in HOW IT WORKS part

    • @Illumynatii
      @Illumynatii 10 місяців тому

      I was wondering this exact same thing

    • @amcsoftware
      @amcsoftware 8 місяців тому

      Seems "Victor Mono", you can find it in Google Fonts

    • @squiresuzuki
      @squiresuzuki Місяць тому

      Pretty sure that's Victor Mono.

  • @yapayzeka
    @yapayzeka Рік тому

    this like svelte and react's child but only got the best genes from them. long live the new king.

    • @pierre-lucgingras4130
      @pierre-lucgingras4130 Рік тому

      Actually svelte 5 upcoming runes seem to make Svelte the child of react and solid. 😊

    • @yapayzeka
      @yapayzeka Рік тому

      let's say daddy got some behaviours from child :D @@pierre-lucgingras4130

  • @dangtu-work
    @dangtu-work Рік тому

    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)?

  • @vicca4671
    @vicca4671 Рік тому

    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.

  • @vjzb3
    @vjzb3 Рік тому

    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

    • @bvx89
      @bvx89 Рік тому

      You mean the background music...?

  • @vjzb3
    @vjzb3 Рік тому

    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?

    • @vjzb3
      @vjzb3 Рік тому

      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

    • @AtilaDotIO
      @AtilaDotIO Рік тому

      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.

  • @vasfvitor
    @vasfvitor Рік тому

    haha while this video was being release I was literally watching the old video and now I reloaded the tab and it's unlisted

    • @solid_js
      @solid_js Рік тому

      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 😞

    • @AtilaDotIO
      @AtilaDotIO Рік тому

      Haha, my bad... but it was for a good cause! It's now more accurate and better! 💪

  • @zombiefacesupreme
    @zombiefacesupreme Рік тому

    Now, that's a solid introduction. Well done, Atila!

  •  2 роки тому

    Amazing content. But not able to watch that.😢

  • @Matheus_1582
    @Matheus_1582 2 роки тому

    Ja pensou em criar o Solid-Native a bibloiteca de criação de App para android e IOS

  • @posteisnoob5763
    @posteisnoob5763 2 роки тому

    Thanks for sharing this with us <3

  • @a1exnilsson
    @a1exnilsson 2 роки тому

    Video and sound quality aside, a fantastic talk! Thank you for sharing!

  • @lThePotatoCrew
    @lThePotatoCrew 2 роки тому

    God I always love Ryan's talks! Always gets me super excited about the future of js!!!

  • @_js
    @_js 2 роки тому

    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!

  • @AshSimmonds
    @AshSimmonds 2 роки тому

    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.

    • @solid_js
      @solid_js 2 роки тому

      Thanks! It’s already posted on the Solid website resource list :)

    • @posteisnoob5763
      @posteisnoob5763 2 роки тому

      I watched it fine and was grateful for the content. Quit bitching

    • @aquaductape
      @aquaductape 2 роки тому

      I agree with you, I'd also recommend jsnation one -> SolidJS: Reactivity Unchained - Ryan Carniato, JSNation 2022

  • @zomakaja
    @zomakaja 2 роки тому

    Been waiting for this. Thanks 🙏

  • @abc-yp7ci
    @abc-yp7ci 2 роки тому

    if someone laughes a lot for no reason its probably amerikan

  • @barelmishal9668
    @barelmishal9668 2 роки тому

    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

    • @solid_js
      @solid_js 2 роки тому

      Thanks for the helpful comments. We're developing a process to produce more helpful content!

  • @bigmistqke
    @bigmistqke 2 роки тому

    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.

    • @bigmistqke
      @bigmistqke 2 роки тому

      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.

    • @bigmistqke
      @bigmistqke 2 роки тому

      1:13:24 yes this exactly 💯

  • @bigmistqke
    @bigmistqke 2 роки тому

    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.

  • @anirbandas12
    @anirbandas12 2 роки тому

    Bruh where did u buy the shirt from?

    • @solid_js
      @solid_js 2 роки тому

      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

  • @rogerharper9304
    @rogerharper9304 2 роки тому

    𝙥𝙧𝙤𝙢𝙤𝙨𝙢

  • @TruSktr
    @TruSktr 2 роки тому

    Good time! Can't wait for the next one! 😀

  • @bigmistqke
    @bigmistqke 2 роки тому

    Congratulations to the winners, finalists and the whole solid community. With all these submissions, we are all winners here.

  • @katywings
    @katywings 2 роки тому

    Very cool projects! ❤️

  • @IainSimmons
    @IainSimmons 3 роки тому

    I'm calling it, Nikhil is going to win the hackathon! 🙂