On Node Modules

Creating a node module is similar to creating a node.js application. We have to run npm init and that’s it!

220px-Node.js_logo.svg

A module can be either a single file or a directory containing a set of files. Usually when the module contains more than one file inside a directory it is recommended to have a file named index.js exposed what properties, objects and functions the module provide to outside. However it is not always required to have a file named index.js where we can override this behavior (more on this later).

Importing a module in our application is also straightforward, which can be done using Node’s require function. require function takes the path to a node module as an argument and performs a synchronous look up for the module first in core modules, then the current directory and finally in node_modules. We could omit the .js extension when it comes to requiring. In that case node js will assumes the extension as .js and scan for all JavaScript modules. Since JSON also treated as JavaScript objects, node js will take JSON files in to count when extension is missing. Once the module is located, the require function will return the contents of the exports object defined in the module.

We have two options when it comes to exporting properties or functions; exports and module.exports. exports is a global reference to module.exports and module.exports is what ultimately gets expose to outside. Since exports is a global reference, Node expects it to not be reassigned to any other object. If anything assigned to exports, then the reference between exports and module.exports will be broken.

When it comes to using node modules, Node uses a mechanism to reuse node_modules without knowing their file system location. It search for required node_modules at multiple level.

Finally, Node expects to have a file named index.js in each node module. Otherwise it will scan for a file names package.json inside the module directory and that package.json should contain an element named main specifying the starting point.

Rock on!

On Garbage Collecting C++ Addons in NodeJS

NodeJS Addons are C++ objects that can be loaded into NodeJS using require(). Idea is that this allows NodeJS to gain performance and functionalities of C++. This acts as an interface between JavaScript and C++. NodeJS documentation is helpful to get familiar with Addons>>.

220px-Node.js_logo.svg

However, when it comes to garbage collecting (GC), the documentation is missing some important… well I’d refer to those as tricks.

Manually execute GC,

First we have to set the object instance to null and then call the garbage collector in global context.

obj = null;

global.gc();

One consideration with above is that this is not a reliable way to trigger GC on weak handles.

Another approach is to allocated a huge amount of memory so that GC will triggered,

for (let i = 0;  i < 1e6;  ++i) {

({});

}

Also, the GC can be triggered forcefully using V8’s command line flags –gc_global and —gc_interval. –gc_global forces V8 to perform a full garbage collection, while –gc_interval forces V8 to perform garbage collection after a given amount of allocations.

These command line flags are provided by underlying V8 JavaScript engine. They are subjected to change or removal at anytime and not documented by NodeJS or V8. Therefore it is recommended not to use these outside of testing purposes.

References,

Rock on!

State Management in ReactJS

maique-madeira-256088
maique madeira

I recently started looking into ReactJS. Among many shiny things like “Virtual DOM”, I found the way react manage state interesting, a kind of an unsung hero to me. This post is to give few examples of State Management in ReactJS.

Let’s first consider a very simple function. The whole goal of this function is to fetch a given user. Therefore, we can add a parameter to function to receive username as an argument and pass a username to function when it is invoked. For example,

function fetchUser(username) {
    //ajax call
}

fetchUser('isuru')

This same intuition can be applied to react components. Suppose that we have a simple react component to display a user in user interface. Now the problem is how do we communicate which user the component should display? There is where we can pass the username to our component through a custom attribute. The values we passed into components through custom attributes can be accessed inside the components via it’s “props” object. For example,

class User extends Component {
    render() {
        return (
            <div>
                <p>Username: {this.props.username}</p>
            </div>
        )
    }
}

<User username="Isuru" />

Due to the nature of react’s component model, it is possible to delegate/encapsulate state management into individual components, which allow us to build large applications with a bunch of small applications/components. Adding a new property called “state” who’s value is a object is enough to add a state to a component. This object represents the entire sate of the component and each key in this object represents a distinct piece of it’s state. Finally this state can be access via state object which is a much similar way we accessed props.

class User extends Component {
    
    state = {
        username: 'Isuru'
    }

    render() {
        return (
            <div>
                <p>Username: {this.state.username}</p>
            </div>
        )
    }
}

<User />

This way allows us to separate how the application looks and the application’s state, ultimately the user interface becomes a function of applications’ state. React takes the responsibility when it comes to changing the state of a component this is done by calling the “setState()” method when something needs to be changed. Although, it is encouraged not to update the state of components directly.

Alright then, how about forms? Usually the state of forms are in DOM. If react manages state of components inside the component itself, how do we handle forms in react? This is where controlled components comes in. Controlled components are components which render a form, but the state of that form lives inside the component.

class User extends Component {
    
    state = {
        username: ''
    }

    handleChange = (event) => {
        this.setState({username: event.target.value})
    }

    render() {
        return (
            <form>
                <input type="text" value={this.state.username} 
                onChange={this.handleChange} />
            </form>
        )
    }
}

<User />

 

In above example, we bind the value of our input field to state and with that the state of our form is controlled by react. Few benefits that we get from controlled components are,

  1. it allows instant input validation,
  2. allows to conditionally enable/disable buttons,
  3. enforce input formats.

Allow of these benefits are related to user interface updates based on user inputs. This is the heart of not only the controlled components, but react in general. If the state of the application changes, then the user input changes are based on that state of the application.

Rock on!

References:

 

Rest Parameters Curry

According to Wikipedia, Currying is the technique of translating the evaluation of a function that takes multiple arguments into evaluating a sequence of functions, each with a single argument. Simply, if a function takes three arguments and is curried, it is really three functions. Each function takes one argument and return a new function that takes the next argument until all arguments are received, then it returns the final result.

Consider a function that takes three arguments:

1

The equivalent curried function:

2

This is somewhat insane! returning nested functions as function takes more and more arguments. One option is to convert a normal function into a curried function, which is what mainly this article focuses here onward.

When converting a normal function into a curried function, it is required to know how many arguments the function is expecting. Functions have a length property in JavaScript and it can be used in here. Although the main intention here is to demonstrate how ES6 Rest Parameters can be used when creating generic curry function.

In concise, a Rest Parameter allows a function to receive a variable number of arguments and more details on this can be found in MDN: Rest Parameters.

3

The first time this function is called it only expects one argument, a function to  curry. The args parameter will probably be an empty array on first invocation. Save the number of arguments it expects (argLength) to a local variable. Then return a function we define inside the curry function. When this function is invoked it concatenate the new args2 array with the old args array and check if it has received all the arguments yet. If so, it apply the original function and return the result. If  not it recursively call the curry function, passing along all the new arguments which puts us back in the original position, returning the curried function to await more arguments.

With concepts like currying, it is much easier to abstract the logic and make clear and concise functions.

References:

  1. Currying on Wikipedia
  2. Rest parameters on MDN

Rock on!