The “Backendification” of Frontend Development

Mike Taylor
Jan 28, 2019 · 15 min read
Image for post
Image for post

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.

Image for post
Image for post
CC BY-SA 401(K) 2012
  • flat growth
  • inability to pivot
  • missed opportunities
  • recruitment and staffing nightmares

Index

  • Preface
  • Background
  • History: Asynchronous JavaScript | CSS Frameworks
  • Symptoms: Div Soup | Blending of Concerns
  • Problems: Elusive Ninjas | Loss of Expertise | Loss of Nimbleness | Problem Impact Summary
  • Root Cause: Backendification
  • Solutions: Dealing with CSS Frameworks | Dealing with SPA Frameworks
Image for post
Image for post
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…

Image for post
Image for post
Image for post
Image for post

Are many of the modern frontend tools and practices just technical debt in disguise?

Background

Before web development, I finished a diploma in Marketing Mangement Entrepreneurship plus a few courses towards a BBA. My particular interests are in Product Management, Organizational Behaviour, Operations Management.

History

Asynchronous JavaScript

In 2005, Google astounded the world with the launch of Google Maps. Drag the screen and, like magic, little tiles would pop into view, one by one.

Image for post
Image for post
Via Digital-Archaeology.org

CSS Frameworks

In 2011, Twitter, the envy of the technology world, welcomed us into their style of development using Bootstrap.

Image for post
Image for post

Symptoms

Div Soup

In present day, CSS Frameworks have become nearly ubiquitous. Bootstrap seems to have hung onto supremacy, with honorable mentions going to ZURB’s Foundation and Google’s Material Design. There’s also a growing support for composable frameworks like Tailwinds that claim to avoid some of the heft found in all the others.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Bootstraps “ArchitectUI HTML Dashboard Free

Blending of Concerns

When adding 6 or 7 cryptic class names to an HTML tag qualifies as “styling”, I would argue we’ve taken a massive step back in time. We’re safely beyond table layouts, but just barely above the use of inline styles.

Image for post
Image for post
Image for post
Image for post
Note Hyrule in the background.
Image for post
Image for post
Stolen from Chris… Muhahahaha!

Problems

Elusive Ninjas

In 2014, frontend developers were objectively cheaper than backend developers. 5 years later and the frontend is now a fullstack.

Image for post
Image for post
HIPPO

Loss of Expertise

Ninjas don’t actually exist. The jack of all trades is really the master of none. As a generalist myself, I’m fully aware that you can’t be good at all things (even though I try). While generalists certainly have a place in your business, it probably shouldn’t be working alone within the depths of your codebase.

Image for post
Image for post

Loss of Nimbleness

Frameworks like Bootstrap and React are appealing because they offer incredible up-front velocity. Bootstrap is often heralded as an excellent prototyping tool. Yet prototyping tools inherently produce low-cost, low-fidelity representation of a finished product.

Image result for good cheap and fast
Good-Fast-Cheap: Pick Two.
Image for post
Image for post
Image for post
Image for post

Problem Impact Summary

Between skyrocketing labour costs, risks of litigation, forgone business opportunities, limited customer acquisition, and the inability to quickly steer the ship, seemingly insignificant or even wise technical decisions are suddenly having real world business consequences.

Image for post
Image for post
  • Lifetime Maintenance = 40–80% (60% average) of total expenditures.
Image for post
Image for post

Root Cause

I believe the major shift from server-side to client-side applications pulled a large number of talented developers from the backend towards the front. With a much different set of strengths and weaknesses, these programmers started to shift the way frontend development is conducted to accommodate their own needs and preferences.

Image for post
Image for post
Skill Gap Preclusion Cycle
Image for post
Image for post

Solutions

Dealing with CSS Frameworks

In order to start cutting your dependence on frameworks like Bootstrap, my recommendation is to stop applying framework specific classes directly to your HTML. Instead, I would encourage following:

%our-warning-button {
@extend .btn;
@extend .btn-warning;
}
.empty-shopping-cart-button {
@extend %our-warning-button;
}
Image for post
Image for post

Dealing with SPA Frameworks

This might be controversial and feel like an incredibly long-con, but I recommend switching from React to Vue.js and here’s why:

<template>
<!--Structure-->
</template>
<script>
<!--Behaviour-->
</script>
<style>
<!--Style-->
</style>
Image for post
Image for post

HackerNoon.com

#BlackLivesMatter

Sign up for Get Better Tech Emails via HackerNoon.com

By HackerNoon.com

how hackers start their afternoons. the real shit is on hackernoon.com. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mike Taylor

Written by

Just a guy looking for some good meaningful work.\n

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Mike Taylor

Written by

Just a guy looking for some good meaningful work.\n

HackerNoon.com

Elijah McClain, George Floyd, Eric Garner, Breonna Taylor, Ahmaud Arbery, Michael Brown, Oscar Grant, Atatiana Jefferson, Tamir Rice, Bettie Jones, Botham Jean

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store