A brief intro to Node.js

This is a topic I’ve been meaning to approach for a while now. As it happens, one of my college courses – Web Applications – requires a project built using Node.js, so what better time to tackle this.

I had mentioned Node.js in a previous post, where I was talking about the various environments JavaScript can be run in. This post won’t go into the history or specifics of Node.js; the main exercise will examine the various items found in the sample code for creating a simple Node.js server – which will explore and detail node specific aspects as well as JavaScript patterns used. The code can be found on the About page on the Node.js site:

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

Play by play

The very first line of code, allows us to import the module ‘http’.

const http = require('http');

This is the implementation method that is specified in CommonJS, which is an ecosystem for JavaScript outside the browser. This is a synchronous system which allows importing of modules or files; since everything will be on the server side. This allows us to import the module http.

The next two lines set the IP address of the localhost (the machine you are currently on) and the port to listen to for incoming requests.

const hostname = '127.0.0.1';
const port = 3000;

Immediately following that, the createServer() method is called on the http instance we created on the first line. Which is then assigned to a constant called server.

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World\n');
});

This is passed a call back function with two parameters and uses an arrow function (read more about it here [1] [2]). This createServer() method will be invoked by an incoming event, in this case web requests. The req parameter will contain all the incoming request’s details. The res parameter will handle the response which will be sent out. In this case it’s setting its statusCode to 200, which signifies that the request was handled successfully. After which the response’s header information is set to indicate it’s content which in this case is plain text. And finally some plain text output is shown while closing the response – this will be displayed in the browser.

The final section of the code the reference to the server, which points to the http.createServer() call, is set to listen on the port and host IP address set at above.

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

The arrow function will display the message indicated while the server is running in the node.js environment giving us a visual that things are working.

There you go, this was just a quick run down to help try and elucidate, both for me and anyone reading this, what is happening within this simple node.js server code. Stay tuned for more practical topics on the matter.

Simple JavaScript Timer: Part III

The remaining requirements from the last session are:

  • Refactoring the two buttons to just one for starting/stopping the timer
  • Being able to capture snapshots of the timer countdown on a button press.
  • Clearing the snapshots and resetting the timer on another button press.

Refactoring the two buttons to a single one which would handle the starting and stopping of the timer proved to be tricky. For the single buttons Start and Stop a reference to the calling object itself was passed to the function and based on the innerHTML of that object, the button, the code would start or stop the timer.

Button innerHTML with JavaScript

JavaScript code to specify which button is being clicked

When only one button was present, there was nothing that could be used to identify what ‘state’ the timer, by extension the button, was in. Tried one or two ways to sort this but most of them resulted in the single button functioning once to start/stop the timer but after that it wouldn’t function at all.

What finally did it was the creation of a Boolean to keep tabs of whether the button was clicked. Simple but boy did it take some time getting to it. [see commit]

JavaScript button handler code

JavaScript button handler

With that out of the way the only thing left to do was to capture the counter values and show them beneath the actual counter and reset the captured values and timer count. This was simple enough and only required adding to the innerHTML of the display area and clearing them. [see commit]

One final item remaining was to enable key presses to activate the same functions as the button presses. These were:

  • ‘s’ to start and stop the timer
  • ‘t’ to record the times
  • ‘r’ reset the recorded times and timer

This presented some challenges as I wasn’t too sure how the code would be invoked from a separate script file. I thought it would have to go in the actual HTML document. But referring to the document element from the script file and adding an event listener to it did the trick.

Document event listener setup

Document event listener setup

From there it was just a simple callback function, part of which can be see above, with the event object passed to it from which the keypresses could be retrieved.

And there you have it, another successful simple  project completed. You can see it in action here https://donyd.github.io/Simple-Timer/

There was one final issue, this time with Github. You can see the code at various iterations of the work in progress, however the final Github page only shows the final results.

Catch up with the initial posts about this piece:

 

JavaScript callback functions

Another primer, this time on callback functions.  Call back functions are basically a function that is passed as an argument, or included wholly as in the case of anonymous functions, in another function’s call. It hails from, wait for it… functional programming.

One way of understanding how callbacks function *pardon the pun*, is based on one form of creating a function in JavaScript:

var someFunction = function functionName() {  // code goes here}

This is known as a function expression, whereby a function is declared and assigned to a variable. [1] Now, someFunction can be used to invoke functionName() just by calling it similarly to how a function would be called i.e. someFunction();

In a callback function pattern, in one scenario, a named function which has already been declared is passed as an argument in another function.

function gradeBoost(x){ // call back function
   return x += (x *= .15);
}

function bonusQuestion(receivedMarks, callback){ // uses callback function
  return callback(receivedMarks);
}

var finalMarks = bonusQuestion(45, gradeBoost));
console.log(finalMarks);

So, in the example above, gradeBoost is the callback function. In bonusQuestion, the second argument ‘callback’ is set to receive (be assigned) the callback function, gradeBoost, similar to the first code explanation block above this example.

Within the body of bonusQuestion, the assigned function is setup based on the parameter list of the gradeBoost callback function. The result being when bonusQuestion is called and passed in gradeBoost as the callback function argument, gradeBoost returns the result of the calculation to the bonusQuestion function call.

This is in essence how callbacks are cast and called. For some more applications of callback functions see the post on Asynchronous JavaScript.

Handy little methods for Xrm.Page calls in browser for Dynamics CRM

Based on the last post about retrieving Microsoft Dynamics CRM record based information from the console ‘Dynamics CRM – Access GUID from the browser console‘, I thought I write up some other useful bits that can be used to get information in a pinch.

Most of these have be run from the viewport where the record in question is open, unless otherwise stated.

Get an entity’s origin

frames[1].Xrm.Page.data.entity.getEntityName();

This is particularly handy when you want to know the logical name to work with programmatically. All this without having to open up the solution or form and plow through a few forms and several clicks.

Get logical name for controls in the controls collection

frames[1].Xrm.Page.getControl(0).getName();

The controls collection is a child of the ui object, which itself is a child of the Xrm.Page object. [See the visual layout on MSDN]. The index allows retrieval of control items as they occur on the form.

Get logical name for control based on display name

frames[1].Xrm.Page.getControl(0).setFocus();

Now there are no direct method calls, that I found or aware of, that could get you the logical name for a field based on its display name. Which is a big shame because that would be a very useful one.

Now this might be somewhat tedious based on what wants to be achieved, and most definitely based on the number of fields on the form, as the user will have to randomly call the setFocus() method on a guess of where the control might be in the index based on position i.e. if the field is placed in the middle of the list of fields, chances are the index will be roughly half of the length of the count of fields.

But once the focus reveals the field that the user is interested in, the previous method getName() can be used to retrieve the logical name using that same index.

Conclusion

These calls are part of the Xrm.Page model which can be referred to on the MSDN site. However, they can be utilized for quick little views at relevant information via the browser’s console.