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

http://triskweline.de/unpoly-rugb/#/75

Alpine

https://github.com/alpinejs/alpine

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

Unpoly

Forms with Unpoly

http://triskweline.de/unpoly-rugb/#/52

Two Way Binding with Rivets.js

http://rivetsjs.com/

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

Source

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. -- https://github.com/mikeric/rivets/issues/730

Middleware to Handle Requests Server-side

Htmx (Successor of Intercooler)

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.).

🚀

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

https://stimulusjs.org/

Trimmings

https://github.com/postlight/trimmings

Mavo

https://mavo.io/

Some more...

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