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
- List all Event Listeners: https://gist.github.com/marcus-at-localhost/1d7638b78e31f5c8e4f3742eba04c8cb
- Clone Nodes https://stackoverflow.com/a/4386514/814031
Alpine
https://github.com/alpinejs/alpine
Alpine is really close to Vue, but much slimmer and focused on only a handful of components.
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 [[#Turbo (Hotwire)]] and [[#Datastar]].
Unpoly
Forms with Unpoly
http://triskweline.de/unpoly-rugb/#/52
Two Way Binding with Rivets.js
<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
})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
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:
- Send the current UI from your backend via HTML fragments like HTMX.
- Manage client-side state that wouldn’t make sense to be managed by your backend like AlpineJS.
Turbo (Hotwire)
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.
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
Trimmings
I want to like and use it, but it's quite limited.
https://github.com/postlight/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!
Some more...
Jeremy Keith - Building The Web - View Source 2019 - YouTube
