Client-Side JavaScript to Node.js
JavaScript is mostly used on the client-side and in the browser, enabling all kinds of dynamic interactions on the page. When Brendan Eich created the language for Netscape in 1995, there were already server side implementations but node.js made it really popular. Node is a cross-platform runtime environment that is event driven and non-blocking and uses the Google V8 JavaScript engine to execute code. So, if you already know JS, you can now code on the server. There are a ton of use cases that this enables but today I want to focus on a simple concept of moving your client-side JavaScript code to Node.JS so that you can hide or protect your JS functions from being visible to end users.
Let’s say you have a simple HTML page where users submit a form that is processed by client-side JavaScrpt via the form onsubmit event. For example, a simple addition calculator where the end user provides 2 numbers and JavaScrpt adds them up and returns and prints the result on the screen. Here is an example:
How can you transform that to Node.JS so that you can hide the JavaScript function to end users? In our example, the onsubmit event handler passes form data into a client-side JS function but a form traditionally (without onsubmit) will post the data to the server (makes a HTTP request to a path specified in the form action paramater). Right now, we have no server setup to do anything with that form data so removing the onsubmit event will result in a page refresh.
Node.js will be our server and it will grab the data and pass it to the same JavaScipt functions you had on the front-end but now everything lives on the server-side and end users cannot see those functions. Node should be easy to install and the first thing you want your script to do is to load the built-in http module to create an HTTP server that will listen for web requests and respond. If you save the file below as form1.js and run node form1.js in your command-line interface you should be able to hit http://localhost:8000/ in your browser and see the text “hello”:
Now, the browser, by default makes HTTP GET requests to a server because it reads web pages. Your form is trying to submit something so it is making an HTTP POST request. So, we will write a conditional in our node.js script and respond with the calculator form on a GET request and for the POST, we will capture the form data, process it, and respond with a form and the result of our calculation. Here is how that looks:
The code could be refactored in many ways but to show everything in a single file, I think this is a good example of transforming a form with client-side JavaScript to a server-side Node.JS version. It’s a bit of pain to grab Form Data so if you are doing this for a serious project, I would recommend a framework like Express which makes writing web apps much easier.
This form example makes a page request to the server but you could make it feel like the original example by using AJAX (XMLHttpRequest) to pass and retrieve data from the server without a full page refresh. All you need is a few lines of additional client-side JS code to make the Ajax requests via the onsubmit form event. I also transformed the Node response function to only respond with the result instead of the full page. Here is how that would look like with Ajax and Node.JS in a single file:
