Deno JS - Intro + Real Life Example

JavaScript Mastery · Beginner ·🌐 Frontend Engineering ·6y ago

Key Takeaways

Deno JS is a new JavaScript runtime that allows JavaScript to be run in places other than just the browser, with built-in TypeScript support and improved security features, and can be used to build a simple to-do app API using the Postman app and Deno's built-in features, including routing, database management, and error handling, with tools such as Deno JS, Node.js, Postman, TypeScript, oak library, and JSON, and concepts such as JavaScript runtime, TypeScript support, Security features, Packag

Full Transcript

what is Vonage a yes why does everyone talk about it and how can you use it to build something useful these are the questions we are going to cover in today's video stay tuned denno Jas was just recently released it is a new JavaScript runtime which means that it allows JavaScript to be run in places other than just the browser if you think about it no js' is also a JavaScript runtime and they seem to have a really similar name node and then oh why is that denill has been built by the same author that build node that's why he called it Dino node but better there are a lot of advantages of using danno one of the biggest advantages is that it has a built in typescript support does that mean that we cannot use javascript will it not at all we can we can use both javascript and typescript also node was kind of out of date in the sense that we couldn't use a lot of es6 plus features like imports exports promises and async await in denno you can do anything you do while writing client-side JavaScript that means that you can use imports and exports promises async await and all the new features another great thing about denno is that it is based around security it is more secure than node if you want to access some files you need to explicitly give it permissions that's not the case in node and the last major difference is how node and then o manage packages with node we use NPM and all packages are stored in our package that JSON would then oh you just take any URL that leaves very file and import it directly no more package the JSON nor the infamous node modules so the question is is then I'm going to replace node the short answer is not yet nano is currently in its early stages it just hit version one and a lot of things then I was trying to achieve are still in progress along with that you could say that one of the main benefits of Dan'l could currently be its main disadvantage then is currently not using NPM and the current JavaScript world revolves around it NPM is most likely going to stay so then I will need to have a better support with NPM packages with that said there is no reason why not you just learned the basics of the no just you know what's happening so in future time if you can see Dano being used you can easily adapt and change your node projects with Dino projects for that exact reason in this video I'll show you how to build a simple to-do app API using Dino before we dive right in there is one thing you're going to need is going to be a postman account you're going to download the postman app and we are going to use postman to make requests so if you are not using it right now it's really really useful tool for all back-end developers because you can just test your requests what you can do is go to download and then download it for your operating system right here like that and the second thing you're going to of course need to have is going to be our friend Dino dinosaur so what you need to do is go under installation here the URL is Dino that land pretty simple it's going to be in the description as well in here you can see how to install it there are many many many different ways on how to install Dino you can just choose one that that suits your operating system once you do that we can go back to Warsaw studio code and you can open an empty folder once that is out of the way we can open our console by going to view and then you can go to terminal great we can finally start with coding the app so the first thing I'm going to do is I'm going to create a readme that MD in there we are just going to have some little notes about our app in here I'll put all different routes which our app is going to have you can see it's a to-do app so we're going to have a get request to slash to dues to get the list of all - dues we are going to have a post route put route and delete route to delete to do again this is not going to have any styling this is back-end app or an API but just to show the to do is we are going to make some routes there and then this is how you're going to run our app every app needs to have an indexed at JS file it's the same as in node you're going to have to have an application of some sorts that is going to be run so in this case we're going to have import and then there we are going to have application and then from something so as you can see in here we are using import from syntax which is es6 Plus imports and exports so where are we going to import this application from well it's going to be from a link as we said in Dino you import all the things strictly from links that's it so if I take a look right now and if I go to that link you'll be able to see that it's going to open the file for us and here we have some stuff coming from from denno or from the application so we're going to use these things to actually initiate our application you can think about this okk as you can see here it's called oak as the same thing as the Express is in node it helps us with routing that's it so if we go back now we know that this is for routing and what we can do is first we need to set up our port so we're going to import our port it's going to be constant from that slash config so this is the file that we are going to create we can save that and let's go create a config dot JS file inside of there we of course have to do export cons and then we're going to have a port which is just going to be five thousand this case now we have this port which is a number of five thousand and we can continue with coding our index is the second thing after the board are going to be our routes so let's import router from that slash router dodged a yes this is also going to be the file that we are going to create so let's do that right now router is and what are we going to have inside of there well we are going to have all of our routes but for that we also need to do another import so import router from and it's the same link as we use the first time it's the oak library or the oak package or module however you want to call it this thing would usually be fetched from node modules and you would just have something like Express in this case it's called oak but we are not getting it from node modules we are getting it from the link as you can see right there so that's where we are getting our router from once we have it we can initiate a new router by typing Const rotor is equal to new router and now we can do something with it we can for example give it a get request so if I do this router that get inside of there we accept the first parameter which is going to be the route just the slash for this one and in there we have a callback function which takes in a response and then an error function which is going to be executed once the user makes a get request to the /url right so what we can do there is we can say response that body and then we can make it equal to let's say to do list API using denell runtime that's it just like that so we are sending that to the browser as response body if a user makes a get request to just slash let's just export default router so we can use it in the index J's while we are making this set up so if we go back to index now we have a router we have our port and what do we need to do next well it's the same thing as a node we are going to do AB that use and inside of there we are going to initiate our router by typing router that routes this is going to enable us to visit those routes afterwards we can say AB that use router that allowed methods and we need to make these checks to allow our than a lap to be able to access those routes as we said dinner is much more secure than node so we need to implicitly allow Dan'l to visit those routes with all the methods available ok now that that is done looking the same thing we do node console log and server is running open and then you can say HTTP / / localhost and then in there we have the port of course we can put the semicolon and that's it so now you can see we are running the server the last thing we need to do is you need to make our app listen for all upcoming requests so we're going to do a wait AB that lesson and then inside of there we are going to have a port which is going to be equal to a constant port that's it now this is crazy this a wait inside of here in global scope of this index.js file it's absolutely crazy you cannot do this in client-side JavaScript you cannot do this in node you need to wrap a wait keyword in async function in demo you don't have to do that that's done for you in the back end of the know but as you can see here we can just use a wait in the global scope so that's one of the cool new features okay and looks like I missed one small but really important thing in there we need to say cons app and then actually initiate that app so a new application which is coming from oak right there at the top you might have been wondering where is this app coming from my bad is coming from here it's an instance of application coming from oak which is coming from denno that's it with that out of the way our index.js file is done and we should be able to run our demo application so let's see if we can do that we can go to read me I'm going to base this in the description but let's write it by hand one time together so it's denno run and as I said it's going to be much more secure than note so we actually have to put a lot of flags there too to be able to give access to denno so we can read our routes so we have to allow net allow read aloud right and then finally after that we can do dot slash and then run our index.js file if I do that as you can see server is running open localhost 5000 if I click that and go to localhost 5000 you can see host sent an invalid response and we cannot get it there's also one small thing we need to change this thing here needs to be HTTP instead of HTTP so I'm just going to remove this s at the end I'm going to save the file close the current window let me do that and then we are going to open it one more time to actually rerun the server so right there we're going to take the last command and just run it you can go to last command by pressing just the arrow up right there and if I do that now we have HTTP localhost 5,000 instead of HTTP it should be HTTP so if I go there now as you can see we get to do list API using the NL runtime which means our server is up and running great now we have to create our routes so just to keep a nice and tidy file structure I'm going to create a new folder called controllers and also inside of there we are going to have a folder called - duze inside there we are going to have four routes select let's create the files for them right now we are going to have a get Dias delete that Jas post Diaz and then put that Jas okay that is forgetting all of them posts for creating one and delete for deleting one and then put for changing the status of want to do great with that now that we've done that we need to have some database in this case our database is going to be pretty simple we're going to create a new folder called data and inside of there we're going to create a - duze that JSON in this case our database is basically a JSON file so what is going to be inside of that JSON file I'm going to paste it for you and also I'm going to leave it in the description so you can just copy and paste it but feel free to add your own to do this if you want to so give me just a moment okay so here are our to do as you can see we an array of three different objects first one has an ID of one title off-log two dogs and it is not completed the second one has an idea of zero title off create a den ojs tutorial and completed our false and the final one has the ID of two title subscribe to javascript mastery and completed the true if this is not completed for you feel free to smash that subscribe button for the YouTube algorithm and stay tuned for more great videos ok without of the way now we have our database we also have files where we're going to create our routes so let's do our first route which is going to be get dot J s inside of there we'll see how we can fetch all the different to dues that we have first of all we're going to have to make a connection to this to do is JSON so we're going to go to config and in there we are going to create a new constant expert Const file path which is basically going to be a string path to the actual database so that's going to be dot slash data / to dues that jasa that's it we're just putting this as a constant because we're going to have to reference this thing a lot of the times so it's easier to just have it as a constant and use it in all different files so if you go inside of there we are of course going to import that file path import file path from and that's coming from dot slash dot dot slash config that is just like that now we have access to the file path which is just going to point to our to-do in here each one of our routes is going to be an asynchronous function so we're going to do exports default async it's going to be unnamed function and as the parameter we are receiving a response so let's wrap that as parameters right there we are receiving a this structured response and then inside of there we can do a try-catch block because we are and then inside of there we can do a try-catch block because we are inside of an asynchronous function great first in the try block we need to try to get our data so I'm going to call the variable data and then inside of there we are going to do something called a weight then we have access to the dental variable it's coming out of the box when you're in a dental applications and it has a method called read file to read file you just need to provide a file path and that's it now we're going to try to console log data so we can see what we got back when our dental read file read our database let's see if we are getting some meaningful data right there if I save this we need to restart our server each time so I'm pressing command C to close the server and then arrow up and enter to just rerun it don't forget to do that okay now we need to connect our get route to our router - a yes in there we are going to do router and then let's just create a dot get route to slash to do is it needs to be in a string and then we are going to call a function get to do this function is going to be coming from our get controllers so what we can do is just at the top we can import gets to dues from that slash controllers / - dues / get so this is where we are getting our function this get to do is right here means that once we make a get request to slash the dues or get to do this function is going to be ran and that's exactly this thing right there so if we save it save the router and one more time ran command C or control C sorry and then arrow up okay this get to do this function needs to be imported from somewhere so we're going to do import get to dues from and it's going to be dot slash controllers / - dues and then finally / get dot j s don't forget this dot j s at the end because it's not going to work otherwise okay so what this means is that we're going to run our get to do this function once we make a get request to slash to deuce and this got to do is is nothing other than just our function we created a moment before so if I now rerun this by just going then I'll run we get some errors okay looks like I have a syntax error which means that I have one parenthesis too much right there and then right there if we do that save it and then rerun it we should be able to see server is running and we can open localhost 5000 once we go here now we can go to slash to do's and we get localhost page can be found which is fully ok we are not trying to render anything right now the only thing we are doing is we are rendering the data so let's see what the data actually is is it our database or files or not we are getting some weird thing right there a lot of numbers this is basically not meaningful to us so what we need to do is we need to parse it and decode the file it's just how we have to do it in in denill and note it cannot read the database all by itself so what you need to do is you need to import just at the top there Const decoder is going to be equal to new text decoder and this is coming directly from denell so you don't have to worry about importing it we just get a variable decoder from new tags decoder now we need to decode our data that we got here so we're going to say cons to do is it's going to be equal to json dot parse and then inside of there we are going to have the coder that decode and then we are going to pass in the data that we created right there now if we can't so log the - duze instead of the data let's see if you're going to get something more meaningful again I'm just going to run ctrl C and then rerun the server go back and visit our localhost 5,000 and of course go to / - do it again nothing is rendered but if we go back you can see we indeed do get a list of our to do great so now let's actually show something to the user we are going to make our response that status to be equal to 200 and we are also going to make our response that body to be equal to status success and also we are going to show some to dues so let's do the deuce these are to do is we just fetched we want to show them in the body we want to render them so if I save this let's quickly add the same thing for for the error but in this case it's going to be 500 which is basically a server error and then we can say failed and just basically do to do is an empty array because we don't have any to do that if I save this again control C and then rerun it and if we go back to the browser refresh now as you can see we indeed do get our JSON database API get request with oak or then ljs this is something you could do in nodejs but now we did it in den ojs it's not that complicated once you get used to the syntax of then oh and all the things that you need to know now that our get request is done let's move on to let's say a post request so we can create new requests to do this we need to do basically the same thing with it in get request we need to first import the file path so let's do that we can even open the post on the side of get so we can see what we were doing so it's going to be really really similar first we import the path and then we create a function for that specific path in this case we are going to have X for default and then a sink right there of course it's going to be a sing function which is going to have a response and in this case we are also going to have a request because we need to get the data from that specific request then we are going to close that function right there and we have our try and catch block just like that for now just for your visibility's sake I'm going to close this get request and we can keep on working only on this post request just at the top of our try block we are also going to do cons decoder which is going to be equal new text that decoder we need that to decipher the data so text decoder and we are going to call that as a function I'm going to replicate that because in this case we have a response but we also have a request so once we decode it we are also going to need our encoder right there encoder from text encoder okay now that we have that we can focus on actually making the request so right there what we are going to do is instead of actually getting the data we need to receive the data through our request now if I rerun this application by running the same command one more time if we go to localhost 5,000 you can see we do get the data if I do / - duze we also get a list of all the - dues but here's the thing whenever you visit a page in the browser browser does the get request so browser can only do get requests that's it you cannot do post you can do delete in here we just do a get request to slash local hole in here we just do localhost 5,000 / - dues and that's a get request so how can we test or how can we send the data to the API making a post request or delete request for example that's where the postman comes in this is the postman open if you installed it you're going to see something like this what's the story Morning Glory they say and what we want to do right there is click on this plus sign and in there we get a specific and get request so in there we can do just for testing purposes the same thing with it in our browser so localhost 5000 and then - duze if we send this we should get our response right there and as you can see we do but this is nothing special right we can also get the data in the browser let's create a new request so in there this is going to be a post request and it's going to go to the same identical path localhost 5,000 / - duze but keep in mind this thing is a to-do request so if we go back to our app in there we have to go to the router as you can see right there and let's add a post route so post as we said is going to be the same route slash the dudes and in there we're going to add a post to do function just like that of course we need to import our function so let's do import post to do from that slash controllers / to dues and then we have post dot J s just like that now if we save that we shouldn't run into any issues and we have the post so how can we test the data which we receive in the post request here in the try block let's try to console log this request to see whether we are getting any meaningful data so if I do console that log and then put the request in there let's save it let's run it and right now if I go back to postman let's try to make that specific post request right there so how do you actually send the data to your API in here in the postman you can go to body and then you put raw so we want to say send raw data and it's going to be in form of JSON one more time you go to body raw and then Jason so Jason is basically JavaScript object notation it's it's really really similar to how JavaScript objects look and behave so let's try following the structure of our to do it is one object that has a title property in JSON we need to wrap our keys in quotation marks and then in there let's put the title for example test just test and then we are also going to have is completed or I think we just had completed and that they are going to be set to false at the beginning just like that so now if I click send we are going to send this data let's do it ok we are not getting anything let's go back to our app to see if something happened okay we need to get this request but it's just a large request there's a lot of stuff in it so what we actually need to do is we need to say request that body and then we run it as a function and also we need to await that so I'm going to add in a weight keyword before they request that body so let's try it one more time ctrl C to leave the server running and then arrow up to run it again go back to postman and now I'm going to send another request okay if we go back now we can see we get some data we get type Jason and we get the value of title test and completed false that's amazing so now using some destructuring magic we can get just the title and completed we can take anything we want from this little object so what we can do is let's store that in a variable Const in here we are going to get a destructured value as you can see here that we have one big object we want to take just the value from it so right there I'm going to take the value and then we can do one more destructuring to take the actual title so we are only concerned about title right now we are going to set all to do is to be equal to false at the beginning so I shouldn't even have so I shouldn't even have so I shouldn't have even sent this completely property that's going to be added or set to false at the beginning for us in this request so now let's try just console logging the title to see whether it's passing true properly if I do this again we close it and reopen it let's test it one more time and we can even delete this completed property send and as you can see we get our title now we are going to be able to add it to our application first we have to fetch our two dews and the process to do that is going to be the same as in get so we can basically copy this thing right there if you remember first we are fetching the data we are reading from the file and then we are parsing the data so we can get actual to Do's so what are we going to do once we get the actual list of the dews now what we have to do is we can create our new to do which is going to be an object of course it's going to have an ID which is going to be to do that length plus just like that and it's also going to have a title which is going to be equal to title the title of course which is coming from here and it's also going to have a property completed which is going to be set to false as we said at the beginning great with JavaScript objects if the key and the value have the same name you can basically just omit the ladder and just have the title right there so now we have our commune to do and what are we going to do with it well we're just going to do two dues that push new to do we are just adding it to our let's say database that's not gonna be enough now we have to actually write it or change the actual database file with new added to dues so what we're going to do is a wait then oh that right file so this is how we can write in two different files with the know we need to get the file path in there so file path and the second thing is we need to encode that thing so we're going to call our encoder that encode Jason that stringify and then we have the - duze it's a bit complicated syntax but it's just how we work with with different files so we need to first get the file we need to read from the file and then we needed to decode it but in this case we had to write into the file so we had to encode the text right there with that out of the way we are going to set the response that status to be equal to 2 or 1 which means created and also response that body to be equal to let's say status of success and also new to do which is just going to show the new to do which we just created and just to write some good error handling let's write response that status to be equal to 5 or 2 which is a server error and then we have response that body which is going to be equal to status failed to create a new to do and we are going to pass in the air ok just like that if we save that let's rerun it so close this we run it go back to our postman and let's see what we are going to get so let's change it to for example walk the dogs just like that if I send it we get a status of success and we get to see the new to do we just created amazing now if we go into browser and if we try it refreshing the page we are going to make a new get request to our localhost 5,000 slash to deuce as you can see in here we indeed do get har to do we have another one called walk the dogs but this one with idea for is our current one which you just created amazing so now let's go back and let's say that we don't want to have both of these walk the dogs and walk the dogs we want to create an end point for deleting two deuce so how do we do that to delete two dudes is going to be a pretty similar thing to what we have so far we can create a new request right there we are going to make it a police request again we have localhost 5,000 slash to dues but this time we are also going to have the ID of to do we want to delete now we have to figure out a way how to make our delete request to this route and also how to get this ID right we can go back to our code and implement that route so if we go to the router right there we are going to create a dot delete route which is also going to be slash the dues but this time it's going to be slash this means that it is a dynamic parameter it's coming to our request okay and of course we have delete to do which we didn't create yet but we're going to create it right now let's also import it so the lead to do and that's going to be coming from delete okay we can save that and now we can move to the delete route in here it's also going to be a really really similar thing to what we had in the post so let's open them side by side okay first things first we are going to open the import of the file path and then it's also going to be a function so let's do that export default async in here we're going to have a response but in this case we are not going to have a request as you can see here we are not concerned with the data coming in what we have in here are going to be params Graham's coming to our request and with that we are going to open our function block just like that I'm going to copy the decoder and the encoder here because we're going to need it as well and then we can open a try and catch block and we are also going to have to find a way to fetch the data or to do this from our database and then decode them so that's where the standard so far I'm just going to copy right there now we have the two Do's and we have to find a way on how to delete it to do from the actual two deuce to do that we are going to create a new array called updated to do this which is going to be equal to two deuce that filter and in there of course we have to do and now we have to take all two dues but only the to do that has the same ID we need to take it out we need to filter it out so how do we do that with filter we first get our to do so let's do to do that ID and then also we need to compare that to the ID coming from params so that's going to be not equal to params that ID so one more time on what's happening here is we are going to go through all the dues and we are going to filter out all the ones that have the ID which is going to be the same to the PI ramps at ID if you remember correctly that's this one coming here okay just one small thing that we need to do this is going to be coming as a string so if we want to compare it with ripple equal we need to cast it to a number okay great now we have those updated to dues and we basically need to again put them to our database that's the same thing we had in the post remember but this time we were adding new to dues this time we're just going to set the updated to dues to the actual posts so if I if I close this in here we had to do this but this time we're just going to have updated to dues which I'm going to push to our right file introduce that JSON just like that okay just to provide user which is deleting the to do with some useful information we're going to set a response that status to 200 and we are also going to set a response that body to be equal to a status of success and it's also going to have data which are going to be updated to do this just to show the updated to do is after the deletion is complete great again as every time we are also going to create some error handling so response that status is going to be 502 and then responds that body is going to be equal to an object for the status of failed to delete and in there we are going to pass in the air just like that okay now that should be done we can do ctrl C to close it and then rerun it again with no GS we had something called node man which would basically restart the server every time we made a change I'm sure there is something like that and I know so you don't have to just rerun it every time manually okay so if we check it out right now we can go back to the actual postman and then in here let's try to delete the to do with the ID of for which we just created in the post as you can see right here okay I'm sending the request and we get success and in here we see the data is actual list of three to do without the fourth one which we just created amazing that works flawlessly the last thing that we need to do is create a put request which requests manages updating so we want to update our to-do to either change the title or we want to change the state of completed for example to true or to false so in here let's see what route are we going to have the route is going to be equal to the one in the delete so we need to specify which one do we want to target so I'm going to copy this and put it right there but in this case as you can see it is a put request now we can go back to our app and we can create our route as we always do in here we are going to create our route as we always - it's going to be that but the route is going to be the same as with the elite so it's going to be slash to dues and then slash call on ID because it's a dynamic parameter and that's going to be called put to do just like that we can end this with a semicolon right there because that's our last route and in here we can import it so import what to do from and this is going to be but the butch route is going to be the combination of our post route and delete route from the post we are going to have to take the request and from delete we're going to have to take params we need params because we need to specify which one we want to update and we need the request because we're going to have to change we're going to have to pass the data what we want to change with that specific to do so let's go right there of course we need to do import file path from dot slash dot slash and there we have config dot J s okay it's going to be the same thing export default and then we have an async function in this case as we said we are going to have request response and params we need to take the encoder and decoder so cons decoder is going to be equal to new text decoder and then that's going to be a function and then we need to take encoder so encoder from encoder right there then we have a try-catch block in here we need to do almost the same thing with it right there while we are fetching the data from the actual request that body so I'm going to copy this line from post request and paste it right there so we are trying to fetch the title but in this case we also need to fetch the current complete status from the request that body that's going to be coming from here once we go to the put route in the body raw JSON and in here if you remember the post route we were sending something right there so let's copy that and with a title right now we can change the title so let's do test one and then we can also change the completed state so instead of completed to false we can set it to true of course this is currently not going to work this is just to show you that we need to manage the title and complete it so now we can go back we have the title and complete here oops I have the complete it needs to be completed and now we have to as always fetch the deduce from our database so in the get we have a nice way of doing that I'm just going to copy it paste it right there we get the data we read the file and then we have to decode it to get the actual to do so now the question is what do we do with those two do we have to update only the to do that changed so to do that we're going to create Const updated to do's and we are going to map over all the to deuce we have to find only do to do that matches the ID which we are getting from params to do that we are going to create an if statement check that to do that ID and match it against the params that ID if that's true then we know that we fetch are correct to do which we need to update if you remember this needs to be wrapped in a number because it's currently comparing it to a string of Rams ID so if we are in there if we are working with a correct to do we want to return the change to do so first of all we're going to spread that specific to do and then we are going to set the title to be equal to the title with the structure at the top and the completed state to be equal to the completed state we had above if you remember correctly if we have the same key and the value we can just omit the ladder so we can just have this and we can have just this with this we are changing our list of ability to do this by only updating the to with which is specified with params we are sending in okay now finally we can return that to do and if we are not working with it to do that use chose everyone had just returned to do because in here we are currently mapping over all to do is to set the updated ones we are only changing this one and for all the other ones in the list we just return them how they were okay now if you remember correctly we have to do the same thing as we did in the post we have to actually write that database so I'm going to take this line and then paste it right there in this case we are not going to have to do this here we have to change them with updated to dues right there okay and now let's do response that status 204 means change and response that body status of success and then we're going to set the data to be equal to updated to do so the user can see what he did again we are good guys so we're going to do some proper error handling response that status is going to be equal to 5 or 2 and response that body is going to be equal to the status of failed to update and that's going to be the error right there with that out of the way our last route should be done it should work we now should be able to get to deuce to add to do delete a to do and then to change it to do so let's now do ctrl C to get out of this and then rerun the server and delete all the dues just so we can see whether everything is working properly so I'm going to delete the to do of ID of 0 and then also delete it to the of ID of 2 and we should be left with empty data how can we check whether that's true we can go back to get request make it and you can see we have known to do this we can also check in the browser so if I now refresh you can see we have no two dues empty database let's say that you get this when you register an account now you're the user you come in and you want to create some produced so let's do that of course this looks really really boring right now but you could connect a nice-looking front-end which react for example to create these to do so right now in here let's go to a post route and let's create a to do with a title off walk the dogs and the completed state is going to be equal to false but if you remember correctly we said that we don't even have to have the completed because by default it is at the fault so let's do this one for the first ok we get failed to create a new to do and that's because I miss I miss typed this in JavaScript it is okay to have trailing commas in the objects but in JSON you cannot have a comma right there but you can see it's great that we created air handling because now we know that something doesn't work so now if I resent it we can see new to do was created let's do a few more right there let's do learn the no js' okay created we can go back to the get route to see whether everything is working properly and we do get two of those so now let's try adding just one more so we can practice something let's do for example test ok created now let's try to delete one so let's delete the test one I'm going to go to the dues and in here the only thing we have to change is the actual ID so if I do this okay we get back the current state and if we go back to get request you can see the third one is deleted amazing the last thing we can test out is to change the completed state of learned energy is too true so right there let's create a butch request to the ID of two right there and what we want to do is we want to send some data we want to send the title the title is learn then ojs if I'm not mistaken learn then ojs and we also want to create the completed state we want to change it to true so just like that if I do this and if I click send you can see we get success we you can in and now you can see the changed they again just to check it to be sure we can go back to do get and you can see this change to true again this current that looks really really boring but what you could do is you could connect it to a front end of some sort like react or basic HTML CSS and JavaScript right there you could create a nice-looking design what you do is you can cross over the things you've done or you can make it completely to the screen and not completely to do is read there's really a lot of possibilities by connecting the back end to the front end then ojs offers a lot of great possibilities it's more secure it has Type three support and it doesn't have to use node modules as you can see we don't have them there so is it going to replace nodejs the answer is not yet but it's on a great path to do so or just bring some improvements to our current ecosystem that's it if you found this video useful feel free to smash that subscribe button for YouTube's algorithm and see you in the next video [Music]

Original Description

Deno JS was recently released. It is a new JavaScript runtime, which means that it allows JavaScript to be run in places other than just the browser. If you think about it, Node JS is also a JavaScript runtime and they seem to have a really similar name, Node, and Deno, why is that? Deno JS has been built by the same author that built Node. That's why he called it Deno, Node, but better. ⭐ Join JS Mastery Pro: https://jsmastery.com 💎 Ultimate Next.js Course: https://jsmastery.com/course/the-ultimate-next-js-15-course 🧪 Ultimate Testing Course: https://jsmastery.com/course/the-complete-next-js-testing-course 📗 GSAP Course: https://jsmastery.com/course/gsap-animations-course 📕 Three.js 3D Course: https://jsmastery.com/course/vanilla-three-js-course 📙 JavaScript Course: https://jsmastery.com/course/complete-path-to-javascript-mastery 🚀 Launch Your SaaS Course: https://jsmastery.com/course/build-launch-your-saas-in-under-7-days 📚 Materials/References: Deno: https://deno.land/ Run command: deno run --allow-net --allow-read --allow-write ./index.js Database: [{"id":1,"title":"Walk the Dogs","completed":false},{"id":0,"title":"Create a Deno JS Tutorial","completed":false}{"id":2,"title":"Subscribe to JavaScript Mastery","completed":true}] 💻 Discord - https://discord.gg/n6EdbFJ 🐦 Twitter - https://twitter.com/jsmasterypro 🖼️ Instagram - https://instagram.com/javascriptmastery 💼 Business Inquiries: contact@jsmastery.pro
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from JavaScript Mastery · JavaScript Mastery · 22 of 60

1 Learn Async/Await in This Real World Project
Learn Async/Await in This Real World Project
JavaScript Mastery
2 JavaScript Exercise | Learn JavaScript with Exercism | #0 Setup
JavaScript Exercise | Learn JavaScript with Exercism | #0 Setup
JavaScript Mastery
3 JavaScript ES6 for Beginners
JavaScript ES6 for Beginners
JavaScript Mastery
4 ES7 and ES8 New Features
ES7 and ES8 New Features
JavaScript Mastery
5 Learn JSON in a Real World React App
Learn JSON in a Real World React App
JavaScript Mastery
6 How to Create PDFs With Node JS and React
How to Create PDFs With Node JS and React
JavaScript Mastery
7 Must Have Visual Studio Code Extensions
Must Have Visual Studio Code Extensions
JavaScript Mastery
8 Top 10 JavaScript Array Methods
Top 10 JavaScript Array Methods
JavaScript Mastery
9 JavaScript Map and Set Explained
JavaScript Map and Set Explained
JavaScript Mastery
10 Git Commands Tutorial for Beginners
Git Commands Tutorial for Beginners
JavaScript Mastery
11 Build and Deploy a YouTube Clone Application Using React
Build and Deploy a YouTube Clone Application Using React
JavaScript Mastery
12 React Hooks - Most Used Features
React Hooks - Most Used Features
JavaScript Mastery
13 JavaScript Best Practices and Coding Conventions - Write Clean Code
JavaScript Best Practices and Coding Conventions - Write Clean Code
JavaScript Mastery
14 Build and Deploy a Realtime Chat Application - Socket.io, Node.js, and React.js
Build and Deploy a Realtime Chat Application - Socket.io, Node.js, and React.js
JavaScript Mastery
15 How to Create and Deploy a Portfolio Site in less than 30 Minutes
How to Create and Deploy a Portfolio Site in less than 30 Minutes
JavaScript Mastery
16 SEO for Developers | 2020 SEO Tutorial
SEO for Developers | 2020 SEO Tutorial
JavaScript Mastery
17 Web Development Roadmap 2020 [Learning Path] - Start Coding at Home!
Web Development Roadmap 2020 [Learning Path] - Start Coding at Home!
JavaScript Mastery
18 Random Quote Generator - React Fetch API Data | Build and Deploy a Real Advice App Project
Random Quote Generator - React Fetch API Data | Build and Deploy a Real Advice App Project
JavaScript Mastery
19 Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)
Build a COVID-19 Tracker Application - React JS Project (Hooks, Material UI, Charts js)
JavaScript Mastery
20 JavaScript ES2020 - The Most Requested Feature Explained in 10 Minutes
JavaScript ES2020 - The Most Requested Feature Explained in 10 Minutes
JavaScript Mastery
21 Modern React Event Handling Using Hooks
Modern React Event Handling Using Hooks
JavaScript Mastery
Deno JS - Intro +  Real Life Example
Deno JS - Intro + Real Life Example
JavaScript Mastery
23 Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web
Build and Deploy a React PWA - Why Progressive Web Apps are the Future of the Web
JavaScript Mastery
24 Build a REST API with Node JS and Express | CRUD API Tutorial
Build a REST API with Node JS and Express | CRUD API Tutorial
JavaScript Mastery
25 Build and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScript
Build and Deploy an ARTIFICIAL INTELLIGENCE React App | Alan AI, JavaScript
JavaScript Mastery
26 Master Async JavaScript using Async/Await | Quokka JS
Master Async JavaScript using Async/Await | Quokka JS
JavaScript Mastery
27 Spaced Repetition in Programming | mem.dev
Spaced Repetition in Programming | mem.dev
JavaScript Mastery
28 Stop Copy & Pasting Code | mem.dev
Stop Copy & Pasting Code | mem.dev
JavaScript Mastery
29 GitHub Profile README | Create an Amazing Profile Readme | Setup + Templates
GitHub Profile README | Create an Amazing Profile Readme | Setup + Templates
JavaScript Mastery
30 NEW GitHub CLI 1.0 is here! | GitHub CLI Tutorial - Demo & Commands
NEW GitHub CLI 1.0 is here! | GitHub CLI Tutorial - Demo & Commands
JavaScript Mastery
31 React Custom Hooks | Learn Custom Hooks & Build a Project
React Custom Hooks | Learn Custom Hooks & Build a Project
JavaScript Mastery
32 Learn how to deploy an NPM Package
Learn how to deploy an NPM Package
JavaScript Mastery
33 JavaScript Algorithms for Beginners
JavaScript Algorithms for Beginners
JavaScript Mastery
34 Level UP your GitHub Game - Get Hired Quickly
Level UP your GitHub Game - Get Hired Quickly
JavaScript Mastery
35 The Best Way to Host & Deploy a React Application
The Best Way to Host & Deploy a React Application
JavaScript Mastery
36 Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]
Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 1/2]
JavaScript Mastery
37 Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]
Full Stack MERN Project - Build and Deploy an App | React + Redux, Node, Express, MongoDB [Part 2/2]
JavaScript Mastery
38 ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe
ECommerce Web Shop - Build & Deploy an Amazing App | React.js, Commerce.js, Stripe
JavaScript Mastery
39 JavaScript Crash Course 2021 - Master JavaScript in One Video!
JavaScript Crash Course 2021 - Master JavaScript in One Video!
JavaScript Mastery
40 MERN Auth - Login with Email (JWT) + Google OAuth Authentication | React, Node, Express, MongoDB
MERN Auth - Login with Email (JWT) + Google OAuth Authentication | React, Node, Express, MongoDB
JavaScript Mastery
41 Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)
Chat Application using React JS - Build and Deploy a Chat App in 1 Hour (Microsoft Teams)
JavaScript Mastery
42 MUST USE Websites & Tools for Web Developers
MUST USE Websites & Tools for Web Developers
JavaScript Mastery
43 Learn Material UI in One Hour - React Material UI Project Tutorial [2022]
Learn Material UI in One Hour - React Material UI Project Tutorial [2022]
JavaScript Mastery
44 Shopify ECommerce Store with React & Next JS | BuilderIO
Shopify ECommerce Store with React & Next JS | BuilderIO
JavaScript Mastery
45 React Video Chat App | WebRTC Video Chat Zoom Clone | Tabnine
React Video Chat App | WebRTC Video Chat Zoom Clone | Tabnine
JavaScript Mastery
46 TypeScript Crash Course 2021
TypeScript Crash Course 2021
JavaScript Mastery
47 Build and Deploy a Premium Next JS React Website | Landing Page, Business Website, Portfolio
Build and Deploy a Premium Next JS React Website | Landing Page, Business Website, Portfolio
JavaScript Mastery
48 Full Stack MERN Project - Pagination & Search | React + Redux, Node, Express, MongoDB
Full Stack MERN Project - Pagination & Search | React + Redux, Node, Express, MongoDB
JavaScript Mastery
49 Build a BETTER Facebook Messenger Chat Application | React JS, Firebase, Chat Engine
Build a BETTER Facebook Messenger Chat Application | React JS, Firebase, Chat Engine
JavaScript Mastery
50 Build and Deploy THE PERFECT Portfolio Website | Create a Portfolio from Scratch
Build and Deploy THE PERFECT Portfolio Website | Create a Portfolio from Scratch
JavaScript Mastery
51 Full Stack MERN Project - Implement MERN Comments | React + Redux, Node, Express, MongoDB
Full Stack MERN Project - Implement MERN Comments | React + Redux, Node, Express, MongoDB
JavaScript Mastery
52 Turn an API into a Startup?! Build & Sell an API with JavaScript
Turn an API into a Startup?! Build & Sell an API with JavaScript
JavaScript Mastery
53 Exclusive First Look at GitHub Copilot - All you need to know
Exclusive First Look at GitHub Copilot - All you need to know
JavaScript Mastery
54 Build and Deploy a Google Maps Travel Companion Application | React.js
Build and Deploy a Google Maps Travel Companion Application | React.js
JavaScript Mastery
55 Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
Build and Deploy a Full Stack Realtime Chat Messaging App with Authentication & SMS Notifications
JavaScript Mastery
56 Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video
Build and Deploy a React Cryptocurrency App and Master Redux Toolkit in One Video
JavaScript Mastery
57 Build and Deploy a Group Video Chat Application with Messaging, Polls & More
Build and Deploy a Group Video Chat Application with Messaging, Polls & More
JavaScript Mastery
58 Build and Deploy Google Search 2.0 with React & Tailwind CSS (simple!)
Build and Deploy Google Search 2.0 with React & Tailwind CSS (simple!)
JavaScript Mastery
59 Top 10 Web Development Chrome Extensions You Simply Need to Try!
Top 10 Web Development Chrome Extensions You Simply Need to Try!
JavaScript Mastery
60 Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS
Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS
JavaScript Mastery

Deno JS is a new JavaScript runtime that allows JavaScript to be run in places other than just the browser, with built-in TypeScript support and improved security features, and can be used to build a simple to-do app API using the Postman app and Deno's built-in features.

Key Takeaways
  1. Create a new folder called controllers and data
  2. Create a new JSON file in the data folder
  3. Create routes for get, post, put, delete using Deno JS and oak library
  4. Use Deno JS to read the JSON file as a database
  5. Create a new route to fetch all the to-do items from the database using Deno JS and oak library
  6. Use the router to connect the get route to the get controller function
  7. Restart the server each time to see the changes
  8. Use Postman to test the post request and send data to the API
  9. Use a try-catch block to handle errors in the post request
  10. Use console.log to print the request data in the try block
💡 Deno JS is a new JavaScript runtime that allows JavaScript to be run in places other than just the browser, with built-in TypeScript support and improved security features.

Related AI Lessons

Up next
The masks we wear | Zora Krstić | TEDxLuxembourgCity
TEDx Talks
Watch →