Build & pack tools for AngularJS and React

Paul Villavicencio

July 2nd, 2015

AngularJS and React are two popular frameworks used for JavaScript projects. While both of them have their benefits and drawbacks when starting a new project, how demanding is it to set up a development environment to begin using them?

In this post I briefly explore some of the existing boilerplates or startup kits and compare their features. I analyzed three popular AngularJS and three React boilerplates. While there are others, these represent some of the current ones being used. The packaging tools included in these boilerplates are either Grunt, Gulp or Webpack. The main task of the packaging tools is to ease the development workflow by compiling, organizing and packing files for development and also to prepare them for a production ready environment.

I made a small comparison table showing the support each boilerplate has for following tasks:

• Build tasks, where the code is compiled either for development or production. For development in some cases debugging facilities are added, while in the production building the code is minimized and bundled into a few JavaScript files along with other assets which are packed as well.
• Support for CSS preprocessors, some of the packaging tools include compiling styles that are written either in SASS or LESS to generate packed CSS files.
• Development tasks which include watching the source files for changes and immediately recompiling the code. Sometimes, a development server is included which in most cases allows the live reload of the code in the browser.
• Test tasks and support for automated testing tools.
• Support for compiling other scripting languages such as Coffeescript or JSX files (used with React).
• Customizability, how complex are the configuration files of the build tools. We take this into account because although projects can be based on the given templates, sooner or later there will be specific changes to be made, and if modifying the project’s original configurations is too burdensome then it will be a drag in the future.

Here is the comparison table with each of the frameworks and their respective build tools’ features:

Tags: AngularJS, JavaScript, programming, React