Hans Dulimarta

Polymerization

Let’s talk about polymerization.

No, not that one, but this one: a new approach in web app design using programmable and customizable components.

My journey into Polymer began immediately after Google IO 2014 when I learned more about Polymer from the following sessions:

After I was convinced that polymerizing an old web page is relatively easy, I began revamping one of my old AJAX-based Java Examples pages to switch over to Polymer.

The new design looks much nicer (I think) and requires only 20% as much code.

The entire page uses core-drawer-panel as its layout to host the following two customized Polymer elements: * hans-filelist, hosted in the navigation panel, that updates the list of files based on the text input search argument * hans-syntax-hilite, hosted in the main panel, that renders the selected source code

The file-list Polymer component uses core-ajax, core-input, core-field, and core-list. The syntax-hilite element is built on top of core-header-panel and core-toolbar.

Event Handling

To synchronize the contents of the main panel (on the right) and the navigation panel (on the left) the on-core-activate event handler of core-list uses core-ajax element to load the selected file and then fires a file-selected event. The corresponding handler in the syntax-hilite component then renders a syntax highlighted code on the main panel.

My old Java examples page uses Geshi (PHP) for syntax highlighting, but swithing over to Polyer requires me to find a Javascript-based highlighter. After some net shopping, I decided to use highlightjs.org.