polymer

Topics related to polymer:

Getting started with polymer

The Polymer project consists of:

Polymer library: Polymer is a lightweight library that helps you take full advantage of Web Components. With Web Components, you can create reusable custom elements that interoperate seamlessly with the browser’s built-in elements, or break your app up into right-sized components, making your code cleaner and less expensive to maintain.
WebComponents Polyfill: WebComponents Polyfill is a future targeted library aimed at fulfilling the W3C web components specifications. Browsers that fully implement the specification do not need webcomponents.js. However, most browsers are still missing some part of the spec, so this will be a dependency for quite some time.
Polymer App Toolbox: Polymer App Toolbox helps you build and deliver cutting-edge Progressive Web Apps with minimal overhead and payload, by leveraging powerful web platform features like Web Components, Service Worker and HTTP/2. The Toolbox provides a component-based architecture, responsive layouts, a modular router, localization support, turnkey support for local storage and offline caching, and efficient delivery of unbundled app resources. Adopt these features individually, or use them together to build a full-featured Progressive Web App. Polymer sprinkles a bit of sugar over the standard Web Components APIs, making it easier for you to get great results. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be:

Unit Testing

Web Component Tester - the tool for unit testing apps built with Polymer. You get a browser-based testing environment, configured out of the box with mocha, chai, async, lodash, sinon & sinon-chai, test-fixture, accessibility-developer-tools. WCT will run your tests against whatever browsers you have installed locally, or remotely via Sauce Labs.

Event Handling

Here's a plunker for all the examples
Attribute's name are case-insensitive and will always be converted to lowercase, e.g if you have an attribute on-myListener listener will be set on mylistener event.
Similar to listen you can also use unlisten method remove any listener.
Poperty change fires an event by the name of property-changed e.g if property is myProperty event will be my-propert-changed(camel casing to '-'). You can listen to them either by using on-event attribute of listener Object.
New value is always stored in e.detail.value for property change events.

Debugging

Example of Polymer toggleAttribute

A good example of this will be form, where submit button should only be active if all the mandatory fields have input.

Using external Javascript Libraries with Polymer

In this example, the library used in the component is installed with the package manager bower. This allows for easy distribution of a library-dependent component. If the library you wish to use is not distributed via a package manager, it can still be loaded the same way but your component will be require more effort to be used by others.

The lazy loading example uses a simple string for the library path. If one wished to avoid magic string constants, paths could be loaded using iron-ajax from a JSON file into an object and passed between components if needed.

Looping, the template dom-repeat.

iron-data-table

Reusable Modals with Polymer

Note:

The code through this writeup, is not a working copy. You need to replace the fillers for hrefs,src’s and project names.

The code illustrates only a Proof of concept.

To see the custom element in action,

go here

And, to browse through the usage and structure of the custom element,

go here

The Usage is in “index.html”

The element is in, “elements/tool-bar.html“