MAppMechanic CodeLabs - PolymerJS Advanced Topics for Custom Elements

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


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)


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


Behaviors

66

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.



Event Listeners

88

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.


Event Listeners (contd)

99

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.


Event Listeners - (advanced)

1010

Imperatively add or remove event listeners:

Custom Events



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.

downfinger/button went down down(x, y, sourceEvent)

upfinger/button went up up(x, y, sourceEvent)

tapdown and up both occurred

tap(x, y, sourceEvent)

trackmoving while finger/button is down

track(state,x, y, dx, dy …)



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.


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



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



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.


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.


Media Queries

21

✦ iron-media-queryiron-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.


Themes

22



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.



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.


mAppMechanic PolymerJS 28

Thanks

mAppMechanic

twitter.com/mAppMechanic

linkedin.com/in/rahatkh

[email protected]

MAppMechanic CodeLabs - PolymerJS Advanced Topics for Custom Elements

Technology