Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Polymer 
Jakub Škvára 
@skvaros 
Interaktivní prezentace: https://slides.com/jskvara/polymer/
What is polymer 
Polymer is a new type of library for 
the web, built on top of Web 
Components, and designed to 
leverage...
Core Elements 
Základní elementy (Core elements) 
Ukázka: http://www.polymer-project.org/components/core-elements/demo.htm...
Paper Elements 
Material design (elementy od Google stejné pro web i Android) 
Ukákzka: http://www.polymer-project.org/com...
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ře...
Everything is an element 
● AngularJs - directive 
● EmberJs - component 
● ReactJs - component 
Web Components je soubor ...
Součástí polymeru jsou: polyfilly pro starší prohlížeče (Foundation), polymer.js (přidává 
funkcionalitu) a elementy (Core...
The Polymer world-view 
(Everything is an Element) 
● Functional 
● Reusable 
● Interoperable 
● Encapsulated 
● Configura...
Features 
● Web Components 
○ Shadow dom (better <iframe>) 
○ HTML Imports (<link rel="import" 
href="....html">) 
○ Custo...
Current state 
Chrome > 36 - native 
Polyfills 
Custom Elements 
■ OK (except :unresolved) 
■ Github using <time> 
Vše nat...
Other libraries 
● X-Tag + Bricks (mozilla) 
● Cooperation 
Existuje knihovna využívající standardy Web Components od Mozi...
Future 
● Standard 
● Native Libraries 
● Angular 2 
● ReactJS 
Do budoucna: web components více rozšířené a součástí brow...
Designer 
Polymer designer (webová aplikace na rychlý návrh polymerových komponent) 
Ukázka: http://www.polymer-project.or...
Calculator 
Kalkulačka za použití paper elementů 
Ukázka: http://www.polymer-project.org/components/paper-calculator/demo....
Todo MVC 
Polymer Todo MVC (stejná aplikace napsaná v různých JS frontend frameworcích) 
Ukázka: http://todomvc.com/archit...
Chromium Features Dashboard 
Přehled implementovaných vlastností v různých verzích prohlížeče Chromium 
Ukázka: http://www...
Custom Elements 
Sbírka hotových elementů, které lze použít na webu 
Ukázka: http://customelements.io/
Google Web Components 
Sbírka hotových google elementů, které lze použít na webu 
Ukázka: http://googlewebcomponents.githu...
Import Custom Element 
<!-- Polyfill Web Components support for older browsers --> 
<script src="components/platform/platf...
Create Custom Element 
<polymer-element name="my-counter" attributes="counter"> 
<template><style> /*...*/ </style> 
<div ...
polymer.dart 
import 'package:polymer/polymer.dart'; 
import 'dart:html'; 
@CustomTag('click-counter') 
class ClickCounter...
Custom attributes 
<polymer-element name="volume-nob"> 
<template> 
<p>You turned the volume to {{volume}}.</p> 
</templat...
Template conditionals 
<polymer-element name="click-counter"> 
<template> 
<button on-click="{{increment}}">Click 
Me</but...
Template loops 
<polymer-element name="fav-fruits"> 
<template> 
<ul> 
<template repeat="{{fruit in fruits}}"> 
<li>I like...
Extending DOM elements 
<polymer-element name="fancy-button" extends="button"> 
<template> 
<style>:host {background: pink...
Why you should be 
excited 
Developer productivity 
■ DOM + JS + CSS → no new APIs to learn! 
■ say what you mean → readab...
Prochain SlideShare
Chargement dans…5
×

Polymer project presentation

4 307 vues

Publié le

Polymer presentation from: Dart + Polymer code lab

GUG.cz 30.8.2014

Publié dans : Ingénierie
  • Soyez le premier à commenter

Polymer project presentation

  1. 1. Polymer Jakub Škvára @skvaros Interaktivní prezentace: https://slides.com/jskvara/polymer/
  2. 2. What is polymer Polymer 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.
  3. 3. Core Elements Základní elementy (Core elements) Ukázka: http://www.polymer-project.org/components/core-elements/demo.html
  4. 4. Paper Elements Material design (elementy od Google stejné pro web i Android) Ukákzka: http://www.polymer-project.org/components/paper-elements/demo.html
  5. 5. 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é.
  6. 6. Everything is an element ● AngularJs - directive ● EmberJs - component ● ReactJs - component Web Components je soubor specifikací, jak používat vlastní elementy v HTML. Moderní JS framworky již vlastní elementy používají, ale mají vlastní implementace.
  7. 7. Součástí polymeru jsou: polyfilly pro starší prohlížeče (Foundation), polymer.js (přidává funkcionalitu) a elementy (Core + Paper elements)
  8. 8. The Polymer world-view (Everything is an Element) ● Functional ● Reusable ● Interoperable ● Encapsulated ● Configurable ● Programmable ● Event generator ● Composable <video> Výhody komponent: Funkční (browser ví jak vykreslit), Znovupoužitelné, Interakce s JS, Zapouzdřenost, Konfigurovatelné, Programovatelné, JS Eventy, Skládatelné. Př:<video>
  9. 9. Features ● 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}}) 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
  10. 10. Current state Chrome > 36 - native Polyfills Custom Elements ■ OK (except :unresolved) ■ Github using <time> Vše nativní od Google Chrome verze 36 Pro ostatní prohlížeče existují polyfilly Některé specifikace jsou použitelné již dnes Github používá tag <time> dnes
  11. 11. Other libraries ● X-Tag + Bricks (mozilla) ● Cooperation 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
  12. 12. Future ● Standard ● Native Libraries ● Angular 2 ● ReactJS 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í
  13. 13. Designer Polymer designer (webová aplikace na rychlý návrh polymerových komponent) Ukázka: http://www.polymer-project.org/tools/designer/
  14. 14. Calculator Kalkulačka za použití paper elementů Ukázka: http://www.polymer-project.org/components/paper-calculator/demo.html
  15. 15. Todo MVC Polymer Todo MVC (stejná aplikace napsaná v různých JS frontend frameworcích) Ukázka: http://todomvc.com/architecture-examples/polymer/
  16. 16. Chromium Features Dashboard Přehled implementovaných vlastností v různých verzích prohlížeče Chromium Ukázka: http://www.chromestatus.com/features
  17. 17. Custom Elements Sbírka hotových elementů, které lze použít na webu Ukázka: http://customelements.io/
  18. 18. Google Web Components Sbírka hotových google elementů, které lze použít na webu Ukázka: http://googlewebcomponents.github.io/
  19. 19. Import Custom Element <!-- 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> Použití hotového elementu
  20. 20. Create Custom Element <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> Vytvoření nového elementu
  21. 21. polymer.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; } } Vytvoření nového elementu v programovacím jazyce Dart
  22. 22. Custom attributes <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> Používání vlastních atributů u elementů
  23. 23. Template conditionals <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> Podmínky v šablonách 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; } }
  24. 24. Template loops <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> Cykly v šablonách import 'package:polymer/polymer.dart'; @CustomTag('fav-fruits') class FavFruitsElement extends PolymerElement { final List fruits = toObservable(['apples', 'pears', 'bananas']); FavFruitsElement.created() : super.created(); }
  25. 25. Extending DOM elements <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'; Rozšíření DOM elementů 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>
  26. 26. Why you should be excited 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) Proč se o Polymer zajímat? Produktivita (známé technologie + lepší čitelnost) a znovupoužitelnost (hotové komponenty, spolupráce s frameworky, izolace CSS)

×