Looking for the Goldilocks of Web Frameworks

I just made a bunch of you excited. You React, Aurelia, and Ember enthusiasts and now probably foaming at the lips ready to tell me to use one of your frameworks! Hold off for now. Let’s talk about it.

Single Page Apps

The problem for me is fairly simple, I don’t want to build a Single Page Application (e.g. SPA). Yeah, I know.

When SPAs became all the rage, I could see their use case. Lots of enterprises and companies had all these old monolithic apps that they needed to move to the web. Some tried with Flash or Silverlight first, but now that we’re in a post-plugin world, building SPAs seemed like the right approach.

If you’ve read my blog for any length of time, you know this is a long-standing issue for me. Even if you are building SPAs, I think most web apps should be a collection of SPAs and not one giant monolith.

Please don’t use SPAs to just port your VB6 apps to the web.

In my humble opinion, creating these large, routed apps are a solution for applications that are mimicking desktop applications. There is a use-case for this, but it isn’t what I’m looking to do in many cases.

Web Apps v. Web Sites

Lots of web development isn’t about apps. And while you may be building a huge web ‘app’, it’s not all that happens. So the SPA frameworks have a great solution for apps, but for the overall web it’s a hindrance. The problem is that modern SPAs require a lot of ceremony and set-up. In a typical Angular2 app (not picking on them, just an example) your code usually involves a number of steps before it gets to the browser:

TypeScript + WebPack -> BrowserECMAScript

ECMAScript + SystemJS + Transpiler -> Browser ECMAScript

That’s not even talking about using typings, RXJS, and other dependencies. The build-up and management of these external tools (e.g. NPM and Gulp/Grunt) requires a lot of effort. When you’re just wanting to deal with validation on a contact page or a simple order screen, this gets painful fast.

The web is different because of much of what you’re presenting to the user isn’t meant to be interacted with. I’ve seen SPAs created for sites that are mostly for consumption (e.g. news sites, blogs, catalogs). And it can be a nightmare. Why? SEO.

Sites that are meant for consumption also are likely wanting to worry about search engine optimization. While search engines like to think they can load up your ‘app’ and figure out what is content versus crud, it’s hard. Most solutions end up building a set of static web pages for their SPA content so that it can be spidered by the different search engines. That’s crazy. I said it.

What I Want

I don’t want to get rid of SPAs, I just want people to think of SPAs and web development as not exactly the same thing. Much like the hammer/screw analogy, SPAs aren’t great at every task. I want to find a good solution for when I don’t want to build a SPA but instead want to add rich interactivity into some discrete pages of my site.

I’ve looked at some solutions but I still don’t see one I love (and no, i’m not building a new JavaScript framework ; ). Here are my thoughts on the different frameworks I’ve looked at:

Angular2: Great for big SPAs but the complexity for small interactions are not worth the effort. Either requires webpack setup which isn’t trivial, or you end up with a very slow SystemJS based setup.

React: Nice for building components, but bundling of the markup and code requires a new transpiler (.jsx) and putting markup in your JavaScript isn’t any better than putting JavaScript in your HTML file.

Aurelia: Also good for SPAs (though I’m not convinced in a long legs since it’s not supported by a big company), but still complex needing a build step to make it functional.

VueJS: Nice an small but missing some built-in support for things like validation and network calls without using extensions. Want to embed HTML as strings in the JavaScript for component templates (though if you add complexity of webpack, that get’s easier but then we’re back to complexity).

Polymer: Single principal in that it is only about web components. It’s actually a framework but a way to bundle CSS, JS, and HTML. Missing key things I need to complete these simple interactions.

My Wish List

I’m hoping my readers have seen something that matches my needs for non-SPAs. Here is my wishlist of features:

1. Simple JavaScript (or Integrates with TypeScript)
2. No compilation or packaging steps (See #1)
3. One and Two Way Data Binding
4. Support to call APIs (e.g. networking calls)
5. Integrated Validation

That’s it. Routing probably is interesting, but usually I don’t need it for the simple form management I end up doing on admin pages or user forms. It feels like JS is getting complicated as people want to be abstracted away from it. That’s not me.

Help!