Build & pack tools for AngularJS and React
Paul VillavicencioJuly 2nd, 2015AngularJS 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 |
One thought on “Build & pack tools for AngularJS and React”
Leave a Reply
Categories
- Categories
Archives
- October 2019 (1)
- March 2019 (1)
- October 2018 (1)
- February 2018 (1)
- August 2017 (1)
- December 2016 (1)
- June 2016 (1)
- February 2016 (1)
- December 2015 (1)
- September 2015 (1)
- July 2015 (1)
- March 2015 (1)
- December 2014 (1)
- September 2014 (1)
- August 2014 (1)
- May 2014 (1)
- April 2014 (1)
- January 2014 (1)
- November 2013 (1)
- September 2013 (1)
- August 2013 (1)
- May 2013 (2)
- March 2013 (1)
- February 2013 (1)
- June 2012 (1)
- April 2012 (1)
- March 2012 (1)
- February 2012 (1)
- January 2012 (1)
- November 2011 (2)
- October 2011 (1)
- September 2011 (1)
- August 2011 (1)
- July 2011 (1)
- June 2011 (1)
- April 2011 (1)
- March 2011 (3)
- January 2011 (1)
- December 2010 (1)
- November 2010 (2)
- October 2010 (1)
- September 2010 (1)
- August 2010 (1)
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...
Excellent. Keep going