Category: Uncategorized

Posted on

Setting up Webpack + Babel + ReactJS

I started using Webpack module bundler recently and thought I would document some of my learning. In the past couple of posts I wrote about bundling JavaScript projects using Browserify module bundlers. Webpack can be used as a replacement for Browserify; but it has some nice additional features like bundling of static files and code splitting.

This post is not meant to be tutorial on Webpack, I just wanted to describe how to configure Webpack, specifically using Webpack loaders for Bablel and ReactJS. I will show how to build a JS project using standalone Webpack and also using Webpack APIs in Gulp. The project is available on Github at https://github.com/ramkulkarni1/WebpackBlitzReactStarter

Module Dependencies

Node packages required to build the project are, of course, in package.json. If you are using above starter project from Github, then run ‘npm install’ to install all the required packages. Else make sure you install all the packages listed in devDependencies of package.json . The list contains babel, required babel presets for ES6 and ReactJS, webpack and webpack-dev-server, webpack loaders for babel, LESS and CSS.

Webpack Configuration

Webpack configuration is specified in webpack.config.js. This config file is read when you run webpack or webpack-dev-server command. Optional gulpfile.js (to build the project using Gulp) also loads this file and passes to Webpack APIs.

Here is a brief description of some of the entries in the config file – Continue reading “Setting up Webpack + Babel + ReactJS”

Posted on

Using ReactJS with Babel and ES6

I wanted to create this post shortly after the last post about Setting up ES6+Babel+Gulp, but it got delayed for some reasons. Anyways ..

Though it is not very complicated to setup ReactJS to work with Babel, there are a few non-obvious things you need to be aware of, specifically the absence of  auto-binding in ReactJS when coded in ES6. Let’s create a small NodeJS project using Gulp –

Install following packages –

npm install gulp gulp-connect vinyl-source-stream browserify babelify babel-preset-es2015 react react-dom babel-preset-react --save-dev

In addition to packages installed in the last post, here we are installing react, react-dom and babel-preset-react packages.

The directory structure is similar to one in the previous post, except that we add views folder for JSX files.

ES6ReactJSBabelTest
  -- build
  -- src
    -- js
       -- views
    -- html
  -- gulpfile.js

Gulp ‘build’ task is modified to add ‘react’ preset to babelify and add jsx extension to browserify (we want browserify to process .jsx files in addition to .js files) Continue reading “Using ReactJS with Babel and ES6”

Posted on

Setting up ES6+Babel+Gulp

ECMAScript 6 (ES6, specification at http://www.ecma-international.org/ecma-262/6.0/) has many nice features, but presently not all browsers support ES6. However you can still develop your applications in ES6 and make it run in all browsers. For this you need what is called as transpiler – which converts ES6 code to ES5, which all browsers understand currently.

One of the popular transpiler is Babel . In this post we will see how to use Node.js (https://nodejs.org/), Gulp.js (https://gulpjs.com/), Browserify (http://browserify.org/)  to compile ES6 code to ES5.

Gulp is a build tool for Node.js applications. Browserify resovles ‘require’ modules of Node.js and bundles all modules in one file. We will first use browserify to combine all our JS code in one file and then feed the output to babelify to translate the code to ES5. Structure of this sample project is as follows –

ES6BabelTest
  -- build
  -- src
    -- js
    -- html
  -- gulpfile.js

Not all the files are folders are shown above, for example package.json and node_modules folder are not shown.

Continue reading “Setting up ES6+Babel+Gulp”

Posted on

Using JavaScript Promises with Cordova

JavaScript Promises

JavaScript Promises could make asynchronous programming a bit easier. Most of the APIs of Cordova are asynchronous. So when you want to call one asynchronous API after the other, you have to nest API in the callback functions of the previous API. Many APIs also take error handler as one of the parameter to API function. At some point the whole code could become very difficult to read and maintain.

JS Promises  could make this a bit simpler. Promise is an object, which takes a function callback with two arguments, resolve and reject. Promise represent a value that would be resolved sometime in future, it is is not already resolved or rejected. The promise can be rejected explicitly or when any JavaScript exception is thrown. See https://promisesaplus.com/ and Promises on MDN for details on JS Promises. Advantages of Promises is realized when you need to chain multiple asynchronous calls. Promises can also be useful if you want to guarantee then a piece of code is executed only once. Promises are executed only once. Continue reading “Using JavaScript Promises with Cordova”

Posted on

My Second Book Published

My second book “Java EE Development with Eclipse – Second Edition” has been published. One of the reasons I did not post much on the blog was this book. I had been working on the book for the past few months and I am very glad that it has been published now.

Java EE Development with Eclipse - Second Edition - Cover

JEE-Book-Cover-2

One of the challenges writing this book was the diverse topics that it covered – Servlets, JSP, JSF, JDO, EJB, JSM, SOAP, REST, Spring, Unit Testing, Debugging and trouble shooting performance and memory issues in Java applications. Separate books could be written, and books have been written, on some of these topics.

This book explains how to develop applications using these technology in Eclipse IDE. The focus is not just on how to use different technologies in JEE, but also on setting up development environment, testing, debugging and deploying applications developed using these technologies.

The book is available on the publisher’s site at bit.ly/1GryrTd.

-Ram Kulkarni

Posted on

My blog report for 2014

As at the end of past couple of years, WrodPress has created annual report of my blog activities. The report is available at http://jetpack.me/annual-report/33403624/2014/.

Some of the highlights are –

Unfortunately I did not get much time to blog in the last three months. I had many topics on which I wanted to write on, but the work schedule was quite hectic. I hope to write on those topics in the coming months.

-Ram Kulkarni

Posted on

Configuring Apache on Mac OS X (Mavericks) for Python scripting

I spent a couple of hours today trying to figure out how to configure Apache Web Server on Mac OS X to execute Python scripts, so I thought I would document the process for my own reference.

OS X is preinstalled with Apache and Python. Apache executable (apachectl) is at /usr/sbin/apachectl and Python is at /usr/bin/python. But the configurations for Apache are at /etc/apache2, specifically in the file httpd.conf. If you open the file and look for DocumentRoot, you will find that default document root is set to /Library/WebServer/Documents.

I did not want to change the default doc root but at the same time did not want to store my scripts in the default folder. I could have created a virtual host or an alias. I decided to do the later because it is simpler than creating virtual host; and I was configuring Python for development only. So just below the document root setting I added the alias – Continue reading “Configuring Apache on Mac OS X (Mavericks) for Python scripting”

Posted on

Encrypting data with Crypto-JS in JavaScript


I have been working intermittently on a HTML5 mobile application for some time now. This application stores some sensitive date locally (it is a standalone mobile application) and I did not want to store the data in clear text. I wanted to make retrieval of data difficult to some extent, if the device ends up in the wrong hands. So the data had to be encrypted. The application code is in JavaScript, so I started looking for a JS library that can encrypt data. I found that Crypto-JS met my requirements and it was easy to use too.

Before I proceed further, I must confess that my knowledge of encryption and digital security in general is very basic. So the solutions discussed in this post may not be the best in terms of protecting the data.

As I said, Crypto-JS is very simple to use. You can use different cipher algorithms like AES. DES etc. and APIs are simple. e.g. to encrypt using AES , you would call –

encryptedData = CryptoJS.AES.encrypt(textToEncrypt, secretPhrase); //include aes.js script

In the above API, the first argument to encrypt function is text data you want to encrypt, e.g. password. The second argument is a secret phrase (also called passPhrase). This could be any text. Secret phrase is the key that is used to encrypt the data. However you will have to use the same key (secret phrase) when decrypting the data. Continue reading “Encrypting data with Crypto-JS in JavaScript”

Posted on

My Last Day at Adobe

After working in Macromedia/Adobe for ten years I decided to quit Adobe. Today was my last day at Adobe.

The last ten years at Adobe have been professionally and personally very satisfying for me. I have worked on some of the most technically challenging assignments in my career so far. Learnt a lot and put my learnings back into the products I worked on.

On the last day when I was reflecting on my journey in Adobe, I recall my interview as a candidate. Macromedia did not have an office at that time in Bangalore and I was interviewed in Windsor Manor hotel. I was the first engineer recruited for ColdFusion in Bangalore. When I joined the ColdFusion team, ColdFusion 7 release was in the final stages. I started with fixing a few bugs towards the end of the release. After that I worked on many features of ColdFusion and ColdFusion Builder in the subsequent releases.

Till a couple of months back I was not thinking about quitting Adobe. But then an opportunity came along that was so different from the way I was working in Adobe that I decided to take it up. I might write more about it later.

My best wishes to the ColdFusion team and the ColdFusion community.

-Ram Kulkarni

P.S. I joined back Adobe in June 2015.

Social