L'année précédente, l'équipe Polymer a consacré beaucoup de temps à enseigner aux développeurs comment créer leurs propres éléments. Cela a entraîné un écosystème en pleine croissance, largement soutenu par les éléments Core et Paper de Polymer, ainsi que les é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 s'élèvent:
- Comment structurer l'interface utilisateur de votre application ?
- Comment passer d'un état à l'autre ?
- Quelles sont les stratégies permettant d'améliorer les performances ?
- Et comment 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 Contacts et en analysant le processus que j'ai suivi pour la développer. Voici ce que j'ai fait:
Structure
La division d'une application en éléments modulaires pouvant être combinés et réutilisés est l'un des principaux tenants des composants Web. Les éléments "core-*" et "paper-*" de Polymer facilitent le démarrage avec de petites pièces, comme core-tool et paper-icon-button...
...et grâce à la composition, vous pouvez les combiner avec un nombre illimité d'éléments pour créer une structure d'application.
Une fois que vous disposez d'une structure générique, vous pouvez appliquer vos propres styles CSS pour la transformer en une expérience unique pour votre marque. L'avantage des composants, c'est qu'ils vous permettent de créer des expériences très différentes tout en utilisant les mêmes primitives de création d'applications. Une fois votre échafaudage en place, vous pouvez passer à la réflexion sur le contenu.
L'élément core-list est particulièrement bien adapté au traitement d'un grand nombre de contenus.
Le core-list peut être connecté à une source de données (autrement dit, un tableau d'objets) et créera une instance de modèle pour chaque élément du tableau. Dans le modèle, vous pouvez exploiter la puissance du système de liaison de données de Polymer pour intégrer rapidement votre contenu.
Transitions
Une fois les différentes sections de votre application conçues et implémentées, la prochaine tâche consiste à déterminer comment naviguer entre elles.
Bien qu'il s'agisse d'un élément expérimental, core-animated-pages fournit un système d'animation connectable qui peut être utilisé pour passer d'un état à un autre dans votre application.
Toutefois, l'animation ne représente que la moitié du problème. Une application doit les combiner avec un routeur pour gérer correctement ses URL.
Dans le monde du routage de composants Web, il existe deux types: impératif et déclaratif. Combiner core-animated-pages avec l'une ou l'autre approche peut être valide selon les besoins de votre projet.
Un routeur impératif (tel que le Director de Flatiron) peut écouter une route correspondante, puis demander à core-animated-pages de mettre à jour l'élément sélectionné.
Cela peut être utile si vous devez effectuer des tâches après la mise en correspondance d'une route et avant la transition de la section suivante.
En revanche, un routeur déclaratif (comme app-router) peut combiner le routage et le core-animated-pages en un seul élément, ce qui simplifie leur gestion.
Si vous souhaitez un contrôle plus précis, vous pouvez utiliser 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 offrira peut-être le meilleur des deux mondes.
Performances
À mesure que votre application prend forme, vous devez surveiller les goulots d'étranglement qui affectent les performances, en particulier tous les éléments associés au réseau, car il s'agit souvent de la partie la plus lente d'une application Web mobile.
Le chargement conditionnel des polyfills des composants Web permet d'améliorer facilement les performances.
Il n'y a aucune raison d'engager tous ces frais 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é décomposés en fichiers autonomes. Cela s'avère utile si vous souhaitez charger un sous-ensemble de polyfills de manière conditionnelle.
<script>
if ('import' in document.createElement('link')) {
// HTML Imports are supported
} else {
document.write(
'<script src=“bower_components/webcomponentsjs/HTMLImports.min.js"><\/script>'
);
}
</script>
L'exécution de toutes vos importations HTML à l'aide d'un outil tel que Vulcanize peut également apporter d'importantes améliorations au réseau.
Vulcanize concatène vos importations en un seul bundle, ce qui réduit considérablement le nombre de requêtes HTTP envoyées par votre application.
Hors connexion
Toutefois, le simple fait de créer une application performante ne résout pas le dilemme d'un utilisateur avec peu ou pas de connectivité. En d'autres termes, si votre application ne fonctionne pas hors connexion, il ne s'agit pas vraiment d'une application mobile. Aujourd'hui, vous pouvez utiliser le cache d'application très incohérent pour mettre hors connexion vos ressources. Toutefois, à l'avenir, service worker devrait bientôt rendre l'expérience de développement hors connexion beaucoup plus agréable.
Jake Archibld a récemment publié un excellent livre de recettes sur les modèles de service workers, mais je vais vous donner un aperçu rapide pour vous aider à démarrer:
L'installation d'un service worker est très simple. Créez un fichier worker.js et enregistrez-le au démarrage de votre application.
Il est important de localiser votre worker.js à la racine de votre application, afin qu'il puisse intercepter les requêtes provenant de n'importe quel chemin d'accès dans votre application.
Dans le gestionnaire d'installation du nœud de calcul, je mets en cache une charge 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 constituent un ajout important de la plateforme Web et ils en sont encore à leurs balbutiements. À mesure que ces versions s'étendent à d'autres navigateurs, il nous appartient, en tant que communauté de développeurs, de déterminer les bonnes pratiques pour structurer nos applications. Les solutions ci-dessus nous offrent un point de départ, mais il reste encore beaucoup à apprendre. En avant pour créer de meilleures applications !