Why You May Not Need A Framework

A Brief History of JS Development

Me as graybeard.
Timeline of Javascript from 1990s to present. Source: ??? / Quora

1990s - early 2000s

Yahoo webpage in the 90s.

JS In The 90s Be Like

<SCRIPT LANGUAGE="JavaScript1.3">
    <!--
    // This script creates an events link for the current date
    var dt = new Date();
    var month= dt.getMonth() + 1;
    if (month < 10)
      month = "0" + month;
    var date = dt.getDate();
    if (date < 10)
      date = "0" + date;
    var year = dt.getYear();
    if (year < 2000)      // Y2K Fix, Isaac Powell
      year = year + 1900; // http://onyx.idbsu.edu/~ipowell
    document.write("<A HREF='events/" + year + month + "/" + year + month + date + ".html'>Today&#146;s Events</A>");
    // End -->
  </SCRIPT>
Person frustrated at the computer. Source: Sybren Stüvel

mid-2000s

Firefox logo.
Screenshot of Gmail.
jQuery logo.

Present Day

“Age of the Frameworks”

Popular front-end frameworks.
Many more front-end frameworks.
Links from email newsletter.
Links from email newsletter, with frameworks highlighted.
Banno logo.
Kids in a cage. Source: Morten Liebach

Problems with Frameworks

  • Components must fit the framework
  • Components can't easily be used in another framework
  • Adds friction to maintenance
  • New devs must learn the framework
  • Frameworks add extra weight to your app
  • Frameworks are not performant on mobile
  • Migrating to a new framework is painful
  • Any given framework may be dead in 5 years

The Solution:

The (Web) Platform

Vanilla-js.com screenshot.

Vanilla JS

  • Prototype-based Objects
  • DOM Traversal / Manipulation
  • DOM Observers
  • Animations
  • Functional Programming
  • Ajax
  • Events
  • Promises
  • Modules
Polyfill.io screenshot.
Babel website screenshot.

Components

  • Custom Elements
  • Templates
  • Shadow DOM
  • HTML Imports

Custom Elements

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);
<app-drawer></app-drawer>

Templates

<template id="app-drawer-template">
  <style>#tabs { ... }</style>
  <div id="tabs">...</div>
  <div id="panels">...</div>
</template>
const t = document.querySelector('#app-drawer-template');
const clone = document.importNode(t.content, true);
document.body.appendChild(clone);

Shadow DOM (v1)

Shadow DOM shown in devtools

 

customElements.define('fancy-tabs', class extends HTMLElement {
  constructor() {
    super();

    const shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#app-drawer-template');
    const clone = document.importNode(t.content, true);
    shadowRoot.appendChild(clone);
  }
  ...
});

HTML Imports

<link rel="import" href="../app-drawer.html">
<app-drawer active></app-drawer>
Chart of browser support for native web components.
Webcomponents.org collection of web components.
Details for a calendar component.

Libraries

Routing, data binding, app state, authentication, etc.

npm install foobar
import foobar from 'foobar';
Banno logo.
Banno Online screenshot.

Breakdown

  • Runs on all modern browsers
  • Transpiled from ES6 to ES5
  • 3 polyfills: web components,<dialog> , and Element.prototype.closest
  • Custom router based on page.js
  • No Sass/LESS; just CSS (with variables & shadow DOM)
  • Bundled using vulcanize & crisper (now polymer-bundler)
  • Created polymer-lint and polymer-rename
Polymer docs.
Banno Online components.
JHA components.
Banno.com screenshot.
Polymer 2 blog post.

The Future

“These are the early days of web components. I think Polymer is going to help more developers start using components. And in the next several years we'll see more contenders like Polymer staying close to native APIs but adding what developers claim is missing from the browser. Add 10 more years and nobody will know what we're talking about.”

@JoshSadler

“Age of the FrameworksPlatform

Keep calm and use the platform.
Looking at the sky through cherry blossoms. Source: Tanaka Juuyoh