Replace all with outerHTML
At the moment (Apache Wicket version 6.10.0) when a Component has to be updated in Ajax response Wicket will replace the whole HTML element with all its attributes and sub-elements included, i.e. the outerHTML of the element is replaced.
Wicket has always tried to do this in the most efficient way for the different browsers. Since version 6.0.0 Wicket uses jQuery to do this, so jQuery cares about the browser inconsistencies.
With or without using jQuery for DOM manipulations if the change in the DOM is as minimal as a new value for some attribute of the HTML element then Wicket will replace the whole element (including its sub-elements) to be able to update the attribute. Depending on the size of the markup this may be a noticeable or not.
Replace only what has changed with Ractive.js
Ractive.js uses templating based on Mustache. For example your markup template can look like:
To populate the data in the mustaches you need to initialize a Ractive instance with something like this:
This will read the template from the element with id “myTmpl” and put the final result in an element with id “target”.
Later if you need to update some variable (mustache) you should do:
This will update just the text node inside the strong HTML element responsible to visualize the number of the unread messages.
Even if we do something like:
Note that only the unread has a new value, Ractive.js will figure that out and will do the right thing - will update the same text node only, as above, not the complete template.
At Wicket-Ractive you may find an integration between Wicket and Ractive that takes advantage of Ractive’s DOM update possibilities.
RactiveBehavior to a component/panel Wicket will use
its model object to create an instance of Ractive and populate its
mustaches with initial values from the object’s properties. Later when
updating this component you may use
Ractive#ractive(AjaxRequestTarget, Component) helper to tell
Ractive to do its magics and update only the bean properties which have
Ractive#ractive(AjaxRequestTarget, Component) helper can be used when
you know that the changes in the model object are small enough. In case
there are bigger changes and replacing the outerHTML may be
more efficient you can still use
AjaxRequestTarget#add(Component) as you do now.
There is a demo application in the
src/test/java folder of this
project. Try it.
The usage of the mustaches in the markup template is against Wicket’s philosophy of developing with plain Java and plain HTML, so this approach may be a step in the wrong direction for some of the Wicket’s users.