Gulp Basic example

What is Gulp

Gulp is simple form is a javascript task runner. For java background developers this is very similar to Ant which helps in build and deployment process more standardised, repeatable and automatic. Gulp is a streaming build system which is built in Node.js. This stream build approach provides flexibility of piping data transformations. Gulp is powered by more than 2000 plugins which helps us web development process simpler and faster.Lets have simple workflow of creating output file involving compilation of jsx scripts, browsification and creating minified output js file.

Gulp Installation:

Gulp can be installed over npm.
Find below the installation of all the required modules for current post.
	npm install --save gulp
	npm install --save gulp-clean gulp-uglify
	npm install --save vinyl-source-stream browserify gulp-streamify gulp-babel
    npm install --save babel-preset-react babel-preset-es2015 babel-plugin-transform-object-rest-spread

Current Project setup:

In the current project, we does the following tasks using Gulp.

  • Compilation of JSX scripts to js format using Babel
  • Combination of various js files into minified output file
myFixedDataTable

Gulp Usage:

The gulp API consists of gulp.src, gulp.dest, gulp.task and gulp.watch

  • gulp tasks: This includes the tasks that need to be executed which can take up to to three parameters. The name of the task, dependent tasks and function to be executed for that task. All the tasks are executed in parallel unless they are configured as dependent tasks.
  • gulp src: This takes the array of input js files which returns a stream which can be piped to plugins.
  • gulp dest: This will create files and can also be piped.
  • gulp watch: This watches the files that are modified and trigger the tasks that need to be executed.

Gulp Plugins:

Gulp has multiple plugins which can be installed via npm. Find below overview of gulp-plugins used for this post.
The complete details of gulp plugins can be found here.

  • gulp-clean: This plugins deletes the configured directory.
  • gulp-uglify: This includes the js minification process on input files.
  • vinyl-source-stream: This helps in transformations of the input files to streams and piping the streams.
  • browserify: This converts the js code with require methods to browser compatible form and also create the bundled output.
  • gulp-streamify: This converts stream to buffer.
  • gulp-babel: Compiles the JSX code to browser compatible js format.

Gulp JS file:

Find below the gulp js file.
var gulp = require('gulp');
var clean = require("gulp-clean");
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var streamify = require('gulp-streamify');
var babel = require('gulp-babel');

var path = {
  HTML: 'src/index.html',
  JSX: ['src/js/*.jsx', 'src/js/**/*.jsx', 'src/js/**/*.js', 'src/js/*.js'],
  MINIFIED_OUT: 'output-min.js',
  OUT: 'output.js',
  DEST: 'dist',
  DEST_BUILD: 'dist/build',
  DEST_BUILD_UNUGLI: 'dist/build',
  COMPILE_DEST_BUILD: 'dist/compiled',
  DEST_SRC: 'dist/src',
  ENTRY_POINT: 'dist/compiled/objectdisplay.js'
};

gulp.task('compile', ['clean'], function () {
	return gulp.src(path.JSX)
		.pipe(babel({
			presets: ['es2015', 'react'],
			plugins: ['transform-object-rest-spread']
		}))
		.pipe(gulp.dest(path.COMPILE_DEST_BUILD));
});

gulp.task('build', ['compile'], function(){
  browserify({
    entries: [path.ENTRY_POINT]
  })
    .bundle()
    .pipe(source(path.MINIFIED_OUT))
    .pipe(streamify(uglify()))
    .pipe(gulp.dest(path.DEST_BUILD));
	console.log('build executed');
});
s
gulp.task('clean', function () {
	return gulp.src(path.DEST)
		.pipe(clean());
});

gulp.task('default', ['build']);

Wrapping Current Post:

The below are the steps that are executed in order as per gulp.js

  • The path is defined with all the input and output directories/files.
  • The default task is build, which has dependent task as compile and it has dependent task as clean.
  • The clean task deletes the output dist directories/files.
  • The compile task compiles react JSX syntax and ecmascript 2015 syntax to browser acceptable js.
  • The browserify process identifies the dependent js files based on input configuration and bundles into output file.
  • The uglification process compresses into minified js file.

Also Read:

Babel – Javascript Transpiler

What is Transpiler?

A source to source compiler is called Transpiler or transcompiler.
A compiler translates code from higher level language to lower level programming language, where as transpiler compiles from one language to other or from version to other.

Why are Transpilers Used?

An overview on transpilers on wiki are found here.

  • They are used to modernize the legacy code to next version programming language.
  • For refractoring purpose.

What is Babel?

Babel is javascript transpiler which can be used to compile javascript source.
Babel details are found here.

What Babel offers?

  • Conversion of EcmaScript 2015 & beyond features to javascript supported by browsers.
  • Supports conversion of JSX syntax to React-js javascript components.
  • It comes with pluggable architecture where only required plugin can be executed.

How Babel can be executed?

Babel can be executed in multiple forms, the complete list can be found here.

  • Builtin tools like babel-cli.
  • Build systems.
  • Frameworks.
  • Language APIs.
  • IDEs.

Required Installations

All the required installations can be done via npm.
Install Babel command line, the detailed usage details for CLI are found here

	  npm install babel-cli
	

Babel presets and plugin installation. The complete supported list is found here

	   npm install babel-preset-es2015
	   npm install babel-preset-react
       npm install babel-plugin-transform-object-rest-spread   
	

Usage of Babel

  • Source JSX file – This current example explains the conversion of below es2015 and react jsx features to compatible scripts
    • Es2015 feature – String creation with literal support.
    • Es2015 feature – String interpolation.
    • Es2015 feature – Spread attributes.
    • Es2015 feature – Object spread attributes.
    • Reactjs JSX format.
  • Sample source file
    var React = require('react');
    
    // String creation with literal support
    var mystr = `In JavaScript '\n' is a line-feed.`
    var mymodstr = `In JavaScript
    is a line-feed.`
    
    // String interpolation
    var name = "Bob", time = "today";
    var consolname = `Hello ${name}, how are you ${time}?`
    
    // spread attributes ... is only supported by es2015 modified to Array
    var func = (x, y, ...z) => { console.log(z); return x + y; };
    
    // Object spread attributes need plugins while compilation
    var dataFunc = ({rowIndex, data, col, ...props}) => (
        console.log(data.getObjectAt(rowIndex)[col].toLocaleString())
    );
    
    // The JSX format is converted to js format by babel 
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('example')
    );
    	   
  • Script compilation
    	 babel --presets es2015,react --plugins transform-object-rest-spread ReactJsx.jsx -o ReactJsxMod.js
    	 
  • Resultant source file with browser compatable javascript code
    "use strict";
    
    function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
    
    var React = require('react');
    
    // String creation with literal support
    var mystr = "In JavaScript '\n' is a line-feed.";
    var mymodstr = "In JavaScript\nis a line-feed.";
    
    // String interpolation
    var name = "Bob",
        time = "today";
    var consolname = "Hello " + name + ", how are you " + time + "?";
    
    // spread attributes ... is only supported by es2015 modified to Array
    var func = function func(x, y) {
      for (var _len = arguments.length, z = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
        z[_key - 2] = arguments[_key];
      }
    
      console.log(z);return x + y;
    };
    
    // Object spread attributes need plugins while compilation
    var dataFunc = function dataFunc(_ref) {
      var rowIndex = _ref.rowIndex;
      var data = _ref.data;
      var col = _ref.col;
    
      var props = _objectWithoutProperties(_ref, ["rowIndex", "data", "col"]);
    
      return console.log(data.getObjectAt(rowIndex)[col].toLocaleString());
    };
    
    // The JSX format is converted to js format by babel
    ReactDOM.render(React.createElement(
      "h1",
      null,
      "Hello, world!"
    ), document.getElementById('example'));
    
    		  

Download Node modules in Eclipse work space

Overview

This post provides details on how the node modules can be downloaded into Eclipse workspace.

Pre-requisites:

  • Install node eclipse on Local machine.
  • Install node eclipse plugin as described here.

Node Modules download steps:

  • Create package.json file.
  • List out the modules to be downloaded as dependencies.
  • Right click on package.json and run as npm install.
  • All the required modules will be downloaded to Eclipse workspace.
   {
   "name": "demo-eclipse",
   "version": "0.0.1",
   "private": true,
   "dependencies":{
	   "gulp":"3.9.0",
	   "del":"*",
	   "gulp-babel":"*",
	   "babel-preset-es2015":"*",
	   "babel-preset-react":"*",
	   "babel-plugin-transform-object-rest-spread":"*",
	   "browserify":"*",
	   "gulp-uglify":"*",
	   "vinyl-source-stream":"*",
	   "gulp-streamify":"*",
	   "react":"*",
	   "fixed-data-table":"*",
	   "faker":"*",
	   "react-dom":"*"   
    }
   }   
   
Refer Node Modules screenshot below:
nodeModules

 

 

 

Also Read:

Heap Dump Generation

Overview:
Java memory model consists of Heap memory, Thread stacks, Perm gen area.
Heap is memory area which is used for allocating memory for class instances and arrays are created.
Heap dump is snapshot of java objects and classes in memory at that point of time.

Create Heap dump using JConsole:

  • Open the java process in JConsole which is under jdk../bin.
  • Navigate to MBeans tab.
  • Select the Operation section of the com.sun.management/HotSpotDiagnostics object.
  • Enter p0 as HeapdumpPath and p1 as true/false for running GC before running heapdump.
  • Click heapdump.

jconsole

Create Heap dump using Visualvm:

  • Open the visual vm under jdk../bin.
  • On left hand margin, select your corresponding java process.
  • Right click on the process.
  • Create heap dump.

visualvm

Create Heap dump using Java Opts parameters:

  • Include -XX:+HeapDumpOnOutOfMemoryError while starting jvm process, which creates heapdump on out of memory.
  • Include -XX:HeapDumpPath while starting jvm process, to specify the heapdump file location.
  • \bin\java” -Xmx128M -XX:+HeapDumpOnOutOfMemoryError -XX:HeapDumpPath= CreateOOM
  • On out of memory exception, dump file will be created at specified folder with java_pid.hprof
  • Sample program to create OOM.
public class CreateOOM {

	public static void main(String args[]) {

		while(true) {
			int[] iarray = new int[Integer.MAX_VALUE];
		}

	}
}

Create Heap dump using Jmap:

  • Navigate to jdk\bin directory
  • jmap -dump:format=b,file=\mymemorydump.hprof

Create Heap dump using java program:

  • Heap dump can be dumped using java program via HotSpotDiagonistic mbeans, which is used by Jconsole also.
  • The below program creates heap dumps for current jvm.
import javax.management.MBeanServer;
import java.lang.management.ManagementFactory;
import com.sun.management.HotSpotDiagnosticMXBean;

public class DumpHeap {

	public static void main(String args[]) throws Exception {
	    String HOTSPOT_MBEAN = "com.sun.management:type=HotSpotDiagnostic";
		MBeanServer server = ManagementFactory.getPlatformMBeanServer();
        HotSpotDiagnosticMXBean mBean = ManagementFactory.newPlatformMXBeanProxy(server, HOTSPOT_MBEAN, HotSpotDiagnosticMXBean.class);
		mBean.dumpHeap("<pathOffolder>/pheap.dmp",true);
	}

}
  • The heap dump can also be executed programmatically by executing jmap command from within the program, in this scenario we can generate heap dumps based on pids.
import java.lang.management.ManagementFactory;
public class ExecuteJmap {

	public static void main(String args[]) throws Exception {
		String pid = args[0];
		String[] cmd = { "jmap", "-dump:file=<folder>/heapdump.bin", pid };
		Process p = Runtime.getRuntime().exec(cmd);

	}
}

Create Heap dump using MAT:

  • Heap dumps can also be executed via MAT directly for local jvm process
  • Click File –> Acquire Heap Dump
  • Select jvm process.
  • Select destination folder for heap dump
  • Click Finish

mat

Conclusion:
In addition to the above options, most of the application servers expose their own Mbeans, which can be executed via jython scripts to generate heap dumps.

Garbage Collector Types

Overview

Every object that is created in java is stored in heap space.
The allocation and de-allocation of memory spaces for the objects is executed by automatic garbage collection process triggered by JVM.
Based on the flavor and version of JVM, different garbage collection algorithms are available in JVM, which can be specified via jvm parameters.
Java uses generational heap space where the referenced objects are transferred across different generations and garbage collection triggered based on heap space generational role which is termed as minor GC and major GC.

Types of Garbage Collectors

  • The Serial Garbage Collector.
  • The Parallel Garbage Collector.
  • The Concurrent Mark Sweep Garbage Collector.
  • The G1 Garbage Collector.

The Serial Garbage Collector.

As the name specifies here minor and major gcs are done serially using single CPU.
During the gc process all other application threads are paused.
This uses mark-compact-collection method, there by which moves existing object references to beginning of heap so that new memory allocations are done in single continuous chunk at the end of heap.

    Relevance:

This is suitable where we have minimal memory and few cores.
This can also be suitable where more JVMs than the available cores are executed on same machine.
This being stop-of-world process and single-threaded may not be suitable for server environments which demands high-throughput/better responsiveness.

    Jvm arguments::

    -XX:+UseSerialGC - turns on serial garbage collector.

The Parallel Garbage Collector.

This is also called throughput collector.
This uses multiple threads for accelerating garbage collection process.
During the gc process all other application threads are paused.
Based on java version used there are two jvm arguments for parallel gc.
This process reduces the overall time spent by the application for garbage collection.

    Relevance:

This is mostly useful for jvm process executing on multi core machines.
This collector is more suitable for batch jobs and more database intensive query operations.<

    Jvm arguments::

-XX:+UseParallelGC or -XX:+UseParallelOldGC  turns on parallel garbage collector.

Note: By default based on jvm version enabling one of the flag automatically enables the other flag unless it is disabled

The Concurrent Mark Sweep Garbage Collector.

This is also referred as concurrent low pause collector.
CMS uses the same parallel GC algorithm for younger generation objects.
This uses multiple threads to trace the reachable objects to identify objects for marking and removal.
The CMS garbage collector pauses the application threads during initial-marking (mark live objects reachable by gc roots) and re-mark (objects that become un-referenced after initial marking) phases.
All the remaining garbage collection process like tracing and sweeping of live objects run concurrently with application threads.
The CMS garbage collector uses more CPU resources than parallel garbage collector but with relatively lower pause times.

    Relevance:

This is suitable for applications with large tenured generation objects and has more CPU resources.
This is required for applications which need higher responsiveness like web applications/services.

    Jvm arguments::

  -XX:+ UseConcMarkSweepGC - turns on CMS  garbage collector

The G1 Garbage Collector.

The G1 collector is parallel, concurrent and incrementally compacting low pause garbage collector.
This also operates concurrently together with application threads.
G1 collector does compaction of heap space on every cycle where as CMS does compaction only on stop the world process.
Other garbage collector uses fixed sizes for each generational heap space where as G1 uses different heap approach where heap is portioned into equal sized regions which are allocated to different generational roles based on demand, this approach provides better flexibility in heap allocation.
This heap distribution approach of G1 helps in having relatively lesser heap sizes.
G1 prioritizes its collection from the areas which has maximum reclaimable heap regions there by yielding maxing free space after gc.
G1 also has more predictable pause times as it can select the regions for gc which may fit into the configured pause interval.

    Relevance:

This is mostly suitable for applications with has large heap and need predictable low gc pause times.

    Jvm arguments::

 -XX:+UseG1GC - turns on G1 garbage collector.

Conclusion.

Each garbage collector can be fine tuned by configuring various jvm arguments which are specific to each gc collector type.
Java Ergonomics introduced in jdk 1.5, decides on default values for jvm parameters based on available system resources.
We can configure and fine tune these default values by overriding various jvm arguments, which will be mainly required when running multiple jvms on the same machine.

Also Read:

Basic NodeEclipse Setup

Overview

Eclipse is an IDE which is built in java and is mostly used for java development. Eclipse also supports multiple other languages through use of plugins.
Eclipse has some of the javascript plugins which aid in javascript development.
In recent years node.js has become one of the major platform for building javascript applications. NodeEclipse is an Eclipse plugin for node.js.

NodeEclipse Installation:

  • Install node js on Local machine.
  • Click Eclipse Help -> Eclipse Market place.
  • Type Node under Find and Click GO.
  • In the displayed list select NodeEclipse and click Update/Install.
  • Select the relevant packages and click Next and finally install.

Configuring NodeEclipse:

On successful installation of Node Eclipse, we need to configure it via Eclipse -> Window -> Preferences

  • Under preferences we see NodeEclipse.
  • On click of NodeEclipse, we have all the configuration details for Node.js running used from eclipse.
  • Revalidate Node.js path and click OK.

Conclusion:

After above setup, Node.js based programming can be used from eclipse itself.

Inconsistent Arithmetic Operations On Decimal Values

Overview

This post provides details on general pitfalls while doing arithmetic operations on decimal values and how to handle them..

Subtraction operation:

  • Executed statements:
    		System.out.println(&quot;Actual value of (4.375-4.250) Using Double:  &quot;+((4.375-4.250))+&quot; Expected Result 0.125&quot;);
    		System.out.println(&quot;Actual value of (4.650-4.250) Using Double:  &quot;+((4.650-4.250))+&quot; Expected Result 0.4&quot;);
    		System.out.println(&quot;Actual value of (4.650-4.250) Using BigDecimal:  &quot;+(BigDecimal.valueOf(4.650).subtract(BigDecimal.valueOf(4.250)))+&quot; Expected Result 0.4&quot;);
    		
  • Results:
    In the below results, the double subtraction is correct for (4.375-4.250) but incorrect for (4.650-4.250).

    		Actual value of (4.375-4.250) Using Double:  0.125 Expected Result 0.125
    		Actual value of (4.650-4.250) Using Double:  0.40000000000000036 Expected Result 0.4
    		Actual value of (4.650-4.250) Using BigDecimal:  0.40 Expected Result 0.4
    		

Addition operation:

  • Executed statements:
    		System.out.println(&quot; Actual value of (4.65+4.25) Using Double:  &quot;+(4.65+4.25)+&quot; Expected Result 8.90&quot;);
    		System.out.println(&quot; Actual value of (0.111+3.70) Using Double:  &quot;+(0.111+3.70)+&quot; Expected Result 3.811&quot;);
    		System.out.println(&quot; Actual value of (0.111+3.70) Using BigDecimal:  &quot;+(BigDecimal.valueOf(0.111).add(BigDecimal.valueOf(3.70)))+&quot; Expected Result 3.811&quot;);
    		
  • Results:
    In the below results, the double addition is correct for (4.65+4.25) but incorrect for (0.111+3.70).

    		Actual value of (4.65+4.25) Using Double:  8.9 Expected Result 8.90
    		Actual value of (0.111+3.70) Using Double:  3.8110000000000004 Expected Result 3.811
    		Actual value of (0.111+3.70) Using BigDecimal:  3.811 Expected Result 3.811
    		

Multiplication operation:

  • Executed statements:
    		System.out.println(&quot; Actual value of (100*0.21) Using Double:  &quot;+(100*0.21)+&quot; Expected Result 21.0&quot;);
    		System.out.println(&quot; Actual value of (100*0.211) Using Double:  &quot;+(100*0.211)+&quot; Expected Result 21.1&quot;);
    		System.out.println(&quot; Actual value of (100*0.211) Using BigDecimal:  &quot;+(BigDecimal.valueOf(100).multiply(BigDecimal.valueOf(0.211)))+&quot; Expected Result 21.100&quot;);
    		System.out.println(&quot; Using scale for Bigdecimal results:  &quot;+(BigDecimal.valueOf(100).multiply(BigDecimal.valueOf(0.211))).setScale(1)+&quot; Expected Result 21.1&quot;);
    		
  • Results:
    In the below results, the double multiplication is correct for (100*0.21) and incorrect for (100*0.211).

    			Actual value of (100*0.21) Using Double:  21.0 Expected Result 21.0
    			Actual value of (100*0.211) Using Double:  21.099999999999998 Expected Result 21.1
    			Actual value of (100*0.211) Using BigDecimal:  21.100 Expected Result 21.100
    			Using scale for Bigdecimal results:  21.1 Expected Result 21.1
    		

Analysis:

Decimal values are based on power of 2, for arithmetic operations java internally approximates to nearest power of 2 which results in above absurd results. When a exact calculation is feasible with representation of nearest power of 2 we get expected results in all other scenario we get some approximate results. The BigDecimal offers various methods for performing arithmetic operations and to the required precision.