Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Polymer project presentation

4,293 views

Published on

Polymer presentation from: Dart + Polymer code lab

GUG.cz 30.8.2014

Published in: Engineering

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)

×