In the second part of his design tech tutorial, projekt202’s Peter Vogt continues his look at working in the view layer with both design and code, and highlighting emerging tools and technologies.
"The over-arching goal of this entire project is to get passengers to destinations faster."
projekt202 has helped on-time performance soar for one of the world's leading airlines.
In this podcast, projekt202 Solutions Architect Mark Sims discusses working with the airline's team -- through research, UX design and UI development -- to successfully deliver large-scale web applications to support millions of travelers daily.
The web tends to evolve in different ways over time. Right now it seems like most of the new developments in web technologies have to do with new frameworks or new versions of frameworks released almost weekly. This isn’t a problem until these frameworks overshadow upcoming technologies that deserve some recognition. Technologies that will end up changing the way we develop for the web. Let’s say hello to Web Components.
Web Components are a collection of a few technologies. Custom elements, HTML imports, templates, and shadow DOM. The specifications for these technologies are being created by Google and the W3C. That is why we are looking at Polymer. Polymer is created and managed by Google. It is a framework built on top of Web Components and designed to leverage these evolving technologies in modern browsers. Because Web Components are being spec’d to be natively supported by browsers, Polymer mostly consist of polyfills for Web Components.
Custom elements are simple and just as it sounds. Now you can create your own custom HTML elements, like <projekt-202>, with this new technology. Custom elements need to be registered using Polymer so that they act like natively supported HTML elements. This is really easy and only requires one line of code. The catch is that the custom name has to contain a dash in the name.
Templates can get a little complicated or can be really simple if you don’t need your templates to do much. Templates contain the same tags as any other HTML page. But Polymer adds powerful functionality to templates that make you HTML dynamic and makes it feel more like Angular or Knockout.js. A few useful things Polymer has added that developers will find helpful are data binding, event binding, repeaters and even an observe function. Templates can even contain other templates.
How does Polymer fit into the web right now?
As of right now, most UI software is built using some sort of UI framework like React or Angular. These UI frameworks come in all shapes and sizes and usually take on some form of MVC and provide functional programming to UI developers. Polymer would be the “V”, or View, of MVC. This means that there might be some missing functionality, like URL routing capabilities, you might be looking for in a framework for your next project.
Polymer and web components are amazing technologies that are evolving the web in a really great direction. When the technologies are supported by all browsers, UI developers will now need to bring in frameworks like Polymer to have access to these advanced features. The features will be built-in to the browser.
Other web component frameworks
Polymer is a great framework that is bringing web components to all browsers. But it is not the only frameworks that is implementing web components. Other frameworks are, but not limited to:
X-Tag: Small library created and supported by Mozilla.
Bosonic: Another framework that brings web components to browsers. Even to IE9.
Web Components: The WebComponents.org keeps updated information related to web conponents, frameworks, and even has useful polyfills for all parts of web components.