This repository has been archived by the owner. It is now read-only.
Jacob MacDonald edited this page Aug 5, 2016 · 32 revisions

1.0 Developer Guide

Note: This is a guide for Polymer 1.0, which is not yet released. You can play around with it today by using a git dependency on the 1.0.0-rc.2 branch of this repo. For information on Polymer <=0.16.x, visit the archive of dartlang.org/polymer-old.

Use Polymer Dart—a Dart port of Polymer—to build structured, encapsulated, client-side web apps with Dart and web components.

With Polymer Dart (also known as polymer.dart), you can:

  • Use Polymer custom elements.
  • Design your own HTML tags to encapsulate style, structure, and behavior.
  • Create live, two-way bindings between Dart objects and DOM nodes.
  • Use emerging web standards—Custom Elements, HTML Imports, Shadow DOM, and more—today.

## Structuring your app

Apps that use Polymer Dart follow the pub package layout conventions. As a consequence, the source code for a Polymer Dart app starts with a top directory containing a pubspec.yaml file and a web directory:

app/pubspec.yaml, app/web/index.html

The web directory contains HTML files that are entry points—pages that users can visit. Other files (Dart files, CSS, images, and so on) can also be in the web directory.

The pubspec.yaml file has metadata about the app, such as the pub packages that it depends on.

Learn more at Imports and Your App's Directory Structure.


## Installing Polymer Dart

Get Polymer Dart from pub.dartlang.org, the Dart package hosting service.

Edit your pubspec.yaml file to depend on the polymer package and use the polymer transformer:

dependencies:
  polymer: ^1.0.0
  web_components: ^0.12.0
transformers:
- polymer:
    entry_points:
      - web/index.html

Then, run pub get to download the package and link it into your app.


## Using custom elements

Here's an example of some HTML code that uses a <paper-input> element from the polymer_elements package:

index.html:

<head>
  ...
  <link rel="import" href="packages/polymer_elements/paper_input.html">
  ...
</head>
<body unresolved>
  <paper-input label="Type something..."></paper-input>
  ...
  <script type="application/dart" src="index.dart"></script>
</body>

index.dart:

export 'package:polymer/init.dart';

For more information, see Using Elements.


## Creating custom elements

You can extend the lexicon of HTML with your own custom elements, as described in the Feature Overview.


### Building

Use pub build to compile your Polymer Dart app into JavaScript so that it can run across the modern web. The build process also concatenates files for faster loading.

You can use entry_points to specify which pages under web the user can navigate to. For example:

transformers:
- polymer:
    entry_points: web/index.html

Run pub build from the root of your project to generate a build directory.

> pub build

The build directory contains the HTML, JavaScript, and other assets required to run the application. You can then deploy the build directory to your favorite web server.

Learn more about pub build.


Source code

You can view sample source code that uses Polymer Dart, as well as the source code that implements Polymer Dart.

Samples

polymer-dart-patterns: Small, useful samples that show how to do things the Polymer Dart way.

Polymer Dart

Polymer Dart is open source. You can view and contribute to the source of Polymer Dart and its many component packages on github.


Support and more

We actively encourage your feedback and questions.

Keep an eye on this page for the latest information about Polymer Dart.

Past design docs

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.