Reactive Front-End with Web Components

Web ComponentsThe Reactive Manifesto puts together the ideal architecture for today’s system infrastructure, designed to cope with the ever increasing need for performance, reliability and responsiveness. The same evolution of expectations is taking place in the JavaScript front-end, but do the same ideas and principles apply?

Reactive Programming Toronto

Presented Dec 3rd at a Reactive Programming Toronto meetup.

Slides: Reactive Web Components.pdf

DOM Manipulation using Web Components

Web ComponentsHTML elements are free to change the style, size, and placement of their children, and even their order. A lot of advanced use cases define rendering based on both the properties of element as well as the properties of their children; one particularly interesting case is the 2 column timeline. This is similar to a standard 2 column flow, except instead of first filling one column and overflowing to the second, columns are filled simultaneously – inserting elements into whichever has the least content. The net effect is elements occurring earlier in the HTML markup are placed vertically higher in the page than elements occurring later. The page reads top to bottom as a chronological timeline, which while being a simple enough concept cannot be done using standard HTML. In fact, the exact ordering of elements are different based on widths of the columns. Column placements are determined by previous element’s heights, and heights are a function of widths, so setting column widths as a percent of the screen sizes means layouts must be recalculated for each resolution. A simple way of doing this is using a Web Component. Continue reading

Advanced Uses of Polymer Templates

Web ComponentsMost sortable HTML table generators (such as AngularJS’s ng-grid) allow cells to be customized and formatted according to templates, however all templates are specified as parsed strings of HTML content. The Web Components specification allows for HTML Templates, meaning actual HTML fragments can be used instead of pieced together strings. Two benefits are better readability, CSS encapsulation by way of Shadow DOM, and soon to be native support by modern browsers.

In the previous article Sortable Table with Polymer Web Components a simple and concise sortable table was constructed using Polymer. This article will expand its capabilities to support cell templates. Continue reading

Sortable Table with Polymer Web Components

Web ComponentsAs businesses now rely more heavily on web applications to perform daily operations, a user friendly datatable/spreadsheet is indispensable to all web developers. While individual requirements vary, the core staple is the sortable table. Using Polymer’s Templates and Data-Binding, one can be implemented in a remarkably concise way. Continue reading

Polymer Data-Binding Filters

Web ComponentsOne useful feature of modern Javascript libraries is 2-way data-binding. All interactive websites perform this functionality one way or another, but only a few libraries such as Ember.js, AngularJS and Polymer don’t require a single line of Javascript.

2-way data-binding is the ability to keep two data sources in sync: if either changes the other will be automatically updated with the same value. More complicated use cases involve conditional statements or formula to define the relationship of the first and second values. Polymer Filters allow bi-directional binding even in these scenarios. Continue reading