Au cours de l'année précédente, l'équipe Polymer a consacré beaucoup de temps à apprendre aux développeurs à créer leurs propres éléments. Cela a entraîné une croissance rapide de l'écosystème, en grande partie grâce aux éléments Core et Paper de Polymer, ainsi qu'aux éléments Brick créés par l'équipe de Mozilla.
À mesure que les développeurs se familiarisent avec la création de leurs propres éléments et commencent à réfléchir à la création d'applications, un certain nombre de questions se posent:
- Comment devez-vous structurer l'UI de votre application ?
- Comment passer d'un état à un autre ?
- Quelles sont les stratégies permettant d'améliorer les performances ?
- Comment devez-vous proposer une expérience hors connexion ?
Pour le Chrome Dev Summit, j'ai essayé de répondre à ces questions en créant une petite application de contacts et en analysant le processus que j'ai suivi pour la créer. Voici ce que j'ai trouvé:
Structure
Le principe central des composants Web est de diviser une application en éléments modulaires pouvant être combinés et réutilisés. Les éléments core-* et paper-* de Polymer permettent de commencer facilement avec de petits éléments, comme paper-toolbar et paper-icon-button.
Grâce à la puissance de la composition, combinez-les avec un nombre illimité d'éléments pour créer un échafaudage d'application.
Une fois que vous avez mis en place une structure générique, vous pouvez appliquer vos propres styles CSS pour la transformer en une expérience unique à votre marque. L'avantage de cette approche est qu'elle vous permet de créer des expériences très différentes tout en exploitant les mêmes primitives de création d'applications. Une fois la structure en place, vous pouvez passer à la réflexion sur le contenu.
L'élément core-list est particulièrement adapté pour gérer de nombreux contenus.
core-list peut être connecté à une source de données (essentiellement un tableau d'objets), et pour chaque élément du tableau, il imprime une instance de modèle. Dans le modèle, vous pouvez exploiter la puissance du système de liaison de données de Polymer pour connecter rapidement votre contenu.
Transitions
Maintenant que les différentes sections de votre application ont été conçues et implémentées, la tâche suivante consiste à déterminer comment naviguer entre elles.
Bien qu'il s'agisse toujours d'un élément expérimental, core-animated-pages fournit un système d'animation enfichable qui peut être utilisé pour effectuer des transitions entre différents états de votre application.
Mais l'animation n'est que la moitié de l'équation. Une application doit combiner ces animations avec un routeur pour gérer correctement ses URL.
Dans le monde des composants Web, le routage se présente sous deux formes: imperative et déclarative. La combinaison de core-animated-pages avec l'une ou l'autre de ces approches peut être valide en fonction des besoins de votre projet.
Un routeur impératif (tel que le Director de Flatiron) peut écouter un parcours correspondant, puis demander à core-animated-pages de mettre à jour l'élément sélectionné.
Cela peut être utile si vous devez effectuer une tâche après qu'un parcours a été mis en correspondance et avant que la section suivante ne soit passée.
En revanche, un routeur déclaratif (comme app-router) peut combiner le routage et core-animated-pages dans un seul élément, ce qui simplifie la gestion des deux.
Si vous souhaitez un contrôle plus précis, vous pouvez consulter une bibliothèque telle que more-routing, qui peut être combinée à core-animated-pages à l'aide de la liaison de données et vous offrir le meilleur des deux mondes.
Performances
À mesure que votre application prend forme, vous devez surveiller attentivement les goulots d'étranglement des performances, en particulier tout ce qui est associé au réseau, car il s'agit souvent de la partie la plus lente d'une application Web mobile.
Le chargement conditionnel des polyfills Web Components permet d'améliorer facilement les performances.
Il n'est pas nécessaire de supporter tous ces coûts si la plate-forme est déjà entièrement compatible. Dans chaque version du nouveau dépôt webcomponents.js, les polyfills ont également été divisés en fichiers autonomes. Cela peut s'avérer utile si vous souhaitez charger de manière conditionnelle un sous-ensemble des polyfills.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src="bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
Vous pouvez également obtenir des gains réseau importants en exécutant toutes vos importations HTML via un outil tel que Vulcanize.
Vulcanize concatène vos importations dans un seul bundle, ce qui réduit considérablement le nombre de requêtes HTTP envoyées par votre application.
Hors connexion
Mais créer une application performante ne résout pas le dilemme d'un utilisateur dont la connectivité est faible ou nulle. En d'autres termes, si votre application ne fonctionne pas hors connexion, ce n'est pas vraiment une application mobile. Aujourd'hui, vous pouvez utiliser le cache d'application très décrié pour mettre vos ressources hors connexion, mais à l'avenir, les service workers devraient rendre l'expérience de développement hors connexion beaucoup plus agréable.
Jake Archibald a récemment publié un livre de recettes de modèles de service worker, mais je vais vous donner un aperçu pour vous lancer:
L'installation d'un service worker est très simple. Créez un fichier worker.js et enregistrez-le lorsque votre application démarre.
Il est important de placer votre worker.js à la racine de votre application. Cela lui permet d'intercepter les requêtes à partir de n'importe quel chemin de votre application.
Dans le gestionnaire d'installation du nœud de calcul, je mets en cache un grand nombre de ressources (y compris les données qui alimentent l'application).
Cela permet à mon application de fournir au moins une expérience de remplacement à l'utilisateur s'il y accède hors connexion.
En avant !
Les composants Web sont un ajout important à la plate-forme Web, et ils en sont encore à leurs débuts. À mesure qu'ils seront disponibles dans davantage de navigateurs, il nous appartiendra, à nous, la communauté des développeurs, de déterminer les bonnes pratiques à suivre pour structurer nos applications. Les solutions ci-dessus nous donnent un point de départ, mais il y a encore beaucoup à apprendre. Passons maintenant à la création de meilleures applications !