Executive Summary (TLDR)

Asynchronous JavaScript in the form of Single Page Applications (SPA) offer an incredible opportunity for improving the user experience of your web applications. CSS frameworks like Bootstrap enable developers to quickly contribute styling as they’re working on the structure and behaviour of things.

Unfortunately, SPA and CSS frameworks tend to result in relatively complex solutions where traditionally separated concerns - HTML-structure, CSS-style, and JS-behaviour - are blended together as a matter of course — Counter to the lessons learned by previous generations.

This blending of concerns can prevent entry level developers and valued specialists (Eg. visual design, accessibility, search engine optimization, and internationalization) from making meaningful contributions to a project.

In addition to the increasing cost of the few developers somewhat capable of juggling all of these concerns, it can also result in other real world business implications.

Examples include:

litigation

flat growth

inability to pivot

missed opportunities

recruitment and staffing nightmares

What may appear to be a prudent technology decisions could result in long term costs as maintainability issues come to light.

The potential cause of this trend could be the movement of traditional backend developers into the frontend coinciding with the shift from server-side to client-side web applications. In an attempt to augment their own weaknesses, these new entrants are introducing tools and practices which serve their own needs, but fail to consider the organization as a whole.

If the upfront value of CSS frameworks are desired, it’s recommended that you avoid baking them into your application directly. Instead, use them as decorators for your own in-house CSS framework designed around domain specific business language.

For SPA frameworks, it’s recommended to adopt coding practices which enforce a healthy separation of concerns. While this can be done with React, Vue.js offers a superior approach to achieving this which invites better collaboration with more traditional frontend developers.

Index

Preface

Background

History: Asynchronous JavaScript | CSS Frameworks

Asynchronous JavaScript | CSS Frameworks Symptoms: Div Soup | Blending of Concerns

Div Soup | Blending of Concerns Problems: Elusive Ninjas | Loss of Expertise | Loss of Nimbleness | Problem Impact Summary

Elusive Ninjas | Loss of Expertise | Loss of Nimbleness | Problem Impact Summary Root Cause: Backendification

Backendification Solutions: Dealing with CSS Frameworks | Dealing with SPA Frameworks

Clap and Follow: Mike Taylor

Preface

In 2014, I entered a web design program at the British Columbia Institute of Technology (BCIT). Upon completion, I was recruited by the school to help with online learning. When they told me I would be working with Bootstrap, Twitter’s super trendy CSS framework, I got pretty excited…

It wasn’t long before that excitement wore off though. After working with it, I couldn’t help wondering why it was even necessary. The cryptic class names and liberal use of <div> tags seemed to stuff all the logic into the HTML. Soon, complaints started to come in as other functional groups struggled with the new overhead.

We were a Technical Institute, but our department was designed around instructor success. The online courses our team produced would eventually be put in the hands of non-technical instructors from business, media, nursing, construction, etc. If they couldn’t figure it out, they would call Ed-Tech Support. If Ed-Tech couldn’t figure it out, the work would land back on our desks [often with a giant *thud*].

This was catastrophic because all of us were criminally under staffed. Instructors were stretched thin, support was always swamped, and our team was the narrow bottleneck that instructional design consultants would try to ram courses through right before term-start.

These frameworks lured us with the promise of ease and simplicity, but it turns out those are relative terms. For us, Bootstrap (and some other failed experiments) resulted in a lot of struggle with little reward. It was just a maintenance trap in disguise.

After a few months of hinting, the team started to buy into the vision of creating a custom framework designed around actual simplicity (or rather stripping all of the complexity out of the HTML). A solution designed around super clean code using terminology specific to online learning.

The resulting product(s), became wildly popular, despite a small barrage of political setbacks still scarring it (and me) today. In addition to completely eliminating the maintenance challenges, it also improved both quality and efficiency across the entire online course life-cycle.

Most importantly, our team was no longer the bottle neck pinned up against hard-deadlines.