Welcome!

Java IoT Authors: Pat Romanski, Zakia Bouachraoui, Elizabeth White, Liz McMillan, Yeshim Deniz

Related Topics: Java IoT, Open Source Cloud, Eclipse

Java IoT: Blog Post

Web Components in 2015 By @warpech | @CloudExpo [#Cloud]

Web Components are a collection of emerging web browser standards that can change the way we develop UIs of web applications

Web Components: What You Need to Know in 2015

Web Components are a collection of emerging web browser standards that are on a path to significantly change the way we develop UIs of web applications - a paradigm shift in web development. With polyfills already available in all modern web browsers, and full native support in Google Chrome, now is the perfect time to learn how you can benefit from using Web Components in your next project. In this article, you will learn about Web Components basics, available frameworks, Custom Elements, as well as challenges and applications associated with this new technology. After reading this article, developers will have enough background information to begin dabbling in Web Components.

What are Web Components and can I use them?
To a growing number of developers, the web browser is a first choice platform for building an application. However, as application complexity grows, a typical web-based application may suffer from browser and library incompatibilities, buggy and inconsistent UI or overall sluggishness.

Web Components are a fresh take on the abstract, declarative, cross-browser model of building applications from reusable pieces of code. In essence, instead of tangling your application with thousands of lines of JavaScript, you are now able to create applications by choosing from hundreds of fully styleable, single-purpose custom HTML tags, which are loaded on-demand, use browser DOM to integrate with rest of your app, and gracefully degrade when needed.

Image by the author. Icons by WebComponents.org (CC BY SA 3.0)

It is clearly in Google's agenda to make the web browser a compelling alternative to the desktop for building applications in the 2010s. This is probably why the company is leading the effort to set standard specifications of the Web Components stack, namely Shadow DOM, Custom Elements and HTML Imports and the addition of the <template> tag to HTML5. The three specifications have been at work since 2012 and bear the Editor's Draft status in W3C, while the latter (<template> tag) has made it into the final revision of HTML5, which received a W3C recommendation status on October 28, 2014.

The role of the four specifications is as follows:

  • HTML Templates allow developers to define reusable chunks of code. There are no more hidden DIVs, markup disguised as <script type="text/template">. The specification does not go that far to define a template engine so you still have to use JavaScript if you need to mix the template body with content.
  • Shadow DOM defines an encapsulated, hidden substructure in DOM that does not interfere with the outer world. You are free to use any IDs, CSS class names and style sheets as well as JavaScript to define custom behavior. Shadow DOM can also distribute nodes from the outer DOM.
  • Custom Elements are a way to define your own HTML tags with observable attributes. You can now have a consistent, easy-to-use HTML API for sophisticated UI elements that keeps the details of their implementation in Shadow DOM. Custom Elements can extend existing elements.
  • HTML Imports are the solution for on-demand loading of Custom Elements and HTML Templates. You can recursively define HTML Imports in HTML Imports, which allows for effective dependency solving. HTML Imports are subject to browser caching, so one import will not be loaded more than once for a web page.

While on the specification side, Web Components must be referred to as a work in progress, and that work goes hand in hand with the actual implementation in Google Chrome and Opera. Since version 36 of Google Chrome (released August 26, 2014), all Web Components features are implemented and enabled by default. Mozilla is actively following, with parts of Web Components also natively supported. Other browsers (IE11, Safari) rely on using a polyfill script called webcomponents.js (recently renamed from platform.js), which is maintained by Google.

Future of frameworks with Web Components: Adapt or die
Google is heavily investing its resources in the Polymer library, which serves a few different purposes. First, it is a playground for concepts that were later reflected in Web Components standards. Second, it is a syntactic sugaring on top of the standards to enable a declarative way of creating Web Components through two-way data binding and property observation. Finally, it is a comprehensive collection of over 70 premade "core-" and "paper-" Custom Elements that can be used in UI and client/server communication, either directly or as a basis for more sophisticated elements.

A Dart port of Polymer, Polymer.dart, is used in the Dart ecosystem as the replacement for its Web UI library. This means Web Components are the suggested way to build interfaces of Dart web applications. However, Polymer is not the only library to embrace Web Components.

Google's AngularJS framework is set to switch to Shadow DOM and Custom Elements in its 2.0 release, which is expected to be available by the end of 2015. The recently released Dart port (Angular.dart 1.0) uses Shadow DOM already.  Despite pressure from Polymer, Angular does not redefine itself as a competitor to it. In a message posted in June 2014 to a Polymer mailing list, Angular 2.0 team member Rob Eisenberg wrote, "Angular is really designed around optimizing application development (including DI, routing, templating and decorator directives, more advanced databinding) while Polymer is really optimized around custom element development."

On the other hand, the path taken by Angular 2.0 is widely criticized in the developer community, to the extent that Rob Eisenberg decided to quit the project in November 2014 and focus on his own framework, Durandal, which will also most certainly incorporate Web Components.

Ember, a framework often compared with AngularJS, has also demonstrated it will play well with Web Components. The Ember.Component model is inspired by the Custom Elements spec.

ReactJS, an applauded library for building efficient UIs with the help of a virtual DOM and a one-way data flow created by Facebook, is also preparing for the Web Components revolution. It is already possible to use Custom Elements as part of React views. With an architecture called ReactiveElements, it is now also possible to use React inside of Custom Elements.

Building atop a standard specification, we should see 2015 as the year when previously monolithic application frameworks such as Angular, Ember, or highly specialized frameworks such as React, cooperate together based on Web Components or risk becoming obsolete.

The wonderful world of Custom Elements
The big benefit of Web Components comes from Custom Elements and the ability to distribute them in packages that can be loaded using HTML Imports.

The emerging community is creating hundreds of Custom Elements already, most of which are developed in public on GitHub and made available under permissive open source licenses, such as MIT.

The first stop for finding a community-developer Custom Element is CustomElements.io, a directory created by Zeno Rocha. CustomElements.io uses the Bower package manager registry as the data source and lets you search through more than 600 available components.

Bower is a tool that has gained a major following among developers using Web Components. It offers unprecedented abilities to maintain a list of client-side dependencies and works with any Git or subversion endpoint or even packages distributed as ZIP archives.

Component.kitchen is a directory of more than 500 Custom Elements, curated by Jan Miksovsky. Jan is also building his own component library called Basic Web Components, which already consists of approximately 20 elements that implement the most common UI patterns, such as datepicker or dropdown that are not found in Polymer.

Mozilla has created Brick - a collection of ten Custom Elements intended to be used on mobile platforms such as Firefox OS. Mozilla has been a long-term participant in shaping the Web Components ecosystem. In 2012, it created X-Tags, a Custom Elements polyfill and syntactic sugar library, which now seems to have deprecated since Mozilla decided that Brick 2.0 will build directly upon the Custom Elements spec.

Other noteworthy collections of Custom Elements include Juicy, Akyral and Baasic - all filling in the gaps of missing UI elements for the componentized web.

Also worth mentioning is Vulcanize, a tool developed by the Polymer team, which allows developers to combine several HTML Imports into one. This solves the problem of excessive network traffic that is required to load multiple imports in a single application.

Challenges
While HTML Imports solve the problem of dependency loading, there are still a few issues that Web Components need to solve in the long run.

One of the current pitfalls is that it is hard to load HTML Imports from multiple locations. The dependency tree is solved using the URL of the HTML Import, so if you are using two elements that depend on the Polymer library, you should put them as siblings in the same path.

Similarly, it is impossible to use two versions of a Custom Element throughout the application, since the elements are registered in the same namespace. For most projects that should not be a problem, but it may cause an issue when one of your components insists on upgrading Polymer to its newest version, as this can have an effect on other components. A similar problem exists with the jQuery library, which has created a method to use it in a "no conflict" way. Perhaps we can expect Polymer to work out a similar solution.

Is thick client the way to go for business apps?
One thing that Polymer, Angular and Ember have in common is embracing the thick client pattern in web applications. Thick client strategy is convenient for B2C applications that iterate quickly with cross-platform features, but does not satisfy enterprise users who are unwilling to sacrifice the stability and consistency of their applications.

The modularity of Web Components allows for designing applications that don't necessarily follow the thick client pattern. For instance there is Meteor, a framework for building applications with a JavaScript backend that can either be a thick or thin client depending on the need, and it integrates well with Web Components.

Starcounter uses the benefits of Web Components to collapse the stack between the client and the database in the MVVM architecture. A Custom Element called puppet-js enables two-way data binding between the client and the server using the JSON Patch (RFC 6902) and WebSockets protocol. As a result, developers follow a much simpler, declarative style of programming. Meanwhile, customers enjoy richer and by orders of magnitude faster UI compared to common REST-based applications.

Predictions for 2015
By all accounts, Web Components will continue to impact the client-side library ecosystem. The future will show if it can stand up to its promise of creating standard, interoperable building blocks for web applications. With Polymer set to release a 1.0 version in the second quarter of 2015, it is safe to predict that there will be a lot of developers willing to use it despite the dangers of the infancy period of this technology. When the excitement explodes, be sure to give it a try and share your feedback with fellow developers.

More Stories By Marcin Warpechowski

Marcin Warpechowski is a developer at Starcounter. He is an advocate for open web platform standards, a speaker at JavaScript conferences and one of the contributors for the puppet-js and Juicy Custom Elements library. You can connect with him and Starcounter on Twitter at @warpech and @starcounterdb.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
The challenges of aggregating data from consumer-oriented devices, such as wearable technologies and smart thermostats, are fairly well-understood. However, there are a new set of challenges for IoT devices that generate megabytes or gigabytes of data per second. Certainly, the infrastructure will have to change, as those volumes of data will likely overwhelm the available bandwidth for aggregating the data into a central repository. Ochandarena discusses a whole new way to think about your next...
CloudEXPO | DevOpsSUMMIT | DXWorldEXPO are the world's most influential, independent events where Cloud Computing was coined and where technology buyers and vendors meet to experience and discuss the big picture of Digital Transformation and all of the strategies, tactics, and tools they need to realize their goals. Sponsors of DXWorldEXPO | CloudEXPO benefit from unmatched branding, profile building and lead generation opportunities.
All in Mobile is a place where we continually maximize their impact by fostering understanding, empathy, insights, creativity and joy. They believe that a truly useful and desirable mobile app doesn't need the brightest idea or the most advanced technology. A great product begins with understanding people. It's easy to think that customers will love your app, but can you justify it? They make sure your final app is something that users truly want and need. The only way to do this is by ...
Digital Transformation and Disruption, Amazon Style - What You Can Learn. Chris Kocher is a co-founder of Grey Heron, a management and strategic marketing consulting firm. He has 25+ years in both strategic and hands-on operating experience helping executives and investors build revenues and shareholder value. He has consulted with over 130 companies on innovating with new business models, product strategies and monetization. Chris has held management positions at HP and Symantec in addition to ...
DXWorldEXPO LLC announced today that Big Data Federation to Exhibit at the 22nd International CloudEXPO, colocated with DevOpsSUMMIT and DXWorldEXPO, November 12-13, 2018 in New York City. Big Data Federation, Inc. develops and applies artificial intelligence to predict financial and economic events that matter. The company uncovers patterns and precise drivers of performance and outcomes with the aid of machine-learning algorithms, big data, and fundamental analysis. Their products are deployed...
Dynatrace is an application performance management software company with products for the information technology departments and digital business owners of medium and large businesses. Building the Future of Monitoring with Artificial Intelligence. Today we can collect lots and lots of performance data. We build beautiful dashboards and even have fancy query languages to access and transform the data. Still performance data is a secret language only a couple of people understand. The more busine...
Cell networks have the advantage of long-range communications, reaching an estimated 90% of the world. But cell networks such as 2G, 3G and LTE consume lots of power and were designed for connecting people. They are not optimized for low- or battery-powered devices or for IoT applications with infrequently transmitted data. Cell IoT modules that support narrow-band IoT and 4G cell networks will enable cell connectivity, device management, and app enablement for low-power wide-area network IoT. B...
The hierarchical architecture that distributes "compute" within the network specially at the edge can enable new services by harnessing emerging technologies. But Edge-Compute comes at increased cost that needs to be managed and potentially augmented by creative architecture solutions as there will always a catching-up with the capacity demands. Processing power in smartphones has enhanced YoY and there is increasingly spare compute capacity that can be potentially pooled. Uber has successfully ...
SYS-CON Events announced today that CrowdReviews.com has been named “Media Sponsor” of SYS-CON's 22nd International Cloud Expo, which will take place on June 5–7, 2018, at the Javits Center in New York City, NY. CrowdReviews.com is a transparent online platform for determining which products and services are the best based on the opinion of the crowd. The crowd consists of Internet users that have experienced products and services first-hand and have an interest in letting other potential buye...
When talking IoT we often focus on the devices, the sensors, the hardware itself. The new smart appliances, the new smart or self-driving cars (which are amalgamations of many ‘things'). When we are looking at the world of IoT, we should take a step back, look at the big picture. What value are these devices providing. IoT is not about the devices, its about the data consumed and generated. The devices are tools, mechanisms, conduits. This paper discusses the considerations when dealing with the...