I suppose anyone who doesn’t understand how some code works would call it “magic”, but yes that’s what I’m looking to achieve. React is capable of doing it “magically”. The way I imagine it could work is something like this
1 - I have a template on my homepage called “MyTemplate” that looks like this
<span class="someUniqueIdentifier"> Hello {{name}} </span>
Which uses a helper function to return “name” from some data source, let’s call it DataSourceA. And it has a “click” event attached to it, let’s call it TemplateEventA.
2 - A user visit my homepage, and the server sends down the full page to the client including MyTemplate in a pre-rendered state like so
<span class="ax8192mad2"> Hello John </span>
3 - The client fetches all the necessary files for the page, including MyTemplate. The client is given some data to let it know that there will be a MyTemplate instance with identifier “ax8192mad2”
4 - The client finds the instance of MyTemplate via it’s unique identifier and binds TemplateEventA to that DOM element, applying the MyTemplate context to it.
5 - The client now knows where MyTemplate lives in the DOM, and fetches DataSourceA’s “name” property. The client compiles MyTemplate with the fetched data and creates this HTML output
<span class="ax8192mad2"> Hello John </span>
Before inserting this HTML into the page, the client compares this to the HTML of the existing instance of MyTemplate’s DOM element that’s already on the page because it was pre-rendered on the server, which looks like this
<span class="ax8192mad2"> Hello John </span>
The diff confirms that this instance of MyTemplate is rendered correctly, so it doesn’t re-render.
Now the template has been rendered on the server and sent down to the client. The client has applied the context of MyTemplate to the DOM element of MyTemplate that was pre-rendered on the server, and has attached TemplateEventA to that DOM element. Anytime DataSourceA updates the instance of MyTemplate on the page will re-render, since Blaze is now aware of it and has associated it with MyTemplate. We’ve saved the client the CPU effort of attaching the compiled MyTemplate to the DOM initially, since it saw that it was already rendered correctly and didn’t re-render.
This could make experiences on lower end computers or mobile phones achieve “time to initial interactivity” much faster. The compiling and diffing of the HTML string for MyTemplate is much less CPU-heavy that updating the DOM.
Idk if it’s perfect, but this is an approach that I believe may work. Can anyone with better knowledge of Blaze inform me if this is doable within its current API and event/render lifecycle?
