Chromium Code Reviews Chromium Code Reviews
Issue 23619013:
start talking about polymer.dart (Closed)
Base URL: git@github.com:dart-lang/dartlang.org.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 --- | |
| 2 layout: default | |
| 3 title: "Upgrading to Polymer.dart from Web UI" | |
| 4 description: "Learn tips for upgrading your Web UI app to Polymer.dart." | |
| 5 has-permalinks: true | |
| 6 --- | |
| 7 | |
| 8 # {{ page.title }} | |
| 9 | |
| 10 Here is a non-exhaustive list of tips for developers upgrading from | |
| 11 Web UI to [polymer.dart](/polymer-dart/). | |
| 12 | |
| 13 Do you have other tips for upgrading? Please send us a | |
| 14 [pull request](https://github.com/dart-lang/dartlang.org) | |
| 15 for this page, or email your tips to | |
| 16 [web-ui@dartlang.org](https://groups.google.com/a/dartlang.org/forum/#!forum/web -ui). | |
| 17 Thanks in advance! | |
| 18 | |
| 19 * Use `<polymer-element>` instead of `<element>`. | |
| 20 | |
| 21 * Declarative event binding requires custom elements. | |
| 22 | |
| 23 * Go through `shadowRoot` to find nodes inside of your custom element. | |
| 24 | |
| 25 * When manually observing an object, the ChangeRecord only has the field name, | |
| 26 not the old and new value. You have to use mirrors to get the new value. | |
| 27 | |
| 28 * You should include `packages/polymer/boot.js` and **not** dart.js in your | |
| 29 HTML file. | |
| 30 | |
| 31 * The boot.js file **must** go into the `<head>` and not the `<body>`. | |
| 32 | |
| 33 * Custom tag classes need a `@CustomTag('element-name')` annotation. | |
| 34 | |
| 35 * The constructor attribute on `<polymer-element>` is no longer used. | |
| 36 | |
| 37 * Null is falsey for MDV if expressions. | |
| 38 | |
| 39 * Every custom element must have a Dart class. Use an empty Dart class | |
| 40 if necessary. See [https://code.google.com/p/dart/issues/detail?id=12254] | |
|
Jennifer Messerly
2013/09/05 04:04:19
did you mean: [issue 12254](https://code.google.co
| |
| 41 If you really don't want to create an empty class, use the | |
| 42 `registerPolymerElement('my-element', () => new PolymerElement())` | |
| 43 technique. | |
| 44 | |
| 45 * The `extends` attribute on polymer-element is optional. If you use it, | |
| 46 you should use the form of `<div is="my-element">`. If you omit the | |
| 47 `extends` attribute, you are safe to use `<my-element>`. | |
|
Jennifer Messerly
2013/09/05 04:04:19
replace "are safe to" with "should use"
| |
| 48 | |
| 49 * Getters are no longer observable. Instead, use `bindProperty` in the | |
| 50 `created` callback | |
| 51 to let the system know that a getter should be read. | |
| 52 | |
| 53 * You **must** call `super` in your `created`/`inserted` lifecycle callbacks. | |
| 54 | |
| 55 * Polymer.dart does **not** support polymer.js's `noscript` attribute on | |
| 56 `polymer-element`. All custom elements must have a Dart class (see above). | |
| 57 | |
| 58 * Just as boot.js required to be in `<head>`, your .dart script | |
| 59 needs to be in `<body>`, ideally at the end. | |
|
Jennifer Messerly
2013/09/05 04:04:19
I'm not sure this is true anymore?
| |
| 60 This might change, see https://code.google.com/p/dart/issues/detail?id=12388 | |
|
Jennifer Messerly
2013/09/05 04:04:19
[issue 12388](https://code.google.com/p/dart/issue
| |
| 61 | |
| 62 * The `apply-author-styles` attribute (which used to be on the `<element>` tag) | |
| 63 is now retrieved as a getter property on the class for the custom element. | |
|
Jennifer Messerly
2013/09/05 04:04:19
nit: "getter property" is a bit awkward, perhaps j
| |
| 64 e.g.: | |
| 65 | |
| 66 class MyElement extends PolymerElement { | |
| 67 bool get applyAuthorStyles => true; | |
| 68 // ... | |
| 69 } | |
| 70 | |
| 71 * To create an app that works when compiled to JavaScript, you need to | |
| 72 build it. See deploy_to_javascript and its `build.dart` file. Notice the | |
| 73 `--deploy` argument. | |
| 74 | |
| 75 * The `iterate` attribute no longer exists, use `repeat` on the template | |
| 76 element. | |
| 77 | |
| 78 * Polymer.dart does not support lexical scoping for binding expressions. | |
| 79 A model must be bound to a template object for a binding expression to | |
| 80 see it. | |
| 81 | |
| 82 * Polymer.dart does not support the `instantiate` attribute on the template | |
| 83 tag. To instantiate a template, simply bind a model to it, and ensure the | |
| 84 template has a `bind` attribute. | |
| 85 | |
| 86 * Polymer.dart requires `{{ }}` inside of template `if` and `repeat`. | |
| 87 Old Web UI: `template instantiate="some boolean"`. | |
| 88 New Polymer.dart: `template if="{{some boolean}}"`. | |
| OLD | NEW |
