Getting started with Node.js on ChakraCore

Intro

Last year I started to use Node.js more and more. Personally I really like it. Using node.js on ChakraCore has some advantages over using V8. I’ve decided to get to know node.js a bit better and start a series of posts about it, beginning from the top.

What is node.js?

Node.js is described as interface to V8, Google’s JavaScript engine that also used in Chrome. Node.js enable you to write server-side code using JavaScript. It is uses an event-driven, non-blocking I/O mode.  This  very lightweight and efficient, but, as a trade off, you have have to implement every HTTP status code yourself. Fortunately there are a lot of libraries that can help you with that. Packages are distributed by the node.js’ packaging system, npm, which happens to be the largest ecosystem of open source libraries in the world.

Why use ChakraCore?

I was mentioning ChakraCore a few times already. What the heck is that? ChakraCore is the core part of Chakra, Microsoft’s JavaScript engine, the engine that powers Microsoft Edge. ChakraCore is open source, runs cross platform and is also very fast and efficient. So technically it should be possible to replace V8 in node.js with ChakraCore. And it is. Since everything is open source nowadays, Microsoft forked node.js and created a shim for the V8 API, ChakraShim, to make node.js use ChakraCore.

The fact that node.js can run on ChakraCore isn’t the best reason by itself. But there is another bigger advantage in using ChakraCore:

Time Travel Debugging

Every developer knows about placing breakpoints, hitting them and stepping through the code from there. But what if you are just passed the point that has the issue you want to investigate? You normally would place a breakpoint at another place and rerun your application, bringing it to the same state and trying to hit that breakpoint. Wouldn’t it be great if you didn’t have to go though all of that and could just step backwards? That’s exactly what Time Travel Debugging can do.

Set up

Let’s get node.js up and running. The easiest way to get going us by using the node-ChakraCore version switcher, nvs. You can download that here.

After installing nvs  go to command prompt or PowerShell and run ‘nvs’. Now you can select a ‘remote’. This is will be the node.js type to use.

After selecting a node.js, you can specify the exact version to use:

Wait for it to download and install…

After it is installed you should be able to request the version with “node –version”.

Getting up and running

Now we have node.js running we could begin developing an application. I’m going to start with a very simple application using express.js.

In a later tutorial I’m going to show you how you can scaffold using express.js, but for now let’s get a simple app running.  I always start with creating a new folder, let’s call it ‘NodeDemo’ and ‘cd’ into that.

Node.js comes with a package manager, npm. That’s one of the most used standards in JavaScript development nowadays. It can do a lot more than only managing packages, but we’ll save that for a later tutorial.

The use of npm has to be initialized inside the folder we just created run ‘npm init’. You can fill out the questions asked, or just enter through for now, until you’re back at the commandline. This will create a package.json file in which the packages used by the project are stored.

Next, let’s add the package for express.js by running the folling command: ‘npm install express –save’. The –save options makes sure the use of the package is registered into the package.json file.

Last thing to do is use the express.js package in an app. It’s time to start Visual Studio Code. You can do that by running ‘code .’ in the commandline (note the period at the end). Add a file, ‘app.js’ and add the following code.

<!– pre>var express = require(‘express’); var app = express();

app.get(‘/’, function (req, res) { res.send(‘Hello World!’); });

app.listen(3000, function () { console.log(‘Example app listening on port 3000!’); }); This small piece of code does a few things. The first part loads express.js and initializes it.

After that it registers an HTTP GET on the root url ‘/’. When an GET is performed the function is called and a response is send to the client.

The last part starts the app listening on port 3000 and logs a message to the console when it’s started.

If you followed along, you should be able to run the app now. Go back to the commandline and type:’node app.js’.

Now you should be able to navigate to http://localhost:3000 and see the app running…

And that’s it.

Styling console.log output

I recently learned about a very cool console.log feature. You can use CSS formatting to style the output of console.log. And it’s very easy. All you have to do is use the ‘ %c ‘ formatting tag in your message.

Here’s a simple example:

console.log('%cThis is a %cfun%c console message',
            'font: 24px serif; font-weight:100; color: #228;',
            'font: 30px sans-serif; font-weight:800; color: #F44;',
            'font: 24px serif; font-weight:100; color: #228;'
        );

When you look in the console of the browser, you should see something like this:

fun-console-message

Unfortunately this features is not supported in all browsers, which may result in a whole bunch of CSS being written to the console. You should check the browser in your code before using this feature. As far as I know only Chrome and Firefox support this feature.

Poor Mans jQuery

A lot of people use jQuery in their HTML/JavaScript applications. There’s nothing wrong with that. But I’ve seen a lot of people use jQuery only to make it easy to find elements and they are not using any of the other jQuery functions. It’s pretty clear that writing a single ‘ $ ‘ instead of the way longer usages of various function on the ‘document‘ object, like getElementById. One of the functions on the ‘document’ object is the querySelectorAll function. This function brings a similar experience to vanilla JavaScript by taking selectors as a parameter.  So if we take a look at the example below. This show a fairly complicated selector you might find in an application.

I personally don’t like writing ‘document.querySelectorAll every time I need to find some things in the DOM, and many people with me. That’s why a lot of developers include jQuery in their project. To be able to use a similar syntax as jQuery is using I often add the following line somewhere at the start of my JavaScript code:

window.$ = function (selector) { return document.querySelectorAll(selector); };

Here’s the earlier example, but with the poor-mans-jQuery added.

It’s not perfect and sometimes I add a context or something to that function if it is needed for that project, but it works fine in most cases.

As a last note, always look at the performance. If you are using selectors a lot, like in a big for-iteration, you might want to use the document.getElementsByClass function or something similar. These have less overhead and are somewhat faster.