Scott Tolinski - From React to Svelte

[Music] [Music] hey what's up this is scott with level up tutorials and for my svelte summit talk here we're going to be exploring our transition from react to svelt on leveluptutorials.com i'm going to be giving you some pitfalls some things that i've learned and some general thoughts on the transition so let's get started this talk is called the from react as felt how we rewrote our front end and found developer bliss in svelt and i don't say that lightly because we really did uh i really feel strongly about the positive effects that this rewrite will have on our code base going forward so now before we get into that who am i uh my name is scott telinski you can learn more about me at scottdolinski.com honeypot did a really really awesome documentary about the career that i've had so far teaching people online i am the co-host of the syntax podcast with wes boss a podcast where we do twice weekly episodes talking about all kinds of important web development topics that's highly focused on education and teaching people web development in a fun and positive way now i'm also the creator of level up tutorials which is a tutorial website where we have a new tutorial every single month and by tutorial i mean a new tutorial series where they're often 20 to 30 videos long every single month on the latest and greatest okay so leveluptutorials.com seen here is a site that i've been working on for a very long time this is my sort of main career project that i've been creating since 2012 really so we even have a discord and all sorts of stuff on here where we create new tutorials like i mentioned every single month now level up tutorials was created in 2012 as a youtube channel specifically and nothing else in 2015 we rewrote the site to have greater control and at that point we rewrote it in meteor which is a node platform for real-time data and it was really nice actually it was a great movement from drupal to node because i finally felt like i had control and i wrote our own e-commerce solution for that i wrote the subscription service and the video streaming platform we eventually moved off of mini into graphql and had our api being done in graphql then we moved our api off of meteor entirely and went full-on graphql with fastify and typescript fastify is amazing in fact the um the graphql library we're using for fastify is called mercurius and that's what serves up our graphql api right now it's incredible a huge huge fan of that project now we eventually moved our ui off of meteor as well and we moved it to veet and react however when we moved to veet and react it was already on react but when we moved to veet we lost server-side rendering we had quite a bit of trouble getting code splitting um code splitting working with like react lazy um and ssr together we just had a really tough time we also used graphql code generator heavily and we still do i'm a big big fan of graphql code jen it's an amazing project so once we moved our ui to react and veet and our api to fastify we were officially off of meteor which opened up a ton of doors in terms of freedom for the platform and that was great right but we eventually got to this point where we were thinking about react and how it fits into our site the user interface of the site all of the components in the site had not seen a a full-on rewrite since 2015 and that can be a very long time in webdev world but it's an especially long time when you've had some major shifts in an ecosystem for instance with the react we initially started with react create component then we moved our components to class-based components and then to function components with hooks that's a ton of churn and that was a lot of work to do that and it felt like just to stay current we were kind of doing not full rewrites but these refactors into whatever the newer version of react wanted you to do and often times it was you know varying greatly in syntax just a lot of change right so that was a whole lot of chain and we really saw no benefit from going from create component to class components to function components with hooks the only benefit there was that we were staying current and able to use whatever new packages were coming out without having to worry about a deprecated older version of react or an older technique the site itself did not get any faster from going with create component to class components or function components that the users probably would never have even known so um that's a lot of churn and you know what happens when you have a code base that churns so much is things can get a little iffy over time they can start to get a little smelly right so the ui could have used a full rewrite or just a full rethinking from scratch regardless if the css or any of the visual aspects were changing we were getting to the point where the code had undergone so many changes over time that just felt it it felt a little funky right it just always was feeling like something had to change in the code base just to stay at baseline to stay up to date which you know you don't want to feel like you're behind you know there's some psychology there where you're feeling like a little overwhelmed that you're behind all these versions so did we need to rewrite the site over and over again in these different things and potentially churn it a little bit no probably not so the ui it really could have needed a full rewrite regardless of what we were going to pick and that opened us up to the possibility of even suggesting or thinking about moving off of react now i have worked in react for a very long time and nothing against react but i started to really feel burdened by react in ways where i felt the platform was over engineered for what we were doing we're displaying video we have a list of things these are these are things that a php based website a wordpress website or even the drupal-based website probably did better than our react website so it wasn't necessarily a matter of figuring out what we wanted it was a matter of taking a look at all of them in pros and cons whether it be next js for react because let's face it if you want code splitting and server side rendering it's going to be next.js right and then view there's a ton of view platforms and then spell kit now don't get me wrong i love you i think view is fantastic but it's felt and spell kit just felt far enough in the direction of simplicity that it felt like a worthwhile swap of a full and front-end framework so uh we knew that every component needed to be evaluated and we knew that we wanted code splitting in ssr and rolling our own platform was not super successful in the past because of the the react ecosystem just not essentially being friendly for that like if you're trying to do it all yourself yeah you can do it but um let me tell you having to deal with suspense ssr and code splitting is not worth the time uh if you're not using something like next.js right it was a tremendous pia not a pwa but a pia so what if we rewrote it in spelt kit ooh jk unless [Laughter] um what if we rewrote this thing in spell kit that was a big question because i had already created a svelka tutorial course and i was admittedly a little um a little tipsy on the wonders of svelte i was thinking this platform it feels so good to work in wouldn't it be great if i could work in this platform every day no way i couldn't i couldn't possibly do that i could not possibly rewrite the entire front end of the site in svelte it's a tiny different language why would i want to do that um it was the type of things that when i i told my my coworkers about it they would say yeah i don't know if that's a great idea so i did what i do and i took 24 hours to just kind of hack away on us felt good version of level up tutorials this is a proof of concept to say hey if we wanted to do this if we wanted to make this thing happen how far could i get in you know a day and it's not a real day i have a family life to take care of so it was an eight-hour day right so 24 hours it was an eight-hour day and i just started hacking together some stuff and next thing you know i had a working homepage with css um i had authentication working and i had ssr with code splitting so i left that 24-hour period with the hope that not only could we do this but i don't know if it would be that hard you know so when i started thinking about it practically you know you you take a look at something and you get so much done in that short amount of time you say i can do this but then when you look at all of the details it's going to be much more than a weekend project right in fact this took us three months which admittedly isn't that bad how about instead of um instead of instead of me just telling you we're gonna do this how about you just spend some time in the svelte version of the site and just try to write a couple of components with it and of course the reviews of the platform were glowing everyone was saying wow this is a ton better to work in than what we were currently dealing with so uh that's why we made that decision and like i said three months later we had nearly a full rewrite now the entire ui is done with the exception of the admin sections of the ui which is currently being served as the old react app because the admin section has a video uploader it has reports it has chart it has all sorts of stuff that to be honest would have taken a long time and now i'm slowly getting that portion of it done with the the idea that i can actually take some time because we have a functioning react version of the admin that doesn't need to be updated or changed we have this thing that exists let me just go ahead and see what we actually need in our admin tools what can we make better about it and take a look at truly building it from the ground up so challenges what kind of challenges do you have in rewriting your entire ui it seems like challenges should be a lot bigger than three things but to be honest these were the main challenges for us because falcon took care of a lot of the the challenges that we were having with the other project whether it was ssr code splitting suspense those types of things didn't have to worry about them anymore but the challenges were really all right we have to rewrite hundreds of components and level editorial is not a small code base i mean this is a legit large code base you have admin tools you have you have the whole user experience you have the video experience you have courses blog posts you have user accounts you have subscription information billing the whole checkout flow and this is a big big site also applications in uh application data and state um react famously has no real direction there so you kind of just you pick what you like and you kind of use it a little bit maybe you do some context maybe you use some apollo for graphql maybe what you do is use a whole host of different libraries to try to wrangle state and react so it definitely needed a tremendous re-evaluation because the state in svelte is an entirely different animal than it is in react and by different animal i mean that state in react is a porcupine and state it's felt as a cute soft little cuddly bunny i mean it's it's that that's how it feels to me at least especially after working in both of them um also testing what we're going to do for testing testing is a big challenge typically especially if you were using something that was very specific to react testing now we have to rewrite all those tests no thanks so i'll talk a little bit about some of these challenges so challenges solutions we have solutions uh with solutions let's say we needed to rewrite hundreds of components that means you kind of need to get good at rewriting components so i figured i would show you just very briefly how we did that so here's a very simple component this is the author courses i'm going to make a new file here we're going to select the language it's going to be spelled i'm not even going to bother saving this file i just want the auto completion and the code pretty earring so here's how i did it here's how we rewrote all of our components this is the simplest most basic component that exists so we just copy this we paste it into the spell file you can see it's broken then we get removing on the extraneous garbage like okay we don't need an export obviously we're exporting this we don't need to import react from rad because obviously they react components okay um a function well we don't need a function because this is going to be oh you get out of here because this is going to be a single file component okay well we don't need the return there's no function we save this well we don't want to save this but we have this and this right here is the difference between react and svelte and granted this is a div with an h3 that says coming soon this is not exactly anything crazy this is like the the lamest component in the history of components okay i don't even think we well clearly it says coming soon we're clearly not using this component but i wanted to illustrate the difference here we have a component that is a div with an h3 in it and look at what it looks like in react and look at what it looks like and felt 11 lines three lines that should tell you right then and there that this is how this is going to look because i don't think there was one single component that we updated on our site that didn't shrink about by this much whether it is 50 percent uh 50 smaller or whatever they are typically losing quite a bit of heft from these components right let's take a look at another one i'm going to do another sfelt and this is going to be a much more simple component or a much more complex component and this is the hero component now i'm going to copy this and i'm going to paste it in because that's how we do it now this right here is a bit different of a component you can tell it has some styled components in here it has a function it has several imports so when you're taking a look at a big component like this what are some of the things you do first well for me what i do is i i once again start to just rip everything out right and especially the imports the function stuff the boilerplate let's get rid of it okay and likewise we'll do so at the bottom with the export and granted this is jsx so this is not going to be super friendly to svelte but here it is not to mention there's tons of components that are going to be missing here and we have our styled components so styled components right what we did to convert our style components is rather simple actually we can say all right instead of constitutional layout that's overriding a layout what we can say is let's just take this whole entire line and turn it into a style tag with a laying of scss and get rid of that back tick and wrap off the style tag okay now these things remember we were overriding the layout class so i can use layout which is effectively going to allow us to override the layout class here the same way because of house felt handle scoping and we'll just wrap these ones in here like this okay now you'll see see some interesting things like we're using a button here we can just say now uh let's convert all of our styled components into just classes right and that was actually honestly pretty easy we were just copying and pasting straight out of style components and then pasting it into our scss so like a button now becomes dot btn and so we can just replace both of these with dot btn we already wrote the css you can see that clears up quite a bit here and that will do it for our css pretty easy conversion i'm not quite sure what this is angry about oh i can't find node says that's because this file isn't in the repo i don't want to save this in the repo next let's take a look at this html we have some interesting things i know we're using a button component but this is really a link that looks like a button so one thing i'm going to do is i use heavily usage of find and replace we're going to find and replace button with an anchor tag okay we're going to find and replace 2 is equal to to h ref is equal to there we go so now they have anchor tags now one thing we'll want to do is add a class is equal to btn okay and likewise a class of btn can like this now we'll also want to find any instance of react specific language things like class name can actually finally be just class thank you thank you so much because i love this change um this is i honestly have never understood i mean i get technical reasons behind needing this to be class name but no thanks i don't like it never going to like it now i remember what i said about the hero layout was a styled component that just extended layout since we have scoped css in here we can use the parent layout class and use the scope styles from that parent layout class so we can say this is now a div with a class of layout now motion div this stuff is going to need some work i'll talk about that so we don't need motion div right we don't need that and for style i'm not quite sure why i initially put these in lines but we can just remove those entirely come down here paste this in and then convert this to text align now this is kind of a pain in the butt there's probably easier ways to do this but you know what once you do it a few hundred times it doesn't feel that difficult it's just kind of a grunt work so to say okay but that's it take that inline style out cool we'll also want to remove anytime we see as because as means nothing in here okay starting to get a little bit more spelty here now what are the what are the things we have to do next items yeah items is just a div items is just a div there's nothing really interesting about that div um i think there's now a class called items it's it's for having things side by side there's two items here they're side by side it's a div it just i i believe what this does is just makes the um the flex box look nice okay so last thing we need to do is the animation component of this all where we want to do a new um script tag actually i use typescript so i have a sts which is just script with the lang ts and then we can import um fly from svelt forward slash transition it's not going to be able to find this because this is not in a module and we have an initial and an animate in here but we can change initial animate we can now say fly colon or sorry we can say in colon fly thank you vs code for letting me know i was about to do something very wrong there and we're going to say the opacity starts at 0 and the y ends at zero and then we'll change this out fly to be opacity i'm sorry opacity should be one for n and then y should be negative 40. and that way we can get rid of initial and animate bingo bango that's it and notice how what we had to do for this was we didn't need a library for scoped css no more scope css libraries thank you we didn't need an a library or at least to install a library for animations or transitions thanks to svelt and we got to remove a ton of extraneous garbage so if we look at the total end result the savings on this one weren't as big in fact mostly because the css section is larger that's one of the big ones here but look look at this look at this top top area the top area is significantly smaller three lines compared to five it's not a huge deal but the bigger your components get with the more imports they get the more that this becomes a big deal um the actual div the actual html starts at line number five instead of line number nine and you can see that we're done with the entire html of this thing by line 22 where this one isn't done with the html or the templating section to line 29 then we have a parentheses and a bracket and an export this stuff is is unnecessary in this case right we have a single file components not doing anything for us it's making things maybe a little bit more explicit but hey at the end of the day you can see that while the savings weren't as great 43 to 38 still feels good right and many times what we're seeing is a very real reduction in the amount of code that we have and the code that we're removing is all code that i would deem to be exceedingly unnecessary right all the functions stuff here okay so let's keep it moving application state stores for global state vars for local state that's what we ended up going on we're using stores anytime we have something we need to be global let's say that we wanted to trigger a loading state in fact i have this neat little tool that lets us toggle states so this is a global state we can toggle the loading state for many there just loading is equal to true same with the checkout is checkout open although this one needs some other things before it will actually open maybe the login window is a good one there we go you want the login window there it is even though we're already logged in it's still it's still global state right is search overlay visible there we go cool uh that's the benefit of this stuff is hello react you can see that it works really super well just by typing in here okay so global state in we didn't have to make those choices right that was just kind of seemed like the way to do it with with spells right uh graphql data initially came in via apollo but we started to feel like apollo being our largest dependency we weren't really using the cache to its fullest potential we were like well why why don't we just do fetch calls why aren't we just using straight up fetch call graphql to get our data back and display it i don't know why i you know wanted to use a big big library to do that so we started off with fetch calls and that fetch call ended up becoming a plugin called gquery which i'll talk about in another talk and gquery is really just an exceedingly simple fetch command that stores things into a svelte store um and does it all via code gen so that's ended up that that's where we ended up for state um cogen for the win cogen saved our bacon so much here because we didn't have to rewrite any of the functions that hit our api all we needed to do was run code gen with our new plugin it spat out the functions for us and let's see if we can see a um actually let's look for t's this is a good one here it shot out a function here like get active playlist and then we can do things like await promise all get active playlists get playlist tutorials and have those fetch for us in the load function and then just have those available as stores on the front end where we could do things like make derived stores or use those as stores themselves so that was pretty neat right cogen really saved our bacon and actually the best part of all of that is this stuff is typed right active tutorials is typed because of jquery and cogen so yes amazing testing guess what we didn't have to rewrite a single test why because we use cyprus and we use data test ids so our tests stayed the exact same meaning that what we could do is leave all of our ui tests as they were and then we could run them and very quickly see which aspects of the site were neglected or forgotten if we were using react-specific testing libraries that would not have worked that would have been a huge bummer and we would have had to rewrite a ton of our code and that's one of the reasons why i think i'll stay away from like if people ask me you know what specific testing library should i use i'm going to stay away from all of them and i'm going to use a testing library that runs in the browser where the users are using it that way we didn't have to rewrite any of our tests this right here huge huge huge hack for us this saved us so much time okay lessons learned here um what kind of lessons did we learn well conversion to svelte from react is very doable it was way easier than i was expecting when i first dreamt up this idea i thought there's no possible way it was going to be doable i thought it was going to be just a giant bad idea and it ended up turning out to be a great idea maybe one of the best ideas now svelte is a dream to work in that's a whole other lesson learned is that i really like working in svelten there hasn't been too many times where i'm like man i really wish i was working on the old version of this site which granted was still in typescript and latest and greatest react felt's just that much of a good experience ecmascript modules they can be a big pain in fact i i've had pain with ecmascript modules uh and in fact the same type of pain many people will have moving to an ssr based platform if they are using ssr because if you haven't done a lot of server side rendering in the past there's a lot of gotchas here esm not always been fun not always been super awful either working with the dom directly in svelt totally rules it's awesome uh one of my favorite aspects of this is that i no longer have to look for the spelled way to do things and i'm more or less looking at oh what browser apis exist i can access the node directly i can even write a svelte action that accesses the node directory directly if i want to it's awesome i love working with the dom it really truly feels like uh you're not working on a an abstracted platform over the dom you're working with the dom with an abstracted platform so it's like you get the best of both worlds there right um cross-platform cross-platform libraries are my new best friends rewriting a site is tough stuff so we used vime js or veeam i don't know how you say it for video it's a web components based video library that has been working great the only the only problem is trying to get it to play nice with ssr and really that wasn't that um it was a good oppor next is that it was a good opportunity to prune hefty libraries and focus on shifting shipping less code and we are shipping way less dependencies and way less code it's hard to express just how easy svelte kit made it for us to do that but if you take a look at so many of the things that we would have had to bring into react to get it to do what it wants to do a routing library an animations library a state library um a scoped css library and the scope css library needs a babble plugin like no no thank you on any of that stuff we got to remove all of it use the spell platform and not have to ship any of that extra code what a dream it's so good um spell kit makes perf easy it makes performance super easy because things like code splitting and ssr are baked into the platform uh you don't have to do a whole ton to get them working you don't have to do anything really to get code splitting working and that is the that's the dream right there that's the future um so perf the site was instantly faster when we when we deployed the new version of it even in a client-side only version of that people were reporting that the site seemed um just very noticeably faster so that was awesome typescript rules we uh we have all of our since everything in the site is typed whether it is from the graphql cogen to our components typescript has just been a dream to do a refactor of this size with i would feel very uncomfortable doing a refactor of this size without typescript um not that i will ever do one of those again svelte encourages not over engineering things i kind of touched on this already but felt kind of has a very simple way of doing things and usually 99 of the time when i was refactoring components and i ran into a situation where something felt difficult it was only because i was still in my react brain of things needing to be complicated where just the simple act of being able to send data upwards when you need it that simple act can be really really nice it's not about removing the boilerplate and the extraneous stuff it's that's svelte kind of encourages most things to be fairly simple whether that is working with the dom or that is the apis in general and because of that you're much less likely to over engineer simple components and simple things and everything will just work again not needing a library to do everything really helps as well one last thing you got to worry about staying up to date with that's for sure this last one is when you make less tech choices you can focus on what really matters and that's building smooth fast excellent user experiences things that look and feel nice rather than you know which state library am i going to do to display this text okay so that's it that's what i have from reactus felt you can check out the site at leveluptutorials.com if you sign up today only upon watching this you can use the coupon code summit and get 50 off uh and there's a new course every single month the course right now is on astro like i mentioned next month course is going to be on accessibility with amy kaepernick and it's going to be very very cool we have some amazingly talented content creators like colby fayoke and brian douglas and ryan allin's gun james quick all these people have made amazing courses for level up tutorials so if you want to check those out and more sign up today use the coupon code summit you'll get 50 off the yearly subscription and if if you're watching this in the future and you still want that deal we'll be doing the same deal for black friday so new courses every single month again thank you so much again this is scott with level up tutorials i'll see you in the next

Channel: Svelte Society

Views: 3,845

Keywords: Svelte, Javascript, Web development

Id: ezk6qAIXe68

Length: 32min 24sec (1944 seconds)

Published: Mon Nov 29 2021