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.

After doing it for free for over a year, I got tired and my altruism started to fade. It happens. So I decided to look for a way to crowdsource the work and made some questionnaires. In exchange for 5 minutes you spend doing a questionnaire, you’ll get full access to the information. Your research time will be reduced enormously, and the quality of your decision and ensuing reduction in headaches from picking a bad technology will improve dramatically. Click here to help out.

 

do_a_technology_questionnaire

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

38 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 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.

      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
    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?

  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 xkcd.com/927 (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 my.file.name.coffee to my.js instead of my.file.name.js.

      1. I stumbled upon a project using
        app/js/xymodule.controller.js
        app/js/xymodule.model.js
        app/js/xymodule.route.js
        etc.

        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.

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=""> <s> <strike> <strong>