Steren's labs

I wanted to give a try to web components, that I think will change the way people create and share UI elements on the web. I chose Polymer, a framework that embraces web components and makes them easy to use. And when I want to get familiar with a new web frontend technology, I just rewrite my personal website with it (last time was Angular).

See it live at steren.fr, get the code on GitHub, and compare it to the previous Angular version.

Polymer contains many things :

• A set of browser polyfills, to enable new browser technologies that are not yet entirely supported by moderns browsers: shadow DOM, templates, HTML imports.
• The Polymer library, that is an opinionated way to define and use web components.
• The core Polymer elements which provide basic new UI elements and tools without imposing any specific look and feel.
• The Paper Polymer elements, that are an implementation, still incomplete, of the Material Design guidelines.

Each of these points depends on the points above it. I built the portfolio relying on the Paper elements, and thus, on the full Polymer stack.

Responsive: The layout of the portfolio is responsive: on mobile, the menu is inside a navigation drawer, on a larger browser, it is displayed on the left. This behaviour came put of the box by using the core-drawer-panel element.

UI elements: I used many of the Paper elements to build the parts of the UI: A Navigation drawer, tabs, icons, header… And as in the previous Angular version, the content is a set of cards, except that this time, a card is defined by a custom element, which make the DOM very clean and meaningful. Also each of these card tag is receiving the style from the Material Design card specification.

Data service: A custom element is also used as a data service: it encapsulates fetching the content from a JSON file, using a Polymer helper (the core-ajax). While at first it may sounds strange and unfamiliar to fetch a JSON data resource using only an HTML tag, for simple cases I actually think it is a good idea: It reinforces the declarative way of building a page, by declaring its resources in the HTML, not in JS.

Filtering and sorting: Filtering and sorting of the cards based on their attributes is also done using Polymer’s data binding and filtering, very similar to filters in AngularJS (see the work list component). UI elements for filters were available in the paper elements library and helpers (like core-selector) exists to ease the extraction and binding of their values.

Routing: At the time of writing, Polymer does not provide a routing framework: you cannot bind a state of the URL to a given view state. But because of its design, I could easily combine it with other routing microframework: page.js.

Layout helpers: Centering things has never been that easy with Polymer: the framework is providing CSS layout attributes, that allow you to center something vertically or horizontally by adding just one class.

My first impressions

After building this simple app, what do I think about Polymer? I really believe custom elements are ideal for adding a fully functional and autonomous UI element in an app without worrying about its dependencies or its its compatibility with your code or its API: you simply import the element and use it as any other HTML element. The DOM is the API. This is really great, it’s like if the DOM was designed from the beginning to allow this interoperability of UI elements.

However, I feel that building an app only with Polymer forces you to use custom elements too much. Sometimes, what I needed is not a fully isolated element represented as one tag in my HTML, but just a view, that can easily be styled using the global CSS. Because of this, I’m not sure Polymer is designed or should be used as a full featured client side framework.

I think it is really ideal to share and use custom elements and to add data binding capabilities to webpages. I would probably like it to focus on this role and make sure to be compatible with other popular web front-end framework like Angular, letting them handle the app state and complex controllers and services.