Web components are the hottest new thing, where everybody is looking into and working in the web universe. We will show you how they fit together with HTML5, why they are needed in the web applications of the future, and how Dart brings this to you through Polymer. The following topics will be covered in this chapter:
- How web components change web development
- Web components with
Polymer.dart - Two-way data binding in
Polymer.dart - The polymer links project
- The category links project
- The project tasks application
Developers in object oriented languages such as Java (for example, in Swing) and C# / VB.NET (for example, in Windows Forms, ASP.NET, WPF, and Silverlight) are keen to apply inheritance and reuse the components of their app user interfaces (in short, UI). Controls are adapted to specific needs by extending basic UI classes, and controls are assembled into reusable parts of screens (commonly called user or custom controls). Web developers want to be able to do the same; for example, extend a <button> tag, encapsulate a piece of markup for reuse, or have a simple way to bind data to an HTML element. However, until now, this wasn't possible in web development. This is exactly the promise of web components: extending HTML, they bring to web development what OO developers expect in their toolkit. Web components enable you to specialize HTML elements with style and code, and W3C is actively engaged in the standardization of this technology. They can be thought of as extending (often, they extend <div>, <span>, or <section> tags) or even as new HTML elements; they create encapsulated, reusable views to be embedded in several places of your application or even across several applications. So, web components give you what you need in order to write data-driven, scalable web applications, namely:
- Encapsulation: This is a concept in which structure, style, and behavior are defined separate from the pages in which the component is used
- Reusability: This is used by importing components into web pages; a direct consequence from encapsulation
- Data-binding: This is to view (one-way) and change (two-way) model data
The code that we need to write is considerably simplified: while using web components, Dart doesn't manipulate the DOM directly anymore, as was done in Chapter 5, Handling DOM in a New Way, and Chapter 6, Combining HTML5 Forms with Dart. On the other hand, when it is useful, both the techniques can be combined. For instance, while drawing an icon on the canvas, this can very well be done inside the web component by manipulating the DOM.
The first package, which the Dart team developed for this was called
Web UI, and some projects were built using it (see Chapter 10, Local Data and Client-Server Communication). However, in mid July 2013, the Dart team announced Polymer.dart, a Dart port of the Polymer framework (http://www.polymer-project.org), in close collaboration with the Google Polymer developers. The Polymer project is a new library on top of Web (or Custom) Components, Model-Driven Views, Shadow DOM (also called Shady Dom, which is new in Polymer 1.0), and many more emerging standards for the web platform to simplify and improve the development process. Although the work is still in progress, Polymer promises to provide a broad set of reusable custom components for developers.