Keeping things simple, the JavaScript front-end version

Few days ago I had a short discussion about an idea for a webapp (publicly available, commercial, you know - all the usual stuff). As I am doing a lot of stuff in web nowadays & I've made few SPAs with different libs recently, I was asked:

"Which SPA library / framework would you use today?"

My interlocutor was utterly surprised with my answer:

"The truth is, that in at least 80% of cases, I wouldn't use any. At least not to build a full-fledged SPA, maybe just to structure the code / handle events / manage dependencies / etc."

Pretty odd, for a declared fan of Angular, ain't it?

Yes, I may be a fan of Angular, Flight or React, but first of all - I'm a zealot of simplicity. To be very honest, you may need an SPA if:

  • you have a dashboard-style application with widget-style controls
  • your application's layout is highly configurable (composable) with metadata
  • you need a wow-effect of an application that doesn't do full page refreshes (native app style)
  • using your application requires a lot of minor interactions (different than simple form / list manipulations & occassional linking) - cockpit approach VS wizard / form approach
  • you have a complex presentation logic AND you'll need to change / adjust your visuals very frequently
  • due to whatever reasons, your web presentation layer requires automated testing (can't be "thinned" / simplified enough)
  • problems with connectivity should have minimized impact on app usability (with offline storage)

Otherwise, if you just want modern looks, high usability, light weight:

  1. Go for a server-side templating engine of your choice to build simple views (& layouts), that will work well with all kinds of display (responsive design)
  2. Use pre-made RWD CSS libraries for styling: Semantic, Foundation, Bootstrap. As little of JavaScript as possible, especially in terms of animations, transitions & other visual stuff: honestly, CSS will do 90% of that for you (libs like that).
  3. Do not make your users think too much:
    • limit choice options to minimum
    • keep navigation as simple as possible, you really don't need 50+ items in 3 different menus
    • reduce the amount of information visible on the screen at any particular moment
    • it's application that is responsible for the "flow" - it's supposed to conduct the user through scenario(s)
  4. Nice set of 61 "commandments" for UI designers can be found here: http://www.goodui.org/. None of those requires SPA approach.

If your client / user explicitly asks for SPA, don't leave it like that. Ask for the particular reason, make the effort to learn what's behind that really. And if they want SPA, because everyone wants SPA these days, take your time to provide them a proper advice in that matter: if someone's stubborn, it's possible to use tank to hammer the nails, but is the effect worth the effort?