Jesse Skinner - Adding Svelte to your legacy projects

[Music] [Music] [Music] hi and welcome to adding svelte to your legacy projects i'm jesse skinner i'm a freelance spelt developer i'm also a blogger a youtuber and i live code on twitch occasionally so you can find out more about that at codingwithjesse.com and i'm also the creator of the videos belt course the joy of svelt which you can find at joyofsfelt.com so i've been making websites for 25 years and a lot of things have changed over the years i started off with some static html later added some javascript and then i started getting into some server side programming so some php and since then there have been three major turning points in my career three times where i had my mind blown i was totally amazed and changed everything about how i built websites so the first time that happened was when i discovered jquery so suddenly you could write really short and rather clean code for multiple browsers it was a lot easier to do web programming in the browser and the second time that happened was when i discovered react suddenly there was a massive paradigm shift we could define our applications using html in the form of jsx and it was a lot cleaner than using jquery and the third major shift is when i discovered svelt suddenly even my react code seemed a little bloated and all i wanted to do was use spelt every day but at first that wasn't so easy imagine you're a web developer who is working using php or react or whatever technologies and then one day a friend tells you about spout and you check it out you look at the tutorials and you tinker with the rebel a little bit and you absolutely fall in love with felt it is now all you want to use on a daily basis so you get back to work on monday and unfortunately you're stuck using some ancient technologies you're maintaining an old code base and it's full of everything but spelt so you feel absolutely defeated is there any chance that you're you'll ever be able to use felt at work well is it possible to use spell without rewriting your whole application and that's what we're going to try to answer in today's talk so let's say your boss asks you to add a new feature to the site so let's look at an example let's say you have an ancient php website it still uses headers and footer includes the whole thing barely has any javascript but you're still maintaining it for whatever reason and your boss asks you to add a new feature right now the list of contacts for the company is very long and they want to be able to click on the column headers here and be able to sort the table and they'd also like they have a search feature already that submits to the server with a form but they'd like to be able to have it filter while you type so how would you approach this is there a chance to use svelter even though it's an old php site or do we have to rewrite the site using sveltkit now you're incredibly excited to use felt and you are thinking about it all day every day so when your boss isn't looking you take the opportunity to open up the svelt rebel and you just want to see what would it be like to write this sortable table in this felt and you give it a shot you bring in your list of names and you bring in the table and you try adding some sortable columns so that's what i've done here i have a basic table i have a couple functions to sort and to search through the table and so now we can type in here and we get live search we can also sort based on any of the columns and it's working pretty well that doesn't really help us because we are stuck using php on our website or are we suddenly you remember that svelt compiles to javascript and since we need to use some javascript on the php site anyway is there a way to use that compiled spelt javascript on our php site that's when you discover a magic button on the ripple so you'll see here in the top right there's this little download icon you can download a zip file so you click that and you save the zip file to your php code base what we're going to do is we're going to build your spell component inside a folder and then link that in to our php site so if we switch over to our php website you'll see some php files here and it's okay if you don't understand php for this example static html would work the same so would ruby on rails or pretty much any other server side framework if we open up our contact.php we'll see that it's loading a json file and putting into a server-side variable if there's a search it's going to search over it we have our search form and then we have a table looping over the list of contacts putting them into the table we now have our zip file here for svelte so i'm going to drop into the terminal here i'm going to make a new directory contact table and go into there and then i'm going to unzip the zip file that we received and it'll go into this subdirectory here and the reason i'm doing that is to keep it separate from the rest of the php site but now what we can do we can go since we're in that folder now we can run npm install and that's going to install the dependencies first felt and so it's doing it separate from the site it's doing it in a subdirectory and the idea here is that we're able to isolate our sval code isolate the build process we have our separate node modules in there we're not converting the entire site to become an npm package the whole site's not going to have node modules we're just going to keep it very localized in this case and it's a way to discretely add some svelte to our php site and now we can run npm run build and that will hopefully build us our code well in this case it didn't work because i was importing some contacts from contacts.json in this case i'm not going to have the spell code pull in the json file i want to have the php code still do that and write the data in as props so let's go into our contact table example so it's going to be under source you get this app.spelt so let's open that up i'm just going to change this import that i used in the repple to be export let contacts and let's have a default of an empty array so we're going to be passing that in from the php code and this way i can show you what it would be like if you're pulling those contacts from a my sql database or anything like that so now i should be able to run npm run build and it's going to create us a bundle in public slash build slash bundle so now what i want to do i'm going to go back to our contact.php i'm going to scroll just before the footer here and i'm going to add a script tag we're going to pull in the contact table slash public slash build bundle.js and the next thing i'm going to do is add another script tag here we will instantiate our component now the question is how do we wire up our component how do we pull it in how do we tell it where to render and so there's a few things we're going to have to change here we're going to have to go into the contact table roll up config so we're going to have to change the build a little bit when you download the zip file from the reppl it's designed to render onto the page so if we actually look in the main.js we're given this instantiation code here we have this app pulled in from app.spelt the target by default is the body and so we want to have a little bit more control over this so what we're going to do is not rely on the main.js file we want to build the app.spell directly and then we want to expose it into the global javascript namespace so that we can render it onto the page so let me show you the changes we need to make we need to go into the rollup.config.js scroll down here and we'll see under the input there's source main.js so we need to change that to source slash app.svelt you could also rename app.spell to be something more appropriate so i'm actually going to do that i'm going to call it contact table dot spell and so that's what i'm going to put into the input contact table dot svelt two more things we need to change so the format is a iffy so we're gonna change that to be a umd and that will give us access to it in the browser and we're gonna change the name of it so with a umd the name here is gonna be the global variable that we have access to so i'm going to also call that contact table now you could change the location of the bundle as well it's putting it in the public folder again because it's designed to be a single page app the way that this is so we could change this if we want i'm going to change it to dist slash bundle i think that makes more sense and we can build it again npm run build it's going to now put it into disk slash bundle so i'm going to go back to my php site and i'm going to change the location of that disk bundle and now we have access to this contact table in the global space so i'm going to do new contact table and then in here we need to set a target of which dom element we want it to render to i'd actually like to keep the php rendering on the server so that we have some server side rendering so what i'm going to do is wrap this table in a main element i'll give it an id here contact and then i'll put the closing main just after and what we're going to do is that when the javascript loads we're going to find this main element we're going to erase the contents and re-render it using svelte so if a user doesn't have javascript enabled they will get the old php version and as soon as the javascript kicks in they will get the new version so let's make a main document.queryselector contact and then we will use that as the target main here and then the thing i'm going to do right before that i'm just going to set inner html to be empty so i'm just going to wipe out the contents now there's one more thing we need we need to pass the list of contacts to the contact table as props so i'm going to set a props argument we're going to say contacts is and this is where i can use some php and just say echo json and code contacts so i'm actually going to write json directly into the script block all right so now that that's all saved i'm going to switch back to my browser and here we have our ancient php site and now if i refresh it you'll see actually there's two search boxes so i need to move the form into the main as well so i'm just gonna move that inside we want that to be replaced as well with the new form refresh and now we'll see that our i used actually buttons for the headers here and what's happening is that we don't have the css that we need so in this felt build there's often javascript and separately css so what we need to do is link those in but i can just check the functionality it is sorting that part's working and i i can actually do it a live search as well so switching back i'm going to now add some css i'm going to add a style block and then i'm going to do an import url and same kind of path that we had with the contact table so it'd be contact table dist bundle dot css in this case so contact table dist bundle dot css i save that switch back to the browser refresh now it looks exactly as it should so as it loads it's loading the original php version and then it switches out to be my new spell version so to review what you need to do in the rollupconfig.js you need to replace the input you need to point it at the svelt component itself rather than the main.js that comes with the zip file you need to change the format of the output to umd and then change the name from app to whatever you want the global variable to be for your component you can also change the destination of the bundle but it's not necessary so that approach works great if you're using php or a wordpress site static html or some other server side technology but what if you already have a build process what if you're already using a web framework like react or vue angular or something else so we can take a similar approach if we don't want to modify our existing build process for whatever reason we can keep our spell code in a separate folder with its own build process so it's a great way to get started using a little bit of svelt without necessarily diving in and you can keep your code either in a separate folder or you can even keep it in a separate git repo and use it as a npm module so what we're going to do instead of using the global namespace that we did in the previous example we're going to import it into our code so to be able to do that we need to make a few changes to the package.json so by default the package.json comes with name set to spell app so we're going to want to change it to something that makes sense for our component we don't have to change it but once we install it we're going to want to import it using the name of our component so you can call it my spell component or contact table in this example and the other thing we need to add to the package json is a main entry so we need to point the package and say when you import this by name what file does it actually load so by default you would do public slash build flash bundle or in my case i'll point it at dist bundle so let's make those changes now so i'm going to go into package.json here and i'll just make those two changes i'm going to call this contact table and i'm going to set a main and that'll be set to dist slash bundle dot js let's say part of our old site is php but we also have some newer part of our site that's running react specifically a system built with create react app now create react app we don't have control over the build process so we can't exactly add spelt to a create react app without making major changes to it so let's say we wanted to add our contact table to the react part of the site as well how would we do that so if i switch over to our editor inside the blog here we have a react blog so i'm going to spin up that server and we're going to open it up in our browser it's starting the development server if we take a look in the browser we'll see we have this very basic react blog and let's say we want to add our new spell component to the react site how would we do that well first we need to install our sval component into the react site and you may not know this but you can install an npm module from a local folder so we can actually just do npm install and then point it at a folder in our code base we don't necessarily have to install it from a remote location so let's do that but you could also if you wanted to you can also install from a git repo or some other remote location like that you could have a private npm repository as well i suppose so for our purposes we're just going to install it from the same folder we have here this contact table folder so i'm going to go into my terminal into that project we're going to go into the blog and i'm going to from inside here npm install dot dot slash contact table so i'm installing the svelt component from contact table and because we made those changes to our package json we're able to import it into our code base so now that that's done i'm going to switch over to our app.js this is our react blog and inside here let's say we want to add a new section contact us this could be a new page but i'll just put it lower on the page for an example so i'm going to take a similar approach i'm going to make a div here so if you haven't used react before this will seem a little bit strange if you have it may be very common for you to use this so i'm going to call in a couple of hooks use ref and use effect now if you're using a different framework like view or angular or something else it'll obviously be a little bit different but the concept is going to be basically the same so what we're going to do is we need to somehow get a handle on this div here where you we need access to this element so that we can mount this file component there to do that in react we use ref equals and then we need to call use ref so i'm going to make a variable here root actually we could call it contact table root and we'll do use ref call that and then we can pass this in to ref here and then the way it works is now we can call contacttableroot.current to get access to that element it's not as nice as felt's bind this i have to admit but that's how it works i'm going to call use effect and we're going to have a little function in here and that's where we're going to do the exact same thing we did in the php codes we're going to call new contact table which i haven't imported yet so let's do that import contact table [Music] from and i call this contact table so we can actually just import it like that so now we have access to that we're going to set the target to be the div so in this case contact table root dot current that's how you get access to the actual element and we can pass some props as well so i'm actually going to copy over the json file that we used in the our public site i'm going to paste that into our source folder just for this purpose and so what we're going to do is import that from that json file contacts from contacts.json and we can pass that in to our props now the other thing that's important to do here is have some sort of destroy function we need to be able to unmount our component from the page if this component gets unmounted itself so to do that with use effect we need to first have a pointer to this component so we'll get the return value from instantiating the component and then what we'll do is return a function from here where we call contact table dot dollar destroy so that's our unmounting function that we get from our component the last thing i need to do for a react is pass an empty array here so that it knows it needs to re-render that all right so now if i take a look at our blog we'll see that we have our contact page here now you'll notice i have these buttons as well and that's because even though the functionality is working pretty good i don't have my css so last thing we need to do is include the css so i'm going to import it from contact table slash dist slash bundle dot css and i don't need the from there so if i switch back and i don't even need to refresh it's already set up so now i can click these everything's working great so to review you can install your spell component as an npm module to your existing framework once you import it you can instantiate it and use the same instantiation process that we did with the php site so that works pretty well for most systems if you don't want to add to the existing build process but the problem with that is now you have two build processes so what if two build processes are too much what can you do well if you're using webpack you can use spelt loader and modify your build process so that any spell components in your code base get compiled to javascript on the fly if using roll up similarly there's a roll-up plug-in for svelt that is pretty straightforward to use and if you're using another build process other than webpack or roll-up then there are other options available or you can use the separate npm module approach that i've shown you so let's say one day all your dreams come true you get to rewrite your entire app with felt and spell kit can it be true well does that mean that you now have to throw away all your old components do you have to start from scratch and rewrite every single line of code or is there some way that you can pull those things into a spelt kit site well if you're using react then you have the option here of using svelt react which is a component i built that is in npm so you can do npm install spelt dash react and the way it works it's a simple spell component that mounts a react component onto the page so it actually takes the same approach we just did with svelt inside react and it's flipping it around the other way so you can kind of take the same approach you can have your react components or view components whatever else in a separate npm module you can install that into your spell kit project and then import those old components into your new site and we can just take a look at the source code here of svelt react here's how you would use it you can import a react component like widget in this case then you import react component from spell react and then this is inside your spell code here you can then instantiate using this equals widget and you can pass some props and you can even pass some children text so if we look just in the source code for the react component it's pretty straightforward and you can use the same approach so it's hardly any code at all what i'm doing is i have a hook after update and then i'm pulling in all the props that we need and then i'm calling the react instantiation code reactdom.rend and i'm mounting it onto this div so i just have a div placeholder same thing we did with this felt code add this container and then similarly when the components unmounted when it's destroyed then we need to unmount our react code in the same way so you can take a similar approach with any other code whether it's an old jquery plugin or any other old javascript code you have you can use it inside your spell kit site gradually over time start rewriting more things and spell as you need to add features or whenever it makes sense so now that all your dreams have come true you're using spelt kit you are now a full-time spell developer you thought it wouldn't be possible but you found a way to do it i hope you enjoyed this and find some ways to integrate spell into your older projects maybe you thought it was impossible and maybe you don't have to wait till the day that you can rewrite everything although we all look forward to that day don't we well i hope you've enjoyed this talk you can find out more about me at codingwithjassy.com and be sure to check out my video course for svelt is spelt at joyofsvelt.com thanks for watching

Channel: Svelte Society

Views: 1,784

Keywords: Svelte, Javascript, Web development

Id: uWxkaDdqfpI

Length: 25min 32sec (1532 seconds)

Published: Sun Nov 28 2021