So I’ve been on a mission of sorts…I’m looking for the right size framework for some of my web development. I know what you’re saying, “Aren’t you suggesting Angular2 for everything”? No, no I’m not.
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.
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.
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.
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.
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.
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.
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.
I’m hoping my readers have seen something that matches my needs for non-SPAs. Here is my wishlist of features:
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.
After a long development cycle, Bootstrap has been completely re-written to improve performance and be more consistent. Learn Bootstrap 4 now with my Wilder Minds course:
|Vue.js by Example (Now Available)|
|Bootstrap 4 by Example|
|Intro to Font Awesome 5 (Free Course)|
|Less: Getting Started (Coupon Available)|
|Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular (updated for 2.1)|
|Using Visual Studio Code for ASP.NET Core Projects|
|Implementing ASP.NET Web API|
|Web API Design|
|Application Name||WilderBlog||Environment Name||Production|
|Application Ver||v4.0.30319||Runtime Framework||x86|
|App Path||D:\home\site\wwwroot\||Runtime Version||.NET Core 4.6.26919.02|
|Operating System||Microsoft Windows 10.0.14393||Runtime Arch||X86|