Comparison of AngularJS application starters

I decided to re-enter the world of app development after some time away from it. So I needed to decide which way to do that. Unfortunately there are lots of those and each one requires its own unique learning investment. I always thought single-page apps were great and full page reloading was lame. So that narrowed things down. I watched a few AngularJS videos and decided it was as good a bet as any. I didn’t want to do things like a beginner would. I wanted to do things like an expert would. I also wanted experts to do 90% of my work for me for free, because this is awesomely possible in software development. So I needed to pick a set of best practices for working with AngularJS. In app development, best practices take the shape of generators and examples. Unfortunately, there are lots of those too and I was faced with yet another decision. So I searched around and took structured notes and before long I had this giant comparison spreadsheet.  Here it is (it looks bad on a mobile device, unless you have Google’s Sheets app)…

Comparison of AngularJS Application Starters ~3 MB

Light version of it without popup notes or comments ~530 kB

I’m sure I’m not the only one to confront this situation so if you are too, I hope it helps and saves you tons of time.  If you know any of these starters or in any way want to help improve the document, just let me know and I will add you as an editor. Enjoy, Dan

25 thoughts on “Comparison of AngularJS application starters”

  1. Thanks, really handy info to have. Bit unwieldy to take in on one massive spreadsheet though. Angular-fullstack-generator 2.0 is due for imminent release.

    1. Hi Andy,

      Sorry for melting your computer :)

      A pdf… hmm. Most of the value is in the notes which pop up as you roll over the cells. Usually Google Spreadsheets does a good job of rendering a printable version of spreadsheets with popup notes nicely converted to footnotes, but this one is turning into a 200 page tome. I’ll think about alternatives though. Thanks for the django link. I would love this to represent options from all different areas. A web app is a web app if you ask me. If you or anyone you know is an expert in django and wants to help out, I’d be happy to include it and showcase its advantages.

  2. I am thrilled to see so many people checking this out. I had 60 views yesterday and 6,000 today. Oh my!

    I’m happy to leave it up but not so much about monitoring and correcting the inadvertent edits. So I changed it to read only.

    If you want to chip in, I’d love the help. Just send a message to angularstarters@dancancro.com and I’ll add you to the list.

  3. I still can’t find a generator that fulfills all my dreams – browserify, express, stylus, jade, gulp, angular, coffeescript, karma, mocha, sinon, chai. Seems sooner or later one has to build he’s own generator

    1. Wow, you really know what you want. Can you name any specific benefits provided by these tools? If you can think of specific reasons why you want to use these things, I’ll add new rows to the spreadsheet and maybe that will bring them to the attention of the generator makers. I’m trying to keep actual brand names out of the first column, but I’m happy to add more generically named benefits that I left out.

  4. Realizing that likely lots of readers are new to AngularJS (or alternatives) you might want to explain to the audience what a generator is, and why its beneficial to use or look into.

    I imagine it does what an IDE aught to do whilst i type: generating the relevant code stubs for given common event scenario’s. Correct?

    1. Good idea. And you’re right. You’ll see a few related terms thrown around: generator, scaffold, template, boilerplate, seed, skeleton. When you start a new project, you could just start with nothing and create files one at a time. Or you could get some help. You can copy or git clone a set of files organized into folders and then modify them and add to them. That sort of original set of files is often called a seed, template, or maybe skeleton. I’m not sure about that last term. Or you can do one better and run a mini program that contains some questions and it will create files for you according to your answers. That mini program is usually called a generator and the files it creates are usually called scaffolding. The questions are up to the one who makes the generator. So it could ask you to pick from one of a few scenarios or it could ask you to type in names of features or something. But the main thing is that it will provide you with starter files fashioned in a certain way based on experience according to best practices. The problem is that every generator is created by a different set of experts and a lot of times experts don’t like to agree. This spreadsheet is an effort to encourage agreement so that we beginners don’t have to spend all year trying to pick a generator among the dozens of them.

  5. Great comparison. Are you planning a TL;DR writeup of your findings? Viewing this information in article-form might be more digestible for most people (myself included). I would also be curious which starter you choose/chose and your results/advice for working with it.

    1. Thanks, Ben. Yes, I will post something less overwhelming as soon as I have some kind of useful appraisal of them. So far, I haven’t seen any insurmountable material distinction between them to justify having more than one of them and forcing everyone to agonize over the comparison or sacrifice functionality. I’m still waiting for someone to tell me why it’s better to have more than one of these things. While the majority of responses from the survey indicate people want these groups to work together on just one great generator, 18 people still think it’s best to have a bunch of half done ones.

      Just put in your email address to get blog updates.

  6. Hi Dan,

    Nice roundup of starters/generators. I don’t think the 18+ people want to have a couple of half-done ones, but rather see some diversity. I agree the landscape is now too broad, but I really would not like to see just 1.

    Let me give you a couple of reasons why, in no particular order:
    1. coding style. Not everyone likes everything to be OOP, or pure functional, or (fill in your perk here..)
    2. sheer size. If you are building an app, it might be, you want to review every line of code you add. In some cases this is even mandatory! (accounting, government things, security)
    3. diversity. Not everyone want to build an app with bootstrap, or foundation or gumby or ….
    4. tooling, There are valid reasons to choose one tool above another. You can’t expect an boilerplate to embrace all the tools around.
    5. customer requirements. I don’t think this needs elaboration?

    This are my main issues, but there are probably loads I didn’t think of right now.

    1. Hi Sander,

      Thanks for the feedback. It got me thinking.

      To help make them easier to read, I’ve organized my answers to the arguments in a separate page of the spreadsheet here and a slightly more readable version here.

      My answers to your points are located as follows
      1. coding style – Argument A3.d
      2. sheer size – Argument B3
      3. diversity – Argument A3.d, A6
      4. tooling – I would like to know what your reasons are and add them to my comparison if they’re not there yet.
      5. customer requirements – Argument A6

      If the others come to you, let me know.

  7. Hi Dan,

    I think we have to agree that we disagree ;)
    I can follow your thoughts, and your theory sounds great.
    If people would work like that, we wouldn’t even had this
    discussion! There would probably no angularJS either.
    Everyone would blindly follow the consensus, decided by the majority. That is a very scary thought for me!

    Bet back to your issue. There are a lot of reasons why you can’t create a single starters set. A lot of them are technical.
    but the most important one is this, if you would combine all the starters/boilerplates/etc into one, you would get one big fat one, with many, many, many options.
    Somehow you have to manage that options. This will lead to the fact that this ‘ideal’ generator will get an steep learning curve, and wasn’t that the idea of the thing to begin with? To get rid of a learning curve?

    Then my tooling argument. the most used at the moment is grunt, with a couple off add on thingies. However, there are a lot of of that are using something different. A lot have moved to the next best thing, on which the consensus seems to be that it’s gulp. But there are also a lot of people who need to integrate the new shiny angularJS stuff into their existing system, probably be build by something entirely different.

    I can go over your list and poke holes in almost all your reasoning’s, on which you probably will disagree.
    I will not go into that recursive loop with you. It wil be fun (for me at least) but nothing good will come out of it!

    with kind regards
    Sander

  8. Hey Dan,

    The SPA comparison spreadsheet is great, thanks for the effort.
    I’m seeing that you actively still maintain it, is that the case indeed?

    I was wondering how come you didn’t add the following frameworks or platforms to the spreadsheet:
    1. http://krakenjs.com/
    2. http://keystonejs.com/
    3. http://sailsjs.org/
    4. https://www.meteor.com/
    Was there a reason for not including them? as they all seem to be great mature projects, each with its own set of features and target audience. You’ve pointed out in the spreadsheet survey to not begin work/fork another starter as there are already too many, yet you left out those important and very mature options for the reader to review.

    Just wondering and would like to hear what you think.

    1. Hi. Thanks for the great feedback. Yes, I do continue to maintain it. What I’ve done is subscribe to messages from all the github issue lists and Google Groups and stackoverflow tags of the known projects, and whenever I learn about a new possible capability or benefit or deficiency, I add one more YES or NO or row to the spreadsheet. The rate I’m adding more columns seems to have slowed down, but that’s only because I’m not learning about them, not because my mind is closed to them.

      The only reason I haven’t included more starters or facts about starters is that I’m just one person with only so many hours in the day and nobody is paying me to do this. Since the starter designers themselves could do this a lot faster than I can, I’ve asked people in charge of each project to help fill in the details, but the response has been underwhelming. People are busy. Time is limited. The personal payoff of comparing one’s project to others is not clear to them.

      The collection has a couple of sails-based starters, albeit without much info. I need to learn about the others in your list. As I understand it, meteor isn’t an application starter per-se but an alternative framework in which to make them. My vision of this is for it to be all-inclusive. The only constraint is my limited, one guy manpower.

      Contributions are welcome :)

  9. Hey Dan! Respect for the amazing spreadsheet :)

    I am a beginner, and it’s really a maze. So I started to install mean.io to discover that this is the thing I NOT want… So after some Googling I found your spreadsheets and I hope that this will get me where I want. Mean.js will be my next thing. Thanks, blocki ;)

    1. I’m glad you liked it. I’ve had some encouraging indicators that cooperation among these groups may be possible, plus hints from the AngularJS people that they like the idea too. I’ll post more here as the saga unfolds.

    2. Hi Blocki,

      I’m one of the top core contributor for MEAN.JS and MEAN.io and as you may have noticed they branched out to different style of frameworks.

      I’m wondering what is it that you didn’t like with MEAN.io after you installed it?
      And to which framework did you end up switching to?

Add Comment Register



Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>