Demystifying Front End

Hello everyone. In this blog i am going to explain the most common and mystic words of front end development. This blog is for everyone who wants to get started with UI development. So let’s get started..

JavaScript

It’s a client side(browser) programming language which is used to make the webpage more dynamic.

Css

CSS is commonly used to style your webpage. To make webpage more attractive and user engaging.

What is ES5, ES6, ES7 and so on… ?

Don’t be afraid of these terms. They are just versions of javascript each one will have some additional features like spread and rest operators, async and so on.

What is SASS, LESS etc?

These are all css preprocessors. It is used to make your life simpler. These preprocessors will enable you to define mixins and to use control statements while writing CSS. This will ultimately will be compiled to css before deployment.

What is Babel?

Babel is a javascript compiler which will convert the higher versions of javascript to lower version of javascript. But Why? because not all browsers supports the newer version of the javascript. You don’t want your application only run chrome, do you? So the process of compiling ES6 to ES5 is called transpiling.

How to put all these things together?

So the common question is how i put all these together. So i can easily get started with the development using the latest tools. The answer is very simple Webpack.

Webpack

Webpack is a bundler. It will bundle your javascript and css and other static assets so you can easily deploy it to the server. So how webpack is doing all this transpiling, compiling css and bundling all other static files? It uses corresponding loader line node-sass, css-loader, babel-loader, file-loader etc.

So webpack will try to compile your javascript files which you have mentioned in the configuration using babel loader. If it come across any css imports it will use the corresponding loader to compile and minify the files(based on the configuration). You can use normal css as well as sass or less. Then all the images which are used in your application will be also be bundled and versioned.

FYI: React and Angular uses webpack.

Conclusion

You can make use of webpack based on your needs. you can also use html preprocessors like pug, ejs, jade etc. You can use this simple boiler plate to get started with webpack.

Thank you happy coding…..