Svelte Summit Mini Edition: Interwebs

[Music] room ready [Music] oh [Music] foreign [Music] [Applause] me [Music] [Music] [Music] [Music] [Music] [Music] [Applause] [Music] [Music] [Music] [Music] so [Music] [Applause] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] so [Music] [Music] [Music] [Music] [Music] [Music] ready [Music] wow [Music] oh [Music] hmm [Music] [Applause] [Music] [Music] [Music] oh [Music] [Music] [Music] [Music] so [Music] [Applause] [Music] [Applause] [Music] [Music] [Applause] [Music] [Music] [Applause] [Music] [Applause] [Music] [Music] so [Music] [Music] [Music] [Music] hi everybody my name is merry chris bonzo and by day i am advocating for developers at magic a future proof passwordless authentication solution and by night i am building a dow called women in web3 and i'm also taking care of my energy my plans my gemstones and my furry kids so um before i got started my with my talk i wanted to uh give a shout out to a few people including nader dabit uh that's because i built this app using his tutorial but did make a few changes to it so his tutorial is building a full stack nft marketplace on ethereum so um instead of using next.js like his tutorial i replaced it with kit and then um instead of using metamask to uh buy nfts or sell it um i'm using magic wallet so uh shout out to nader davit that was a really awesome tutorial and i can't wait to remix it with develop kit and magic so i also wanted to give a shout out to sean mullen he is one of the guest authors of magic he wrote this blog on how to integrate magic with a small kit app and this is actually how i first learned about sevelt so it's very special to me and i actually referenced this blog a lot when building my app so shout out to sean mullen all right so in this talk i'm going to show all of you how i built a magical nfc marketplace which is pretty much a remix version of both uh nader's and sean's app on this uh nft marketplace we'll be able to create an account uh mint and nft uh by an nft and then be able to see all of the nfts that we have ever owned so it's gonna be a lot of fun but before we get started we should probably um learn what a decentralized app is because that's essentially what we are building is a dab and um i want to give another shout out to prithee uh because i'll be using her diagrams in the following slides um her diagrams are going to help us like distinguish between a regular app and a tap so what is an app we all know what it is it has a front end for the ui it has a backend for the business logic and then it has a centralized database to store the data and then once we're done developing the app we deploy it onto a centralized server and some examples of that are versal gcp and digitalocean all right so what is a dab as you can see adapt still has a front end that we can deploy to a centralized server but where it differs most from a regular app is the back end so a back end is going to have a decentralized storage for storing data and then for the critical business logic that needs to be recorded on the blockchain we write them on the smart contract and then we deploy the backend on a peer-to-peer blockchain network uh like ethereum or polygon or cello but in our case we won't be deploying it to any real blockchains we're just gonna deploy it to a local network which we'll learn more about later but yeah these are the differences um so hope that helps and another thing well i'm like in this nft realm uh so this is one of the nfts that was sold for like so much um by people and i wanted to you know since we're building a nft marketplace we should probably know what an nft is for those who don't know um and i had this definition by linda because it's it's just the best definition out there in my opinion and i'm just gonna read it out loud to y'all so a non-fungible token is a unique digital asset whose ownership is tracked on a blockchain such as ethereum so yeah it's like having a mona lisa piece of artwork online and it's unique and can't be duplicated because it's been uploaded to the blockchain and the blockchain is immutable and it's secure because it's a peer-to-peer network so all that tech side is really cool but what's really awesome about nfts is that it introduces this idea of digital scarcity so artworks are finally given the sense of life online that a lot of people are willing to pay hundreds thousands and sometimes even millions for and it's really amazing because it generates like wealth for online creators that i feel like they deserve so it's it's just an awesome um revolutionary technology so yeah for those of you who are like so who cares about dabs and nfts um well uh dapps and nfts fall under the umbrella of web 3 and web 3 is pretty much the next stage of web evolution where decentralization is a key attribute and so in the web 3 space you'll find that the most important thing is that control and power of digital identity and data is shifted to its rightful owners which are the users themselves right us um so once you start like falling down the rob three rabbit hole what's even more amazing if that's not amazing enough is that um it's all about community all about creating value for the community and it's all about the abundance of opportunities that exist so there's an opportunity for everyone to generate wealth especially if we are early in the game and we are so i'm just really excited to share this talk with all of you all right so this is the tech stock that i used um and we're gonna go over each and every single one of these so just hold on so real quick uh solidity is the um language that i use to write the smart contracts hardhat is going to help me build a solidity development environment to help me test and deploy these smart contracts svelt kit for anyone who is new um i think it's worth understanding what develop is first svelte is more than just a ui framework it is also a compiler that makes it easier for us to write components it's kind of like react but in my opinion it uses a smarter programming model because it compiles components into petite javascript modules at build time rather than doing this work in the browser so that means that the browser does less work which means that our app is faster and we write less code so that is awesome and so that's vault and spell kit is pretty much a framework that was built on top of salt that um lets us build develop apps like really quickly so it's kind of similar to next year yes for react all right and magic is a plug and play passwordless authentication um it's what we're going to use to authenticate users into our nfc marketplace and it's also going to serve as the user's wallet so that they can transfer funds into it or mint or buy some nfts all right so we're going gonna need a place to save the nft image and its information somewhere and we're going to save it in ipfs which is a distributed file storage lastly ethers.js um is the library that's going to let our front end interact with the ethereum blockchain or in our case we'll be deploying our smart contracts on the hard hat network so we'll be interacting with the hard hat network all right so now let's learn about the smart contracts that we'll be using for our nft marketplace and i'm not going to go into detail about how this is uh written because it is part of nader's tutorial so i would reference his tutorial if you want to dive deeper into it all right so this is the nft contract and what this is going to allow us to do is let users mint an nft so what that means is that their ownership over the nft will be recorded onto the blockchain and we're using this create token method in this contract to do that so we'll be using this on the client side um in a bit and then we have the marketplace contract and we have a lot of methods in this contract uh but the essence of it is this contract is going to let users perform transactions in the marketplace those transactions include adding an nft to the marketplace so um create market item selling the nft so create market sale or buy the nft and then getting the nfts so all these fetch methods will help us get the nfts that we want all right so we're done with understanding the smart contracts of the nfc marketplace and um if we wanted to run it the main steps that we would need to follow is we would spin up the network so in our case it's the hard hat network and then we would deploy the contracts that we wrote and when we deploy it what we get back are the addresses to which the contracts were saved in the hardhat network and we're going to save these addresses in a config file because we're going to need to access these contracts all right so that's it for the back end of smart contracts uh now let's see how we build out the front end with bucket and magic and a bunch of other tools that i mentioned earlier all right so we have one public page and one private pages that users can access if they log in all right so first the login page so this is the login page when the user wants to log in they pass in their email click login and their email is passed into this login function which we're importing from this library but once we successfully log in we take the users into the mint page um before we go there though we're gonna dive into this um login function so let's go into there all right so uh here is where the login function lives in the odd.js file and one of the most important uh functions we're gonna look at here is the login with magic link function because this is what authenticates the users in so let's look at this file so first we are importing the magic client sdk and then we are calling the login with magic link with the user's email address when this is successful we get a did token which pretty much uh gives the user access into the nft marketplace it's kind of like an access token so as you can see we are sending this did token over to the login api endpoint and we're doing that to validate the token and once it's been validated and everything's good to go we are pulling in the user metadata and storing it into this belt store and so before we move forward i want to see what's going on with the magic client sdk and then also what's going on in this login api endpoint all right so let's see how the magic client sdk is configured all right so um this is pretty much where we are connecting to the hard hat network and all that is is a local ethereum network node and we connect to it by specifying the network url which is right here and adding that into the magic client sdk config so there it is and we are also using ethers.js here to create a magic provider and all the magic provider is going to do actually it does a lot of things but it pretty much is how our front end is going to communicate with the smart contracts that we deploy onto the hard hat network so this is important all right now let's understand what's going on in the login api endpoint okay so in here as i mentioned before this is where we're validating the did token and the reason why we do that so well first of all you get the did token and we're actually importing the magic admin sdk um to help us validate the dt token so we validate it and once we know that it's it's good to go we can get the user's metadata and um yeah and then we also create a cookie and pass in the user's metadata in there so that we can persist uh the user session across all of the different belt uh pages and that's pretty much it um this is all good and just really quickly uh you want to see how the magic admin sdk is configured all we're doing is importing magic and setting our secret key which we get from the magic dashboard and making a new instance of this magic admin sdk so yeah we'll be using um the uh magic provider a lot to interact with the um hard hat network all right so the user is now logged in and they're brought to the mint page and they have a magic wallet but they cannot mint an nft right now because they have no ease in their magic wallet so let's fix that so the way we do that is we're going to use um rink b um it's just a way to get some test eth into your wallet um and this is how we we need to do it for rank b so uh we need to get our public address and i got that by just printing it out um i got the user address and then what i do um is i created a tweet um that includes my public address and then i added that tweet to the uh ringpi um input form and yeah so this is just their way of making sure that you're a real person asking for some tests eat so once you get your test eat you can check to see your balance as you can see i have a ton right now so i am good to go all right so we're back at the mint page and one thing i want to point out real quick is that we're going to be using this line of code in every page get auth store and this is pretty much the the store that we defined when we logged in you know um we put the user's metadata in the store or saved it in the store so that we can access it across all the different pages um and you know we are calling it to make sure that the user's logged in if they're not then we take them back to the login page and the most important thing to see here on the mint page is that we have a component called mint form so we're gonna dive a little deep into that and see what it's doing all right so before we get into the code let's just understand what's happening on a ui level so when you wanna get an nft you gotta upload a an image and when you upload an image this on file selected function is called and then after you upload the image then you add the information about your nfts and then you click create and this create button calls the create market function and then the create sale function so uh let's go see how that looks right so here is the mint form um and let's look at on file selected first um i'm just gonna tell you what it does i'm not gonna go into detail about it so um on file selected what it does is it uploads the image um onto ipfs and gives us a url to that image so we upload an image and then we write the uh information about the nfts here right and then once we're done we click uh create which calls create market and what create market does is it pretty much takes the information about the nfts as well as the image url and uploads it as a file onto ipfs again and then once we get a url as to where that file lives we can call create sale and create sale um in adjust oh this is like where the magic happens actually so i need to um slow it down a bit but create sale is where we use the magic wallet to mint an nft and add it to the marketplace so um in order to do that though uh these are transactions um so we need to grab our ethereum account or assigner using the magic provider so we're importing it here and then um we're calling it's method called get signer to get um designer or that's all that is is the ethereum account and this signer is going to let us access the smart contracts that we deployed onto the hard hat network so for example the nfc contract lets us do some things with it and then we have the marketplace contract here and it's also um you know that's what that's one thing designer does helps us access those contracts and then it helps us perform changes to our uh apps or dapp state on the hard hat network so uh where is it so we can create a token um and then we can create a market item uh so yeah that's pretty much the gist of it let's go back all right so that is the mint form so after you have finished minting the nft the app will take you to the home page and this is where all of the nfts that are available to buy will live so it's pretty simple um what we really want to look into is this component called nft gallery so let's get in there all right again nft gallery these are the two main functions we're going to look at um so once we get onto the home page this load nfts functions get called and then when we click the buy button to buy an nft the buy nfts button gets called so let's go into the code and see how that looks so load entities this means that we need to get all of the available nfts that exist in the marketplace so we'll be interacting with the marketplace contract which means we will need the magic provider so we are importing it here and using it in these two lines of code and so that's pretty much the gist of load nfts all right now we are going to talk about the buy nft function and so we are making a transaction here so we need the user to sign a transaction which is why um we are importing the magic provider and getting the signer and so we get an instance of the marketplace contract and now we can buy the nft by calling create market sale so that's pretty much the gist of this part all right so that's it for nfc gallery component now let's move on to the profile page all right so now that we have either minted or bought an nft we can see all of the nfts that we have ever minted sold or purchased on our profile page so if we look at the code you can see that i have a component for each of these so let's look at them all right so purchased nfts um let's see uh one of the most important functions that we'll be calling uh we already know about load nfts we're just fetching the nfts um that exists in the marketplace um but we're not just fetching any nfts uh we're fetching my nfts the logged in users nfts so this is important so let's go look into this real quick okay um okay so this is where we're calling fetch my nfts so because we're interacting with the contracts again we are importing the magic for writer getting the signer because we're getting a specific user's nfts and getting an instance of the contracts so yeah that's pretty much it we're just like loading all of the nfts that belong to the logged in user and displaying it okay and similarly uh these components do the same thing uh but with um small uh change so minted nfts we're also calling load nfts um and we're calling fetch items created and we're pretty much doing the same for sold nfts uh we're also fetching the items that we've created um and the only difference is that um for the sold nfts we're filtering out all of the items that we created and have sold so if we look at the code we'll see again we're interacting with the contract so we get the magic provider get the signer so that we know because we're looking for items that belong to specific user logged in user and then um we are getting um all of the items that we have ever minted or created and then for the sold nfts we're pretty much like doing the exact same thing except that we are filtering out those that have been sold okay so that is it for these components all right so i hope we had a lot of fun visiting the nft marketplace um and now that we're done buying or minting our nfts we can log at magic and to do that we just click on this logout link on the navigation bar and when we click on that link let's see what's happening and the most important functions we're going to be diving into is the remove session cookie and magix log out by issuer method so first though let's just walk through the code so we click log out and we are calling the logout function which we defined in the odd.js file which is in here it's very small and all it's doing is making a request to the logout endpoint and actually it's also clearing up the store so the uh log out api endpoint um is importing the magic admin sdk so that we can use the log out by issuer method and what this does is it logs the user out of all client-side magic sdk sessions and as you can see we're also removing the cookie and making sure that the user metadata isn't there anymore all right so those are the major parts that make up the swell kit and magic powered nft marketplace so now let's test this thing out okay so i'm gonna log in and i'm actually gonna check my phone email to log myself in okay log myself in all right cool so we were taken to the mints page now let's choose an image to um mint maybe this and we'll call it um first nf tier yay and we'll give it the price of one eighth okay so it's been created and there's my first nft awesome so uh you can see that i am the seller here um let's find an nft that i don't own and buy it hopefully i have one in here i guess i don't have one but i've already bought some so let's go into my profile page and see all of the nfcs i've sold here they are and nfc they purchased and nfc invented awesome now last part is let's log out ah thank you to the universe for letting that work very nicely all right well thank you for watching my talk um my plan is to turn this nft marketplace into an nft funded dow so we'll see how that goes um but if you want to stay updated on that project or if you want access to this slide deck or all of the other resources that i use to help me prepare for this talk feel free to follow me on twitter i'll be posting a tweet of all the resources including a link to magic so as a reminder magic is future proof plug and play password list op solution and it's for and all developers if you're in web 2 web 2.5 web 3 whether you're building a gated community or an nft marketplace magic has got your back so yeah check us out and last but not least i just wanted to say a sincere thank you very much to the spot summit team for giving me the opportunity to get this talk so yeah i'll see y'all later bye [Music] so [Music] [Music] hi welcome to this session on building reliable svelte applications using cypress and test driven development my name is maurice de bayer the problem solver if you want to read more about me check out my website this session is not about me so let's continue but before i do a bit of shameless self-promotion i do have a cyprus course on udemy it's the highest rated scores at the moment so if you're interested in learning more about cyprus you're welcome to go there what are we gonna cover this session well we're going to take a look at what cyprus.io is and we're going to take a look at how you can use felt kit and the sveltkit application with cypress to test drive your development we'll look at creating pages and components as well as testing apis and i'd like to cover running your tests on the ci provider as well but we won't really have time to get into that but i'll provide the code for you anyway so what is cyprus and why should you care about cyprus well cyprus is this great tool and this is the cyprus website like every great tool it has great website and pretty good documentation and it's a testing tool for modern web applications so browser-based applications it allows you to write tests in an easy manner using javascript or typescript it's got an interactive runner which would let you step through the different steps of your test kind of a time travel debugger so you can see exactly what went on in which step very useful when you're debugging tests it will automatically wait for elements to appear so if you're clicking on a button for instance and that button hasn't rendered yet because the application is still waiting for an ajax request you don't manually have to go and wait and check whether it's there cyprus will do that for you it will also record videos of all your tests not just locally it will do that on the ci server so if your test fails you can just download the video and see exactly what the test was doing which is a pretty nice way to debug your tests on a remote machine it will also fake out the network if needed by default all ajax requests are gonna go to the real back end which is pretty good it tests your real application completely from end to end but in lots of cases you want a bit more control over the data returned or how ajax requests are actually executed on that case you can intercept those and you can fake them if you want to or just check on whether specific properties are there or not there another neat thing is it can retry failing tests now ideally tests will never fail unless they are really broken but it turns out that with end-to-end testing you sometimes have flaky tests a flaky test can be kind of painful kind of leads to you just re-running tests to see if they pass again if you just hit the re-run button why not let the tools do it for you cyprus can do exactly that you can run it in docker containers you can download extensions from it all very neat another nice thing is you don't need any external drivers no web driver apis cyprus will run inside of the web browser and doesn't need any external drivers which is pretty neat now you can't really talk about testing without talking about the testing triangle i've got a testing triangle here and at the bottom are our unit tests where we create small tests against small piece of code which runs really fast and above that we've got integration test where we kind of write a similar style of test but the chunks of code we test are somewhat larger now these are fine and you should definitely do them but they tend to lead to tests which are somewhat well not representative of what your application actually does and you might end up with lots of tests which actually pass but your application doesn't work and above that we've got end-to-end testing which is what we're doing with cyprus and right at the top we've got manual testing where an user actually goes or test professional probably actually goes through your application and tests it now those manual tests are never going to go away but it's slow it's a manual process which makes it not very repeatable and expensive so while it's needed for some special cases you should minimize it now there are lots of mimes on the internet about over relying on unit tests and i kind of like this one we've got a glass sliding door and it reacts to someone walking up to it and opens and that works just fine it was unit tested and perfectly fine and then there are the two little gates they also have a sensor about something or someone approaching and they will open up and again they were unit tested they work fine they do the job perfectly well but if you put them together they interfere because if one closes the other detects it and opens and that triggers the first again so that's what you get with overall lines on unit tests but like i mentioned before unit test is not something that should go away there are lots of things which are very easy and good to unit test things like algorithms small details these kind of things you shouldn't write end-to-end tests for those write unit tests there now a wise man once said the more your tests resemble the way your software is being used the more confidence they can give you and that wise man was can't see dobbs he's the author of the testing library great set of tools to bolt on to just for unit testing great to test filter components with jest but also to help you with cypress end-to-end testing now i'm not actually going to use that in this demo i'm going to keep things simple but these tools are highly recommended now what are we going to build we're going to build a small movies browser application using felt kit it's going to look like this we're going to fetch a set of movie data from the movie db a surface on the internet we're going to display it in this card format there is a bit of a navigation at the top between home movies and an about page and we'll do that in a test driven development and how are we going to test those well of course we're going to test them with cyprus and we'll see different tests like these none of them are there yet we'll create them but we'll see those run and test our application and we're going to do that in a test driven approach so i'm going to write the tests before i actually write the code now what's already done i have prepared this a bit i have done an npm init svelt at next with the application name and i said no to the option of using typescript even though i'm a typescript fan i also left out eslint not that important for a small thing like this but i did use prettier for code formatting just to keep things nice and pretty so that resulted in an application which looks like this a standard felt kit application home page nothing much to see here just a link to this felt kit documentation so that's done i also added dependencies i did an npm install bootstrap because we want a bit of styling and i want to keep it simple as well and i installed cyprus so those are in place i also created a few components just to save some time i've got a simple header component it creates a navigation bar at the top of the page and lists the three pages home movies and about that's already in place but it's not actually being used yet so that's done next i created the movie card component a pretty simple svelte component nothing special there it receives the movie as a prop it renders the movie with the image the title and the overview in a card in the ui with the standard bootstrap styling so that's done as well one other thing i did i already created an about page if i go to localhostport3000 about we can see that about page so that exists as well now let's write the rest of the application in a test driven style using cyprus in order to open snipers you can run the cypress open command and i added that to my package json right here so the command cypress colon open run cyprus open and i've also got the cypress run command which runs it in a headless way cyprus open runs it using the interactive cyprus runner which is the typical runner you use when developing tests normally you would just be able to run cyprus open but in the case of a svelte kit application that would actually result in an error so we first want to create a cypress configuration file with a minimal setting in there to prevent that error from occurring we'll create a cypress.json file i'll add a dollar schema option that's optional not required but it helps with intellisense but the option i really want is that plugins file by default when we first run cyprus it will create a whole scaffolding for us including a standard plugins file but that's not compatible with common js and as a result it will fail we don't really need it so we can set it to false and it won't create it if we want it later we can still add it back we create a common js file a cjs file and we add a pointer to that file right here and then it will work just fine but as we don't need it i'll just set it to false to skip installing that so with that in place we can do a cyprus open and it will create the basic cyprus layout and folders and files to get started with so their cypress opened and now i could actually run one of the standard tests it generated as an example here's a simple to-do spec they provide as an example these examples are quite useful but we're not actually going to use them right now now i could go and delete those example test not a big deal but i'll leave them for reference because the examples are kind of useful so your typical next step is to add two more settings to the cypress.json file first the base url where the application lives and you don't want to code that into your test because it makes it a little harder to change things and we want to hide those sample tests so the base url points to localhostport3000 and using the ignore test files we ignore the two sets of generated tests which were as an example there now in the test runner we can see there are no tests whatsoever so let's start by testing the navigation the header component which we're not rendering yet but like i mentioned we're doing things in a test driven development so we're creating tests first and only then are we going to implement the functionality we'll create a new test specification the navigation.spec.js we'll describe it using describe block in the before each which runs before each test we'll go to the home page using site.visit we'll navigate to the home page and then in the first test we'll test whether we can navigate to the movies page we'll locate the nav element using side.get with the selector for the nav element and then inside of that we'll look for an anchor tag with the text movies and we'll click on that and we'll check whether the path equals movies and then we'll do the same for the about page again with side.get we'll get the navigation element we'll search for an anchor tag inside of it which contains a text about we'll click on it and we'll check whether the path name of the location is equal to slash about now remember these tests are going to fail because we haven't actually implemented the navigation yet the header component exists but isn't rendered yet in the test runner we see that navigation spec and if i click on it we can see that it starts up but we'll see it fill pretty soon we see the get for the nav element fails both on the about page and the movies page now we have the header component which will render that but we're not rendering that and in sveltkit if you want to render something on every page the typical way to do it is to create an underscore underscore layout.felt file a template and then in there render whatever you want on all the pages so let's go and do that in the underscore underscore layout.felt component we'll first import bootstrap so we've got the global styles available then we'll import the header component from the library folder and then we'll render that header component inside of a container and we'll add a slot component so we can render all the actual content and now if we go to the browser we can see the header here so we've got home we've got about and we've got movies as well which doesn't exist yet so that still renders a 404 error but we'll fix that later let's run our tests and now we can see that all our tests pass even the movie's page test passes even though the movie's page doesn't exist yet but we can see here that we can find the nav element we can find the anchor tag with the text movies we can click on it and with the red dot you can see where the click occurred you can actually control that if you want to and then we can see that we retrieve the path from the location and that it matches slash movies so even though it's a 404 it still renders on that path and that test passes perfectly fine and in the navigate to the about page again we can see we've in the nav element we find the anchor tag for about and then that renders and the path name with the actual page being rendered is there so we can see exactly here what happened on each step now it's nice that our tests run but we really wanted navigation to the movies to fill so let's add an additional test there that we actually know that we're rendering the movies page we'll add a check using citadel title whether the title for the page is equal to movies and we'll do the same for the about page where the title should be about and at the same time we'll check whether there is an h2 header there with my name where is the buyer that that exists now if i check the test they automatically rerun because the test specification was changed and we can see that the test for the movies page now fails but the navigation to about and the details there pass perfectly fine but here we can see that the title was an empty string where we expected it to be movies let's go and create a movie's page so this test actually passes in a typical test driven development fashion we do the minimum required we create a movies folder with an index.feld component and we set the title in the headers to movies because that's the only thing required for that test to pass and if i rerun these tests they pass perfectly fine no 404 error anymore so we can see an empty page here we can see the home page it's an empty page but the header is there great now having an empty header there is okay but we really wanted to see cards of movies there so let's go and add a few movies in there again first we'll write the test we'll test whether there is an h5 element looking for the shawshank redemption and that that exists well right now the page is empty so that test is going to fail again and as i expected we can't find the shawshank redemption in an h5 and the test fails so with the failing test let's go and implement that functionality inside the movies page we'll import that movie card component and we'll create a prop movies which we're not going to set externally yet but we're gonna default it to a couple of movies the shawshank redemption and we'll add pulp function to it as well both with a small overview and an image having a movie's prop like that is nice but it still needs to be used so let's create some markup to do that we'll create a main element put a header in there create a card group and then loop over the movies and render that movie card for each movie in there so now if i go to the browser i can see that the movies page renders two movies and if i rerun the test we can see that our test passes as well now if we go to the movies page the url the title is there and we can also find the header we're looking for the shawshank redemption sweet but we don't want to hardcode these movies we really want to get those from some api and we're gonna get this movie information from the moviedb a nice surface on the internet which has all the information about movies you'd ever want now the movie db requires the use of an api key so here in this mf file i added a registry for the vite api key i've actually got the real key in the mv.local file but if you want to use this go to the movie db register there create your own v3 api key and paste it in here and you can run the same code but of course an api key like that needs to be kept private so i don't want to use that from the browser i want to create a server site api which uses that key and provides only the required information to the browser doing it in a tdd style again will first write the test and then we'll do the implementation so i'll create a new specification moviesapi.spec.js will describe that we're doing the movies.json api which doesn't exist yet and in there we're going to do cite.request to do an ajax request to the server we'll get the body from that and then we'll check whether that contains the shape we want so there should be movies in there there should be 20 in there and we'll check the first movie whether it has a property id and that's type number and whether it has a property of title and whether that's of type string i'm not going to do the other properties there i would typically include all the ones i care about but that's enough so now i want to run this test and of course as we don't have the implementation yet it's going to fill so let's add the implementation we'll create an index.json.js file which runs on the server we'll import that api key there we'll export the get function because we're only going to fetch data and in there i'm going to fetch the data from the moviedb i'll get the top rated movies pass in that api key tell them i want the english version get the data from there and i'm actually going to return that so that's the server side endpoint complete so now our test should pass rerun the test and we can see it went to the movies.json api endpoint it found an array with 20 elements in there it grabbed the first element and it checked whether it has an id property which it had which was of type number and the same with the title which was of type string so we can see that our test pass here now we want our movies page to actually start using this api instead of the hard-coded list of movies we were previously using we'll add another script to the movies page in this case it's the context module we'll export a load function so this will run on the client if we're doing client side navigation or on the server if we're rendering a page directly from the server we'll go to that movie's json api endpoint get the data and return that as the movie's property so we'll inject that into the running component and now if i load the application in the browser we can see the movies page rendering a much bigger list of movies and we can still navigate between them nice the source shank redemption is still here so our end-to-end cypress test is still going to pass sweet now there is one problem with this end-to-end test i'm really dependent on external data during my test i don't control the movie db i don't know what is going to be returned and this list of top rated movies is gonna change over time i'm pretty sure the shawshank redemption is gonna be on page one it has been for a long time but eventually it will be pushed down more popular films will show up and my test will all of a sudden fail when this is pushed to page two and that's not exactly what we want so let's create another specification where we fake the response from the api request the movies.json and don't really go to the movie db but we use a fixed known set of data create the third test the movie.spec.js so it tests the movies page and just like before and before each we're going to visit the home page but then we're going to use side.intercept to intercept a request to the movies.json file you can do several things with it we're giving it an alias here so we can actually use it in the test but i'm also specifying fixture here which means that it should respond with the content of a predetermined json file so this test as a result is gonna run faster but it also gives us more control over the output then inside of my test i use psy.weight to wait for that movie's ajax request to have been done and then i get the response from that that results with the promise it gives me the response and the body of that contains all the movies and then instead of hard coding i'm going to use the actual data returned from that fixture file to drive my test so i'm checking whether enough cards in the first movie in the json is checked against the first card the second against the second card etc now in this fixtures folder is where cyprus is gonna look for movies not json and that doesn't exist yet but i have one prepared right here so i'm gonna drag that in and that looks like this there are just four movies in here the shawshank redemption again the godfather with their description their vector of pop and the id just the data needed for the ui and now i can run that specification and we can see that it runs and it tests all the different bits of ui also nice i can run all the tests we can see i've got four different tests which test the complete application and it just takes 2.64 seconds so these tests run pretty fast and are pretty easy to maintain so just for reference some slides with the tests i just created this the last one i just did you'll also find the github action in the source code i'm not going to describe it but this will basically run on github whenever a push to the main branch is done or a pull request is opened to the main branch and it uses a special cyprus action to run really nice and pretty easy if you want a copy of this presentation go to the top link the problemsolver.net presentations you'll find a link to lots of presentations i did there if you want the code take the second link or scan either of the two qr codes which will take you there as well conclusion cyprus is a great tool for end-to-end testing end-to-end testing makes your test much more reliable gives you much more confidence in your application than just relying on unit tests highly recommended write tests that resemble the way your users interact with your application great approach great for tdd test your apis there's a lot more you can do with cyprus so have fun with cyprus and thank you for watching this presentation [Music] [Music] hi everyone i'm kyoje a software engineer and i usually develop a library called commu which allows you to introduce video chats into your web application without any hassles meanwhile i also run the coding bootcamp in tokyo feel free to contact on twitter if interested today i'll give i'll give a talk about how well that sports web components and what it looks like to have it running in production before explaining why we adopted spells and web components i need to share the context we did so we are developing a library called commu it provides web rtc based video chats it was started as an ordinal class library and wraps around really well the complexity webrtc introduces but besides video just also inevitably have to interact with users visually so users need to sort out the mess of the dom and events to avoid it we we wanted to provide the ui helper which which users which users can just load and price it and place it and configure some then them we we are using subverts heavily for uh ui development in contract works and internal tools but to use it in this way meaning for library development but relatively smaller share will be problematic since projects using react or view will not be you will not be able to use the heart of our library luckily subvert supports a web component so we decided to provide these ui parts of the library using web components for those unfamiliar to a web component i'll put a brief summary it is a web standard which allows js to define a kind of elements simply put tag you know i guess you haven't seen the tags called clipboard copy in in html ever they are built with web components this provides a functionality to copy something into your clipboard and which you don't have to care that how it works since it's it's done inside you can try this on github's repository yeah yes actually github is known as a heavy users of the web components web components are called technically custom elements custom elements can provide functionalities largely corresponding to components in swells let's take a look how it can be in place of both components attributes you know as you know in html it they can be used as a props actually when we build us both components into custom elements props with it will be translated to attributes when it comes to think about props there's another important property reactivity unlike source code inspects we cannot put dynamic variable in raw html document there's just a little string digital string which doesn't change called attribute value if you need to change it you need to do it with js but once you can set it through the dom api i mean substituting the value but reactivity which is built into the custom elements takes care of and it keeps it sync all over the inside inside the elements as events also the interesting parts of the subvert components as both components can emit events which will be listed by hundreds passing through corresponding props namely like on column clock click don't also have event mechanism which of course subverts one comes from custom elements can emit some elements and emit dumb events and it works almost the same manner to events emitted from subvert components and lastly smart components have bi-directional data binding which there's no counterpart in custom elements so how do you know when some state in custom elements has been changed we can we can use custom dom events for that similar to that you can listen and events in a dom element namely on click you can listen non-certain even non-standard events emitted by the custom element you can update a variable on the page when a props and it's it's logically bound to the variable has been changed inside the custom elements of course you can do anything other than updating the variable it is actually more than that by far but it will be safer to consider it to it is similar to the bi-directional date binding it's built you can mark your component to compile into those custom elements with just adding a special tag like this and setting your module bundler which is just a one-liner if you using if you're using roll-up custom elements are under the food invocations of custom element registry apis your bundle will also you to write a tag technically again a custom element and it seems to you it's like spells mounts your components in place of the tab they can be working fine even if side by side with react component as long as correctly loaded or even if in project with no front-end library so let's take a look how it's working in production i'd like to show you our commune library as an example of web component sdk and provide a demo like a hands-on to create simple custom elements with belt you can try it as a hands-on in a way we'll hit the pitfall in a current state of its best web component supports with worklands for every one of them which is the actual highlight of this session i'll show a little bit how easy it is to build a video chat with commute community with the its web component sdk this is really this is it before digging into a little into it let's see how it looks like i mean okay let's recording click start oh click start coding it is it this is written in start calling our joint meeting in japanese and click this button and waiting hello how are you how are you yeah uh pretty fine and i'm in bed summit bye bye yeah happy it's working fine and okay turning back to the slide okay what what you have seen is uh video chat uh built built with the commune commune's web component sdk it's just a loading a bundle like this and put the tag you must not be used to in a normal html you can see two parameters past other attributes the form is the api key a completely static string and while the latter defaults sometimes because different users may want to use different room in our example we okay if everyone on the page join the same room but in a more realistic use case users will want to meet specific group of other people you can implement by you can implement this by setting elements room name dynamically like this yeah and if you put an input field for users to type some keyword and retrieve and pass it into the element it allows you allows users to meet each other only those who know the key word what is interesting in the in this way is you can use these components as verbs components as well with a width in other words components so you can develop effectively as in belt while providing an inter interoperable customer elements for library users and yeah let's try building small custom elements as usual we can start by fetching the boilerplate and converting to combining it to t typescript to enable birth web component support add a line to rollupconfig.js to plugin to prevent servers compile options custom elements to true and note that um this nav this enables all over the code base there's no granular control like module wise and all the components must have this special tag this will be the tag name for the custom elements so we'll try implement three major functionality of both components like blobs reactivity and date by data binding okay let's get started by adding a special tag to our apps it has a simple simple grating already but we want something more happier to make it say happy birthday and and that's it this produce is a bundle that defines set custom elements but to see how it's work to see how it's working we need to do a little more work open the main ts which mounts up component to the entire body of the page let's remove it since we don't rely on it anymore so this file will contain just an important state an import statement an index.html in public directory put our custom elements within attributes like this you can use you wherever you like as a this name value and start with npm run dev and open the localhost on port 5000 it will show the name password through the prop it's working yeah another important trait of vert components is reactivity of course a html document is a static so i cannot change the attribute value literally but you know sure i can do it using js so in index.js in index.html pull a button here and when clicked first get your custom elements and change the attributes it will change reactivity it will change reactively event driven feature in web components called lifecycle callbacks in is leveraged under the first subverts automatically translates props into the lines of js exploiting life's life cycle callbacks but we don't have to care of it not so much it's elegantly supported by the belt but final one we want to try is not so elegant because there's no direct counterpart of data binding in dumb world so we need to find other way around to achieve achieve the same objective most intuitive and down friendly strategy will be to use custom events library users who familiar with domed programming won't be surprised by the library says like hey users to get this value on timely mana you need to listen these events doesn't surprise you that sounds very usual in this verse component emitting custom events is relatively easy you can just use create event dispatcher from spot package if you emit name change event like this you can listen it with passing 100 to on column name change props ideally you want this to emit dom custom elements as well which can be listened with other as event listener to or like them but it doesn't to do it you need to use insert method uh inside a component called dispatch event inside the component class and pass it to a custom instance combined you will have to have a helper function like this to make components to emit custom events correctly whenever it is oh for for which weber you used as a whichever as a best component as a custom custom element and let's listen listen these events we can use as event listener as usual one point to note is you have to use when defined method to wait until the custom elements being available otherwise get elements by tag name returns undefined which prevents us to call as event listener on it okay turned in this way let's see how how it works i have written i have i have the complete code for this game and just have uh npm round there and open the browser actually i have already opened this yeah and uh initially it has uh it's saying uh uh happy is saying happy birthday to uh to the one i i said through the uh attributes value and when clicked button inside the web custom elements it changed the value and occurred the event then it showed by this we can show that this a lot uh to show that another person's name and their uh happy birthday is to see them awesome it's very good yeah get celebrated here okay that's cool let's go back to the slide okay it looks easy on high inside but i had to struggle with this and found the workload workarounds actually there's more languages invest web component supports but i could get through this because of the warm and active community of svet i'm relatively read only member of the community but in the future i'd like to contribute at least some and hope things like this session help someone and later this session i look to these pitfalls and workarounds for them and how community helps but for now i'd like to congratulate us because we have those three major functionality in our custom elements let's forget the implementation we hustled and look it from a library user's perspective it looks very similar to ordinary html tags and elementary javascript that's the point when you build a library that involves ui parts it would be nice if you give it a constraint to have it as a custom element so then let's walk through some some of the pitfalls of encounters i've encountered in a way a way we build coming firstly in html most of the attributes are named in kevin case was in a lower alphabet combined with hyphens in contrast the words props are described as a set of a declaration of js variables whose name cannot include headphones inside a naive background for this will be used this dialogue props help to access the props like this in pre this situation but this works only in the case you use the custom elements in html directory it is okay for the end users of the library and end users of the custom elements since they they would use it in that way but it is problematic for developers of the components if you mount it as vert components all props should be undefined at the moment the components has been initialized unintentionally another workload which allows you to do this is to have a rubber class to intercept behavior of this belt secondary and similarly you cannot use an uppercase letter in the name of attributes if a co if the component is mounted as a custom element actually it doesn't fail at the compile time but the value will end up being undefined for instance if when you specify like this this kind this data idtr with uppercase a the value would will be end up being undefined and in this case it will be converted to a lowercase version like your name or no data attr it seems to be browser that converts names to comply the naming naming convention explained above rather than problem of svelte's web component support since camera case is default standard way of naming in javascript naming a flop like your name with uppercase n as a user result undefined in this case changing probe name to contain just a lowercase letter fix and make it work interestingly the attributes name on coral size doesn't matter how many uh uppercase letter it contains because um so this these three d3 variation of attributes name would would work at all but of course very confusing don't do it so far we have worked through how web components developments and spells looks like let's have a little recap finally firstly we learned the web components gives us a way to provide encapsulated components to vanilla js if you are building a library and want to provide a bunch of visual items on web page and then you can leverage web components of course most smart way to do this would be by providing a component in one of the front-end library namely react or view but of course not every project adopts some of one of them and if you provide view components no one from react project cannot adapt once you combine once you combine components into custom elements even vanilla js project can adopt them easily without sacrificing step sacrificing development velocity a lot since you can work on vertical base as well secondly i've shared how we can build custom elements with functional priority to us versus components say props reactivity and data binding surely it's not completely equal from the perspective of the library users because dumb works on fundamentally different paradigms on sweat but can reduce complete complexly enough for some extent it can provide a good abstraction layer to ui library has to have with that what i picked up to show you lastly was some pitfalls and best practices for you when you develop custom elements with with spells it's not complete support indeed but how but there's a there's a warm and great community that help you a lot and in some cases um i had to read through the piece of code from spreads campfire and white it may sound annoying annoying to you but they are not so massive and but concise and insightful it should be great experience for you to improve your understanding on real sense js ecosystem and tool chains share your insights should you find this interesting and try yourself and lastly shamelessly blog i've just released a commute a library you can build a video chat into your web components oh no a video chat into your web app without hassle we provide provided as a typescript sdk and web components sdk as well as mentioned throughout this session we developed the web components web components part with sweat if you are interested in we are open to share the code let's share an insight with development in subverts and the commute has just been available on various no-code platforms like bubble or a webflow if you find it interesting or know someone would like it feel free to refer me to them and thank you for watching this session of this very end follow me on twitter github or dave too i'm out here that's getting you my username is uh at tmzg or in all of them uh in a dev2 uh you can find the code in this slide and more pitfalls happy hacking short happy hacking against that bye [Music] so [Music] [Music] you

Channel: Svelte Society

Views: 739

Keywords:

Id: GuJg3IHA1to

Length: 103min 2sec (6182 seconds)

Published: Sun Dec 19 2021