Use polymer.dart—a Dart port of Polymer—to build structured, encapsulated, client-side web apps with Dart and web components.
With polymer.dart, you can:
You can get a quick start with any of the following:
Still here? Keep reading!
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:
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.
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: ">=0.15.1 <0.17.0" transformers: - polymer
Then, run pub get
to download the package and link it into your app.
Here’s an example of some HTML code
that uses a <paper-input>
element
from the paper_elements package:
<head> ... <link rel="import" href="packages/paper_elements/paper_input.html
"> ... </head> <body unresolved><paper-input label="Type something..."></paper-input>
... <script type="application/dart">export 'package:polymer/init.dart';</script> </body>
For more information, see Using Elements.
You can extend the lexicon of HTML with your own custom elements, as described in Creating Elements.
Polymer.dart works well with Dart tools, such as Dart Editor and Pub.
Polymer.dart offers a linter that reports syntax or usage warnings.
Using a special build.dart
file,
you can connect the linter to Dart Editor to display warnings directly
at the source.
Create a build.dart
file at the root of your project,
and put the following code in it:
export 'package:polymer/default_build.dart';
Dart Editor runs build.dart
after a file is saved, and
displays warnings from the linter.
Learn more about Dart Editor.
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.
(By default, all pages under web
are entry points.)
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.
You can view sample source code that uses polymer.dart, as well as the source code that implements polymer.dart.
Here are a few places to find polymer.dart sample code:
Polymer.dart is open source. You can view and contribute to the source of polymer.dart and its many component packages on github.
We actively encourage your feedback and questions.
Keep an eye on this page and the FAQ for the latest information about polymer.dart.