Google Polymer - Comment cela va changer la façon dont les applications Web sont construites

et éléments qui construisent les commandes du lecteur d'interface utilisateur en secret.

Aujourd'hui, avec les composants Web, nous pouvons également nommer nos propres éléments. Nous pouvons construire un élément comme, intégrer un flux Twitter ou (peut-être) intégrer un graphique.

De plus, ces éléments personnalisés peuvent également avoir quelques attributs personnalisés acceptés. En ce qui concerne élément, vous définissez un attribut appelé Nom d'utilisateur qui sera utilisé pour spécifier le nom d'utilisateur Twitter.

Éléments personnalisés en polymère

Polymer est livré avec un tas d’éléments qui répondent à (presque) tous les besoins des applications Web. Google divise ces éléments en groupes: éléments en fer, éléments en papier, composants Web Google, éléments en or, éléments au néon, éléments en platine et molécules..

1. éléments de fer

Iron Elements est une collection d'éléments de base. Ces éléments de base sont ce que nous utilisons normalement pour construire une page web comme une entrée, un formulaire et une image. La différence est que Polymer ajoute des pouvoirs supplémentaires à ces éléments.

Tous les éléments de ce groupe sont le fer- préfixé, par exemple , qui est utilisé pour afficher une image. le élément a été équipé de quelques attributs supplémentaires que nous ne pouvons pas appliquer dans la régulière élément. Nous pouvons, par exemple, ajouter précharge, se faner, et espace réservé les attributs:

L’exemple ci-dessus montre d’abord l’espace réservé pour l’image, puis passe en fondu à l’image réelle dans src comme il est complètement chargé, effectuer un effet de chargement d'image lisse.

2. Eléments en papier

le Éléments de papier est un groupe d'éléments de conception de matériaux. Material Design est le langage de conception de Google pour améliorer la cohérence visuelle de l'interface utilisateur et de l'expérience utilisateur sur les plates-formes Google. Certains éléments propres à Material Design sont le papier et le bouton à action flottante (FAB)..

Papier

Papier est la métaphore de Google pour le support qui sous-tend le contenu. Pour ajouter un papier avec Polymer, nous utilisons le élément. Cet élément prend 2 attributs:

• élévation pour lever le papier, en ajoutant donc une ombre pour renforcer l'élévation
• Animé appliquera une animation lors du changement d'altitude du papier.

Bouton d'action flottant (FAB)

Le bouton d'action flottante (FAB) est un bouton circulaire avec une icône, flottant à l'écran, généralement avec une couleur distincte. Google suggère que ce bouton comporte une fonction fréquemment utilisée. Voici un exemple:

L'extrait de code suivant ajoute un support en papier avec une image et un FAB.

Nous aurons le résultat suivant:

Nous avons une photo avec un “cœur” bouton flottant dessus. Cliquez dessus pour ressembler à la photo, et le bouton émet un effet d’ondulation pour reconnaître le clic..

• Voir la démo papier

3. Composants Web Google

Les composants Web de Google sont des éléments spéciaux compatibles avec les API et les services de Google, tels que Google Maps, Youtube et Google Feed, pour n'en nommer que quelques-uns. Éléments de ce groupe faire interagir avec les services Google à quelques lignes de distance.

Voici un exemple permettant d'afficher une carte Google à l'aide de la élément.

  C'est Googleplex  

Comme vous pouvez le voir ci-dessus, le élément prend la latitude et longitude pour spécifier l'emplacement sur la carte. Nous pouvons aussi nicher pour afficher un marqueur de carte de cet emplacement avec un texte qui apparaîtra en cliquant sur le marqueur.

• Voir la démo de la carte

Voulez-vous montrer une vidéo sur Youtube? vous pouvez utiliser le élément.

De même, nous personnalisons la sortie via des attributs.

• Voir la démo Youtube

4. Éléments en or

Les Gold Elements sont les éléments conçus spécifiquement pour les applications de commerce électronique. Ici vous trouverez des éléments pour montrer les entrées par carte de crédit, email, téléphone et ZIP qui ont tous été équipés avec validation du format pour assurer une saisie de données correcte et la sécurité. Voici un exemple pour ajouter une entrée de carte de crédit Visa.

5. Autres éléments

Les éléments restants incluent des éléments Neon pour l'animation et les effets spéciaux, des éléments Platinum pour les notifications hors ligne et push, et enfin des molécules, des wrappers pour les bibliothèques tierces..

Note de l'éditeur: Au moment d'écrire ces lignes, les éléments Neon, Platinum et Molecules ne sont toujours pas disponibles..

Polymère Intégrant

Voulez-vous utiliser Polymer dans votre développement web? Voici comment l’installer et l’intégrer dans vos pages Web. Comme la plupart des éléments en polymère s'appuient les uns sur les autres, le meilleur moyen d'installer Polymer est d'utiliser Bower..

Bower est un gestionnaire de dépendances de projet qui facilite l’installation des scripts ou des styles nécessaires à l’exécution du projet. Découvrez notre précédent article sur l'installation, la mise à jour et la suppression de bibliothèques Web facilement avec Bower..

Pour intégrer Polymer, lancez Terminal, puis accédez au répertoire de votre projet, en supposant que vous en ayez créé un. Puis courir bower init commande pour lancer le fichier bower.json dans votre projet qui sera utilisé pour enregistrer les dépendances du projet. Ouvrez bower.json et ajoutez les lignes suivantes.

 "dépendances": "polymère": "Polymère / polymère # ^ 1.0.0", "google-web-components": "GoogleWebComponents / google-web-components # ^ 1.0.0", "éléments de fer": " Éléments de polymère / éléments en fer # ^ 1.0.0 "," éléments en papier ":" Éléments de polymère / éléments en papier # ^ 1.0.0 "," Éléments en or ":" Éléments de polymère / éléments en or # ^ 1.0.0 " 

Cette configuration suppose que nous allons utiliser tous les éléments de chaque groupe. Vous pouvez supprimer ce dont vous n’avez pas besoin de la liste des dépendances. Lorsque les dépendances sont définies, lancez le programme bower installer commande pour installer les dépendances sur la liste.

Ce processus peut prendre un certain temps, car il consiste à extraire une quantité énorme de fichiers des référentiels. Une fois cela fait, vous devriez les trouver sauvegardés dans le bower_components dossier.

Ouvrez le fichier HTML dans lequel vous souhaitez utiliser les composants Polymer. Dans l'en-tête du document, lier le WebComponents.js qui est le polyfill pour les navigateurs qui ne supportent pas encore WebComponents, et importer les fichiers de composants en utilisant HTML Import.

Voici un exemple:

Cette configuration nous permettra d’utiliser le , , éléments.

Vitrines

Voici certaines des applications Web qui utilisent déjà Google Polymer..

Google

Google a utilisé Google Polymer dans la page Web de Google IO 2015; Google Fi, le service Google sans fil destiné aux opérateurs et aux fournisseurs partenaires; et Google Music.

Éléments personnalisés

CustomElements est un hub où vous pouvez trouver des éléments personnalisés construits avec des composants Web. Il utilise l'élément Paper pour contenir et construire la liste. Il fournit également un moyen pratique d’installer ces éléments via Bower et NPM..

Editeur Chrome Dev

Une application Chrome pour l'édition de code qui fonctionne étonnamment bien. Cette application utilise le bouton FAB, le menu Papier et les éléments de la boîte de dialogue Papier dans l'interface utilisateur..

Concepteur de polymère

Un outil pour construire une application Web avec des éléments Polymer en utilisant une interface glisser-déposer.

Prévisions de stock quotidiennes

Un rapport et une prévision boursiers entièrement construits avec des éléments polymères.

Courrier en polymère

Une application client de messagerie pour Gmail. Il a l’air agréable et fluide, bien que, malheureusement, il ne fonctionne pas complètement.

Dernières pensées

Polymer a une portée énorme et il vous faudra peut-être un certain temps pour vous habituer à tous les éléments personnalisés, ainsi qu'à son API. Néanmoins, Web Components et Polymer vont certainement influencer la manière dont nous construisons des applications Web. Restez à l'avant-garde en lisant plus sur les composants Web - les références se trouvent ci-dessous.

• Voir la démo
• Source de téléchargement

Références utiles

• L'état des composants Web
• Une introduction détaillée aux éléments personnalisés
• Blog officiel de Google Polymer