Updated 31 January 2017
The need for Angular 2 quickstarters
There’s an old dictum (not less than 2-3 years, which makes it really ancient in the software development industry): A good developer is a lazy developer.
The idea of project seeders, bootstrappers and generators is not new, but with the arrival of Angular 2.0.0 “proprioception-reinforcement” last week (I wonder how much time this second zero would last Note from a future me: it only took 9 days), the need for a solid boilerplate project has not been any greater.
Angular 2 brings with it a set of prerequisites: libraries, config files, bundlers, project structure. It’s (ideally) built with TypeScript which requires some more transpilers. There’s a “dev” mode and a “production” mode. Heck, there isn’t even a single angular.[min.].js file to reference to. There are zone.js, shim.js, Reflect.js. And the list of orchestration stuff goes on.
As Angular is growing into a full enterprise maturity level, there’s an ever growing need for proper linting, unit testing, end-to-end testing, and more. We want the dev cycle to be as short of possible, from the moment we hit Ctrl+S (sorry Mac guys for forgetting how it’s called on Macs) til we see the result on a page, or the bug to appear, or the code style cop to alert us.
So I quickly googled for an Angular quickstart project and got a bit overwhelmed with the sheer amount of boilerplates, recipes, quickstarters, bootstrappers, generators, scaffolders out there. The problem though was filtering the good and relevant ones, since some are old and not maintained, some have a broken setup and some are just not good enough as a baseline.
The most relevant and up-to-date quickstarters
I put together a list of what I think is the crème de la crème of Angular 2 quickstarters / boilerplates.
I think this list is a decent selection of repos you can use for a good baseline Angular 2 app; each comes with its own strengths.
What I did make sure is that these projects are up-to-date – have been constantly maintained and cover the latest official Angular 2.0.0 release.
Note: please do correct me if I’m wrong in any of the details below. Under no means this is guaranteed to be 100% accurate.
> > Here is a full static capture of the table since it might be hard to scroll across < <
You might be wondering how does that list help you – if it all, it seems to just add more to your Javascript Fatigue.
So here’s my brief recommendations / insights:
- If you need a full stack solution, rich Angular 2 together with a NodeJS or Go backend, go for generator-ng-fullstack or FountainJS. They are both excellent. FountainJS seems to be more thorough though.
-
If you only need the client side Angular framework (but need it robust!) go for either angular-seed (if you’re bold enough take the angular-seed-advanced which is supposed to be that plus plus) or – a very decent option today – the original Angular CLI which is very good, with full production build and AOT support.
-
If you want to see a solid sample project, including lots of component samples, go for ng2Boilerplate.
Help! How would I know if I need Webpack or SystemJS module system? which one is best?
The TL;DR version: it doesn’t matter much. Although they work differently, they both do a great job and with most quickstarters above you’d have a decent project that works well both on your dev machine and on prod (each one of them with its unique requirements).
Final note: As I said before – please correct me if something’s not accurate; please also send me more quickstarters if you come across them but please do so only after checking that they’re up-to-date with a production release of Angular 2 and work properly.