Polymer project presentation
-
Upload
jskvara -
Category
Engineering
-
view
378 -
download
4
description
Transcript of Polymer project presentation
![Page 1: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/1.jpg)
Polymer
Jakub Škvára@skvaros
Interaktivní prezentace: https://slides.com/jskvara/polymer/
![Page 2: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/2.jpg)
What is polymerPolymer is a new type of library for
the web, built on top of Web Components, and designed to
leverage the evolving web platform … on modern browsers.
Polymer je nový typ knihovny pro web od Googlu, postavený na standardech Web Components a slouží pro zjednodušení vývoje pro web a moderní prohlížeče.
![Page 3: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/3.jpg)
Core Elements
Základní elementy (Core elements)Ukázka: http://www.polymer-project.org/components/core-elements/demo.html
![Page 4: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/4.jpg)
Paper Elements
Material design (elementy od Google stejné pro web i Android)Ukákzka: http://www.polymer-project.org/components/paper-elements/demo.html
![Page 5: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/5.jpg)
Divs Hell
Aktuální vývoj aplikací vypadá tak, že máme HTML plné elemntů <div> bez dalšího významu, což je extrémně nepřehledné.
![Page 6: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/6.jpg)
Web Components je soubor specifikací, jak používat vlastní elementy v HTML.Moderní JS framworky již vlastní elementy používají, ale mají vlastní implementace.
Everything is an element● AngularJs - directive● EmberJs - component● ReactJs - component
![Page 7: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/7.jpg)
Součástí polymeru jsou: polyfilly pro starší prohlížeče (Foundation), polymer.js (přidává funkcionalitu) a elementy (Core + Paper elements)
![Page 8: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/8.jpg)
The Polymer world-view(Everything is an Element)
Výhody komponent: Funkční (browser ví jak vykreslit), Znovupoužitelné, Interakce s JS, Zapouzdřenost, Konfigurovatelné, Programovatelné, JS Eventy, Skládatelné. Př:<video>
● Functional● Reusable● Interoperable● Encapsulated● Configurable● Programmable● Event generator● Composable <video>
![Page 9: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/9.jpg)
Features
Hlavní specifikace Web Component: Shadow dom(zapouzdření), HTML Import (jako CSS import), Custom elements (naše elemeny). Polymer přidává šablony a data-binding
● Web Components○ Shadow dom (better <iframe>)○ HTML Imports (<link rel="import"
href="....html">)○ Custom elements (createdCallback,
attachedCallback, detachedCallback, attributeChangedCallback)
● Polymer○ Templates (<template></template>)○ data-binding ({{model}})
![Page 10: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/10.jpg)
Current state
Vše nativní od Google Chrome verze 36Pro ostatní prohlížeče existují polyfillyNěkteré specifikace jsou použitelné již dnesGithub používá tag <time> dnes
Chrome > 36 - native
Polyfills
Custom Elements
■ OK (except :unresolved)■ Github using <time>
![Page 11: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/11.jpg)
Other libraries
Existuje knihovna využívající standardy Web Components od Mozilly s nazvem X-Tag.Mozilla a Google spolu komunikují při vývoji obou knihoven, aby zachovaly kompatibilitu
● X-Tag + Bricks (mozilla)● Cooperation
![Page 12: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/12.jpg)
Future
Do budoucna: web components více rozšířené a součástí browserůAngular 2 bude pravděpodobně používat Polymer a ReactJS uvažuje o použití
● Standard● Native Libraries● Angular 2● ReactJS
![Page 13: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/13.jpg)
Designer
Polymer designer (webová aplikace na rychlý návrh polymerových komponent)Ukázka: http://www.polymer-project.org/tools/designer/
![Page 14: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/14.jpg)
Calculator
Kalkulačka za použití paper elementůUkázka: http://www.polymer-project.org/components/paper-calculator/demo.html
![Page 15: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/15.jpg)
Todo MVC
Polymer Todo MVC (stejná aplikace napsaná v různých JS frontend frameworcích)Ukázka: http://todomvc.com/architecture-examples/polymer/
![Page 16: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/16.jpg)
Chromium Features Dashboard
Přehled implementovaných vlastností v různých verzích prohlížeče ChromiumUkázka: http://www.chromestatus.com/features
![Page 17: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/17.jpg)
Custom Elements
Sbírka hotových elementů, které lze použít na webuUkázka: http://customelements.io/
![Page 18: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/18.jpg)
Google Web Components
Sbírka hotových google elementů, které lze použít na webuUkázka: http://googlewebcomponents.github.io/
![Page 19: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/19.jpg)
Import Custom Element
Použití hotového elementu
<!-- Polyfill Web Components support for older browsers -->
<script src="components/platform/platform.js"></script>
<!-- Import element -->
<link rel="import" href="google-map.html">
<!-- Use element -->
<google-map lat="37.790" long="-122.390"></google-map>
![Page 20: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/20.jpg)
Create Custom Element
Vytvoření nového elementu
<polymer-element name="my-counter" attributes="counter">
<template><style> /*...*/ </style>
<div id="label"><content></content></div>
Value: <span id="counterVal">{{counter}}</span><br>
<button on-tap="{{increment}}">Increment</button>
</template>
<script>
Polymer({
counter: 0, // Default value
counterChanged: function() {this.$.counterVal.classList.add('highlight');},
increment: function() {this.counter++;}
});
</script>
</polymer-element>
![Page 21: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/21.jpg)
polymer.dart
Vytvoření nového elementu v programovacím jazyce Dart
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement {
@observable int count = 0;
ClickCounterElement.created() : super.created();
void increment(Event e, var detail, Node target) {
count += 1;
}
}
![Page 22: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/22.jpg)
Custom attributes
Používání vlastních atributů u elementů
<polymer-element name="volume-nob">
<template>
<p>You turned the volume to {{volume}}.</p>
</template>
<script type="application/dart" src="volume_nob.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('volume-nob')
class VolumeNobElement extends PolymerElement {
// @published means 'this is an attribute', and it is observable.
@published int volume = 0;
VolumeNobElement.created() : super.created();
}
<volume-nob
volume="11">
</volume-nob>
![Page 23: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/23.jpg)
Template conditionals
Podmínky v šablonách
<polymer-element name="click-counter">
<template>
<button on-click="{{increment}}">Click
Me</button>
<template if="{{count <= 0}}">
<p>Click the button. It is fun!</p>
</template>
<template if="{{count > 0}}">
<p>You clicked {{count}} times.</p>
</template>
</template>
<script type="application/dart" src="
click_counter.dart"></script>
</polymer-element>
import 'package:polymer/polymer.dart';
import 'dart:html';
@CustomTag('click-counter')
class ClickCounterElement extends PolymerElement {
@observable int count = 0;
ClickCounterElement.created() : super.created();
void increment(Event e, var detail, Node target) {
count += 1;
}
}
![Page 24: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/24.jpg)
Template loops
Cykly v šablonách
<polymer-element name="fav-fruits">
<template>
<ul>
<template repeat="{{fruit in fruits}}">
<li>I like {{ fruit }}.</li>
</template>
</ul>
</template>
<script type="application/dart" src="fav_fruits.dart"></script>
</polymer-element>import 'package:polymer/polymer.dart';
@CustomTag('fav-fruits')
class FavFruitsElement extends PolymerElement {
final List fruits = toObservable(['apples', 'pears', 'bananas']);
FavFruitsElement.created() : super.created();
}
![Page 25: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/25.jpg)
Extending DOM elements
Rozšíření DOM elementů
<polymer-element name="fancy-button" extends="button">
<template>
<style>:host {background: pink;}</style>
<content></content>
</template>
<script type="application/dart" src="fancy_button.dart"></script>
</polymer-element> import 'package:polymer/polymer.dart';
import 'dart:html' show ButtonElement;
@CustomTag('fancy-button')
class FancyButton extends ButtonElement with Polymer, Observable {
FancyButton.created() : super.created() {
polymerCreated();
}
}
<button is="fancy-button">Click me</button>
![Page 26: Polymer project presentation](https://reader030.fdocuments.in/reader030/viewer/2022020306/547e5380b37959532b8b547e/html5/thumbnails/26.jpg)
Why you should beexcited
Proč se o Polymer zajímat? Produktivita (známé technologie + lepší čitelnost) a znovupoužitelnost (hotové komponenty, spolupráce s frameworky, izolace CSS)
Developer productivity
■ DOM + JS + CSS → no new APIs to learn!■ say what you mean → readability
Re-usability
■ don't reinvent the wheel■ easy interop with other frameworks■ CSS isolation
Good software engineering paradigms on web (OOP)