Previous: , Up: Program UI   [Contents][Index]

7.1.2 DOM Abstraction

jQuery is still used throughout parts of the framework and is a performance bottleneck—it needs to be fully removed and replaced with this DOM abstraction.18

Liza was conceived long before frameworks like React existed. The implementation originally used Dojo because of its broad widget set, but it was later dropped because of extreme performance issues, especially on the browsers of the day (Liza had to support Internet Explorer 6!); at one point, certain steps took over a minute to load for the most unfortunate of users. jQuery was then used for various parts of the UI and for ease of DOM manipulation, because of the lack of good and universal DOM APIs back then. It too became a bottleneck. Using DOM APIs is now easy with modern browsers.

Liza’s DOM abstraction contains a couple of components:

It is important to always use these abstractions for any portions of the DOM under control of this abstraction; otherwise, assumptions used for caching may result in unintended behavior.

Using DOM contexts, DOM operations can be restricted to small windows (for example, groups or tabs), further reducing the impact of DOM queries.

The root context is represented by RootDomContext—sub-contexts can be obtained by invoking #slice on any context, which creates a new context from a subset of the parent. Detaching a parent will detach all child contexts.

Contexts can be manipulated in memory before being re-attached. Detach a context from the DOM with #detach, and attach with #attach. A context is aware of its parent and will re-attach itself to the DOM in the correct place. A child context always attaches to the parent, and so will not be rendered until the parent attaches.

Always detach from the DOM before performing extensive manipulations; this prevents the need for expensive re-painting until manipulation is done, at which point the context can be re-attached.



See src/ui/ElementStyler.

Previous: , Up: Program UI   [Contents][Index]