BT

Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ

Topics

Choose your language

InfoQ Homepage News Google Dart Developments: Polymer Replaces Web UI

Google Dart Developments: Polymer Replaces Web UI

This item in japanese

Lire ce contenu en français

Google Dart is going to dump Web UI, replacing it with Polymer. From the outside, the main differences are in data binding and handling events.

Google’s Dart team has started porting Polymer to Dart. A number of components are already done and packaged: observe, mdv, shadow_dom, polymer.dart. According to John Messerly, a Dart engineer, the remaining features will be completed in the near future, including:

  • declarative <polymer-element> and custom elements.

  • more new, up-to-date polyfill packages, like html_imports.

  • removing the mandatory compiler step for polymer.dart. Just edit, save & refresh!

  • bring the Polymer UI elements to Dart.

  • up to date documentation for all of this shiny new stuff.

Google Polymer is a new framework for building web applications based on Web Components, and it promises to bring support for all the latest HTML5 standards and all the evergreen browsers by using polyfills to compensate for missing functionality in any of them. Polymer seems promising and it may be a good idea to have native support for it in Dart, but Google intends to drop support for Web UI, the original UI framework Dart has been using. Web UI was also built with the idea in mind to support the HTML5 standards, such as Web Components, and Model-driven Views.

This switch to a new UI framework for Dart has caught some users by surprise:

Thomas Løcke: I'm happy to get Polymer, don't get me wrong, but I'm very sad to hear that web_ui will go. I've got A LOT of man-hours invested in web_ui already.

Bernd Wessels: What will come after Polymer.dart? I doubt that the main UI framework for Dart (the future of web development) will be based on a scattered set of polyfills!?

My point is that after waiting for a Dart release for so long now, it becomes really frustrating that Dart still has no reliable foundation for UI development.

Several Google engineers tried to alleviate the fears that Dart is no going to be stable any time soon and explain why they chose to go with Polymer.dart:

John Messerly: One of the exciting things of a new language like Dart is that we can leap straight towards the future of web development. I'm not sure there is any other way we could've done it; any new UI framework/libraries is going to take some time to stabilize. By embracing Web Components and other standards efforts, we're supporting and benefiting from an effort that has the potential to make the web the best place to develop.

Kasper Lund: We're still working on stabilizing the remaining platform APIs. The most difficult ones are the browser APIs because they tend to change and improve over time under our feet.

Fortunately for the developers who have invested time in web applications built with Dart, the outside differences between the two UI frameworks are not great, making the porting between them pretty straightforward, as Justin Fagnani, another Dart engineer, explains:

The differences aren't that huge, because it's all based on the lower layers of shadow DOM, custom elements, MDV, HTML imports, etc. You're still dealing with <element>, <template>, <content> tags and {{ }} bindings. Some specifics have changed, like how data models are bound to templates, the binding syntax, how attributes are mapped to properties, etc. The changes are partly because of adopting Polymer, and partly because MDV has changed, so those would have happened anyway.

Following are snippets of code taken from two To-do samples, showcasing the usage differences between the frameworks:

Web UI:

<ul id="todo-list">

   <template iterate="x in app.todos">

      <template if="viewModel.isVisible(x)">

        <todo-row todo="{{x}}"></todo-row>

      </template>

   </template>

</ul>

Polymer.dart:

<ul id="todo-list">

   <template repeat="{{app.visibleTodos}}">

      <li is="todo-row" todo="{{}}"></li>

   </template>

</ul>

While Dart engineers try to introduce some of the latest technologies into the language, such changes show how risky can be to bet on a technology that is not mature and stable enough. As Polymer’s main page states: “Polymer is in pre-alpha mode and only the daring need apply.”

More details on Polymer can be found in this InfoQ news: Use Web Components Today With Google's Polymer.

Angular.js, another important framework from Google, is in the process of being ported to Dart. More in this news: AngularJS Is Being Ported to Dart.

Rate this Article

Adoption
Style

BT