Background image

Build & pack tools for AngularJS and React

July 2nd, 2015

reactangular

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:

Features ngBoilerplate Angular gulp browserify boilerplate AngularJS-Boilerplate React App Boilerplate React Starter Kit React-starter
JS Framework Angular Angular Angular React React React
Build tool Grunt Gulp Gulp Gulp Gulp + Webpack Webpack
Build tasks
Development build build build, run dev server build build build, run dev server build, run dev server
Production build build to deploy build to deploy build to deploy build to deploy build to deploy build to deploy, run server
CSS Preprocessors LESS SASS SASS LESS, SASS
Development tasks
File watch Yes Yes Yes Yes Yes Yes
Dev server No Yes Yes No Yes Yes
Live reload Optional Yes Yes No Yes Yes
Test tasks
Tool Karma Karma, Jasmine Jasmine
Other script languages support Coffeescript JSX JSX JSX, Coffeescript (optional)
Customisable
Configuration file single file modular by tasks single file single file single file modular by target
Extra features Remote debugging tool browserSync Remote debugging tool browserSync Remote debugging tool browserSync
Tags: , , ,

One thought on “Build & pack tools for AngularJS and React

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest comments

Tapio Nurminen on Vuoden 2013 kuntakartta SVG-muodossa

Kartta on vapaasti hyödynnettävissä, mutta lisenssiehdot kannattaa varmistaa Kuntaliitolta.

Arvi Leino on Vuoden 2013 kuntakartta SVG-muodossa

Kartalle on latauslinkki. Onko kartta vapaasti hyödynnettävissä esim. CC By 4.0 käyttöluvalla? ht...