About Webpack

Webpack is a bundler of components. It helps to bundles images, javascript, css into desired set of output

Apart from this Web pack helps to send parameters to javascript transformation to convert packages for production or development mode of components.

Javascript Bundling

In a development environment, there will be lots of javascript file for each component or module. When we move those into production as is, it will have a performance impact. Browser can only make less than eight parallel connection or concurrent calls to a proxy/host. If we have more number of files that will result in delay in loading a page (after 8th request it waits for a request to be completed before it starts 9th requests).

Style Bunding

sass-loader, less-loader, style-loader are used to transform sass/less/css files to css.

Sample: 

  { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") },

  { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }

Extract Text Plugin is used here to keep the CSS output in a separate file. We can define those in plugins

 plugins: [

    new ExtractTextPlugin("css/sample.min.css"),

    new webpack.optimize.UglifyJsPlugin({

       output:{

        beautify: false

      }},

    ),

    new webpack.NoErrorsPlugin()

  ],

React Transformation

Babel is used transform jsx to js. 

{ test: /(\.js|\.jsx)$/, include: path.join(__dirname, 'client'), loader: 'babel', query: { presets: ["es2015", "react", 'stage-1'] } },

  

Presets here is the list of plugins babel supports for transformation currently babel has stage-3.

Recommendations

• Reduce the number of static files as much as possible on production environment. This can be easily achieved using WebPack
• Have static files on a separate web application than the actual application and set expiration of static files desired duration so that it 
• Increase the parallel connection for application
• Take static files from cache
• Minfication of javascript helps to reduce the size of the javascript file. This can be done by Webpack.UglifyJSPlugin.
• Compress
• Mangle (Transform all local variables into character variables dynamically)
• Beautify (To reduce the white space)
• Comments (To remove/preserve comments) 
• These are the option available in WebPack Uglify JS Plugin
• Images, Sprite-WebPack helps to create a sprite image from sets of images.
• Use CDN for common javascript packages like Bootstrap, jQuery

Sample: https://github.com/hariram302/react-kickstart/blob/master/webpack.config.dev.js

NPM Package

NPM is package manager for JavaScript, NPM Manager helps us to find, store JavaScript packages. There are lots of open community building modules which helps to build application quickly. Any components build to be used by NPM requires a package.json, which helps us to define 

• Name - Name of the package
• Version
• Dependencies - Packages which are required to consumed by the application
• devDependecies - Packages required for development
• OptionalDependecies - Packages required for development, these are marked as optional when we execute npm install. If the package is not available npm install will fail.
• Scripts - To execute the command on package lifecycle

Sample Package.json for React Application

{

  "version": "1.0.0",

  "name": "testapp",

  "author": {

    "email": "hariram.p@gmail.com",

    "name": "Hariram P"

  } ,

  "private": true,

  "license": "MIT",

  "devDependencies": {

    "babel-loader": "6.2.4",

    "babel-core": "6.18.2",

    "babel": "6.5.2",

    "babel-preset-es2015": "6.9.0",

    "babel-preset-react": "6.11.1",

    "react": "15.2.1",

    "react-dom": "15.2.1",

    "webpack": "1.13.1"

  },

  "dependencies": {

   

  },

  "scripts": {

    "build": "webpack --config webpack.config.js --display-error-details"

  }

}

React Redux Form Validation

React Validation

React validation can be easily done using React Redux Validator which will help us to add validator a page with ease.

npm install react-redux
npm install redux-form

Field

Each field need to be decorated with Redux Form Field,

Mandatory fields are

• name (Name will be used to add validation)
• field (Control reference for Redux-Form control to get added into form control)
• component (Rendering the control, binding Redex references, and error notification)
• Decorated inside a form

React Field exposes input and meta object which contains, which can be used to display error messages

Input (which add's following client events)

• onBlur
• onChange
• onDragStart
• onDrop
• onFocus

Meta: (Redux Form properties)

• active
• valid
• touched
• error
• invalid
• visited
• form
• error
• dirty
• autofilled
• submitting
• submitFailed
• pristine

Custom Control decoration with Field

renderField = field =>

        <formfieldscontrol
            name="name"

            field={field.input}

<input

            {...this.props.field}

            name={this.props.name}

Input Control decoration with Field

<input
            name=
            {...field}

Redux Form

While exposing redux form ensure a unique form page name, validation method and warn message passed.

export default reduxForm({

  form: 'CustomerPage',                 // a unique identifier for this form

  validate: CustomerPageValidation,     // <--- div="" function="" given="" redux-form="" to="" validation="">

  warn: CustomerPageWarn                // <--- div="" function="" given="" redux-form="" to="" warning="">

})(CustomerPage);

Sample

https://github.com/hariram302/react-kickstart/blob/master/client/CustomerPage.js
https://github.com/hariram302/react-kickstart/

How to setup Proxy Git Repository

Most commonly on Continous Integration, we need to take latest of npm packages which might not be a idle solutions.

The best way is to have a proxy repository which can help to do quick download of npm packages. There are two ways of doing

1. Setting up GitHub Enteriprise using Couch DB which mimick actual git hub.
2. Setting up a proxy which acts as a private git repo which can download only if the package is not available in proxy.

Sinopia

Sinopia is an application acts as a proxy GitHub, which uses express as web server.

Prerequisites

• Node JS (NPM Package manager)
• Python 2.x (above 2.5 and less than 3.0)

Recommend Action

• Define Python path in System Environment variable.
• Define npm and npm cache folder to specific folder instead of user profile folder. 

Setting up Sinopia

npm install sinopia -g sinopia 

This install in global packages under sinopia

Run sinopia from command prompt which starts the server in localhost: 4873

Accessing Sinopia

npm set registry http://localhost/4873 

Which register sinopia as npm repository, if we try to execute npm install for any other packes you will be able to see localhost:4873 is called to download package.

We will able to see the package download in sinopia command prompt. If the same package is download again in sinopia command prompt you will see no download

Changing port/Exposing to external machines

• Open full.yaml add
• listen: http://localhost:333/ to run on different port
• listen: http://<serverip:333>/ to expose as server

Setting up Sinopia as Windows Service

• Download WinSW and rename that as sinopia-winsw
• Create a configuration file in c:\sinopia, named sinopia-winsw.xml with the following configuration xml sinopia sinopia sinopia node c:\sinopia\node_modules\sinopia\lib\cli.js -c c:\sinopia\config.yaml roll c:\sinopia\  
• Ensure right folder is set for arguments and working directory.
• sinopia-winsw.exe install
• To install
•  sinopia-winsw.exe start
• To start the sinopia as windows services which can avoid command prompt need.

https://github.com/rlidwka/sinopia/wiki/Installing-As-a-Windows-Service