Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebApp with PolymerDart and Material

naotohc
November 02, 2014

WebApp with PolymerDart and Material

naotohc

November 02, 2014
Tweet

More Decks by naotohc

Other Decks in Technology

Transcript

  1. Polymer, Dart version PolymerDart • Less cryptic. • More readable.

    • Simple familiar Dart syntax. • Can scaffold new custom tag. PolymerJS • Less key typing. • Implicit conventions.
  2. Create custom element template pub run polymer $ pub run

    polymer:new_element element-name [-o output_dir] ex: pub run polymer:new_element post-card -o lib/polymer_tutorial
  3. @annotations PolymerDart PolymerJS @CustomTag annotation to a class extending PolymerElement”

    @published to define the attribute of the custom element. @observable for data binding inside the custom element. (Optional) Type annotations (String, List, ...) to catch type errors in the development.
  4. Explicit syntax PolymerDart PolymerJS • Less key typing. • Implicit

    conventions. Also supports Life cycle methods. created(), attached(), attributeChanged(), detached(), ready() Access element instance by id with map syntax. -> this.$[‘sernive’]) Can allow any type of sender. In this example, sender is PostCard.
  5. (Observable) Map is Map PolymerDart {{post.username}} causes error. {{post[‘username’]}} because

    of the Map syntax in Dart. PolymerJS {{post.username}} is okey. It’s JavaScript.
  6. Tool: StageHand • To Scaffold new Dart project (like Yeoman)

    • http://stagehand.pub/ Available generators: consoleapp - A minimal command-line application. package - A library useful for applications or for sharing on pub.dartlang.org. polymerapp - A polymer.dart web app. shelfapp - A web server using the shelf package. webapp - A web app for the developer that doesn’t want to be confused by too much going on.
  7. References PolymerDart is Polymer. • Polymer Project https://www.polymer-project.org/ • Element

    collections https://www.polymer-project.org/docs/elements/ • PolymerDart home https://www.dartlang.org/polymer/