Seth Ladd

Build Reusable Widgets for the Web with Polymer and Dart

Don't wait for browsers to implement Web Components, try them today

Web Components, the family of new web specifications for reusable and encapsulated widgets, are coming to a browser near you. Thanks to Polymer, a new type of library for the web built on top of Web Components, and Dart, a new structured language and libraries for modern web development, you can build custom HTML elements that encapsulate style, structure, and behavior.

fig_1

I’m personally a fan of Polymer.dart, a Dart port of Polymer. If you want to use JavaScript, you can use the original Polymer library, though some of the details are different. Both Polymer and Polymer.dart are under heavy development, and the engineers behind the projects are looking for feedback.

In this article, I’ll show you how to build a simple auto-complete widget as a custom element. As a user types into a field, a list is searched by prefix. The user can keep typing for a more exact match, use up and down to select, or use their mouse.

fig_2
Read more…

8 Dart Features Those Fat Cats Don’t Want You to Know

Productive code without ceremony

[contextly_sidebar id=”2bca5cb6af99cf17862f5497954ec380″]

In this article, I’ll show you eight more features that help Dart stand on its own as a productive, ceremony-free language. Remember, Dart compiles to JavaScript, so everything you see here works across the modern Web.

Dart makes fluent APIs easy

Libraries like jQuery have popularized a fluent design that encourages chaining calls for easier-to-read code. Dart takes a cue from Smalltalk and adds method cascades to the language, so that any API can be used in a fluent style.

Without cascades, the variable button is repeated for every method call.

// Without cascades.
var button = new ButtonElement();
button.id = 'awesome';
button.classes.add('important');
button.onClick.listen((e) => beAwesome());
button.text = 'Click Me!';

Use cascades to help reduce repetition.

// With cascades.
var button = new ButtonElement()
  ..id = 'awesome'
  ..classes.add('important')
  ..onClick.listen((e) => beAwesome())
  ..text = 'Click Me!';

Read more…

Dart Is Not the Language You Think It Is

A terse language without ceremony

When Dart was originally launched, many developers mistook it for some sort of Java clone. In truth, Dart is inspired by a range of languages such as Smalltalk, Strongtalk, Erlang, C#, and JavaScript. Get past the semicolons and curly braces, and you’ll see a terse language without ceremony. Dart has evolved into its own, and here are some of my favorite language features.

Dart is a source code VM

The Dart VM reads and executes source code, which means there is no compile step between edit and run. As with other popular scripting languages, it’s very quick to iterate with Dart. The Dart VM runs on the command line and servers, and can be embedded into browsers. Just point the VM at Dart source code and you’re up and running!

Dart is optionally typed

Dart understands that sometimes you just don’t feel like appeasing a ceremonial type checker. Dart’s inclusion of an optional type system means you can use type annotations when you want, or use dynamic when that’s easier.

For example, you can explore a new idea without having to first think about type hierarchies. Just experiment and use var for your types. Once the idea is tested and you’re comfortable with the design, you can add type annotations.

Here is a comparison between code that uses type annotations, and code that uses var for dynamic. Both of these code snippets have the same runtime semantics:

With type annotations:

  void advance(double dt) {
    double dx, dy, dz, distance, mag;
    int size = bodies.length;
    for (int i = 0; i 

Or, without type annotations:

  advance(dt) {
    var dx, dy, dz, distance, mag;
    var size = bodies.length;
    for (var i = 0; i 

Type annotations are great for the "surface area" of the code (such as method and function signatures), and the tools are getting good enough for you to consider using var inside methods and functions.

Read more...