Javascript - New Wave of HTML¶

• Javascript - New Wave of HTML
  • ❓ About Memory Leaks
  • HyTags
  • AlpineJs
  • Alpine Ajax
  • Petite Vue
  • Surreal
  • Htmx
  • Unpoly
    • Forms with Unpoly
    • Two Way Binding with Rivets.js
    • Middleware to Handle Requests Server-side
  • Datastar
  • Hotwire (Turbo)
  • Turbolinks
    • Two Way Binding with Stimulus.js
  • Trimmings
  • Mavo
  • Some More

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

• List all Event Listeners: https://gist.github.com/marcus-at-localhost/1d7638b78e31f5c8e4f3742eba04c8cb
• Clone Nodes https://stackoverflow.com/a/4386514/814031

HyTags¶

https://hytags.org/

hyTags is a programming language embedded directly in HTML for building interactive user interfaces in backend-driven web applications and static websites.

AlpineJs¶

https://github.com/alpinejs/alpine is really close to Vue, but much slimmer and focused on only a handful of components.

https://alpine-ajax.js.org is an attempt to use htmx/unpoly like dyntax

Alpine Ajax¶

Implements the HTMX or Unpoly behavior with AlpineJs.

https://alpine-ajax.js.org

Petite Vue¶

https://github.com/vuejs/petite-vue

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

Quick Demo: https://codepen.io/localhorst/pen/GRmLjzb

Surreal¶

Tiny jQuery alternative for plain Javascript with inline Locality of Behavior!

https://github.com/gnat/surreal

<button hx-get="/">TEST
	<script>
		me().on('htmx:afterRequest', _=>{
			console.log('run script')
		})
	</script>
</button>

<script>me()</script> refers to the <button> I really like this concept.

Htmx¶

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

Similar to Unpoly, htmx wants your server to do the heavy lifting, 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.).

• </> htmx - high power tools for html
• https://codesandbox.io/s/dreamy-hofstadter-xhs8b?file=/index.html
• htmx has a JavaScript API, btw

Also creator of Idiomorph used by #Hotwire (Turbo) and Datastar.

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

Tinybind is a successor of Rivets.js, but already outdated (no commits since 2019)

Middleware to Handle Requests Server-side¶

• https://github.com/webstronauts/php-unpoly
• https://github.com/webstronauts/php-unpoly/issues/1

Datastar¶

🚀

https://data-star.dev/guide/getting_started

If you are familiar with libraries, like HTMX or AlpineJs; Datastar brings them together. This breaks down essentially to:

1. Send the current UI from your backend via HTML fragments like HTMX.
2. Manage client-side state that wouldn’t make sense to be managed by your backend like AlpineJS.

Intro

Hotwire (Turbo)¶

https://turbo.hotwired.dev

Hotwire is the label under which the new version of Turbolinks and Stimulus resides.

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

• Hotwire vs htmx - comparison - General - Hotwire Discussion

Turbolinks¶

🚀

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¶

I want to like it and to use it, but it's quite limited.

https://github.com/postlight/trimmings

• Get back to HTML. – Trimmings

Mavo¶

• Mavo extends the syntax of HTML to describe Web applications that manage, store, and transform data.
• Store data in the cloud, locally, or not at all by just changing an HTML attribute
• Edit data right in the website, with an intuitive, auto-generated, customizable interface. No more wrestling with CMSes and servers!
• Multimedia uploads in your page via drag & drop, pasting, or browsing, without a single line of code.
• Perform calculations right in the HTML, that update when needed. No need to write JavaScript!

https://mavo.io/

Some More¶

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