Seeking a JavaScript Framework (Part 1: Criteria)

Over the course of a few years, I gradually let my JavaScript skills atrophy. My programming partner had more interest in it than I did and so it seemed more efficient to have him do more JavaScript work than I did. That, of course, led to him becoming more efficient at it. A reinforcing cycle quickly ensued.

A little over a year ago, I realized that the pattern had gone too far and decided I needed to slowly start doing a bit more and build those muscles back.

As I have been regaining those skills, I've noticed that our JavaScript is less organized than I would like.

Years ago, our JavaScript needs were so thin that no organization was needed. We still try not to use too much JavaScript, but as times and expectations change, we are using more than before. Enough, certainly, that more organization is needed.

So, what problems do I need to solve?

Well, we tend to use a lot of jQuery (which is great!). Often, however, when I use a page I can tell that JavaScript is involved, but it isn't immediately obvious where it is. Even when I find it, it isn't immediately obvious what (or more often exactly why it is doing it).

As a related matter, sometimes changes to the HTML unexpectedly breaks the JavaScript as the jQuery code might have been dependent on a structural organization to the HTML that wasn't obvious. Nor is the fix intuitive.

Some of that, of course, just comes from better commenting. At the same time, however, jQuery doesn't enforce any sort of order on one's script. This is simultaneously one of jQuery's great strengths (you can use it however you like) and a source of some pain for me (I'd like to impose some organization on my code).

So, the problems I want to solve are:

1. Make it easy to find the code driving functionality for a block of HTML.
2. Impose some predictable structure on JavaScript code.
3. Make HTML changes less likely to break functionality.

Now, that's all fine and well. In actuality, however, I have other things I want as well. These are less problems that I want to solve than they are things I want to preserve.

Code Runs in the Browser

By this I simply mean that I am trying to time my front-end JavaScript, not tackle my server-side code.

Progressive Enhancement

I'll talk much more about this in the future, but it is important that a web site work without JavaScript and that JavaScript just makes it work *better*. Should the user agent not have it enabled, or if the JavaScript fails to load, or if an uncaught error should effectively kill the JavaScript on the page, then the site should continue to be usable to some degree.

https://medium.com/no-divide/the-power-of-progressive-enhancement-98738766b009

Display Code in HTML

This is really another way to say that the code is following progressive enhancement. Over and above that need, however, each piece of the web should do the job for which it was built. HTML should dictate content. CSS should dictate style. JavaScript should add functionality.

I should be able to look at the HTML source of a page and see the content. This helps make a system easier to maintain. It helps with SEO and with accessibility. Yes, I know that there are workarounds for these things, but it is so much easier if you just use things in the way in which they were originally designed.

Should Not Enforce SPA

I'm not saying that Single-Page Apps are bad. I think there is a place for them. In my case, however, that isn't what we want. I work on web sites that have added functionality, not web apps. For most of the work that I am doing, Single Page Apps are not desirable. So, any framework that enforces that is counter-productive to my purposes.

Styling via CSS

Really just rehashing previous territory, but this has to be listed as a separate requirement.

Declarative Syntax

I would prefer something where I describe the result I want rather than how I want to get there. SQL is a wonderfully declarative language. JavaScript, in general, is procedural. jQuery itself is a mix. It has lots of wonderfully declarative functions available (think "show()" and "hide()") but tends to be used in a procedural manner.

Direct DOM Manipulation

I don't want the overhead of a "Shadow DOM" or a "Virtual DOM" or any of that nonsense. That is just a layer of abstraction that makes it difficult to do the real thing. I can expect that there are use-cases where this sort of thing has a payoff, but I'm not doing anything sufficiently complicated to justify such added complexity.

Small Scale

This is certainly an arbitrary designation, but I'd like a "small" framework. That is to say that I'd like to impose a bit of order, but I'd like something that plays well with others and doesn't make everything live under its rules. Small file size would be nice as well, but less significant than having a JavaScript framework that plays well with existing code rather than forcing everything under its own paradigm.

Behavior Defined in JavaScript

I feel like I'm repeating myself on this, but when I define behavior I'd like to use JavaScript to do so. It will become clear later why I had to mention this preference.

Data in HTML

I know I've sort of said this before, but - again - it will hopefully become clear later why I've laid this out. All data should be in HTML. Data hidden away in JavaScript is problematic. If I have menu of options or choices or something, I don't want the data for it hidden away in a JavaScript array. That isn't to say that it can't be copied into JavaScript for easy handling, but that the canonical storage for the data should be in the HTML itself.

This makes for easy comprehension of code and assists in the ideas of separation of concerns and Progressive Enhancement.

OK, so let's make a table of what I want. This will help see how existing frameworks compare to my desires.

Now you, dear reader, may want to make a table of your own. That way you can use my reviews to help you pick a framework that is right for you - which will very likely be different than what I pick as right for me.

Next up: Let'\s look at some JavaScript Frameworks!