Defining the discipline in client side.

Software engineering deal with a processes .Yes ! steps of process that’s make a job done smoothly and productively.

Steps are :
i. Tools.
ii. Methods for managing.
iii. A quality focus.

More precisely , now a days web technologies growing up quickly and smartly.Some how we finding some robot in web development who makes our job’s easy and fast.Yes of course, also be robust and compact.So, on this basement mainly i am going to share with you the tools.That’s are NPM , BABEL and WEBPACK.

Some days ago i have talked with a non tech guy,surely sharable a musician one of my friend.
I asked him , Do you know about NPM ,BABEL and WEBPACK.
He replayed … : Oh i see, are you talking about your 3 brothers ? They are smarter than you.

No worries i know that you guys are out of box in technology and Now you can think about NPM (Node package manager).

You have been surrounded by the world,though you can grab it.

NPM is the world’s largest software registry. Open source developers from every continent use npm to share and borrow packages, and many organizations use npm to manage private development as well.

NPM talks 3 main concepts :
i.The website
ii.Command Line interface (CLI)
iii.The the registry

We are very familiar with this tools as well.Mainly we used as client side package manger by a file package.json in below.

In the 360 modern world there are 3600 products and its our responsibilities how to fit one product to every where.Right, i am gona talking about BABEL

You have one item although,you have to feed two contrasting pet.

Exactly, Babel can help you out.

In a simple line: Babel is javascript compiler.
In details: Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Example Code :
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
return n + 1;
});

From the beginning we are using third party to manage many things.In the huge and complex situation when third party becoming big its must must needed to track or manage all and on this statement i am gona to talked about WEBPACK.

No need whole factory for a small family.

If you’re building a complex Front End application with many none-code static assets such as CSS, images, fonts, etc, then yes, Webpack will give you great benefits.

If your application is fairly small, and you don’t have many static assets and you only need to build one Javascript file to serve to the client, then Webpack might be more overhead than you need.

Don’t bother about your enemy , one day he will be too old .

Old style to manage Enemy’s assets:

• Script > src > javascript file one
• Script > src > javascript file two
• Script > src > javascript file three

New style to manage Enemy’s assets:
// build-script.js
var scripts = [
‘jquery.min.js’,
‘jquery.some.plugin.js’,
‘main.js’
].concat().uglify().writeTo(‘bundle.js’);

// Everything our app needs!

When we need to use lots of client side static file like js,image , css we need to concatenate and compress our static client files anyway and managing load order , sometimes its not possible to manage manually.

Thanks