Comparison of single page application starters

Screen Shot 2015-01-22 at 7.28.59 pm

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 load of non-transferable 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.


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


button (1)

49 thoughts on “Comparison of single page 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 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.

      1. I found you in search of a tool like yeomen that would create Angular scaffold using gulp instead of grunt. As I know a little gulp, don’t know grunt and so far have been able to avoid it.

        1. Hi Carl,

          There are several that use gulp. It seems that any project using grunt has plans to replace it with gulp.

          In an effort to make this more complete and accurate I’ve started asking people to contribute some knowledge by completing a questionnaire before accessing the doc. If you would like to participate and see all the gulp options, just use the link above and share what you know about something.

  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

  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:
    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 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 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 after you installed it?
      And to which framework did you end up switching to?

  10. Hi Dan,

    i just found your comparison of application starters and I think, you and some other contributors obviously invested a huge amount of time and the result looks great.

    However, this matrix and the evaluation, counting the number of ‘Yes’ reminds me of the good old feature phones. You know, a 2005 Ericsson phone is obviously better compared to the iPhone 6 because it lacks WAP, a shortwave radio and Push-to-Talk πŸ˜‰ Dont take me too serious on this one.

    I tried some of these application starters and I’m still not sure if even one of those is really worth using it. I mean, how many time do you really save?

    Some of these use a really flat folder structure with 100’s of Controllers in a single folder, or worse, dot-Notation in file names and a crap-load of other DON’Ts.
    Some of the developers could really use some years of Java&Maven, learn how to organize files and folders and apply some Convention-over-Configuration patterns.

    I like your intention of the poll but I think, you made the wrong conclusion (paying a developer for another great application starter). It reminds me on (replace Standards with application starters).

    I personally don’t need hundreds of node_modules pre-installed. In our company, we will create a tempate of our own. It will be strictly KISS-conform and only need a few dependencies, just the basics. New stuff is released every day, so we can adopt the template from time to time.

    I bet a great share of those application starter has been abandoned. What’s difficult to measure is a good community, fast response times in forums and bug trackers, regular updates, lightning-fast security updates, fast adoption of new versions, etc.
    You can only have all this with sponsors and some community contributors, just like node.js has been developed. Have a look at ionic or meteor and you can see how it works.

    Just my 0.02€

    1. Thanks for the comment.

      This effort serves a couple purposes…

      First, it enables a conversation that is otherwise hard to have. With alternatives (e.g. dots in file names or not) presented side-by-side, along with each’s rationale, people can at least understand each other’s choices rather than taking seemingly ungrounded religious postures.

      Second, it shows shoppers the trade-offs. The trade-offs pages have the real value in my opinion. These things are soooo complicated, and the decisions are so consequential, but there just hasn’t been an easy way to see in advance what it will cost you to pick something. The colors and percent numbers depend on my subjective point assignments, but you can disregard those if you want and just look at the lists of trade-offs which are objective.

      You make a great point about sponsorship being necessary for sustainability. Starry eyed project creators probably don’t think about that in the beginning, and eventually, most of the projects wither and die. I’ve been thinking about whether github project leaders could be elected to terms. I can’t really see why that wouldn’t work. I also think about the sustainability of this comparison. I’d love for it to have hundreds of contributors. It’s not that hard for me alone to scan github emails and enter new facts as I read about them, but at scale, this thing could really be useful. If you want to chip in, let me know.

      I agree that some characteristics are both important and hard to measure. That’s unfortunate, but true. I need to look into the github api some more. I think it’s possible to automatically read a few things, but ‘goodness’ of community or documentation is a tough one. The comparison isn’t perfect but as long as it’s better than the alternatives that’s good enough for me.

      Unfortunately, the xkcd cartoon is going to play out whether we like it to or not. However, the next project can be made either to provide new-tech-of-the-day 11,234,567 or to solve the real problem. In my mind, people don’t really want scaffolders. For a lot of people, “cp” works just fine. What I think people want and need is to make better programs faster. Ideally, everyone should be doing things the way the world’s best expert would do them if he or she were on the job. I imagine a set of open, expertly-produced reference applications on a full spectrum of complexity conforming to a single set of practices that people can consult, manually but with little pain and lots of documentation, when making their own.

      That’s my dream anyway.

    2. Hey, I forgot to ask something. Why don’t you like to have dots in the file names? I’ve been trying to collect all the rationale behind naming conventions. I found one problem with dots when a coffee-to-javascript transpiler changed to my.js instead of

      1. I stumbled upon a project using

        I want to achieve true reusability, as easy as possible. For this reason, all files for a local module “mymodule” should be located under backend/modules/mymodule/, e.g. mymodulecontroller.js, mymodulemodel.js
        There’s nothing easier as grabbing a complete folder(/module/etc.) and use it in another project. In this case, also dots are no problem, like backend/modules/mymodule.controller.js, etc.

        Also I’d like to have the possibility for more then one controllers in a module and all of these should have meaningful names, like AuthController.js or LegacyStyleRequestParser.js. There could also be a subfolder for controllers, another one for modules, etc.

        So at the end of the day, I’m able to copy/paste these modules or create private modules or something like this.

        We also decided to roll our own Nexus NPM repo, so there won’t be much local modules around. We did the same with Java/Maven/Nexus before, a private/proxy npm will hopefully make things easier.

        BTW, did you ever got this CleverStack to work? It’s spitting some nasty errors on me. It doesn’t play well with node 0.12 and some of the clever modules simply fail to install, i opened several tickets against clever-cli. Seems to be a part-time project of two clever guys πŸ˜‰

        1. You’re not alone. A lot of people like the idea of copying a folder from one app to another and having it just work. I think most of the good starters try to work this way. The File Organization section of the spreadsheet covers that. I think meaningfully-named things and multiple controllers make sense to most people too. I’m not sure what’s prevented you from doing that. 19 starters organize by module first. 17 of those contain subfolders for type-of-file.

          I’ve put off research into Cleverstack in hopes somebody will handle it for me πŸ™‚ I agree that staffing is a key matter with cleverstack troubles. I’m sure the system works for them and a lot of people. But so far, not for me. It’s tricky to quantify this with YESes and NOs, but if you can’t get past things on your own, then all the other benefits don’t really matter.

          When that happens, I switch to the next highest scoring option which today is jhipster. At the moment, I’m stuck getting the sample app to work at all. But the video tutorial of it looks great :/

  11. please publish this content.
    You’re talking about web but you don’t understanding the basic?
    please publish it and turn it more accessible

    1. Hi Daniel. Thanks for your comment. It’s all published and visible to the world. So I’m not quite sure what you mean. I don’t think many people could ever create a web app better than Google Spreadsheets. I certainly couldn’t. That thing is freaking amazingly sophisticated! But if you have any suggestions for making my spreadsheet easier to use, let me know.

    2. Hi @Daniel Magalhaes,
      I believe @Dan made the spreadsheet private until we do the 5 minute questionnaire (please correct me if I’m wrong Dan). I’m about take 5 minutes out to contribute.

      Anything I can do to help!

      1. Thanks, Justin

        Yeah, since writing that last comment I’ve taken a new approach to maintaining knowledge inflow and making this resource sustainable. So far I’m pretty happy with it.

        Be sure to check out the new, improved reports too. Just click a colored cell on one of the trade-offs sheets then click the Zoom in menu item.

        1. Hi Dan, I was actually referred to your comparison via the book AngularJS by Example. However, I am unable to access your spreadsheet. I would love to have a clearer understanding of the starters available. Thus far my experience with Yeoman and Foundation has been less than great. Thanks.

          1. Hello Jenn,

            Thanks for your interest in the project. I’ve made the document accessible to friends and contributors only for now.

            I have tried several different approaches but haven’t hit on anything that will get people to chip in even a little bit of their own knowledge, thus making the project self sustaining and it didn’t sit well with me to be the only one giving while everyone else just takes. So until I figure out a way to do it, the data will only be accessible to folks who are willing to lend a hand with the research.

            Until November, I will be fighting to get Bernie Sanders elected president and not doing research on web development technologies. Please go here and help

  12. Dan – I see that you’ve made the doc inaccessible unless a user has been granted access, and it seems from what you’re saying that you need to contribute knowledge in order to get access? Is that right?

    If so – that seems slightly counter intuitive for a comparison doc meant for beginners to get involved in the process and to learn the components that each of the generators offer.

    I can see making something like that working better in an expert community, but I don’t think that’s your user-base here. Even then – the web is all about open content, not forcing people to contribute in order to benefit. Open source works because people WANT to contribute, not because they’re forced to. The maintainer of that is the one allowing or disallowing changes. Currently that’s you, but I’m sure you could hand that responsibility to a trusted individual if you wanted.

    Anyway – just my two cents. Already voted for Sanders, and hope you and he make it to the white house!

    1. Hi Evin,

      I’m open to ideas. The ones I’ve tried haven’t worked.

      First it was just a spreadsheet that anybody could edit. Besides posting links to it, I wrote to people and asked them to edit the columns of their technologies. Very few did and none did it completely.

      Then I tried making it freely accessible with a note at the top asking for contributions. I got nothing.

      Then I tried granting access to anyone who asked for it, but including a request for help with the grant. I got nothing.

      Then I granted access only in exchange for contributions in the form of 10-minute Google questionnaires. I got some, but with widely varying levels of quality.

      Then I offered the alternative for beginners to lobby the experts by writing them a note asking them to contribute instead of doing the questionnaires themselves. Zilch.

      The contributions I did get were as Google form responses. So I had to manually scrutinize each answer and decide whether and how to edit the data. It was a pain and I spent as much time doing that as the person who did the questionnaire.

      Then I made contribution easy by making the head-to-head reports accept individual corrections to single facts about technologies having particular benefits. I got exactly one correction which was actually a new technology suggestion. I was really hopeful about this one because I knew people would be keen to defend their favorite tools when matched up next to others.

      All this time, I sent email to technology owners as soon as I learned of their technologies. With the few exceptions of very obscure technologies that wanted to show how their new technology was better than the incumbents, almost nobody wrote back.

      I think you can see the problem here. Beginners can definitely benefit from this resource but can’t contribute because they don’t know anything yet. Experts can contribute but they can’t benefit (or so they think) from the resource so they don’t.

      If nobody contributes, the resource cannot survive, and I’m not going to do it all myself.

      I was mostly disheartened by attempt #5 – where I asked beginners to simply lobby an expert asking them to submit a questionnaire describing their technology. This is a thing that is entirely within the ability of anybody, but not a single person did it. This, to me, was the height of selfishness and the opposite of what I see as the spirit of open source. People were unwilling to give even 5 minutes to the project while I had given it over a year of my time. I don’t really want to help people who don’t want to help society. Most people are short-sighted and not inherently altruistic or able to see the self interest of serving society.

      Bernie Sanders could be an exception to that one, but he probably doesn’t know Meteor πŸ™‚

      1. I requested access around to Jun 2015. I think this project is very ambitious due to the transcient nature and overarching scope of frontend tech. There was just too much info to digest and evaluate (before even considering how to further contribute). Beyond a certain point, it can be too difficult to compare two different tech with just a few metrics and words, even for an expert.

        Perhaps you can try running it as a kind of stackexchange website if you want a better match of contribution and content perusal. Having a Q&A site will also make it easier for people to communicate their opinions beyond a spreadsheet.

        Another way would be to simplify the information into categories, groups of compatible technology (perhaps as a measurement of affinity), identified by the respective application starters that are available (on github etc) or possibly Plunker examples.

        On my end, I’m currently looking into frontend compatibility with Rails. So I found out that Rails + React, Rails + Angular seem viable, but Rails + Angular + React is not so much, and I am still looking for something that is a React-compatible equivalent of Angular, on top of what that can be done with just Rails + React.

        1. Hi. Sorry for the delay. I just saw this. Usually I get a notification. Anyway, thanks for the feedback. I’m not crystal clear what stackexchange websites are or the Q&A solution you’re picturing. My first reaction is that it sounds quite different from what I’ve been building.

          My collection does have a notion of category, but it really stresses that everything is in one big category because any technology can deliver any benefit. The goal is to ask a user what benefits he wants and then tell him the best technologies to combine in order to get them.

          Rails, React and Angular sound like good bets. I hope you find a good solution!

  13. I’m quite keen on not only accessing this but helping maintain/update it. I have knowledge of a number of different setups. Let me know.

    1. Hi Michael, thanks for the interest in the project. If you haven’t yet, just send a request for access to the Google doc and you’ll get instructions for what to do next. Let me know if that doesn’t happen.

Leave a Reply

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