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..340cf5c6361f306caccaa6c5e26eb3a59848496a |
| --- /dev/null |
| +++ b/src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown |
| @@ -0,0 +1,83 @@ |
| +--- |
| +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. |
|
mem
2013/09/04 17:39:55
-> field name, not the old and new value.
sethladd
2013/09/04 21:11:02
Done.
|
| + |
| +* 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] |
| + 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>`. |
| + |
| +* 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). |
| + |
| +* Similar to boot.js required to be in `<head>`, your .dart script |
|
mem
2013/09/04 17:39:55
Just as boot.js is required to be in ....
sethladd
2013/09/04 21:11:02
Done.
|
| + needs to be in `<body>`, ideally at the end. |
| + This might change, see https://code.google.com/p/dart/issues/detail?id=12388 |
| + |
| +* The `apply-author-styles` attribute (which used to be on the `<element>` tag) |
| + is now set as a getter property on the class for the custom element. e.g.: |
|
mem
2013/09/04 17:39:55
is now set as a getter property -> is now a gette
sethladd
2013/09/04 21:11:02
Done.
|
| + |
| + 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. |
