Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(177)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: src/site/polymer-dart/index.markdown

Issue 23619013: start talking about polymer.dart (Closed) Base URL: git@github.com:dart-lang/dartlang.org.git@master
Patch Set: Created 7 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« src/site/docs/tutorials/web-ui/index.markdown ('K') | « src/site/js/scripts.js ('k') | src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown » ('j') | src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: src/site/polymer-dart/index.markdown
diff --git a/src/site/polymer-dart/index.markdown b/src/site/polymer-dart/index.markdown
new file mode 100644
index 0000000000000000000000000000000000000000..28c2c2c0b1ac73b507f1a0dab1f10d18f872b5f4
--- /dev/null
+++ b/src/site/polymer-dart/index.markdown
@@ -0,0 +1,447 @@
+---
+layout: default
+title: "Polymer.dart"
+description: "Standards-based Web components, templates,
+and data binding for Dart web apps. A Dart port of the Polymer project."
+has-permalinks: true
+---
+
+<style>
+
+.features h2 {
+ color: gray;
+}
+
+.features i {
+ font-size: 5em;
+}
+
+ol {
+ margin-left: 11px;
+}
+
+.sidenav.affix {
+ top: 55px;
+}
+
+hr {
+ margin: 44px 0;
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+ .sidenav.affix {
+ top: 0;
+ }
+}
+
+@media (max-width: 767px) {
+ .sidenav.affix {
+ position: static;
+ width: auto;
+ top: 0;
+ }
+}
+
+.hero-unit h1 {
+ margin-bottom: 22px;
+}
+
+</style>
+
+<div class="hero-unit">
+ <h1> {{page.title}} </h1>
+ <p>
+ Build structured, encapsulated, client-side web apps with Dart and
+ web components.<br>
+ <em>A Dart port of the
+ <a href="http://www.polymer-project.org">Polymer project</a>.</em>
+ </p>
+</div>
+
+<div class="row-fluid" markdown="1">
+
+<div class="span3" markdown="1">
+
+<div class="sidenav" data-spy="affix" data-offset-top="250" markdown="1">
+
+1. ToC
+{:toc .toc .nav .nav-list}
+
+</div>
+
+</div>
+
+<div class="span8" markdown="1">
+
+
+Polymer.dart, the next evolution of Web UI, is an <em>in-progress</em>
+Dart port of the
+[Polymer project][polymer].
+Polymer.dart compiles to JavaScript and runs
+across the modern web.
mem 2013/09/04 17:39:55 If I'm coming to this without ever seeing Web UI b
sethladd 2013/09/04 21:11:02 Good point. I moved the reference to Web UI down.
+
+
+## Features
+
+<div class="row-fluid features">
+
+<div class="span4 text-center">
+
+<i class="icon icon-code" style="color: #457FFF"> </i>
+
+<h2 class="no-permalink">Custom tags</h2>
+
+Create your own HTML tags that encapsulate
mem 2013/09/04 17:39:55 tags that -> tags to
sethladd 2013/09/04 21:11:02 Done.
+style, structure, and behavior.
+
+</div>
+
+<div class="span4 text-center">
+
+<i class="icon icon-exchange" style="color: #FF7A5F"> </i>
+
+<h2 class="no-permalink">Data binding</h2>
+
+Live, two-way bindings for Dart objects and DOM nodes.
mem 2013/09/04 17:39:55 for Dart objects -> between Dart objects
sethladd 2013/09/04 21:11:02 Done.
+
+</div>
+
+<div class="span4 text-center">
+
+<i class="icon icon-leaf" style="color: #90CC23"> </i>
+
+<h2 class="no-permalink">Future proof</h2>
+
+Built on emerging web standards,
+available to you today.
+
+</div>
+
+</div>
+
+
+<hr>
+
+## Examples
+
+### Custom elements
+
+Extend the lexicon of HTML with your own custom elements.
+
+Below is a very simple custom element. More advanced custom elements
mem 2013/09/04 17:39:55 remove "very"
sethladd 2013/09/04 21:11:02 Done.
+can contain their own styles, custom behavior, data binding, and more.
+
+{% prettify html %}
+<head>
+ <link rel="import" href="[[highlight]]hello_world.html[[/highlight]]">
+ <script src="packages/polymer/boot.js"></script>
+</head>
+
+<body>
+ [[highlight]]<hello-world></hello-world>[[/highlight]]
+</body>
+{% endprettify %}
+
+{% prettify html %}{% raw %}
+<polymer-element name="[[highlight]]hello-world[[/highlight]]">
+ <template>
+ <p>Hello from inside a custom element!<p>
+ </template>
+ <script type="application/dart">
+ import 'package:polymer/polymer.dart';
+
+ @CustomTag('hello-world')
+ class HelloWorldElement extends PolymerElement {
+ }
+ </script>
+</polymer-element>
+{% endraw %}{% endprettify %}
+
+<hr>
+
+### Data binding
+
+Sync object models and DOM nodes with live, two-way data binding.
mem 2013/09/04 17:39:55 Synchronize DOM nodes and object models using live
sethladd 2013/09/04 21:11:02 Done.
+
+In this sample, the `count` field of `ClickCounterElement` is
+bound to the `{% raw %}{{count}}{% endraw %}` placeholder in the custom
+element's `<template>`. When the count field changes, the text also
mem 2013/09/04 17:39:55 should count be in code font?
sethladd 2013/09/04 21:11:02 Done.
+changes.
+
+{% prettify html %}{% raw %}
+<polymer-element name="click-counter">
+ <template>
+ <button on-click="increment">Click Me</button>
+ <p>You clicked the button [[highlight]]{{count}}[[/highlight]] times.</p>
+ </template>
+ <script type="application/dart">
+ import 'package:polymer/polymer.dart';
+ import 'dart:html';
+
+ @CustomTag('click-counter')
+ class ClickCounterElement extends PolymerElement with ObservableMixin {
+ [[highlight]]@observable int count[[/highlight]] = 0;
+
+ void increment(Event e, var detail, Node target) {
+ count += 1;
+ }
+ }
+ </script>
+</polymer-element>
+{% endraw %}{% endprettify %}
+
+<hr>
+
+### Template conditionals
+
+Control the UI with declarative conditionals and loops on templates.
mem 2013/09/04 17:39:55 Don't mention loops here. You've got that in a sec
sethladd 2013/09/04 21:11:02 Done.
+
+Template conditionals are part of the data binding infrastructure. If
+`count` changes, the templates are automatically re-evaluated.
+
+{% prettify html %}{% raw %}
+<polymer-element name="click-counter">
+ <template>
+ <button on-click="increment">Click Me</button>
+ <template [[highlight]]if="{{count <= 0}}"[[/highlight]]>
+ <p>Click the button. It's fun!</p>
+ </template>
+ <template [[highlight]]if="{{count > 0}}"[[/highlight]]>
+ <p>You clicked the button {{count}} times.</p>
+ </template>
+ </template>
+ <script type="application/dart">
+ import 'package:polymer/polymer.dart';
+ import 'dart:html';
+
+ @CustomTag('click-counter')
+ class ClickCounterElement extends PolymerElement with ObservableMixin {
+ @observable int count = 0;
+
+ void increment(Event e, var detail, Node target) {
+ count += 1;
+ }
+ }
+ </script>
+</polymer-element>
+{% endraw %}{% endprettify %}
+
+<hr>
+
+### Template loops
+
+Loop through a collection, rendering a template for every item in the collection.
mem 2013/09/04 17:39:55 you're not really rendering a template so much as
sethladd 2013/09/04 21:11:02 Done.
+
+Template loops are part of the data binding infrastructure. If an item is
+added or removed from `fruits`, the contents of `<ul>` are automatically
+updated.
+
+{% prettify html %}{% raw %}
+<polymer-element name="fav-fruits">
+ <template>
+ <ul>
+ <li [[highlight]]template repeat="{{fruit in fruits}}"[[/highlight]]>
+ I like {{ fruit }}.
+ </li>
+ </ul>
+ </template>
+ <script type="application/dart">
+ import 'package:polymer/polymer.dart';
+
+ @CustomTag('fav-fruits')
+ class FavFruitsElement extends PolymerElement with ObservableMixin {
+ final List [[highlight]]fruits = toObservable[[/highlight]](['apples', 'pears', 'bananas']);
+ }
+ </script>
+</polymer-element>
+{% endraw %}{% endprettify %}
+
+<hr>
+
+### Packaging
+
+Reuse and share custom elements with pub, the Dart package manager.
mem 2013/09/04 17:39:55 The term pub is overloaded. It's both the tool and
sethladd 2013/09/04 21:11:02 Done.
+
+{% prettify bash %}{% raw %}
+> pub install fancy_button
+{% endraw %}{% endprettify %}
+
+{% prettify html %}{% raw %}
+<head>
+ <link [[highlight]]rel="import"[[/highlight]]
+ href="packages/fancy_button/fancy_button.html">
+</head>
+<body>
+ <button [[highlight]]is="fancy-button"[[/highlight]]>Click me!</button>
+</body>
+{% endraw %}{% endprettify %}
+
+<hr>
+
+## Installation
+
+Get polymer.dart from [pub](http://pub.dartlang.org),
+the Dart package manager. Add the following to
mem 2013/09/04 17:39:55 the Dart package manager -> the Dart shared packag
sethladd 2013/09/04 21:11:02 Done.
+your `pubspec.yaml` file:
+
+ dependencies:
+ polymer: any
+
+Then, run `pub install` to download the package and link it into your app.
+
+View the [polymer.dart pub page](http://pub.dartlang.org/packages/polymer)
+to learn more.
+
+<hr>
+
+## Tools
+
+Polymer.dart offers a validator that reports syntax or usage warnings.
+The validator can be connected to Dart Editor to display warnings directly
+at the source.
+
+More information to come.
+
+<hr>
+
+## Upgrading from Web UI
+
+Here is a non-exhaustive [list of tips](upgrading-to-polymer-from-web-ui.html)
+for developers upgrading from
mem 2013/09/04 17:39:55 The list isn't really "here". [Upgrading to polym
sethladd 2013/09/04 21:11:02 Done.
+Web UI to polymer.dart.
+
+<hr>
+
+## Compatibility
+
+Polymer.dart is tested against IE9, IE10, Safari 6, latest Chrome,
+latest Firefox, and latest Chrome for Android.
mem 2013/09/04 17:39:55 does it pass? Polymer.dart works with ...
sethladd 2013/09/04 21:11:02 "is tested" doesn't imply passing or failing, so I
+
+The Dart team collaborates with the Polymer team to
+ensure that polymer.dart elements and polyfills are fully compatible with
+Polymer project.
mem 2013/09/04 17:39:55 first use of the term polyfill. What is it?
sethladd 2013/09/04 21:11:02 Done.
+
+<hr>
+
+## Support
+
+We actively encourage your feedback and questions.
+
+* Ask your [how-to questions][so] on StackOverflow
+* Join the [general discussion about polymer.dart][web-ui-list] on our mailing
+ list
+* Send [feedback on the web components family of specifications][polymer-dev-list]
+ to the polymer-dev mailing list
+ (Not Dart specific.)
+* Please file [bugs and feature requests][dartbug] for polymer.dart
+
+<hr>
+
+## Source code
+
+Polymer.dart is open source. You can view the source to polymer.dart,
+and its many component packages, at [dart.googlecode.com/](https://code.google.com/p/dart/source/browse/branches/bleeding_edge/dart/pkg/).
+[Get the source](https://code.google.com/p/dart/wiki/GettingTheSource)
+to learn how to contribute patches.
mem 2013/09/04 17:39:55 to inspect the code and contribute patches.
sethladd 2013/09/04 21:11:02 Done.
+
+<hr>
+
+## Status
+
+Polymer.dart is a work in progress, just like the Polymer project.
+
+### Web UI parity
+
+Web UI is the precursor to polymer.dart. Polymer.dart is not quite
+at feature parity with Web UI. Below is a list of Web UI features
+that have not yet been implemented in polymer.dart:
+
+* Index iteration available as variable inside of loops
mem 2013/09/04 17:39:55 Weird to have a list of one. Also the wording is
sethladd 2013/09/04 21:11:02 agreed... what else do we need in this list?
+
+### Polymer project parity
+
+One of Polymer.dart's goal is to make the entire Polymer project available
mem 2013/09/04 17:39:55 One of our goals is to make ... or One of our goal
sethladd 2013/09/04 21:11:02 Done.
+to Dart developers.
+
+| Feature | Dart port completion
+|--
+| Custom Elements | 80%
+| Shadow DOM | 100%
+| Observers | 100%
+| Node.bind() | 100%
+| Template Binding | 100%
+| HTML imports | 90%
+| [Polymer Core](https://github.com/Polymer/polymer) | 50%
+| Polymer Expressions | 75%
+| Pointer events | 0%
+| Web animations | 0%
+| [Polymer base elements](https://github.com/Polymer/polymer-elements) | 0%
+| [Polymer UI elements](https://github.com/Polymer/polymer-elements) | 0%
+{: .table}
+
+The percentages in the table above are subjective estimates. They attempt to
+convey how complete the Dart port is, compared to
+the original Polymer JavaScript code.
+
+<hr>
+
+## Additional reading
+
+The cultured Dartisan studies the specifications and articles that cover
+the lower-level primitives and features of the polymer.dart libraries.
+
+### Polymer project
+
+* Read the [guiding principles](http://www.polymer-project.org/#guiding-principles)
+ of the Polymer project
+* Watch the [Hello, Polymer!](http://www.youtube.com/watch?v=irGDN5Ysi_A)
+ video featuring some of the leads of the
mem 2013/09/04 17:39:55 some of the leads -> lead members
sethladd 2013/09/04 21:11:02 Done.
+ Polymer project.
+
+### Articles
+
+* [HTML5Rocks - Shadow DOM 101](http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/)
+
+* [HTML5Rocks - Shadow DOM 201: CSS and Styling](http://www.html5rocks.com/tutorials/webcomponents/shadowdom-201/)
+
+* [HTML5Rocks - Shadow DOM 301: Advanced Concepts & DOM APIs](http://www.html5rocks.com/tutorials/webcomponents/shadowdom-301/)
+
+* [Custom elements - defining new elements in HTML](http://www.html5rocks.com/en/tutorials/webcomponents/customelements/)
+
+### Specifications
+
+Much of polymer.dart is built upon new and emerging web specifications.
+Polymer.dart offers polyfills for the following features.
+
+Head's up: these are specs written for implementors. Lots of details ahead.
+
+[Custom elements][custom-elements-spec]
+: A method for enabling the author to define and use new types of DOM elements.
+
+[Shadow DOM][shadow-dom-spec]
+: An encapsulation primitive for DOM subtrees. It provides a method of
+establishing and maintaining functional boundaries between DOM trees and how
+these trees interact with each other within a document, thus enabling better
+functional encapsulation within the DOM.
+
+[Template element][template-spec]
+: A method for declaring inert DOM subtrees in HTML and manipulating them
+to instantiate document fragments with identical contents.
+
+[HTML Imports][html-imports-spec]
+: A way to include and reuse HTML documents in other HTML documents.
+
+
+</div>
+
+</div>
+
+[polymer]: http://www.polymer-project.org
+[so]: http://stackoverflow.com/tags/dart
+[web-ui-list]: http://example.com/tbd
+[polymer-dev-list]: http://example.com/tbd
+[dartbug]: http://dartbug.com/new
+[custom-elements-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html
+[shadow-dom-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html
+[html-imports-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/imports/index.html
+[template-spec]: https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html
« src/site/docs/tutorials/web-ui/index.markdown ('K') | « src/site/js/scripts.js ('k') | src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown » ('j') | src/site/polymer-dart/upgrading-to-polymer-from-web-ui.markdown » ('J')

Powered by Google App Engine
This is Rietveld 408576698