We've figured out how to create the foundation for complex UIs while sticking
to our requirement that the view remain as dumb (and minimally testable) as
possible, but that's no reason to stop. While functionality is decoupled, there
is still room for optimization. Having the ColumnDefinition create a new widget
for each cell is too heavy, and can quickly lead to performance degradation as
your application grows. The two leading factors of this degradation are:
Inefficiencies related to inserting new elements via DOM manipulation
Overhead associated with sinking events per Widget
To overcome this we will update our application to do the following (in
respective order):
Replace our FlexTable implementation with an HTML widget that we'll
populate by calling setHTML(), effectively batching all DOM manipulation into
a single call.
Reduce the event overhead by sinking events on the HTML widget, rather than
the individual cells.
The changes are encompassed within our ContactsView.ui.xml file, as well as
our setRowData() and onTableClicked() methods. First we'll need to update our
ContactsView.ui.xml file to use a HTML widget rather than a FlexTable widget.