Getting Started With Webpack

On a basic level, webpack is a build tool.  A build can be described as converting source code files into standalone artifacts that can be run on a computer. What webpack does, is bundle modules used within a frontend application into a single file. So what does this have to do with javascript? When working with javascript, there are certain tasks that you do on a regular basis (especially if you are building a large scale application). Things like file concatenating and minification of javascript and CSS files, running tests, linting etc. The reasons why we do these is so our javascript applications are performant. By having a build step we can solve issues like multiple web requests, code file size, file order dependencies, code syntax checking(linting) and many more. Having a build step mitigates these problems related to development.

Webpack is just like any task runner(like gulp and grunt). Setting up a task runner in your project will enable you to do things like watching file changes, concatenating/minifying files, prefixing files for different browsers, linting Javascript, and module loader order. What makes webpack special from other task runners is that has something called loaders. Loaders can transform files from a different language like, CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript( one less http request )!  Read More

Bower Fundamentals

As a frontend developer, there is one thing you cannot escape from. That is integrating third party libraries into your project. Need to use jQuery, Underscore, Bootstrap? You have to download their libraries. Our applications are a full of these imported libraries. They help us to get our day to day tasks done quickly and effectively. 

What Bower does is help us quickly get those libraries into our projects, which drastically reduces time needed to go to third party sites to download them (involves many manual steps). Using the command line, we can delegate that tasks to bower and it will get all the files we need into our project, ready to be used.  Read More