Modular design for the web

Beispiel AppThe polymer project is ambitious even for Google's yardsticks. It aims to raise the web development to a new level and is the first framework to work with WebComponents (see page margin). As proof of concept, the UI elements of the material design are supplied as components.

That does not sound spectacular? But it is! Polymer and especially the UI elements are quite special. Google has introduced the material design with Android 5. It is a modern, minimalist design with clean layout, unique metaphors and feedback to the user through numerous animations. For the moment, WebComponents is only fully supported by Google Chrome.

This is where the polymer project kicks in. It fills the gaps with so-called polyfills. That means, missing APIs are implemented in Javascript. This is an extremely challenging task, as the APIs are complex. This complexity forces polymer to make compromises with the implementation . In details it is noticeable, but in the development process, the restrictions have barely an influence .

The plan is to replace the polyfills gradually through their own implementations of the browser. Then the WebComponents will reach their full potential. How this might look, one can already see in Google Chrome today.

The UI elements in the material design are designed for different terminals and adapt to the respective device. Responsive Design at its best. Touch operation on the mobile device. Automatic adjustment of the layout to the screen size. On the mobile phone, the menu bar disappears. On the tablet or in the browser, the menu bar is always visible, and much more.

The Android apps were only the prelude. Google puts all of its applications on material design, no matter where they run, be it on the Web or on iOS. That's understandable, because a typical user of Google Maps uses Maps on the go on the mobile phone, at work in the browser and at home on the iPad.

Multi-platform is part of the strategy. The material design is designed from the outset for different screens and input methods and is, therefore, consistent across all platforms.

Re-thinking client strategy

PolymerWe tried Polymer 1.0. Our test application works with little effort on Android, iOS, Windows Phone and of course in the browser. Functioning is an understatement. It looks like an app and behaves like an app. Polymer can be the basis of a new client strategy. Previously you had to think long about the project start, which target platforms you want to support, because each platform means additional expenses, additional dependencies and thus additional project risks.

With polymer that is different. A web application written in polymer gives access to all relevant platforms. Rather than getting bogged down with the development of multiple clients, you can focus on making your polymer app really good.

If, later, reasons arise for an operating system to offer a native app, then you can do that. A polymer-app communicates via a REST-API with their server. This REST API is excellently suitable for the connection to a native app.

But the chances are good that you will never have a need for a native app.

WebComponents

Polymer-LogoLego bricks for the web.

Technically, WebComponents are a set of new browser APIs, which make it possible to expand the HTML syntax around your own tags and in which you can hide your own code.

With this, software developers are able to offer components that can be integrated into HTML documents without risking conflicts with other elements. This may inspire the market for components and is definitely the way the development of web applications will change.

WebComponents are a very effective method to structure a program and to re-use parts of it. Therefore, WebComponents are worthwhile, even if foreign components are not being used.

Currently, the APIs are only in Google Chrome available. In Firefox, the APIs are partially implemented. For the other browsers it still looks bad. But, fortunately there is the polymer project.

Contact: Christian Vögtle; Turn on Javascript!