 As you guys already know, it's a part of Piranha Beans to the main conference, which is on 28th and 25th. And we also have, even then for most of the conferences, it's a hack day, which is a conversation between DS2 and DroidCon. I don't know if you guys have heard of that. So it's a hack day, which starts from 11, 10, 8 in the night. So that's also where the 3D lies. So therefore, it's kind of what I forgot to mention. That's recording. Good morning everyone. I am Pankaj Bagheria. I work at Sumeru Software Solutions as a lead. So I work basically with open source technologies like Rails, JavaScript, Node.js. I started my career with PHP, moved to .NET. Then I worked for five years with Rails. And now for last one year, I am working with JavaScript. Am I audible? So I'd like to know more about you guys, like how many of us are fully developing applications in JavaScript from end to end? Full stack applications. Node.js client side. Can I have some hands up? Okay. So you guys are aware about Express.js. And how many of us are not aware about Node? Like we are, we'll be using Node for the first time. We have just read something about it. So we'll start with some basics of JavaScript. It will be a complete hands-on session. I'll be showing some code. You will be writing that code. We have few volunteers with us. Robin, Monesh, Ashutosh and Divakar at the end. So they'll be helping you out with the code if you get stuck at any point. So please, please, please be free to call them. So we'll start with some basics of JavaScript. So let's open the Firebuck console. So functions, I'll give you some information about functions in JavaScript. So functions in JavaScript are first-class citizens as in they can be assigned to variables and they can be passed to functions as arguments. So let us see some examples of that. So the very defined function in JavaScript is some problem with the console. Okay. I'll use Chrome. Okay, okay. So let's say we define a function x. So this is the way we call the function. So x, x is a variable which stores the function. Now this x can be passed to another function as an argument. So let's say we create another function y, some function. So y is a function which accepts function as an argument. So y can be some function like in practice it can be something like logger, a logger which is logging some data. So we call the function y with x. So, hi is printed. So now there is a difference in this and this syntax. See when you pass x to y then it is passing the function. But when you do this it is passing the return value of the function. Okay. So we have seen, okay. Now we'll see something called anonymous function. So instead of passing x to y we can define a function here itself. So this is called an anonymous function. Okay. So in JavaScript we'll like in the code we'll be writing, we'll be using a lot of anonymous function. So these are used when like you don't need to use this function anymore. Like only this place you are going to use it. You're not going to reuse it any other place. Then you don't need to define it separately. So a lot of event handlers are passed like this. So if this event takes place then call this function. So we'll see more about it later. So we'll move to objects now. So objects in JavaScript are just key value pairs. So creating a new object is very simple. Let's say we create a user object. So you can add properties to the object. Or if you want to create an object with some properties. So now you can access this properties where either this way like directly dot syntax or you can pass a string. So we created an object directly. Now we create a class, sorry, we create a function to create this object. So it's a simple function user creator. It returns an object. So now user create is a function which is returning an object, which is user. So u equal to now u. So user creating is acting similar to a class. It is playing the role of a class. So we could have defined the function with some parameters. So we have created a function which is playing the role of a class. So in JavaScript classes are nothing but functions. So an object can be extended anytime. Like you suppose you want to add a method to a property to this thing, to this object. So you can do u dot gender equal to male. So this property has been added. So extending objects in JavaScript is very simple. You just need to use this syntax, the dots operator and assign that value. So that property gets added. Now this property could also be a function. So now u dot age is undefined currently. I have not defined the age. So let's define the age. u dot age equal to 28. So it's senior returns fall. If we keep s70, senior return 2. So object is a collection of properties, which can be either of some values or functions. So we have seen how to extend an object, how to create an object. Public and private properties of an object. So we'll go back to the function user creator. So the properties which are returned here, the name property, will all be public properties. So if we define any variables inside this function, which we do not return, those will be private properties. You'll understand this private public concept more with the examples when we start building the express framework. So any doubts till now? Anybody? All okay? So today, in this workshop, what we are going to do? So today we'll cover the basics of JavaScript, which we have done to some extent. Then we'll see why, what are the advantages of using Node.js and why is it so popular today? Then we will go on to building our own express.js framework. So people who don't know that they have never used express.js, they will also be able to do it because it will be just building the basic features. It is a good way to learn express.js. Generally, when people learn express.js, they do not understand the internals. So here you'll exactly understand what is happening inside. So when you start using it, you'll be in a good place to hack it and extend it. So can I have some answers from the audience? Like what do you know about Node? Why is it so popular? Anybody? Non-blocking IO. Non-blocking IO, Google V8 engine, anything else? So Node is JavaScript on the server side. So till today, like when we started programming, most of us, we thought of JavaScript as a client-side programming language. It was just used, in the beginning it was just used for some form validations. Then we started using it for some animations, some dead picker stuff, some jQuery plugins. And today we use it for full single-page applications, like entire applications are built in JavaScript. So and then Node. Node allows us to build the server side also in JavaScript. So the one good thing about Node is like one language and everything you can do. If you know JavaScript, you can build server side and client side. So JavaScript is everywhere today. If you know JavaScript, you can build server side, you can build for mobile, you can build for web. So and you cannot escape JavaScript. Even if you don't build your server side in Node, if you use Ruby on Rails or PHP or .NET or something, Java, you have to learn JavaScript because browsers today only support JavaScript. They don't support any other language. So that is the reason, that is one of the reasons. Second reason is non-blocking IO. To understand this, we'll look at some code. So we know Ruby, how many of us know Ruby? Anyways, not much Ruby is needed to understand this. So here we are creating a new object of user. This params is coming from the client side. The second line says the object. So what it will do, it will send the data to the database and wait for the database to respond. So until the database saves the data and responds, the Ruby process will keep waiting. And so the third line is not executed until the time this is completed. So what is the disadvantage in this? Like the Ruby process is doing nothing. It is just waiting. So if our database server is somewhere external, so this is just one example of IO. So IO can be on a network. You want to fetch some data from some other server. You want to fetch some data from the file system. So wherever IO is involved, most of the languages, Ruby, Java, they all will wait. They don't do anything at that time. So that is a waste of time. Waste of time is waste of resources. And how does node do it? It does not wait. It will continue doing other tasks. So what the same function does here is, it accepts a callback. So earlier we studied the anonymous function thing. This is that. So this is a callback which will be called when database gives the response. So this line will be executed and then console.log high will be executed. So this line is executed before this line. So what happens is the node process can keep serving other requests. It will not wait for that request to get completed. So this improves the performance a lot. This adds to performance. So we'll take an analogy of the non-blocking IO, how a waiter works in a restaurant. So he takes an order from the table. He goes to the cook. He tells him the order. And he goes back to for another order. So he does not wait for the cook to complete his cooking and preparation of the dish. So however traditionally how other languages work are they wait. So if the dish is taking 10 minutes to cook, whether he waits or not, the order will be delivered in 10 minutes only. So there is no use waiting. It is better he goes and collects other orders. So basically this is how node works in a non-blocking fashion. What is express JS? But that mechanism is a lot of memory heavy. It consumes a lot of memory. So this is a single thread. If there are multiple processes, you can start multiple workers of node. So node is very good to take advantage of multiple processors. I think it is not out of the box. So I think one of the other reasons is the libraries which are available in node are all async. So async programming is not like async programming is little easier to do. Async is a different thinking pattern. So it will be initially it will be like a difficult to change. It is not that difficult, but there are solutions available to that like promises which makes it easier. So like it is difficult to think that this line will be executed after this line, like before this line. Generally we think serially, whichever line comes first will be executed before that. This is a very simple example. When there are multiple blocks of code and there are multiple callbacks, then it becomes more complex. So express is a web framework for node. Currently it is the de facto for node for building all the web applications. There are many, express is a very basic stuff. It has lot of extensions to it. Extensions in terms of frameworks and plugins both. There are many frameworks which are available on top of express and there are many plugins you can plug into express to extend the features. So we start by building a very simple HTTP server. So let us have our editors open. We will create a new js file server.js. Okay, before that you can clone this grid repository. This has all the code we will do in today's workshop. So like there are seven milestones we will be achieving. So if any time you get stuck on any of the steps, you can move forward from that directory. And of course our volunteers are there. And if you complete your stuff then you can help out other people around you. So node has a concept of modules. Modules is like gem into B. It is basically a reusable library. So there is a module called HTTP which lets you do build networking applications on node. So we will use that to build our express framework. So it is by default provided by node. So you do not need to install it. So we have created an HTTP module. We required it. HTTP has a method called create server. So this creates a server for us. Then it accepts a function which will be called on every request. So this is basically a callback. Whenever a request occurs this function will be called. So it will accept two arguments, a request variable and a response variable. This is good. So we have created a server. Now we need to send a response back. So there are various methods available on the response object which allow you to set headers and write the success code and finally send the message. Like end will end the response and send some message back. Per message equal to. So now we need to start the server. So there is a listen method which accepts a port number. We have created a server which responds to any request with a message hello HTTP. We did not start the server. So we start the server by the command node space filename. So this was our first milestone creating a simple server. So once we everybody has reached this like completed this we will move on to the second. So you can check whether anybody needs it. Anybody I have asked already. You can check once again. So you can skip this three lines in case if it is taking too long to type. This is not compulsory like it is so code will still work. But it is a good practice to send the headers. If you have already started the server and you are making some changes to the code please control C and restart the server. Everybody has having node.js installed right. Anybody not. You can probably pair up someone. It is running. We have not written anything. So we will move to the second step. Anybody still waiting like doing writing this code. So we will create a new file myexpress.js. If you copy paste the code of server.js into myexpress.js. Pay attention here please. So now we will be creating a module out of this. So we create a function myexpress and we do module.exports equal to myexpress. So what module.myexports does is like whenever you require the file myexpress.js so module.exports define what will be required. So if we export myexpress function and we do where myexpress equal to require we give the path of the file myexpress. So this variable will hold what is exported. So we shift this server thing inside myexpress. So to start the server we need a method called listen. So our myexpress module should return an object which has a method listen. So we return we need to define this function now. So our listen function is just a wrap from method. It just takes the message and passes on to the server object. So what we do here is. So we are calling this myexpress function. The myexpress function is returning an object which has a listen method. And to start the server we call the listen method on it. So I was talking about the private and public thing. So server here is a kind of private variable. So we do not have access to server from app. But the listen method it has access to server. Because the server variable is in the scope of this method. So this is a concept of closure. Like the variables which are in the scope of the function. When the function is passed from anywhere else. Those variables will be accessible to the function. So this is a very core concept to JavaScript. So any doubts in this till now? All clear? Nobody is responding. You can do a thumbs up when you have finished coding. So that I know that you are writing something. So how many are still doing like working? You can also check out the code from this github repository. You can see the code from there. It is problem seeing on the screen. Thank you. The listen method you can add a console.log that it has started. This is my express server. So when you require a module. So this is a module which is available with node. Like node is default providing it by default. So this is right now not converted to a module. So by default the node will search for node modules in a directory called node underscore modules. Inside the folder then it will go to the parent folder. Inside that it will search for a directory node modules. Inside that it will search for that module. That is one way of requiring if you do not specify the path. Otherwise you can specify the path of the file. Dot is current directory and inside that my express. We will do that today at the end of this. Anybody still doing? So another three minutes and we will start with the third module. You did not do module.export. My express equal to instead of sttp my express. Little bit more on that. So the place where listen is called here. Here the in this scope the variable server is not accessible right. But where listen is defined in this scope. Inside the function server is accessible. So even if when the scope has finished. Like when it is outside the scope. Those variables will be accessible to the function. Those will not be like collected by the garbage collector. So those variable will continue to exist in the memory. So we will move on to the third step. So right now our express framework is returning the same request for every response. Like sorry same response for every request. So whatever you give it you get the same response. So this is because we are not checking what is the request object. So now we will add routing to it. So routing is a mechanism where we check the request URL. And we give different responses for depending upon the URL. So we create one more file called routes.js. Here we create a function called routes. And we export this. So we will define a method get. Which will accept two parameters. One is the path. And one is the handler. So basically we define different handlers for different path. Currently what we are doing? This is the single handler for all the requests. So we will define a method get. Which will define different handlers for different paths. So we will use an object to store the path and the handlers. The key of the object would store the path. And the value of the key would be the handler itself. So we initialize it to be an empty object. And whenever get is called. Then key of the routes table is path equal to handler. So we want to use the get method. So we return an object which has a get method. So now in module.exports. We have exported the function routes. But actually we do not need the function. We need this object. So we will call this function here. So what gets exported is this object. Then back to express js. We include routes. So we need to pass on the get method to the myexpress object. So we export it here. So now routes is not a function. It is a object. We could have written the same thing in server.js. But it is good to write the routing functionality separately. So that myexpress.js. Here you could have done it. But like this is I felt it is more convenient. I do not want to create object of routes here. Because it will be created only one time. It will not be created again and again. Anyways you can do both ways. I have seen when exports can be anything like. It need not be only a function. It can be different things. It depends upon what you want to use your. Like why have you created the module. So now back to server js. We define app.get. We define a modding method. So the handler's arguments will be request and response. Then we go back to myexpress. We copy this. Cut this actually. Now we have defined a route. So this get method goes here. And it makes an entry in the route stable. But now we want to match the route also. So we define a match method. So match method should accept an argument request from where it can take out the URL. So it takes the routes table and passes the key as the path of the request. And in the myexpress server callback we find what is the handler. Equal to routes.match. So we find the handler through routes.match. If handler exists we call that handler. And return routes not found. Get is not called get of undefined. Server.js. We have defined the method before creating the object. One more thing we forgot was we forgot to export the match method. So we have not defined the, this path we have defined morning. Here we have to pass the parameter to the handler. Request, response. So we can define one more route in server js. So there are three different files now which you have to write code in. So you can, you cannot display three simultaneously. So you can refer the GitHub repository if you want to refer to the code. So anybody has any doubts? This is very basic stuff like we do not, obviously there will be a separate routes file as we proceed. Like today we are not going to build a like an extensive web framework. This is like here. So express is a similar interface. I will say same interface. So the purpose of this building this framework is not to build a production ready framework. It is just to understand the concepts. Yeah it will be a separate routes file. You need any help? You need any help? It's done. Good to console. Night it is. Night. Night. Energy. Check the server.js file. It is night only I think. Open to console also. I think that is the problem in the doubts. Can you show this one? Where do we take it? Routes. Where do we take it? Routes. Where do we take it? Routes. Where do we take it? We call the function. It is a function called. Because we have to return the object. We don't have to return the function. We have to return the object. Where does this get wired to? So your get is wired to Routes. So basically we are trying to return. We are returning an object. So this, here my express is returned. And we call this function in server.js. Yeah I understand that. So that returns an object which has a get method. And that get method is from here. Get is trying to return get as an object and match as an object. It is an entire object. Get is a key with a get method as a value. Match is a key with the match method as a function value. So this is key value pairs. This is the object. That means here also it is a same grid. Anything that is with lesson is a keyword and lesson as an object. So this lesson comes from you are trying to see. This lesson is your bit from here. And get is from Routes. Here we have. Cut. Now we have one of three cuts. Update has no method get. Go there. Routes file. Go here. Routes dot get. This is the error function. Server dot js6. You re-studied server? Yeah I stopped the server and started. Should I want to check whether the server is shut down properly? What will be shut down? Go here. Routes dot get. Go here. Mission. Really the same problem. App ok. Routes. Routes. Try once. Do an ls once. Node server. Node server just. This is getting complicated. You are telling that it is having a path and a handler. Correct. So you have high nodes and you have a high path and a handler. Now when you execute this what happens exactly? Will it take these things and these two? This is the path. This is the handler. It goes to the route table. It stores. This is the key and this is the label. See here we are exporting this method. We are telling this. This is getting when this function is called this object is getting created. And here. So get method. Get method. You put Routes dot get. Routes dot get will and call this one. Here you will add all those. So it is like if the key is present it will return the handler. So anybody is still doing. So we will move to the next step. So next step is very simple. So might have observed we are doing we are writing lot of repetitive code here. So let us extend the response object. We will add a send method to it. So create a file response.js. Here we will again create a function response module dot exports response. So what we have to do is so we need to extend the response object. The response object is not having a method which will send the headers automatically. So we are having to we need to send the like for one response we need to write four lines of code which is quite repetitive. So we create a send method. So we have to extend the response object. So we expect the argument as response. Then we just add the send method to the response object. Response dot send equal to function. We accept a message here. So this function is not returning anything. We are just we will pass the original response object and it will modify that object. We do not need any return value from this function. So immediately after the handler is called we will call this function with the response object. So now we can replace this with the send. So we check the network tab like for the content headers. Then we see that we are getting the content length and the content type headers. So let us only use E and D instead of send. So here we are not getting the content type and the content length headers. So similarly we can add other methods to this like we can add a method to send a JSON response. So we pass this object JSON. So we are assuming this object is a JSON object. Let us call it JSON object. Here message equal to JSON dot stringify. And then we can copy this. So the content type will be its application JSON. Just let me copy. So we will see this existing file. So similarly we can write a response or redirect method. So when we redirect to some other URL the response code is 301. And important header is the location. We need to redirect. So we use this function. Now in the server js we will add few routes. App.get go to night function. Request response dot redirect will go to night URL. Write one more to return with JSON object. JSON underscore morning. Restart the server. First we will check the go to night method. So it has redirected to night. Let us check the. So the first call response is sorry the. So the response code is 301. See that 301 move permanently. And the second call goes to the night method. I will summarize this. So we created a response file. We created a response file with a response function. It accepts the response object as an argument. And it adds several functions to it. Send JSON and redirect. In the myexpress.js just after our creates our handler is called. So we can start implementing this. You can check out the repository. You have gone to the next part. That is a mistake. We have not used it. We will use it in the next step. Both are same. Not js is default. It is there in the code. Little bit like we will cover. In the seventh part we will actually use express middleware. So middleware implementation will be ours. But the middleware we will use from express. What is the error? I have got js6. Are you sure you are in the right file? You have to call this function here. Because you want to return the subject. So I come from normal rate environment. So this external part will be huge here. We will come to it. Seventh part will clear that. Next part is that. So here we want to export this object. We do not want to export the method. The function. That is why we call it here. What you could have done is you could have called it where the routes object equal to routes. And you could have exported that. This extends this object. So whatever methods are there in the response function. Go to the response file. So we are adding send method, jsn method, to the response object. Yes. So we are extending that object. Return responses. See what we are doing is we are adding. Other things you might have seen. We were defining those variables there. We are extending that object. On that object we are adding the methods. This is not required. That was by mistake. If you do suppose res equal to response of res. Then that would be. So right now if you do not put this. This will return nothing. But that will actually modify the object. Correct. But some people might do that. They might assign x equal to response of x. So that is just a convenience method. Suppose if someone does res equal to res of x. If someone does res equal to response of res. Then it just a convenience. It returns that object. It is not required for the current syntax. It is the res which to switch it off. Anyone still needs time? You can proceed. So now we will pass some. We will pass some parameters through the query. So like we will pass name equal to something like this. So we go ahead and add a request.js file. So what we are doing here is. Here again we are extending the request object. So we are adding the object of params to it. So we have used here two libraries. URL in query string. So we use URL to parse our URL. So the URL will be of the format like good morning name equal to punkach. So from this we need to extract this much. So for that we use URL dot parse. And then dot query returns string which has this content. After that there is a library called query string. So query string if you pass a string to it it will create an object out of it. So what qs dot parse will return is. It will return something like this name punkach. So we go to myexpress.js. Include this. Then we extend the request object. And we add a few routes. There has been an object called params added on request object. So we can access that terms of name. So the module qs is not natively provided by node. So we can install that by using a command called npm install package name. That is qs. So now you see a node module folder has been created in your workshops folder. This is our base folder. Inside this qs module has been installed. So the route is not matching because the match function is just passing request dot url. So the url contains the query string also. So url is currently this one. But what we have defined in the server.js is this one. So it will not match. So let us modify the routes.js. Again we include url. So this time we need the path. So there is a property called path name which will return the path of that url. So now it should work. So we are able to extract parameters from the query string. So the parse method of the query string library will also like if you pass an object user of name. So if you want to pass parameters like this. So we can start implementing this. So we create a file called request.js. The url.pars will take in the entire url and you can extract from it the query string into the object. So this part is created by url.pars. And from this to this is done by qs.pars. url library has a parse method to convert this to this. But it does not work for embedded objects like user of just now we did right. User of first name, user of last name that will not work in the url.pars. The built-in query string module is there. I am not sure. I think that was the difference I have got completely. The url, the built-in query string module it will not parse the entire embedded objects. This is the thing which is used in express only. Qs. We installed. Our query string may not be installed. This has to be installed. Qs. It is by machine media only. So basically this will export the function itself. This will export. See, it is something similar to where x is equal to the return value of the function itself. Qs. This is the complete function itself. I am creating. Okay. Show the routes. Routes. Routes. This one is from the repository you have written. This is working. Pass the parameter. Then it will not work. You have not done that. Now go to the outstores.js. So here you have to parse url.pars. Here also when matching you need to remove the query string. That when matching only the path name you used. Restart. This is the correct file. You will see. Close all other files which are not part of this. You have multiple builds here. Express request, response, routes, sample. Go to route. My express path handler. Okay. Routes. It is route. Rout not found. This is not. This is working. No. Routes not found. It is before me. It is telling the value and define. You can put some console.log over here in the routes to match thing. Put console.log. This one. Rout. Rout.handlers. console.log this both. This end. This statement. This rotation file. The only reason. If you did not create it enough. I will show you one more class. Let me do it once. So you do npm install. Install queues. You can do save. Okay. So now. I am totally blank about not installing this. Okay. So now package odysion should be created. The package odysion is not created. You lose. Maybe because it was already installed queues. I just installed it. Do npm it. Save. Okay. Default dequeues. Now. It is created. You do this you can add your dependencies. Defendances is there in this queues. Okay. Now you can add here. Do npm install. Okay. So. I will get method called. Okay. You are turning json. Show the code. You are doing end I think. Server.js. Now server to json. The routes you have defined. And which is. One name. Just.json. Inside json. You can say. It shouldn't. It shouldn't. Actually you do this. Here. Because message or length is calculated. It should not be issued. The length I think was. No problem. Was. Maybe waiting for more. The length of object length of string. Okay. So. Now we will move on to. Adding some more functionality to routes. Right now our routes are very static routes. They will only accept. Like it is exact matching of routes. You cannot pass parameters inside the URL. Something similar to like we cannot. Pass morning slash. Name. This we cannot pass right now. So. We want to define routes which are something like this. Morning slash colon name. So name is a variable. It will match. So whenever a colon is there. That becomes a variable name. And it will match anything that is there. And we should get. This variable inside params. Something like this. We should be able to do. Little complex. So if you see the routes file. Inside the six part. Explain this. So the upper one is the route we have defined. And the lower one is the path which we are getting from the request. What we do is we split both of them. Into an array. So. And after that we loop through the array and match. So at any point of time. If there is no match. Then the route is not matching. But. If there is a colon. If the route parameter. The route entry has a colon. Here. So if there is a colon here. We do not match at that time. We just take this. And put it into the params object. And we put this as a value. We will see the code. The first difference now is that. The route. Array. Now the route handler. The route table is no longer a. Object. Because it is no longer exact matching. So we cannot use objects. So we have created an array. And the. Get method. Pushes into the array. The path and the handler. So. When a match is fired. We loop through the route handlers. Like route handler is currently an array. So we loop through this array. And check if. The current. Entry is matching the path. If it is matching. We stop there. And return the handler. Return the handler and the params. From that path. So. The first. There may be multiple routes matching the path. But the first route will be executed. Here we create two arrays. We initialize that match. We assume that matching is true. And we initialize an empty object. Of URL parameters. Then we loop through the route array. So. First we check if the first. The first character of the. Entry is a colon. If it is a colon we do not match it. We just put it into the URL params. By removing the colon. If it is a star again. We do not match it. We just. So if there is a star in the routes. Then it does not need to be matched further. All the further. Till now if it has been matched. It will return true. And finally if it is. Not either of these two cases. Then. We will compare both the values. Route and the path. And if they do not match. We will return a false. Express also. So instead of the handler now. We get a match. So match either is an object. Which consists of. So if the match is found. Then. Params and handler is written. If match is not found then false is written. So in the my express code. We. Modified similarly like. If a match is found we add the params. And we execute the handler. Return route not found. So this code you may. Like to copy from. The folder directly. It is little longer. You can basically replace the routes file itself. From the. Directly 6. More routes. And then modify the my express file. Washroom go carefully. Yes.