SlideShare a Scribd company logo
mAppMechanic PolymerJS
PolymerJS
1
Session 4 - Advanced Topics for Custom Elements
PolymerJSmAppMechanic
Agenda
2
• Data Binding
• Behaviours
• Event Listeners
• Gestures
• Execution Flow for App Route & Page.js
• Global & Local Objects
• Animations & Styling
• Responsive UI, Using Multiple Themes/Switching Themes
• Making Ajax Calls & Data Management
PolymerJSmAppMechanic
Data Binding
3
There are 2 types of Data Binding in Polymer:
✦ One way Data Binding
[[ ]] defines one-way data binding only – the data can
be changed only on the host side and affects the child
✦ Two way Data Binding
{{ }} defines automatic data binding which can be
one-way as well as two-way (if the target property of the
child component is declared as two-way)
PolymerJSmAppMechanic
Data Binding - Utilities
4
๏ Template repeater (dom-repeat) - Creates an instance of the
template's contents for each item in an array.
๏ Click events
๏ Filters or Sorting
๏ Conditional Templates
๏ dom-if
๏ dom-bind - To use Polymer bindings without defining a new
custom element, use the dom-bind element.
๏ dom-change event - When one of the template helper
elements updates the DOM tree, it fires a dom-change event.
PolymerJSmAppMechanic 5
PolymerJSmAppMechanic
Behaviors
6
6
Polymer supports extending custom element prototypes with shared
code modules called behaviors.
A behavior is an object that looks similar to a typical Polymer
prototype. A behavior can define lifecycle callbacks, declared
properties, default attributes, observers, and event listeners.
For lifecycle events, the lifecycle callback is called for each behavior in
the order given in the behaviors array, followed by the callback on the
prototype.
PolymerJSmAppMechanic 7
PolymerJSmAppMechanic
Event Listeners
8
8
There are 2 ways to bind events to custom elements:
1. Add event listeners to the host element by providing a listeners
object that maps events to event handler function names.
PolymerJSmAppMechanic
Event Listeners (contd)
9
9
2. Add an on-event attribute on the custom element to bind directly to
a method on the prototype object. It is called annotated event listeners.
PolymerJSmAppMechanic
Event Listeners - (advanced)
10
10
Imperatively add or remove event listeners:
Custom Events
PolymerJSmAppMechanic 11
PolymerJSmAppMechanic
Gestures
12
Polymer abstracts the under lying native events like mouse-events &
touch-events with custom “gesture” events which will take care of
desktop & mobile devices with single API.
For example, tap should be used instead of click for the
most reliable cross-platform results.
down
finger/button went down
down(x, y, sourceEvent)
up
finger/button went up
up(x, y, sourceEvent)
tap
down and up both occurred
tap(x, y, sourceEvent)
track
moving while finger/button is down
track(state,x, y, dx, dy …)
PolymerJSmAppMechanic 13
PolymerJSmAppMechanic
Execution Flow for App
14
Polymer App Toolbox is a collection of components, tools and templates
for building Progressive Web Apps with Polymer.
• Component-based architecture using Polymer and web
components.
• Responsive design using the app layout components.
• Modular routing using the <app-route> elements.
• Localization with <app-localize-behavior>.
• Turnkey support for local storage with app storage
elements.
• Offline caching as a progressive enhancement, using
service workers.
PolymerJSmAppMechanic
App Routing
15
For client-site routing, App Toolbox uses the <app-route>
element to provide modular routing.
Modular routing means that instead of having a central repository for
all your application's routes, individual components manage some
portion of the route, and delegate the rest to other components.
Install the app-route package with Bower:
bower install --save PolymerElements/app-route
PolymerJSmAppMechanic 16
PolymerJSmAppMechanic
Animations & Styling
17
Neon Elements are primary way of achieving animations.
• A basic animatable element
• Animation configuration
• Animation types
• Configuration properties
• Using multiple animations
• Page transitions
• Shared element animations
• Declarative page transitions
• Included animations
PolymerJSmAppMechanic 18
PolymerJSmAppMechanic
Responsive UI
19
Responsive UI is achieved using app-layouts
component set.
✦ More flexible and composable -- supporting a wider range
of layout patterns.
✦ Less opinionated -- these elements don't enforce a particular
look and feel (although they still support the Material Design
effects and UI patterns if that's what you're looking for).
✦ Extensible -- with a new, pluggable system for scroll effects.
PolymerJSmAppMechanic
App Layouts
20
✦ app-box - A container element that can have scroll effects - visual effects
based on scroll position.
✦ app-drawer - A navigation drawer that can slide in from the left or right.
✦ app-drawer-layout - A wrapper element that positions an app-drawer and
other content.
✦ app-grid - A helper class useful for creating responsive, fluid grid layouts
using custom properties.
✦ app-header - A container element for app-toolbars at the top of the screen
that can have scroll effects - visual effects based on scroll position.
✦ app-header-layout - A wrapper element that positions an app-header and
other content.
✦ app-toolbar - A horizontal toolbar containing items that can be used for
label, navigation, search and actions.
PolymerJSmAppMechanic
Media Queries
21
✦ iron-media-query
iron-media-query can be used to data bind to a CSS media query.
The query property is a bare CSS media query. The query-matches property is
a boolean representing whether the page matches that media query.
Native CSS Media Queries also can be used.
PolymerJSmAppMechanic
Themes
22
PolymerJSmAppMechanic 23
PolymerJSmAppMechanic
Making Ajax Requests
24
<iron-ajax> </iron-ajax>
<iron-request> </iron-request>
With auto set to true, the element performs a request whenever its url, params or body
properties are changed.
PolymerJSmAppMechanic 25
PolymerJSmAppMechanic
Deploying Polymer Apps
26
Build for Deployment
$ polymer build
The built files are output to the following folders:
• build/unbundled. Contains granular resources suitable for serving via HTTP/2 with
server push.
• build/bundled. Contains bundled (concatenated) resources suitable for serving from
servers or to clients that do not support HTTP/2 server push.
Deploy to Server
Polymer applications can be deployed to any web server.
This template utilizes the <app-location> element to enable URL-based routing, which
requires that the server serve the index.html entry point for all routes.
PolymerJSmAppMechanic 27
mAppMechanic PolymerJS 28
Thanks
mAppMechanic
twitter.com/mAppMechanic
linkedin.com/in/rahatkh
yehtechnologies@gmail.com

More Related Content

What's hot (19)

PPTX
Angularjs Basics
Jayantha Sirisena
 
PDF
Angularjs & REST
Corley S.r.l.
 
PPTX
Google Polymer Introduction
David Price
 
PPTX
Meteor meetup
David Brear
 
DOCX
Rails Concept
Javed Hussain
 
PDF
Introduction to angular js july 6th 2014
Simona Clapan
 
PDF
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
PPTX
Introduction to Webcomponents
Harish Karthick
 
PPTX
ASP.NET - Building Web Application..in the right way!
Fioriela Bego
 
PPTX
angularJS Practicle Explanation
Abhishek Sahu
 
PPTX
A Domain Specific Language for Enterprise Grade Cloud-Mobile Hybrid Applications
ajithranabahu
 
PPTX
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
MskDotNet Community
 
PPTX
Valentine with Angular js - Introduction
Senthil Kumar
 
PPTX
Making share point rock with angular and react
Joseph Jorden
 
PPTX
Angular patterns
Premkumar M
 
PDF
Polymer vs other libraries (Devfest Ukraine 2015)
jskvara
 
PPT
Using RESTFUL APIs in ANGULARJS
Mindfire Solutions
 
PPT
Performance anti patterns in ajax applications
SergeyChernyshev
 
PPT
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
guestc75cdc
 
Angularjs Basics
Jayantha Sirisena
 
Angularjs & REST
Corley S.r.l.
 
Google Polymer Introduction
David Price
 
Meteor meetup
David Brear
 
Rails Concept
Javed Hussain
 
Introduction to angular js july 6th 2014
Simona Clapan
 
React.js - and how it changed our thinking about UI
Marcin Grzywaczewski
 
Introduction to Webcomponents
Harish Karthick
 
ASP.NET - Building Web Application..in the right way!
Fioriela Bego
 
angularJS Practicle Explanation
Abhishek Sahu
 
A Domain Specific Language for Enterprise Grade Cloud-Mobile Hybrid Applications
ajithranabahu
 
Дмитрий Тежельников «Разработка вэб-решений с использованием Asp.NET.Core и ...
MskDotNet Community
 
Valentine with Angular js - Introduction
Senthil Kumar
 
Making share point rock with angular and react
Joseph Jorden
 
Angular patterns
Premkumar M
 
Polymer vs other libraries (Devfest Ukraine 2015)
jskvara
 
Using RESTFUL APIs in ANGULARJS
Mindfire Solutions
 
Performance anti patterns in ajax applications
SergeyChernyshev
 
TSSJS2010 Presenatation on: Performance Anti Patterns In Ajax Applications
guestc75cdc
 

Viewers also liked (6)

PDF
Web Components: Rethinking Web App Development
Lukáš Fryč
 
PDF
Web components are the future of the web - Take advantage of new web technolo...
Marios Fakiolas
 
PDF
New World of Angular (v2+)
Rahat Khanna a.k.a mAppMechanic
 
PDF
Intro to Web Components, Polymer & Vaadin Elements
Manuel Carrasco Moñino
 
PDF
PolymerJS 開發實戰
益祥 許
 
Web Components: Rethinking Web App Development
Lukáš Fryč
 
Web components are the future of the web - Take advantage of new web technolo...
Marios Fakiolas
 
New World of Angular (v2+)
Rahat Khanna a.k.a mAppMechanic
 
Intro to Web Components, Polymer & Vaadin Elements
Manuel Carrasco Moñino
 
PolymerJS 開發實戰
益祥 許
 
Ad

Similar to MAppMechanic CodeLabs - PolymerJS Advanced Topics for Custom Elements (20)

PDF
Introduction to Polymer and Firebase - Simon Gauvin
Simon Gauvin
 
PDF
Polymer
Josef Ježek
 
PDF
Polymer & the web components revolution 6:25:14
mattsmcnulty
 
PDF
Building a Secure App with Google Polymer and Java / Spring
sdeeg
 
PDF
IRJET- Polymer Javascript
IRJET Journal
 
PDF
Polymer - pleasant client-side programming with web components
psstoev
 
PDF
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Horacio Gonzalez
 
PDF
Polymer 101
Alea Soluciones, S.L.
 
PDF
Custom Elements with Polymer Web Components #econfpsu16
John Riviello
 
PDF
Polymer 2.0 codelab for extreme beginners
Sylia Baraka
 
PDF
Polymer Code Lab in Dart - DevFest Kraków 2014
jskvara
 
PPTX
Web Components: The Future of Web Development is Here
John Riviello
 
PPTX
Web Components: The Future of Web Development is Here
John Riviello
 
PDF
Web Components With Rails
Boris Nadion
 
PDF
JEE Conf 2015: Less JS!
_Dewy_
 
PPT
Intro to polymer-Devfest Yaoundé 2013
gdgyaounde
 
PDF
Александр Кашеверов - Polymer
DataArt
 
ODP
Polymer 2.0 introduction at GDG Algiers: Google Fair event
Sylia Baraka
 
PDF
Google Polymer Framework
Kostas Karolemeas
 
PPTX
The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17
GreeceJS
 
Introduction to Polymer and Firebase - Simon Gauvin
Simon Gauvin
 
Polymer
Josef Ježek
 
Polymer & the web components revolution 6:25:14
mattsmcnulty
 
Building a Secure App with Google Polymer and Java / Spring
sdeeg
 
IRJET- Polymer Javascript
IRJET Journal
 
Polymer - pleasant client-side programming with web components
psstoev
 
Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
Horacio Gonzalez
 
Custom Elements with Polymer Web Components #econfpsu16
John Riviello
 
Polymer 2.0 codelab for extreme beginners
Sylia Baraka
 
Polymer Code Lab in Dart - DevFest Kraków 2014
jskvara
 
Web Components: The Future of Web Development is Here
John Riviello
 
Web Components: The Future of Web Development is Here
John Riviello
 
Web Components With Rails
Boris Nadion
 
JEE Conf 2015: Less JS!
_Dewy_
 
Intro to polymer-Devfest Yaoundé 2013
gdgyaounde
 
Александр Кашеверов - Polymer
DataArt
 
Polymer 2.0 introduction at GDG Algiers: Google Fair event
Sylia Baraka
 
Google Polymer Framework
Kostas Karolemeas
 
The rise of Polymer and Web Components (Kostas Karolemeas) - GreeceJS #17
GreeceJS
 
Ad

More from Rahat Khanna a.k.a mAppMechanic (11)

Recently uploaded (20)

PDF
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
PDF
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
PPTX
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
PPTX
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
PDF
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
PPTX
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
PDF
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
PDF
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
PPTX
✨Unleashing Collaboration: Salesforce Channels & Community Power in Patna!✨
SanjeetMishra29
 
PPTX
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PDF
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 
PDF
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
PDF
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
PDF
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
PDF
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
Achieving Consistent and Reliable AI Code Generation - Medusa AI
medusaaico
 
Log-Based Anomaly Detection: Enhancing System Reliability with Machine Learning
Mohammed BEKKOUCHE
 
Q2 FY26 Tableau User Group Leader Quarterly Call
lward7
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
CIFDAQ Weekly Market Wrap for 11th July 2025
CIFDAQ
 
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
"Beyond English: Navigating the Challenges of Building a Ukrainian-language R...
Fwdays
 
WooCommerce Workshop: Bring Your Laptop
Laura Hartwig
 
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
LLMs.txt: Easily Control How AI Crawls Your Site
Keploy
 
✨Unleashing Collaboration: Salesforce Channels & Community Power in Patna!✨
SanjeetMishra29
 
"Autonomy of LLM Agents: Current State and Future Prospects", Oles` Petriv
Fwdays
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
Presentation - Vibe Coding The Future of Tech
yanuarsinggih1
 
The Builder’s Playbook - 2025 State of AI Report.pdf
jeroen339954
 
SWEBOK Guide and Software Services Engineering Education
Hironori Washizaki
 
Chris Elwell Woburn, MA - Passionate About IT Innovation
Chris Elwell Woburn, MA
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
Newgen Beyond Frankenstein_Build vs Buy_Digital_version.pdf
darshakparmar
 
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 

MAppMechanic CodeLabs - PolymerJS Advanced Topics for Custom Elements

  • 1. mAppMechanic PolymerJS PolymerJS 1 Session 4 - Advanced Topics for Custom Elements
  • 2. PolymerJSmAppMechanic Agenda 2 • Data Binding • Behaviours • Event Listeners • Gestures • Execution Flow for App Route & Page.js • Global & Local Objects • Animations & Styling • Responsive UI, Using Multiple Themes/Switching Themes • Making Ajax Calls & Data Management
  • 3. PolymerJSmAppMechanic Data Binding 3 There are 2 types of Data Binding in Polymer: ✦ One way Data Binding [[ ]] defines one-way data binding only – the data can be changed only on the host side and affects the child ✦ Two way Data Binding {{ }} defines automatic data binding which can be one-way as well as two-way (if the target property of the child component is declared as two-way)
  • 4. PolymerJSmAppMechanic Data Binding - Utilities 4 ๏ Template repeater (dom-repeat) - Creates an instance of the template's contents for each item in an array. ๏ Click events ๏ Filters or Sorting ๏ Conditional Templates ๏ dom-if ๏ dom-bind - To use Polymer bindings without defining a new custom element, use the dom-bind element. ๏ dom-change event - When one of the template helper elements updates the DOM tree, it fires a dom-change event.
  • 6. PolymerJSmAppMechanic Behaviors 6 6 Polymer supports extending custom element prototypes with shared code modules called behaviors. A behavior is an object that looks similar to a typical Polymer prototype. A behavior can define lifecycle callbacks, declared properties, default attributes, observers, and event listeners. For lifecycle events, the lifecycle callback is called for each behavior in the order given in the behaviors array, followed by the callback on the prototype.
  • 8. PolymerJSmAppMechanic Event Listeners 8 8 There are 2 ways to bind events to custom elements: 1. Add event listeners to the host element by providing a listeners object that maps events to event handler function names.
  • 9. PolymerJSmAppMechanic Event Listeners (contd) 9 9 2. Add an on-event attribute on the custom element to bind directly to a method on the prototype object. It is called annotated event listeners.
  • 10. PolymerJSmAppMechanic Event Listeners - (advanced) 10 10 Imperatively add or remove event listeners: Custom Events
  • 12. PolymerJSmAppMechanic Gestures 12 Polymer abstracts the under lying native events like mouse-events & touch-events with custom “gesture” events which will take care of desktop & mobile devices with single API. For example, tap should be used instead of click for the most reliable cross-platform results. down finger/button went down down(x, y, sourceEvent) up finger/button went up up(x, y, sourceEvent) tap down and up both occurred tap(x, y, sourceEvent) track moving while finger/button is down track(state,x, y, dx, dy …)
  • 14. PolymerJSmAppMechanic Execution Flow for App 14 Polymer App Toolbox is a collection of components, tools and templates for building Progressive Web Apps with Polymer. • Component-based architecture using Polymer and web components. • Responsive design using the app layout components. • Modular routing using the <app-route> elements. • Localization with <app-localize-behavior>. • Turnkey support for local storage with app storage elements. • Offline caching as a progressive enhancement, using service workers.
  • 15. PolymerJSmAppMechanic App Routing 15 For client-site routing, App Toolbox uses the <app-route> element to provide modular routing. Modular routing means that instead of having a central repository for all your application's routes, individual components manage some portion of the route, and delegate the rest to other components. Install the app-route package with Bower: bower install --save PolymerElements/app-route
  • 17. PolymerJSmAppMechanic Animations & Styling 17 Neon Elements are primary way of achieving animations. • A basic animatable element • Animation configuration • Animation types • Configuration properties • Using multiple animations • Page transitions • Shared element animations • Declarative page transitions • Included animations
  • 19. PolymerJSmAppMechanic Responsive UI 19 Responsive UI is achieved using app-layouts component set. ✦ More flexible and composable -- supporting a wider range of layout patterns. ✦ Less opinionated -- these elements don't enforce a particular look and feel (although they still support the Material Design effects and UI patterns if that's what you're looking for). ✦ Extensible -- with a new, pluggable system for scroll effects.
  • 20. PolymerJSmAppMechanic App Layouts 20 ✦ app-box - A container element that can have scroll effects - visual effects based on scroll position. ✦ app-drawer - A navigation drawer that can slide in from the left or right. ✦ app-drawer-layout - A wrapper element that positions an app-drawer and other content. ✦ app-grid - A helper class useful for creating responsive, fluid grid layouts using custom properties. ✦ app-header - A container element for app-toolbars at the top of the screen that can have scroll effects - visual effects based on scroll position. ✦ app-header-layout - A wrapper element that positions an app-header and other content. ✦ app-toolbar - A horizontal toolbar containing items that can be used for label, navigation, search and actions.
  • 21. PolymerJSmAppMechanic Media Queries 21 ✦ iron-media-query iron-media-query can be used to data bind to a CSS media query. The query property is a bare CSS media query. The query-matches property is a boolean representing whether the page matches that media query. Native CSS Media Queries also can be used.
  • 24. PolymerJSmAppMechanic Making Ajax Requests 24 <iron-ajax> </iron-ajax> <iron-request> </iron-request> With auto set to true, the element performs a request whenever its url, params or body properties are changed.
  • 26. PolymerJSmAppMechanic Deploying Polymer Apps 26 Build for Deployment $ polymer build The built files are output to the following folders: • build/unbundled. Contains granular resources suitable for serving via HTTP/2 with server push. • build/bundled. Contains bundled (concatenated) resources suitable for serving from servers or to clients that do not support HTTP/2 server push. Deploy to Server Polymer applications can be deployed to any web server. This template utilizes the <app-location> element to enable URL-based routing, which requires that the server serve the index.html entry point for all routes.