La conférence Google I/O 2014 vient de se terminer et Google a annoncé Material Desgin. Material Design est un « langage visuel » qui a pour but d’uniformiser le look d’une application quelque soit le terminal (Web, Mobile, Tablet, …). Il fournit un ensemble de guidelines en termes d’interfaces (couleurs, animations, ombrages, …) à la sauce Google et un ensemble de composant prêt à l’emploi. Ces composants sont basé sur Polymer, un framework créé par Google afin de créer des composants web (web components), dont j’ai fait la présentation dans un précédent article.

Ces composants sont appelés « paper » et viennent compléter les composants core de Polymer. Ils s’utilisent comme un élément HTML après avoir importé ce dernier.

<!-- import du composant -->
<link href="../paper-button/paper-button.html" rel="import">
<!-- Utilisation du composant -->
<paper-button label="My Button" id="paper_button"></paper-button>

Comme vous pouvez le voir, leur utilisation est très facile et il faut l’avouer le rendu de ces composants est superbe (animation au clics, …). Ces composants peuvent être stylés via CSS.

Afin de tester ces composants, vous pouvez créer votre page via le designer en ligne.

Ces composants étant des web components, ceux-ci sont isolés et peuvent donc être utilisés avec d’autres framework sans problème (jQuery, Angular, Backbone, …)

Je vous conseille les vidéos suivantes de la Google IO :

La première est la présentation de Eric Bidelman concernant Polymer et les web components.

La deuxième est la présentation des composants et l’utilisation de ces derniers par Rob Dodson.