MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules
-
Upload
rahat-khanna-aka-mappmechanic -
Category
Technology
-
view
171 -
download
0
Transcript of MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules
![Page 1: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/1.jpg)
mAppMechanic PolymerJS
PolymerJS
1
Session 2 - Polymer Elements & Catalog
![Page 2: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/2.jpg)
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
![Page 3: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/3.jpg)
PolymerJSmAppMechanic
Polymer Element
33
Polymer makes Web Components Sweeter as they are a Reusable Custom Web Component with Special Feature
![Page 4: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/4.jpg)
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
![Page 5: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/5.jpg)
PolymerJSmAppMechanic
How to Use it?
5
1. Using existing elements
2.Creating Custom Elements
![Page 6: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/6.jpg)
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>
![Page 7: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/7.jpg)
PolymerJSmAppMechanic
Polymer Elements Catalog
7
![Page 8: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/8.jpg)
PolymerJSmAppMechanic
Paper Elements
8
![Page 9: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/9.jpg)
PolymerJSmAppMechanic 9
![Page 10: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/10.jpg)
PolymerJSmAppMechanic
Layout Elements
10
![Page 11: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/11.jpg)
PolymerJSmAppMechanic 11
![Page 12: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/12.jpg)
PolymerJSmAppMechanic
Iron Elements
12
These are utility elements that handle core functionality, without applying any complex visual styles.
![Page 13: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/13.jpg)
PolymerJSmAppMechanic 13
![Page 14: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/14.jpg)
PolymerJSmAppMechanic
Google Web Components
14
![Page 15: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/15.jpg)
PolymerJSmAppMechanic 15
![Page 16: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/16.jpg)
PolymerJSmAppMechanic
Gold Elements
16
Elements built for e-commerce-specific use-cases, like checkout flows.
![Page 17: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/17.jpg)
PolymerJSmAppMechanic 17
![Page 18: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/18.jpg)
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.
![Page 19: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/19.jpg)
PolymerJSmAppMechanic 19
![Page 20: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/20.jpg)
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.
![Page 21: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/21.jpg)
PolymerJSmAppMechanic 21
![Page 22: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/22.jpg)
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.
![Page 23: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/23.jpg)
PolymerJSmAppMechanic 23
![Page 24: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/24.jpg)
PolymerJSmAppMechanic
Molecules
24
Molecules are elements that wrap other 3rd party libraries, to help make them easier to use.
![Page 25: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/25.jpg)
PolymerJSmAppMechanic 25
![Page 26: MAppMechanic CodeLabs - PolymerJS Elements - Paper, Gold, Neon, Platinum, Molecules](https://reader031.fdocuments.in/reader031/viewer/2022020203/5aaacaa47f8b9ae5748b45cf/html5/thumbnails/26.jpg)
mAppMechanic PolymerJS 26
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh