Initial version of Dart web components article

src/site/articles/dart-web-components/index.markdown

+---
+layout: default
+title: "Dart Web Components"
+rel:
+  author: siggi-cherem
+description: "A brief introduction to Dart web components."
+has-permalinks: true
+---
+
+# {{ page.title }}
+_Written by Siggi Cherem<br />
+October 2012 <br />
+Updated: October 2012_

[Kathy Walrath, 2012/10/11 01:01:21]

Delete the "Updated" line

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+{% comment %}
+
+README --- General notes about editing this file:
+
+* This file is processed by liquid, which evaluates {{ var }} and removes the
+\{\{ and \}\} symbols from the code. Because we use \{\{\}\} in our template
+expressions, we need to escape them in a special way. Unfortunately using
+\{\{\}\} within code makes the backslash show up. There are 2 ways to work
+around this:
+  * Doing {{'{{'}}: lyquid evaluates it as a string expression returning \{\{.
+  * Using \{\% raw \%\} blocks.
+
+* the codesample blocks are an extension added to jekyll written as 'liquid'
+blocks. The meaning of a block like this:
+  \{\% codesample 80 \%\}
+
+  text
+  \{\% sample 10 20 url \%\}
+  \{\% endcodesample \%\}
+is that we'll create a table, the first colum will have sample source code (in
+this case "text"). This code can have a \{\% highlight \%\} section, but other
+than that, no markdown is supported here :(. The column width is specified as
+the first argument of the codesample tag above it (in this example 80 means
+80%). The \{\% sample \%\} tag defines the width, height, and url for an iframe
+that will contain the runnining version of the code sample.
+
+{% endcomment %}
+
+Dart web components provide a templating, data binding, and encapsulation, to

[Kathy Walrath, 2012/10/11 01:01:21]

a templating -> templates

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+help you write web applications at scale. An early version is available in the
+[dart-web-components project][dwc].
+
+Many UI frameworks exist for writing web apps in JavaScript -- for example

[Kathy Walrath, 2012/10/11 01:01:21]

-- -> —
(no spaces around it)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

ah, thanks :)

+[backbone], [ember.js][ember], and [angularjs][angular].  Recently, the web
+community has been pushing to include some of the common ideas of these
+frameworks directly into the browser platform.  A result has been added features

[Kathy Walrath, 2012/10/11 01:01:21]

I told you to do this, but it's too easy to read wrong. :( How about:

A result ... ->
As a result, browsers have added features like ..., and other experimental and
cool ideas have been proposed, such as ... (MDV).

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+like [shadow DOM][sd] and [web components][wc], and other experimental and cool
+ideas like [model-driven views][mdv] (MDV).
+
+Dart web components combine the ideas of web components and MDV, adapting them
+to work well with Dart.  Dart web components take advantage of advanced browser
+features when possible, emulating missing features when necessary.
+
+In this article, we'll walk through some examples that illustrate how to write

[Kathy Walrath, 2012/10/11 01:01:21]

In this article, we'll walk -> This article walks

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+and use Dart web components. Soon we'll be creating a document with a detailed

[Kathy Walrath, 2012/10/11 01:01:21]

I initially thought that "Soon" meant "In this document", in part because I
wasn't sure who "we" meant.) How about:

We plan to publish additional documents soon, including a detailed specification
and instructions for using Dart web component tools.

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

done.

+specification, and another document with instructions on how to use the Dart web
+component tools.

[Kathy Walrath, 2012/10/11 01:01:21]

It could be helpful to stick a table of contents here. E.g., see:

http://www.dartlang.org/articles/js-dart-interop/

There doesn't appear to be an autogeneration for TOCs, but the IDs are
automatically generated from heading text. Or you can specify your own ID after
a title, like this:

#### Contents {#toc}

Even if you don't show a TOC, it's helpful to have one during development so you
can see your structure clearly. E.g., creating one for your article made me want
to change the section headings/order a bit and change the "Upcoming features"
from ### to ##. If you do everything I suggest, you'll have something like this:

  MDV templates in Dart
    One-way data binding
    Two-way data binding
    Conditionals
    Loops
    Event listeners
    Summary of templates
  Web components in Dart
    Declaring a component
    Instantiating a component
    Passing data to a component
    Importing a component
  Upcoming features
  Tools for using Dart web components
  More information

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+## MDV templates in Dart
+
+Most UI frameworks provide some form of templating to declare views with a
+succinct declarative syntax. Dart web components closely follow the MDV syntax,

[Kathy Walrath, 2012/10/11 01:01:21]

delete "declarative"? (it's repetitive due to the earlier "declare")

alternatively, change "declare" to "specify"

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done. Did the latter because I wanted to emphasize that the way you specify them
is in a declarative language.

+which is basically HTML with small extensions to enable the following features:
+
+  * **One-way data binding**: Embed data into your UI
+  * **Two-way data binding**: Keep data in sync with UI changes
+  * **Events listeners**: Easily attach code that reacts to UI events

[Kathy Walrath, 2012/10/11 01:01:21]

Events listeners sounds weird to me.
->
Event listeners
?

Also, the event listener section is after the Loops section, so move this item
down to the end of the list.

(The reason: It's good to match order unless you have a good reason not to. It
helps the reader know what to expect, and not waste time thinking. :)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+  * **Conditionals**: Selectively show parts of the UI
+  * **Loops**: Construct lists and tables by iterating over collections
+
+We made some changes to make sure that using Dart with MDV feels natural, but

[Kathy Walrath, 2012/10/11 01:01:21]

make sure -> ensure 
OR be sure

(to avoid repetition of "made")

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+otherwise all the concepts from MDV are available here.  Let's take a look at
+examples for each of these features.
+
+### One-way data bindings

[Kathy Walrath, 2012/10/11 01:01:21]

bindings -> binding

(Match the item in the list)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+You can inject data in your template using `{{'{{'}}expression}}`.  The
+example below shows a simple hello world program where the value of the Dart
+top-level variable `dataValue` is injected in the page automatically. The right
+column shows the app generated from this code running in an iframe.
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <div>Hello {{dataValue}}!</div>
+  <script type="application/dart">
+    String dataValue;
+    main() {
+      var today = new Date.now();
+      dataValue = 'world ${today.year}-${today.month}-${today.day}';
+    }
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/helloworld.html %}
+{% sample 300px 200px http://dart-lang.github.com/dart-web-components/example/explainer/helloworld.html.html %}
+{% endcodesample %}
+
+The template expression we just saw above is what we call a **one-way data
+binding**. Like in many other UI libraries and frameworks, we automatically
+watch for changes in your data and ensure the UI is up-to-date whenever the data
+changes.
+
+Dart web components do this by using the [watcher.dart][watcher] library
+(included with the Dart web components package). You can listen for changes and
+notify everyone when changes might occur. The following example illustrates how
+you would manually use this library:
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <div>Hello counter: {{count}}</div>
+  <script type="application/dart">
+    import 'dart:html';
+    import 'package:web_components/watcher.dart' as watchers;
+    int count;
+    main() {
+      count = 0;
+      window.setInterval(() {
+        count++;
+        watchers.dispatch(); 
+      }, 1000);
+    }
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/counter.html %}
+{% sample 300px 200px http://dart-lang.github.com/dart-web-components/example/explainer/counter.html.html %}
+{% endcodesample %}
+
+The code manually invokes [watchers.dispatch()][watcher.dispatch] to make a
+change visible to the UI. Every now and then it is useful to access watchers
+directly, but we have found that we often don't have to manually write these
+calls. In particular, Dart web components will automatically make the dispatch
+call when using common features like two-way binding and attaching event
+listeners.
+
+### Two-way data bindings

[Kathy Walrath, 2012/10/11 01:01:21]

bindings -> binding

[Kathy Walrath, 2012/10/11 01:01:21]

sd

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+Two-way data bindings lets us define that we want a DOM element's value

[Kathy Walrath, 2012/10/11 01:01:21]

bindings -> binding

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+(typically an input box or a check box) to be kept in sync with the value of a
+Dart variable. The following example creates a two way binding between `str` and
+`input.value`. We declare this binding by writing the attribute
+`data-bind="value:str"`.
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <div>
+    Input:
+    <input type="text" data-bind="value:str" placeholder="type something here">
+    <div> Value: {{str}}</div>
+    <div> Length: {{str.length}}</div>
+  </div>
+  <script type="application/dart">
+    String str = '';
+    main() {}
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/twoway.html %}
+{% sample 300px 200px http://dart-lang.github.com/dart-web-components/example/explainer/twoway.html.html %}
+{% endcodesample %}
+
+This is a simple example where Dart web components automatically dispatch
+events for data-model changes. In particular, whenever you update the value of
+the text box, the string and it's length will be updated in other parts of the

[Kathy Walrath, 2012/10/11 01:01:21]

it's -> its

(if you think of 'his' and 'hers', then 'its' for possessive should be easier to
remember)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

thanks :) - this is one where if I think about it I can see it, but I easily
read through it without noticing it :(

+UI.
+
+### Data-binding expressions

[Kathy Walrath, 2012/10/11 01:01:21]

If you look at the TOC, this isn't like the other sections. Change it to a note?
I don't know how to do this in markdown, but I think you can just use HTML:

<aside>
  <div class="alert alert-info">
    <strong>A note about expressions:</strong>
    ...words go here...
  </div>
</aside>

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+We want to make Dart web components have, to a great extent, feature and design
+parity with MDV. For this reason, we try to match the same syntax of their
+template language. MDV restricts data-binding expressions to an expression
+language containing variables, field dereferences, and array accesses. This
+means that expressions in MDV templates would likely be valid Dart and valid
+JavaScript as well. That also means that advanced Dart expressions are not valid
+between `{{'{{'}}expressions}}`, however you can always hide complex expressions

[Kathy Walrath, 2012/10/11 01:01:21]

between -> within

expressions}} -> expression}}
globally
(because there can be only one, correct?)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

correct - thank you :)

+under a getter in Dart and use the getter property within the template.
+
+A full specification of the expression syntax will be available soon.
+
+### Conditionals
+
+Template conditionals allow you to selectively activate parts of the UI. We
+write a conditional by wrapping a portion of the UI in a `<template>` tag and
+writing the condition in an attribute of the form `instantiate="if expr"`.  For
+instance, the following example only shows `They match!` when both input boxes
+have the same text:
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <div>
+    <div> Input1: <input type="text" data-bind="value:str1"></div>
+    <div> Input2: <input type="text" data-bind="value:str2"></div>
+    <template instantiate="if str1 == str2">
+      <div>They match!</div>
+    </template>
+  </div>
+  <script type="application/dart">
+    String str1 = '';
+    String str2 = '';
+    main() {}
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/matchstrings.html %}
+{% sample 300px 200px http://dart-lang.github.com/dart-web-components/example/explainer/matchstrings.html.html %}
+{% endcodesample %}
+
+### Loops
+
+Template loops allow us to iterate over iterable Dart collections. The following

[Kathy Walrath, 2012/10/11 01:01:21]

You should mention the `iterate` attribute in this description. Something like:

To create a loop that operates on each item in a Dart collection, use the
`iterate` attribute in a `<template>` tag.

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+example shows a fun little app that has search as you type. We use the two-way
+data binding to store the `query` string, then we compute a filtered set of
+results and display it using a looping construct.
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <div>
+    <span>Search for something:</span>
+    <input type="text" data-bind="value:query">
+    <div>
+      <template instantiate='if noMatches'><span>No matches</span></template>
+      <template instantiate='if !noMatches'><span>Top results:</span></template>
+    </div>
+    <div><ul>
+      <template iterate='fruit in results'>
+        <li>{{fruit}}</li>
+      </template>
+    </ul></div>
+  </div>
+  <script type="application/dart">
+    String query = '';
+    List<String> values = const [ 'Apple', 'Apricot', 'Avocado', 'Banana',
+        'Blackberry', 'Blackcurrant', 'Blueberry', 'Currant', 'Cherry',
+        'Clementine', 'Date', 'Durian', 'Fig', 'Gooseberry', 'Grape',
+        'Grapefruit', 'Guava', 'Huckleberry', 'Kiwi', 'Lemon', 'Lime',
+        'Lychee', 'Mandarine', 'Mango', 'Cantaloupe', 'Honeydew melon',
+        'Nectarine', 'Orange', 'Peach', 'Pear', 'Plum', 'Pineapple',
+        'Pomegranate', 'Raspberry', 'Redcurrant', 'Star fruit', 'Strawberry',
+        'Tangerine', 'Tomato', 'Watermelon'];
+
+    List<String> get results {
+      var res = values.filter(
+          (v) => v.toLowerCase().contains(query.toLowerCase()));
+      if (res.length > 20) { 
+        res.length = 20;
+        res.add('... and many more');
+      }
+      return res;
+    }
+
+    bool get noMatches => results.isEmpty();
+
+    main() {}
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/fruitsearch.html %}
+{% sample 300px 600px http://dart-lang.github.com/dart-web-components/example/explainer/fruitsearch.html.html %}
+{% endcodesample %}
+
+
+### Listen to UI events

[Kathy Walrath, 2012/10/11 01:01:21]

-> ### Event listeners

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+Templates also gives us a succinct way to listen for arbitrary UI events and
+associate those events with Dart code. We do this by using `data-action`
+attributes. Here is an example that listens for click events:
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <div>
+    <button data-action="click:increment">Click me</button>
+    <span>(click count: {{count}})</span>
+  </div>
+  <script type="application/dart">
+    int count = 0;
+    void increment(e) { count++; }
+    main() {}
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/clickcount.html %}
+{% sample 300px 200px http://dart-lang.github.com/dart-web-components/example/explainer/clickcount.html.html %}
+{% endcodesample %}
+
+
+### Templating summary

[Kathy Walrath, 2012/10/11 01:01:21]

Templating summary -> Summary of templates

(Having the "Summary" first is a visual cue. Plus you've used "template", not
"templating" before, so it's good to keep that consistent.)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+Templates solve one part of the problem in building web applications: reducing
+the amount of boilerplate code that is used to set up a typical
+model-view-viewmodel architecture. One-way data bindings, two-way data bindings,

[Kathy Walrath, 2012/10/11 01:01:21]

bindings -> binding
(twice in this line; to match what we used before)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+and data-action listeners, help reduce the need for manually creating controller

[Kathy Walrath, 2012/10/11 01:01:21]

, help -> help

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+objects that do these bindings by hand. If we combine bindings, conditionals,
+and loops, we have a formula to create simple and sophisticated views in a
+declarative fashion.
+
+However, templating alone is not enough. We need mechanisms to encapsulate and
+abstract views so we can scale to build larger web apps. This is were we need
+web components. 
+
+## Web components in Dart
+
+Web components provide a way to create encapsulated reusable views, which will
+be useful to build medium and large applications. A web component basically
+includes a view, some data, and behavior. In our case, views are described in
+terms of templates, while data and behavior are written directly in Dart.
+
+### Declaring a component
+
+Web components are declared using a special `<element>` tag. For example, we can
+take the click-count example above and make it a component as follows:
+
+{% highlight html %}
+{% raw %}
+<html><body>
+  <element name="x-click-counter" constructor="CounterComponent" extends="div">
+    <template>
+      <div>
+        <button data-action="click:increment">Click me</button>
+        <span>(click count: {{count}})</span>
+      </div>
+    </template>
+    <script type="application/dart">
+      import 'package:web_components/web_component.dart';
+
+      class CounterComponent extends WebComponent {
+        int count = 0;
+        void increment(e) { count++; }
+      }
+    </script>
+  </element>
+<!-- more below... -->
+</body></html>
+{% endraw %}
+{% endhighlight %}
+
+The `<element>` tag defines a component whose visual apperance is declared under
+the child `<template>` tag, and whose behavior code is embedded or sourced by
+the child `<script>` tag.
+
+Components can be thought as if they are extending HTML elements, their
+declaration indicates which element they extend from using the `extends`
+attribute.  The attribute `constructor="CounterComponent"` indicates that this
+component's behavior is defined in the `CounterComponent` class. Today, this
+class must extend from `WebComponent`, but in the future it will be possible to
+extend directly from the HTML element that we declared in the `extends`
+attribute. For instance, `class CounterComponent extends DivElement ...`.
+
+The `<element>` tag also declares the component's name with the `name`
+attribute. This name will be used to instantiate this component later on.
+
+### Instantiating a component
+
+Instantiating a component can be done in two ways: using its name as a tag, e.g.
+`<x-click-counter></x-click-counter>` or using setting the `is` attribute on the
+tag that the component extends from. For example,
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <!-- ... element declared as above -->
+  <div is="x-click-counter"></div>
+  <script type="application/dart">
+    main(){}
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/countcomponent.html %}
+{% sample 300px 200px http://dart-lang.github.com/dart-web-components/example/explainer/countcomponent.html.html %}
+{% endcodesample %}
+
+
+### Passing data to a component
+
+All of the public fields in a component declaration can be initialized directly
+when we instantiate a component. We can do this by writing a special
+`data-value` attribute in the HTML. For instance, the following example
+instantiates two click-counter components (declared just like above), but
+initializes the `count` field of the component to a different value each time.
+
+{% codesample 90 %}
+{% highlight html %}
+{% raw %}
+<html><body>
+  <!-- ... element declared as above -->
+  <div is="x-click-counter" data-value="count: myNumber"></div>
+  <div is="x-click-counter" data-value="count: 5"></div>
+  <script type="application/dart">
+    int myNumber = 12;
+    main(){}
+  </script>
+</body></html>
+{% endraw %}
+{% endhighlight %}
+{% url https://github.com/dart-lang/dart-web-components/blob/master/example/explainer/countcomponent5.html %}
+{% sample 300px 200px http://dart-lang.github.com/dart-web-components/example/explainer/countcomponent5.html.html %}
+{% endcodesample %}
+
+### Working at scale

[Kathy Walrath, 2012/10/11 01:01:21]

-> ### Importing a component

(to match the task orientation of previous headings in this section, plus give a
bit more info)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+When developing larger web applications, it is really useful to be able to split
+the work and divide pieces of your application in multiple files. It is also
+useful to create reusable components that you embed in several places of your
+application or even across several applications.
+
+Web components allows us to import other components using `<link
+rel="components">` tags. For example, suppose we created a file
+`clickcounter.html` that contains the declaration of the click-counter component
+as we had above. Then, our last example could be rewritten as follows:
+
+{% highlight html %}
+{% raw %}
+<html>
+  <head>
+    <link rel="components" href="clickcounter.html">
+  </head>
+  <body>
+    <div is="x-click-counter" data-value="count: myNumber"></div>
+    <div is="x-click-counter" data-value="count: 5"></div>
+    <script type="application/dart">
+      int myNumber = 12;
+      main(){}
+    </script>
+  </body>
+</html>
+{% endraw %}
+{% endhighlight %}
+
+### Upcoming features

[Kathy Walrath, 2012/10/11 01:01:21]

### -> ##

(since these features are for templates as well as components)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+
+We are still adding features and making changes to Dart web components. Here are
+some of the features we are working on:
+
+  * Support for sub-components. Using a special `<content>` tag, a component

[Kathy Walrath, 2012/10/11 01:01:21]

GLOBAL: sub-component -> subcomponent

(it's in the dictionary - I looked)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

wow - cool. Thanks :)

+    can embed nodes that will be provided when instantiating it. For instance,
+    you could write a component that puts a frame around an image as follows:
+
+{% highlight html %}
+{% raw %}
+<html>
+  <body>
+    <element name="x-myframe">
+      <template>
+        <!-- some complex wrapping happens here ... -->
+        <div class="framestyle">...<content></content>...</div>
+      </template>
+    </element>
+
+    <div is="x-myframe">
+      <!-- img will be included where we wrote <content> above -->
+      <img src="...">
+    </div>
+  </body>
+</html>
+{% endraw %}
+{% endhighlight %}
+
+  * Alternative MDV conditional and listing constructs. Instead of using a
+    `<template>` tags, you will be able to use `instantiate` and
+    `iterate` attributes directly on any element. This is important because in
+    some parts of the HTML is not valid to write `<template>` tags. For example,
+    this feature will make it possible to iterate on table rows and cells.
+
+## Developing and using Dart web components

[Kathy Walrath, 2012/10/11 01:01:21]

-> ## Tools for developing and using Dart web components
OR
## Tools for Dart web components

(having "Tools" first is very helpful)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

nice - done.

+
+We are making several tools available to make it easy to create and deploy
+projects that use Dart web components. We have a compiler tool that can be run
+offline to generate efficient code for your components. The generated code will
+try to use the native features available in browsers, but otherwise it will
+resort to other techniques to ensure that the semantics of Dart web components
+are the same everywhere.
+
+We have added integration with the Dart editor, so that changes to source files
+can be compiled automatically in the background. We are also developing an
+extension for Dartium that will be able to compile components on the fly as
+you load them. Both the editor and Dartium integration will provide you with a
+smooth edit/refresh cycle.
+
+More details about our tools will be available soon.
+
+## Exploring more

[Kathy Walrath, 2012/10/11 01:01:21]

## Exploring more -> ## More information
OR
## Resources

(I wasn't sure what to expect from "Exploring more", plus it just sounded like
it was missing a word or two after "more")

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

:), fixed

+
+There are many resources to explore and learn more about Dart web components.
+Check out our Dartisans episode on this topic:
+
+<iframe width="560" height="315" src="http://www.youtube.com/embed/zUdQkSwslzc" frameborder="0" allowfullscreen></iframe>
+
+You can also follow the project in [GitHub][dwc], track and file bugs in our
+[issue tracker][bugs], and play with other examples in our repo, like our port

[Kathy Walrath, 2012/10/11 01:01:21]

like -> such as

(in general, "like" is easy to misread. It has too many meanings.)

[Siggi Cherem (dart-lang), 2012/10/11 18:26:14]

Done.

+of [TodoMVC][todomvcindwc].
+
+If you have any questions, feel free to send us email directly at
+[misc@dartlang.org](mailto:misc@dartlang.org).
+
+
+[sd]: http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html
+[wc]: http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html
+[mdv]: http://code.google.com/p/mdv/
+[dwc]: https://github.com/dart-lang/dart-web-components/
+[bugs]: https://github.com/dart-lang/dart-web-components/issues
+[backbone]: http://backbonejs.org/
+[angular]: http://angularjs.org/
+[ember]: http://emberjs.com/
+[todomvcindwc]: https://github.com/dart-lang/dart-web-components/tree/master/example/todomvc
+[watcher]: http://dart-lang.github.com/dart-web-components/docs/watcher.html
+[watcher.dispatch]: http://dart-lang.github.com/dart-web-components/docs/watcher.html#dispatch