Embed Size (px)
Citation preview
mAppMechanic PolymerJS
PolymerJS
1
Session 2 - Polymer Elements & Catalog
PolymerJSmAppMechanic
Agenda
2
• What is Polymer Element ?
• How to use a Polymer Element ?
• Polymer Elements Catalog • Paper Elements • Iron Elements • Gold Elements • Data Elements • Platinum Elements • Molecules • Google Web Components
PolymerJSmAppMechanic
Polymer Element
33
Polymer makes Web Components Sweeter as they are a Reusable Custom Web Component with Special Feature
PolymerJSmAppMechanic
(contd) Features
44
★ Data Binding, Computed Properties ★ Attribute Reflection, Layout Attributes ★ Event Lifecycle ★ Reduces a lot of Boiler Plate if you had to write web components ★ Declarative in nature (natural for HTML) ★ Polymer enables you to work with 3rd party libraries too ★ Defines best practices for developers
You don't need to use Polymer directly to use these elements. However, using Polymer you can take advantage of special features such as
PolymerJSmAppMechanic
How to Use it?
5
1. Using existing elements
2.Creating Custom Elements
PolymerJSmAppMechanic
Using Elements
6
1. Find the element you want & install using bower bower install --save paper-elements
2. Import it using HTML Imports <link rel=“import” href=“polymer-element.html”>
3. Use it in your DOM <polymer-element label=“Test”></polymer-element>
PolymerJSmAppMechanic
Polymer Elements Catalog
7
PolymerJSmAppMechanic
Paper Elements
8
PolymerJSmAppMechanic 9
PolymerJSmAppMechanic
Layout Elements
10
PolymerJSmAppMechanic 11
PolymerJSmAppMechanic
Iron Elements
12
These are utility elements that handle core functionality, without applying any complex visual styles.
PolymerJSmAppMechanic 13
PolymerJSmAppMechanic
Google Web Components
14
PolymerJSmAppMechanic 15
PolymerJSmAppMechanic
Gold Elements
16
Elements built for e-commerce-specific use-cases, like checkout flows.
PolymerJSmAppMechanic 17
PolymerJSmAppMechanic
App Elements
18
The app elements are a loosely-coupled set of components that can be useful when building entire applications. They include components for
features like routing, internationalisation, data storage, and more.
PolymerJSmAppMechanic 19
PolymerJSmAppMechanic
Data Elements
20
The app elements are a loosely-coupled set of components that can be useful when building entire applications. They include components for
features like routing, internationalisation, data storage, and more.
PolymerJSmAppMechanic 21
PolymerJSmAppMechanic
Platinum Elements
22
Elements that provide features to turn your web page into a true webapp - with things like push notifications, offline usage, bluetooth and more.
PolymerJSmAppMechanic 23
PolymerJSmAppMechanic
Molecules
24
Molecules are elements that wrap other 3rd party libraries, to help make them easier to use.
PolymerJSmAppMechanic 25
mAppMechanic PolymerJS 26
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh
