mappmechanic codelabs - polymerjs elements - paper, gold, neon, platinum, molecules

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

yehtechnologies@gmail.com