Ideas for maquette 3

Auteur: Johan Gorter
Although we are satisfied with the Maquette library thus far, we see possibilities to improve it. We want you, the community, to be able to give feedback, before we get started.


The vision of maquette is to provide a UI library which:

  1. Is pure and simple. The UI can be expressed as just a JavaScript render function.

  2. Supports animated transitions when changing the DOM. Animations do not interfere with application logic.

It is also important that devices with little processing power can still operate at 60fps, but this should be obvious.

Proposed changes

We came up with the following list of improvements (ordered from the most impact to the smallest impact).

Allow changing event handlers

To make maquette more pure and simple, we want to allow event handlers that are recreated on every render. Although reusing event handlers would always benefit performance, we think that we can make the performance penalty of updating them negligible. This is done without updating the DOM with new event handlers or introducing the overhead of a virtual event system.

Improving the render cycle API

Currently, maquette provides the afterCreate, afterUpdate and animation callbacks to interact with the real DOM. When using these callbacks, you need to be careful not to hurt performance by causing unneeded reflows. This is why we came up with an improved render cycle api, providing a more clearer interface when requiring interaction with the DOM. For more details see the issue on github.

Make the h function more strict

To boost performance, we want to make the h function more strict. The children in the h function in maquette do not have to be inside an array, but may appear as additional arguments. We did this to to make JSX possible and to be able to create text nodes easier. The downside to this approach is the TypeScript compile errors are harder to understand and there is a performance penalty. In maquette 3, we propose to only allow childnodes as an array again. If you still want to use JSX, you can use this extra babel plugin.

onRemoved callback

It is sometimes necessary to do some cleanup work after DOM nodes are removed from the DOM again. This is needed for example if a component added a resize event listener to the window and you want to unregister it when the node is removed from the DOM. We want to make this possible using a callback. This callback will be called eventually but not directly when the node is removed, probably during idle time.

Make the class attribute updateable

We got some questions to make the class attribute updatable so we want to implement this feature.

No more enterAnimation and exitAnimation as string

For a cleaner and better documented API, we always want enterAnimation and exitAnimation to be functions. For a smooth transition to maquette 3, we will provide a cssTransition function in a separate library which you can use to wrap your string animations.

renderMaquette becomes render

We think the name renderMaquette is a bit long to type, so we want to change this to just render. We will also rename the TypeScript Component interface that maquette provides to MaquetteComponent, so your application/framework is free to use the name Component for some other purpose.

Splitting up the Projector interface

Some of the projectors functions (for instance scheduleRender) are of interest to UI components, while others (for instance append) are not. We want maquette to uphold the SOLID principles, so propose to split up this interface into a ProjectorService (for UI components) and the Projector (for bootstrapping).

Measuring performance

We would like to investigate how we can enable performance logging during development using a dev flag.


Please use the links to the github issue for each idea to discuss it further. The vision and new ideas can be discussed at this issue.

Over de auteur