JavaScript - New Wave of HTML

Lol @ router implementations in JavaScript... it's already in the browser :)

❓ About Memory Leaks

  • A regular Random.js app is full of memory leaks.
  • We just don't notice because the JavaScript VM is reset between page loads!
  • We can't have memory leaks in persistent JavaScript VMs like Angular.js, Unpoly, Turbolinks


Alpine is really close to Vue, but much slimmer and focused on only a handful of components.

Petite Vue

5kb subset of Vue optimized for progressive enhancement and even slimmer than Alpine.js lol.

Quick Demo:


Forms with Unpoly

Two Way Binding with Rivets.js

<div class='template' up-data='{ "name": "Arne" }'>
  <input rv-value='name'>
  Hello { name }!
up.compiler('.template', function(element, data) {
  let view = rivets.bind(element, data)
  return function() { view.unbind } // clean up


Why would I use this instead of VueJs? Occasionally you need to integrate a templating and binding system in a crowded legacy environment, where it's easier to integrate something like rivets into existing template/MVC system than re-building and re-factoring large amounts of existing (working) code to bring in something like vue. --

Middleware to Handle Requests Server-side


Htmx is the successor of intercooler.js, without jQuery dependency and focus on http requests and extendibility.

Similar to Unpoly, htmx wants your server to do the heavy lifiting, like parsing json, and send back html instead of client side templating (Client side templating is possible via an extension and a template engine of your choice.).

Turbo (Hotwire)

Hotwire is the label under which the new version of Turbolinks, Stimulus and something called Strada resides.

Turbo now has something called Frames that can be targeted if you want to swap out content or lazy load html fragments.


Turbolinks might be the easiest script to automagically make a website faster (means the perception of speed).

Drop it in and all links are getting intercepted and a loading indicator is added by default. Depending on existing JavaScript there might be some work to be done and some head wrapping around the concept and side effects of scripts and events living in the page forever.

Turbolinks also parses inline Java Script (unpoly doesn't)

Two Way Binding with Stimulus.js



Some more...

Jeremy Keith - Building The Web - View Source 2019 - YouTube