Introduzione a polymer.dart

Di - 26 July 2013 - in
Post image for Introduzione a polymer.dart

Nell’articolo di oggi proponiamo un tutorial presentato sul suo blog da +Seth Ladd, Dart Dev Rel presso Google, nel quale viene mostrato un esempio della nuova libreria per la gestione degli elementi dell’interfaccia di una web app, polymer.dart.
Questa libreria, un porting in Dart del progetto Polymer Project (di cui vediamo l’architettura nell’immagine di copertina di questo articolo), offre il supporto per tecnologie web moderne come Web Components, Shadow DOM, HTML Imports, Model-driven Views, Pointer Events e Web Animations, ed in futuro sostituirà la libreria web_ui.

Come vedremo in questo tutorial, i due maggiori vantaggi di polymer.dart rispetto a web_ui.dart sono due:

  • netta riduzione nella quantità di codice necessario
  • nessuna compilazione richiesta (e.g. build.dart)

Per iniziare dobbiamo aggiungere al nostro progetto la dipendenza polymer nel file pubspec.yaml:

name: polymer_first_look
dependencies:
    polymer:dart

Creiamo il template della pagina, index.html:

<!DOCTYPE html>

<html>
  <head>
    <title>index</title>
  </head>

  <body>
    <template id="tmpl" bind>
      <p>Hello {{msg}}</p>
    </template>

    <script type="application/dart" src="index.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

L’elemento <template> incorpora un frammento HTML che non viene attivato dalla pagina index.html, bensì viene attivato e gestito dal file index.dart; bind, l’attributo di <template> indica che il template sarà attivato quando Dart passerà dati all’elemento. Come già visto in un articolo sulla libreria web_ui, il testo contenuto fra i tag {{ }} sarà sostituito con il valore della variabile.

Passiamo ora al file index.dart:

import 'dart:html';
import 'package:mdv/mdv.dart' as mdv;

class Message {
  String msg;
}

main() {
  mdv.initialize();

  var msg = new Message()..msg = 'world';
  query('#tmpl').model = msg;
}

Intuitivamente, questo codice inizializzerà la classe mdv (Model-driven Views), creerà un’istanza di Message, imposterà il valore dell’attributo Message.msg a “world” dopodiché abbinerà i dati all’elemento <template> con id “templ”.

Come abbiamo detto in apertura, uno dei vantaggi di polymer.dart rispetto a web_ui.dart è la possibilità di utilizzare Web Components e MDVs senza dover compilare; possiamo quindi avviare il file index.html con CTRL (o CMD) + R.

Ricordiamo in ultimo che il ciclo di vita di polymer.dart è ancora alla fase pre-alpha quindi è sconsigliato l’utilizzo di questa libreria in produzione.

Fonte | Seth Ladd’s Blog

Leave a Reply

Claudio d'Angelis Articolo scritto da

Programmatore e studente di Informatica, appassionato di musica, web e sistemi UNIX. Collabora con Googlab dall'Ottobre 2012.

Contatta l'autore

Previous post:

Next post: