Monday, December 10, 2012

4 New Simplifications from Dart Web UI

The Dart Web Components package has been renamed to Dart Web UI to better reflect the wide range of functionality found in the library. Also, syntax has been simplified based on feedback from users. This post covers some of the new features and gives tips on how you can migrate your code.

A frost covered spider's web.

Dart Web UI provides polyfills and compilers for Web Components (making them available to today's browsers), dynamic templates, and live data binding inspired by Model Driven Views. You can use Dart Web UI to build modern client-side web apps. For more information, read my blog posts about Dart Web UI or study the detailed article on the subject.

Shorter package names

Old: package:web_components/web_components.dart

New: package:web_ui/web_ui.dart

Your pubspec.yaml now looks like this:

 dependencies:  
  web_ui: any  

Simpler two-way data binding for input fields

Old: data-bind="attribute:dartAssignableValue"

New: bind-attribute="dartAssignableValue"

For example:

 <input type="text" bind-value="superlative" placeholder="Enter superlative">  

Simpler declarative event handlers

Old: data-action="click:handleClick"

New: on-click="handleClick()"

Notice how the on-action form declares an expression (complete with parentheses). You can pass the event to the handler by using handleClick($event).

For example:

 <select name="language" on-change="chooseExample($event)">  
  <option value="">-- Choose one --</option>  
  <option value="js">JavaScript</option>  
  <option value="java">Java</option>  
 </select>  

Simpler conditional templates

Old: <template instantiate="if securityClearance == 'top'">

New: <template if="securityClearance == 'top'">

For example:

 <template if="langChoice != null && !langChoice.isEmpty">  
  <div>  
   <h3>{{ langChoice }}</h3>  
   <code><pre>{{ example }}</pre></code>  
  </div>  
 </template>  

Template tag no longer required

Option A: <template if="securityClearance == 'top'">

Option B: <div template if="securityClearance == 'top'">

For example:

 <div template if="langChoice != null && !langChoice.isEmpty">  
  <h3>{{ langChoice }}</h3>  
  <code><pre>{{ example }}</pre></code>  
 </div>  

Summary

The Dart Web Components package is now the Dart Web UI package. The name was changed to better reflect the breadth of features available, including polyfills for Web Components, dynamic templates, and live data binding. Recent feedback has helped to simplify some of the syntax around event handlers, conditional templates, and more.

You can discuss Dart Web UI at web-ui@dartlang.org mailing list, or ask questions on Stack Overflow. You can follow the open source Dart Web UI project on Github.

(Picture courtesy of http://www.flickr.com/photos/foxypar4/2124673642/)
Post a Comment

Disclaimer

I'm probably required to say that the views expressed in this blog are my own, and do not necessarily reflect those of my employer. Also, except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the BSD License.