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| Index: src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown |
| diff --git a/src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown b/src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..4fa5cbf67b15e3ab992d141454abbc7fdef9b46b |
| --- /dev/null |
| +++ b/src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown |
| @@ -0,0 +1,88 @@ |
| +--- |
| +layout: default |
| +title: "Upgrading to Polymer.dart from Web UI" |
| +description: "Learn tips for upgrading your Web UI app to Polymer.dart." |
| +has-permalinks: true |
| +--- |
| + |
| +# {{ page.title }} |
| + |
| +Here is a non-exhaustive list of tips for developers upgrading from |
| +Web UI to [polymer.dart](/polymer-dart/). |
| + |
| +Do you have other tips for upgrading? Please send us a |
| +[pull request](https://github.com/dart-lang/dartlang.org) |
| +for this page, or email your tips to |
| +[web-ui@dartlang.org](https://groups.google.com/a/dartlang.org/forum/#!forum/web-ui). |
| +Thanks in advance! |
| + |
| +* Use `<polymer-element>` instead of `<element>`. |
| + |
| +* Declarative event binding requires custom elements. |
| + |
| +* Go through `shadowRoot` to find nodes inside of your custom element. |
| + |
| +* When manually observing an object, the ChangeRecord only has the field name, |
| + not the old and new value. You have to use mirrors to get the new value. |
| + |
| +* You should include `packages/polymer/boot.js` and **not** dart.js in your |
| + HTML file. |
| + |
| +* The boot.js file **must** go into the `<head>` and not the `<body>`. |
| + |
| +* Custom tag classes need a `@CustomTag('element-name')` annotation. |
| + |
| +* The constructor attribute on `<polymer-element>` is no longer used. |
| + |
| +* Null is falsey for MDV if expressions. |
| + |
| +* Every custom element must have a Dart class. Use an empty Dart class |
| + 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
|
| + If you really don't want to create an empty class, use the |
| + `registerPolymerElement('my-element', () => new PolymerElement())` |
| + technique. |
| + |
| +* The `extends` attribute on polymer-element is optional. If you use it, |
| + you should use the form of `<div is="my-element">`. If you omit the |
| + `extends` attribute, you are safe to use `<my-element>`. |
|
Jennifer Messerly
2013/09/05 04:04:19
replace "are safe to" with "should use"
|
| + |
| +* Getters are no longer observable. Instead, use `bindProperty` in the |
| + `created` callback |
| + to let the system know that a getter should be read. |
| + |
| +* You **must** call `super` in your `created`/`inserted` lifecycle callbacks. |
| + |
| +* Polymer.dart does **not** support polymer.js's `noscript` attribute on |
| + `polymer-element`. All custom elements must have a Dart class (see above). |
| + |
| +* Just as boot.js required to be in `<head>`, your .dart script |
| + 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?
|
| + 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
|
| + |
| +* The `apply-author-styles` attribute (which used to be on the `<element>` tag) |
| + 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
|
| + e.g.: |
| + |
| + class MyElement extends PolymerElement { |
| + bool get applyAuthorStyles => true; |
| + // ... |
| + } |
| + |
| +* To create an app that works when compiled to JavaScript, you need to |
| + build it. See deploy_to_javascript and its `build.dart` file. Notice the |
| + `--deploy` argument. |
| + |
| +* The `iterate` attribute no longer exists, use `repeat` on the template |
| + element. |
| + |
| +* Polymer.dart does not support lexical scoping for binding expressions. |
| + A model must be bound to a template object for a binding expression to |
| + see it. |
| + |
| +* Polymer.dart does not support the `instantiate` attribute on the template |
| + tag. To instantiate a template, simply bind a model to it, and ensure the |
| + template has a `bind` attribute. |
| + |
| +* Polymer.dart requires `{{ }}` inside of template `if` and `repeat`. |
| + Old Web UI: `template instantiate="some boolean"`. |
| + New Polymer.dart: `template if="{{some boolean}}"`. |
