Rich Harris Teaches ThePrimeagen SvelteKit

Поделиться
HTML-код
  • Опубликовано: 27 дек 2024

Комментарии • 235

  • @Ratstail91
    @Ratstail91 Год назад +979

    "What is the best way to learn Svelte?"
    "Learn React first - it'll be a great motivator"

    • @ThePrimeTimeagen
      @ThePrimeTimeagen  Год назад +215

      haha, great line

    • @bronzekoala9141
      @bronzekoala9141 Год назад +23

      Or Angular.... I like Angular but some obvious things are so unnecessarily complicated....

    • @JEsterCW
      @JEsterCW Год назад +19

      @@bronzekoala9141 whole angular ecosystem is unnecessarily complicated and thats why nobody wants to work in this framework lmao, atleast angular devs are making bank lmao

    • @bronzekoala9141
      @bronzekoala9141 Год назад +5

      @@JEsterCW Well - I am one now 😂 although I'd rather have my company use svelte. But it's fine I'll get used to it.

    • @IzzyIkigai
      @IzzyIkigai Год назад +15

      Honestly, I think React is just a good example for how swathes of the dev community have become slowly boiled frogs. Like what kind of unpaid intern at Facebook thought HTML syntax in the middle of javascript code was a good idea?? I mean, I've been out of the loop for frontend for a few years and came back to shit like that. Looked at what's hot and p much the only thing that didn't make me want to chug up my coffee like i'm a pressure washer was svelte... Everything else just looks like people threw together "what we learned not to do" examples..

  • @ebmpinyuri
    @ebmpinyuri Год назад +826

    I like the fact that Rich Harris does not pretend to know everything especially even things he has made himself lmao

    • @kevinkkirimii
      @kevinkkirimii Год назад +77

      It's called maturity.

    • @wadecodez
      @wadecodez Год назад +89

      he's not pretending or humble. he just works with a lot of code. too much for any one person to memorize.

    • @Knigh7z
      @Knigh7z Год назад +8

      You can't remember everything either

    • @toothuncommon0
      @toothuncommon0 Год назад +5

      pretty sure he was referring to the inner workings of the tutorial "framework" - much of which he did not personally author

    • @obrien8228
      @obrien8228 Год назад +4

      ​@@wadecodez plenty of people out there who will not admit that they don't know/ remember something. I give him a bit of credit

  • @ISKLEMMI
    @ISKLEMMI Год назад +122

    "ThePrimeagen teaches Rich Harris Rust"
    Rich Harris is the man! So glad you guys did this.

  • @Hobbitstomper
    @Hobbitstomper Год назад +46

    Comic Sans MS is a proprietary typeface owned by Microsoft and requires a license for commercial use. It is pre-installed on Windows and macOS but not on Android, iOS or Linux.

  • @effen5931
    @effen5931 Год назад +103

    ever since i started using Svelte, man nothing else can beat its simple way of solving annoying repoetitive things when building websites, add on that speed and the fact that it's JS inside HTML, super sweet

  • @fitsbachinteractive
    @fitsbachinteractive Год назад +104

    Imagine writing JSX/TSX thinking it's a smooth experience and being one of those that picked "heard about it, not interested" for Svelte/SvelteKit in the StateOfJs annual survey.
    Rich Harris just understands not only what the user experience should be like but the developer experience should be like to.
    Great video. Thanks to both of you

    • @ts8960
      @ts8960 Год назад +2

      JSX is superior DX to svelte

    • @semyaza555
      @semyaza555 Год назад +12

      @@ts8960absolutely not.

    • @MCasterAnd
      @MCasterAnd Год назад +16

      @@ts8960 are you drunk

  • @metatronicx
    @metatronicx Год назад +23

    That part is so true 19:36. I've had a hard time integrating third party libraries in other frameworks especially in Next.js. But it was so easy and straightforward in SvelteKit. SvelteKit is just an amazingly easy framework and I really really like that.

  • @NatoBoram
    @NatoBoram Год назад +9

    The best feature is definitely the {#await} keyword. You can start a call, assign the promise somewhere, and have the UI automatically handle all possible states of the promise in a declarative way.

  • @DEVDerr
    @DEVDerr Год назад +177

    Bad that you didn't touch Svelte Stores and transitions. For me, they're the best Svelte features.
    Stores especially, because they finally nail the global state part. And it does it so well that I started to think why the hell stores in React had to be so absurdly complex

    • @skl9942
      @skl9942 Год назад +3

      Exactly what I was thinking!

    • @SpaceChicken
      @SpaceChicken Год назад +2

      Same. Transitions were enough for me, store is so insanely useful. Wonderful features.

    • @baka_baca
      @baka_baca Год назад +3

      Stores are definitely one of my favorite features too! The only things that have come close are Zustand and Pinia, both really good options but neither of which gives quite the same feeling of simplicity and elegance as Svelte stores. I've never had so little trouble making as many stores as I wanted, each being easily customizable to any degree, and then having everything just plain work even though I had just learned it all ! Svelte still strikes me as something truly special in a field crowded with options.

    • @mfpears
      @mfpears Год назад +4

      Stores nail state management like jQuery nails the DOM.

    • @Pavel-wj7gy
      @Pavel-wj7gy Год назад +2

      Stores in react are so absurdly verbose that they may cost you a job.

  • @heitorlopes9914
    @heitorlopes9914 Год назад +3

    Earned my like after just hanging out by the fireplace together! Amazing vids, Primeagen!

  • @DamonMedekMusic
    @DamonMedekMusic Год назад +6

    I've used Svelte daily for over a year and I still love it. Extremely minimal and straightforward. Stores are great. Docs are great. My hardest challenge was using the backend as a rest api as a internal database for forms but once I figured that out theres really nothing it can't do so far.

  • @BrandonAaskov
    @BrandonAaskov 4 месяца назад +1

    I loved Rich Harris for his philosophy and approach to svelte and sveltekit but this is the first time I’m hearing and seeing him. Now I’m even more impressed. His humility is fantastic to see.

  • @_timestamp
    @_timestamp Год назад +13

    3:30
    Harris: I don't love doing it in front of an audience of 800 people
    The people: 54k

  • @adamlul
    @adamlul Год назад +7

    Rich is awesome. Love watching his interviews.

  • @gundo1234
    @gundo1234 Год назад +38

    The Rick Roll Part😂

  • @TsoiIzAlive
    @TsoiIzAlive Год назад +7

    The "You pee outside" got me!
    Props to you this was aawesome to watch! I constantly imagined this would be me during my technical Interview having to laugh all the time 😂

    • @ThePrimeTimeagen
      @ThePrimeTimeagen  Год назад +6

      that is good! want to make sure people feel amazing

    • @kahnfatman
      @kahnfatman Год назад

      The smell is awesome after a month

  • @nacs
    @nacs Год назад +2

    Rich Harris is amazing. Insanely smart but more importantly -- relatable and humble.

  • @lcarv20
    @lcarv20 Год назад +31

    Svelte doesn’t get the love it deserves

    • @IStMl
      @IStMl Год назад +2

      it slowly does

    • @IamSH1VA
      @IamSH1VA Год назад +1

      It will one day, the way React & other frameworks are progressing. Future seems bright for Svelte.

  • @cre8ive65
    @cre8ive65 Год назад +24

    Been running SvelteKit in prod since the early beta. Dealing with the breaking changes as it matured to full release was well worth it, and I would gladly make that same choice again.

  • @nullbeyondo
    @nullbeyondo Год назад +16

    If you're new to Svelte and/or coming from React, this video is literally a complete tutorial and also entertaining with actual questions that you might have Wow. You don't need to go anywhere else. I think it was more accurate to rename the title to "Svelte" instead of "SvelteKit" cause it doesn't really teach about SvelteKit or the concept of layouts, routes, and adapters.

  • @toothuncommon0
    @toothuncommon0 Год назад +12

    Rich Harris has a great deal of patience 🙄

  • @nullbeyondo
    @nullbeyondo Год назад +2

    I'm glad they did that stream. Rich Harris seems like a cool guy and this video with feedback from ThePrimeagen would help improve Svelte more.

  • @thepolygotcoder
    @thepolygotcoder Год назад +2

    you know - I love understanding the ins and outs of stuff - great video - I just love to understand how things work - sooooo listening to rich talking about the actual coding that he and a group have done......wow --- thanks alot guys

  • @javierflores09
    @javierflores09 Год назад +38

    I was just doing the svelte tutorial yesterday myself, and the error making it lose focus drove me nuts too. Other than that, it does seem like a nice introduction to Svelte.
    Edit:
    Also, what I think Rich Harris meant at 47:16 is that you could just have done:
    $: validated = name == "Hello world";
    and it'd have worked

  • @xtraszone
    @xtraszone Год назад +17

    Him: React is not a framework its a library
    Rich: Thats absurd 😂😂

  • @starstuff606
    @starstuff606 Год назад

    I love that I stumbled across this video as im about to start learning Svelte. No better way to start than right here :D thanks for the video

  • @cubondemais
    @cubondemais 6 месяцев назад +1

    watching this in 2024 after Svelte 5 entered release candidates stage. At 35:25 ThePrimeagen complains about not being able to mutate objects and just letting the garbage collector run wild and I'm thinking that he would be really happy to know that, in Svelte 5, state will be fully deeply reactive with mutations, not only assignments.

  • @danvilela
    @danvilela Год назад +10

    Bro the rust part 🤣🤣🤣🤣 Caught Rich completely off guard.

  • @stijndcl
    @stijndcl Год назад +1

    What you said about halfway, about Rust standard library types implementing your own traits but only when you import it, is also how it works in Kotlin (extension functions). For example, in Android you can import an extension function on the base "Int" type for sizing (using px or dp or whatever unit), so you can write things like 23.dp.

  • @poolkrooni
    @poolkrooni Год назад +1

    What Rich meant for the validated function was:
    $: validated = name === 'hello world'
    and then in the template part you could simply have
    {#if validated}

  • @minikame2272
    @minikame2272 Год назад +8

    Is it me or does Rich's accent get increasingly South London as he eases into the interview

  • @darkarie
    @darkarie Год назад +4

    we need a part 2 of this !!

  • @carloslfu
    @carloslfu Год назад +6

    I really enjoyed watching the face of Rich looking at Prime like :O the whole time. Like thinking, what's going to say this guy next? hahaha

  • @RobertoOrtis
    @RobertoOrtis Год назад +2

    Awesome video! Very entertaining. I love svelte and rust! It’s hard to decide between all front end frameworks available though.

  • @joaodiasconde
    @joaodiasconde Год назад +4

    Svelte seems amazing, so simple, so effective.

  • @stashladki2594
    @stashladki2594 Год назад +5

    The funniest thing to me is that all the concepts Prime reacts "wow!!" to, aren't all particularly new and most got introduced by Angular long time ago which is considered to be hated out of this world by the same people :D

  • @kokizzu
    @kokizzu Год назад +1

    framework/compiler i love the most past 4 years XD

  • @user-hk3ej4hk7m
    @user-hk3ej4hk7m Год назад +1

    On the little intermission about rust traits: that's just syntax sugar for function overloads on return types. Julia, Haskell and many other functional languages allow you to define custom operators on types to do the same thing, or even just using functions, there's nothing special about the dot operator. For some reason rust takes this roundabout overly explicit road just to do function overload on return types.

  • @tthiagolino8
    @tthiagolino8 Год назад +8

    Great conversation, especially the part where you broke the New York Times paywall
    It's just a shame you didn't get to address stores and transitions/animations during the conversation, they are in my opinion the best part of Svelte (some frameworks even have apis for state management but none using an open contract approach like Svelte)

  • @davidroberts1037
    @davidroberts1037 Год назад +3

    Unlike most people here i am a pretty new programmer. Ive written a few things and the Ecom site for my own business but that is about it. The tutorial and this video was well thought out enough even I got it...mostly. My Thanks gentlemen

  • @g1uh4
    @g1uh4 Год назад

    This is a good way to learn Svelte.
    No bs, straight to the point.

  • @tyunpeters3170
    @tyunpeters3170 Год назад +2

    This was more of a Svelte lesson and not SvelteKit, since there was no data loading or retrieval

  • @aps69
    @aps69 3 месяца назад

    This might be the best resource to learn svelte

  • @laurieinjapan
    @laurieinjapan Год назад

    Love the little rust section in the middle!

  • @AdowTatep
    @AdowTatep Год назад

    Talking about the rust part. Just because I'm interested in learning rust, when he shows the contains_range method, isn't it the same as c# extension methods? The difference being that it's scoped to that file though, like he mentioned.
    Oh yeah i just saw it's called extension traits
    (i know that rust has other stuff other than just that, too)

  • @RafaelToscano
    @RafaelToscano Год назад

    7:14 - “did you really just do this to me?” 😂😂😂😂😂😂😂

  • @dmitriyobidin6049
    @dmitriyobidin6049 Год назад

    29:35 So it's like extension of some sort(swift have those, for example), but just because it's in rust it's automatically magical?

  • @fer.guitar
    @fer.guitar Год назад

    This was a great video, love Svelte!

  • @badunius_code
    @badunius_code Год назад

    48:10 it feels like using a function here is sub-optimal, because it's going to re-render the block on every name change, whereas we only need to re-render on validation result change
    `$: validated = name == "whatever" // this reacts to the name changes
    ...
    {#if validated} // this reacts to the validation result changes`

  • @mcchikin2751
    @mcchikin2751 Год назад

    29:17 this is cool and works in swift as well‼️

  • @voidmind
    @voidmind Год назад +2

    You can tell whoever coded this demo app did it in a Windows centric (Comic sans) and Chrome centric way (I wouldn't be surprised that all the issue Primagen found go away if you use Chrome).

  • @TheDanVail
    @TheDanVail Год назад +6

    Ah shit I’ve been wanting to learn Svelte(Kit) let’s go daddy

  • @metatronicx
    @metatronicx Год назад +1

    37:44 🤣🤣🤣 see that pain in the face ThePrim😂gen when Rich says he's a vs code user 😅

  • @lifelover69
    @lifelover69 Год назад +1

    18:50 Prime suddenly reaching into Rich's rib cage sent me

  • @vellankiindeevar5530
    @vellankiindeevar5530 Год назад +2

    man you youtubers are so lucky , you get to learn from who build sveltekit

  • @dmitriyobidin6049
    @dmitriyobidin6049 Год назад

    My only question to svelte is - does it have any limitations? Is there anything that we can build with react/angular/vue, that wouldn't be able to build with svelte?

    • @moon_bandage
      @moon_bandage Год назад

      Not with the purely view related part. So svelte vs react you would be able to build the same things, because they fill the same gap: reactivity between JS and the DOM it's all they do.
      It's a different story for SveleKit and Next. Next might be more advanced

  • @Yoshie_2000
    @Yoshie_2000 Год назад

    Do how I access the requested URL in server components with the new app directory? I just can't figure it out!

  • @RedHandedBug
    @RedHandedBug Год назад +6

    Comic Sans MS on the discount Mac >_

  • @7heMech
    @7heMech Год назад +1

    Now I wanna write something in Svelte.

  • @SemRosto-b9z
    @SemRosto-b9z Год назад

    Reminds SwiftUI very much. I think will definitely try Svelte for front-end part

  • @bernardoalves3642
    @bernardoalves3642 Год назад +3

    27:00 It's preaching time

  • @shirecoding2440
    @shirecoding2440 11 месяцев назад

    this looks really like webcomponents, wondering is it using webcomponents underneath?

  • @thederpykrafter
    @thederpykrafter 9 месяцев назад +1

    At 18:55 prime just casually reaches into rich's chest lol

    • @jamesdupuis3249
      @jamesdupuis3249 5 месяцев назад

      To see if it was beating? If it was cold? Why?

  • @kaibe5241
    @kaibe5241 Год назад

    One thing I REALLY love in Svelte, is two-way data binding. This is something that Vue takes a really strong stance on, not allowing it - which has been a huge source of frustration for me, because it means you have to use a store or something, which actually complicates your code.
    Sometimes components are meant to work together as part of a single system, where two-way data binding makes much more sense.
    The fact that Svelte supports this, meant I moved away from Vue entirely.

    • @garretmh
      @garretmh Год назад

      Is it different than v-model in Vue? It sounded exactly the same

  • @tehsimo
    @tehsimo Год назад

    is the rust thing at 30:51 the same as an extension method in C#?

    • @TheStickofWar
      @TheStickofWar 6 месяцев назад

      pretty much, Prime knows a lot about the things he uses but he doesn't know a lot about the whole landscape (which is fair, it's a lot of stuff and you only spend your energy on what you need to care about or are interested in). But it isn't unique to Rust

  • @naska678
    @naska678 Год назад +1

    which episode was it ? on twitch i mean . can someone share the link . the video quality here is horrible.

    • @naska678
      @naska678 Год назад +2

      nvm . it is awesome on safari . for some reason....

    • @eliasgill2453
      @eliasgill2453 Год назад +6

      It's not your browser, is that you were literally 1 minute after video was uploaded 🤣, RUclips can't process HD quality that quick .

    • @naska678
      @naska678 Год назад +1

      @@eliasgill2453 ohhh hahahahhaa

    • @ThePrimeTimeagen
      @ThePrimeTimeagen  Год назад +1

      my faulht :)

    • @TheAriznPremium
      @TheAriznPremium Год назад +2

      it's this btw www.twitch.tv/videos/1679778196?filter=archives&sort=time

  • @ernestobrussli4160
    @ernestobrussli4160 10 месяцев назад

    where is the rest? I want the full tutorial! Did you boot Rich Harris?!? XD

  • @Kellum_family
    @Kellum_family Год назад

    Can’t you do the same thing in Python? Aren’t you able to add any attribute to a type by creating your own object of a that type then defining default attributes to be a part of your new class
    Object?

    • @IStMl
      @IStMl Год назад

      hum maybe but what does it have to do with Svelte

    • @CTimmerman
      @CTimmerman Год назад

      @@IStMl You could run Python in client browsers in Pyjamas and such, but the point of these frameworks is dynamic updates. Add a product to the cart and have some new component light up without messing with the cart code.

  • @christinefredricksen8743
    @christinefredricksen8743 Год назад

    This is great, Thank you!

  • @leeeass840
    @leeeass840 Год назад

    49:26 could somebody please explain how does one write front end in Rust?

  • @clamhammer2463
    @clamhammer2463 Год назад

    So does this mean that you can only have a max of 64 reactive values/statements per component since he mentioned they map a reactive value using a bitmask?

    • @LongNguyen-dh3bm
      @LongNguyen-dh3bm Год назад

      They can easily have multiple bitmasks in an array

  • @saeedatenzi
    @saeedatenzi Год назад +4

    If you value your life learn svelte
    If you want a job...
    Just learn svelte, there are jobs for svelte and it also values your life

  • @dailyfunnytv358
    @dailyfunnytv358 Год назад

    he just went full `if true else false`

  • @ofeenee
    @ofeenee Год назад +1

    Where’s the rest? :(

  • @dipooktama935
    @dipooktama935 Год назад

    I tried svelte today and I loved it

  • @AScribblingTurtle
    @AScribblingTurtle Год назад

    Should you ever be able to get Svelte propperly running in Vim, please make a tutorial. Your "0 to LSP" Video was one of the reasons, why I started to work with Vim (I'm using NvChad at the moment)
    Got Svelte set up far enough, so that all the highlighting works propperly, but the Intellisense is mostly broken.
    VSCode and PHPStorm/WebStorm are fine but it just does not feel the same, even with their respective Vim-Plugin installed. 😥

    • @bfkgod
      @bfkgod Год назад +1

      I also followed his 0 to LSP, then tried switching to NVChad but I was already used to the defaults and NVChad changes so much it pissed me off. So I'm back to Prime's config 😂

    • @AScribblingTurtle
      @AScribblingTurtle Год назад

      @@bfkgod Yea, had a similar experience with NVChad. Now I'm using my own config system, since I still know a little bit of Lua. Feels good. Even the TS / Svelte LSP works correct now.

  • @jasonrooney1368
    @jasonrooney1368 Год назад

    Theo still doesn’t know that Vue has used signals for years and has a very similar pattern with the composition API.

  • @el.bromas
    @el.bromas Год назад

    Oh man I love you both

  • @srdjanpro
    @srdjanpro 9 месяцев назад

    For once, can someone name a library that can't be used with React out of the box? 19:40

  • @CodeTalker23
    @CodeTalker23 Год назад +4

    You gotta try F# with don syme or something if u love Rust, F# is pretty close and cool :D greate stream tho

  • @toxicitysocks
    @toxicitysocks Год назад

    Did not see that rickroll coming

  • @irlshrek
    @irlshrek Год назад +1

    holy shit! i cant believe this is happening

  • @Arzen84
    @Arzen84 Год назад

    I just fell in love with svelte.

  • @thepolygotcoder
    @thepolygotcoder Год назад

    I loved how The Primeagan tried to do an XSS attack LIVE LOL That would have been embarrassing.

    • @Mankepanke
      @Mankepanke Год назад

      Self-xss isn't hard or possible to stop, though. Also not dangerous

    • @moon_bandage
      @moon_bandage Год назад +2

      ​@@Mankepankeindeed... It's not even XSS if there's no server spreading the code to other users, this is just a sandbox code container that exists for only your session

  • @christopherenriquez9765
    @christopherenriquez9765 Год назад +1

    Everyone got Rick Rolled lol

  • @pengain4
    @pengain4 Год назад

    Svelte and SvelteKit are true gems

  • @trubnikov
    @trubnikov Месяц назад

    On Colon Click is Awesome

  • @stugeh
    @stugeh Год назад +5

    Im so upset there are no svelte jobs in my country, it seems like a step up from vue as far as dx goes.

    • @RodrigoDAgostino
      @RodrigoDAgostino Год назад +1

      Yes, indeed! And crearly Svelte took plenty of things from Vue, which ensured its good DX, and these guys took it even further :)

  • @najlepszyinformatyk1661
    @najlepszyinformatyk1661 Год назад +1

    37:45 the funniest moment :#

  • @RootsterAnon
    @RootsterAnon Год назад +1

    I don't like when people mention their wealth before last name. That means I'm Poor Rootster... don't like it...😥. Great video 🥰

  • @flamendless
    @flamendless Год назад +2

    Wow ryan gosling is a programmer

  • @patchshorts
    @patchshorts Год назад

    I have a coder crush on this sesh

  • @asescodes
    @asescodes Год назад

    What the hell is that font? 😂😂😂

  • @mpiorowski
    @mpiorowski Год назад +9

    After You try Svelte, it's so hard to go back to React.......and it's not even all the big things, but even the small ones, like the one that You don't need to wrap jsx in "Fragments" if needed, css scoped to component, prop with default value is automatically "or undefined" ...all these small things gathered togethere just make it absolutely amazing experience. @ThePrimeTime why not putting this on Your main account ? :) Spread the Svelte Love!

  • @soixantelly
    @soixantelly Год назад +1

    this is one hell of an entertaining stream, chris taught the pimeagen svelte and somehow the stream turned into chris getting thought rust

  • @VemVareSomTossa
    @VemVareSomTossa Год назад +4

    so ruby rails in rust? wait is it backwards? what? Ima confused #juniorprogramer.. I cant spell, wont**

  • @dforj9212
    @dforj9212 Год назад

    Funny reaction from Prime when Rich says React is a framework

  • @sirajmussafirr147
    @sirajmussafirr147 Год назад +1

    Two poor fellas who got a new life:
    labels in js
    Enums in Rust

  • @rx0-rx
    @rx0-rx Год назад +1

    this seems much more sensical than react

  • @RoyerAdames
    @RoyerAdames Год назад

    What happen to the rest?