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:
- Polymer and the Web Components Revolution
- Polymer and Web Components Change Everything You Know about Web Development
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
file-list Polymer component uses
syntax-hilite element is built on top of
To synchronize the contents of the main panel (on the right)
and the navigation panel (on the left) the
event handler of
core-ajax element to load
the selected file and then
file-selected event. The corresponding handler
syntax-hilite component then renders a syntax highlighted
code on the main panel.