39:38
Idiomorph with Micah
Datastar
Overview
This video features a technical discussion between two developers about "idiomorph," a library for efficient HTML morphing (updating the DOM). They explore its origins, technical advancements, and its role in modern web development frameworks like Turbo and Data Star. The conversation delves into challenges like preserving element state during updates, strategies for improving morphing accuracy, and future directions for performance optimization. They also touch upon the broader philosophy of "making the web declarative again" and the benefits of server-centric approaches over heavy client-side JavaScript frameworks.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Data Star utilizes an advanced morphing strategy, similar to HTMX but natively integrated.
- Micah, a key contributor, joined the Data Star project after significant activity in idiomorph.
- The discussion aims to explore the technical details and motivations behind idiomorph and its adoption.
Understanding the origins and core technology of idiomorph is crucial for appreciating its capabilities and how it powers modern web frameworks.
The host mentions using a "highly advanced version of the morphing strategy that HTMX can use as a plug-in" within Data Star.
- Micah's company built a clone of Pivotal Tracker after the original was discontinued.
- They adopted Turbo (Hotwire) for their application, which relies on idiomorph for HTML updates.
- Idiomorph's initial limitations led to iterative improvements, resulting in multiple generations of the library.
This personal journey highlights how practical development needs can drive innovation in web technologies.
Building a clone of Pivotal Tracker using Rails and then adopting Turbo/idiomorph because of a dislike for heavy JavaScript SPAs.
- Early versions of idiomorph had issues with recreating elements, losing state like video playback position.
- The 'two-pass' strategy involved temporarily storing deleted elements in a hidden 'pantry' div.
- The current approach 'pulls from the future,' allowing direct querying of upcoming DOM changes to preserve state more efficiently.
Understanding these technical evolutions reveals how developers solve complex problems related to maintaining application state during dynamic updates.
Preserving the playback position of a video (e.g., 30 seconds into a song) when the page is reordered or updated.
- Data Star automatically generates IDs for elements with `data-star` attributes to aid morphing.
- A challenge arises with 'anonymous nodes' (elements without IDs), making it ambiguous where new elements should be placed.
- Future work involves creating 'synthetic' or 'fuzzy' IDs based on element topology, attributes, and content to improve matching of anonymous nodes.
This addresses a core technical hurdle in DOM manipulation, aiming for more robust and predictable updates even without explicit element identifiers.
Ambiguity in placing a new `<br>` element when the previous version had five `<br>`s and the new version has six.
- The idea of using Merkel trees to hash entire sections of the DOM could enable faster comparison and identification of changes.
- This approach could provide 'component update' level performance similar to React, but server-side.
- Performance is a key goal, especially for lower-power devices, and leveraging browser capabilities efficiently is important.
Exploring advanced data structures like Merkel trees demonstrates a commitment to pushing the boundaries of web performance and efficiency.
Using a `data-merkle-id` attribute to allow idiomorph to quickly identify and skip entire unchanged sections of the DOM tree.
- There's a shared belief that modern web development should be more declarative, moving away from complex JavaScript frameworks.
- Idiomorph is seen as a bridge technology enabling this declarative approach.
- The discussion touches on the trade-offs between highly configurable libraries and simpler, 'magic black box' solutions.
This chapter explores the underlying philosophy driving the development of tools like idiomorph, Turbo, and Data Star.
The goal of 'making the web declarative again' and avoiding the need to write React.
- Idiomorph is being integrated into Turbo, with a pull request already submitted and internal testing underway.
- The developers express a desire to avoid becoming full-blown JavaScript framework maintainers, viewing idiomorph as a means to an end.
- Future work includes exploring ideas like synthetic IDs, Merkel trees, and learning from other frameworks like Phoenix LiveView.
This outlines the immediate future of idiomorph and the developers' long-term vision for their involvement in these projects.
Micah has a pull request for idiomorph integration into Turbo and is using a fork in his own application.
Key takeaways
- Idiomorph is a core library for efficient HTML DOM updates, enabling server-rendered applications to feel like SPAs without heavy client-side JavaScript.
- The evolution of idiomorph demonstrates a problem-solving process, moving from temporary storage ('pantry') to more sophisticated methods of preserving state.
- Handling 'anonymous nodes' (elements without IDs) is a significant challenge in DOM morphing, and solutions like synthetic IDs are being explored.
- Performance optimization using techniques like Merkel trees can dramatically speed up DOM comparisons by identifying entire unchanged sections of the tree.
- There's a growing movement towards declarative, server-centric web development, with tools like idiomorph, Turbo, and Data Star leading the charge.
- Developers are increasingly seeking to minimize their reliance on complex JavaScript ecosystems, preferring more streamlined and performant approaches.
- The collaboration between developers from different backgrounds (e.g., Ruby and Go) highlights the universality of certain web development challenges and solutions.
Key terms
IdiomorphHTML MorphingDOM ManipulationTurbo (Hotwire)Data StarHTMXPivotal TrackerSingle Page Application (SPA)Server-Sent HTMLAnonymous NodesSynthetic IDsMerkel TreeDeclarative Web
Test your understanding
- What is the primary function of idiomorph in web development?
- How did the 'two-pass' strategy in idiomorph attempt to solve the problem of losing element state?
- Why are 'anonymous nodes' a challenge for HTML morphing, and what are potential solutions?
- How could Merkel trees be used to improve the performance of DOM updates?
- What is the overarching philosophy behind technologies like idiomorph, Turbo, and Data Star, and why are developers drawn to it?