L'année précédente, l'équipe Polymer a passé beaucoup de temps à apprendre aux développeurs à créer leurs propres éléments. Cela a conduit à un écosystème en pleine expansion, largement soutenu par les éléments Core et Paper de Polymer, ainsi que les éléments Brick créés par l'équipe de Mozilla.
Alors 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, cela soulève un certain nombre de questions:
- Comment devez-vous structurer l'interface utilisateur de votre application ?
- Comment effectuez-vous la transition entre les différents états ?
- Quelles sont les stratégies à mettre en place pour améliorer les performances ?
- Et comment offrir 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 de création. Voici ce que j'ai trouvé:
Structuration
Diviser une application en éléments modulaires pouvant être combinés et réutilisés constitue un élément central des composants Web. Les éléments principaux* et papier* de Polymer permettent de commencer facilement par de petits morceaux, comme paper-barre d'outils et paper-icon-button.
Et grâce au pouvoir de la composition, combinez-les avec un nombre indéfini d'éléments pour créer une structure d'application.
Une fois que vous avez mis en place un échafaudage générique, vous pouvez appliquer vos propres styles CSS pour en faire une expérience unique à votre marque. L'avantage de cette méthode avec les composants est qu'elle vous permet de créer des expériences très différentes tout en utilisant les mêmes primitives de création d'application. Une fois cette échafaudage en place, vous pouvez passer à la réflexion sur le contenu.
L'élément core-list est particulièrement bien adapté à la gestion d'un grand nombre de contenus.
L'élément core-list peut être connecté à une source de données (autrement dit, un tableau d'objets). Pour chaque élément du tableau, il remplace une instance de modèle. Dans ce 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 sont conçues et implémentées, la tâche suivante 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 permet de passer d'un état à un autre dans votre application.
Mais l'animation ne représente que la moitié du puzzle, une application doit combiner ces animations avec un routeur pour gérer correctement ses URL.
Dans le domaine des composants Web, le routage se présente sous deux formes: le routage impératif et le routage déclaratif. Combiner core-animated-pages avec l'une ou l'autre de ces approches peut être valide selon les besoins de votre projet.
Un routeur impératif (tel que Flatiron's Director) peut écouter un itinéraire correspondant, 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 correspondance d'un itinéraire 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 facilite la gestion des deux.
Si vous souhaitez un contrôle plus précis, vous pouvez consulter une bibliothèque comme more-routing, qui peut être combinée à core-animated-pages à l'aide de la liaison de données et qui peut vous apporter 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 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 Web Components permet d'améliorer facilement les performances.
Vous n'avez aucune raison 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 est utile si vous souhaitez charger de manière conditionnelle un sous-ensemble de 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>
L'exécution de toutes vos importations HTML avec un outil comme Vulcanize présente également des avantages réseau importants.
Vulcanize regroupe 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
Mais le simple fait de créer une application performante ne suffit pas à résoudre 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 complexe pour mettre vos ressources hors connexion, mais à l'avenir, Service Worker devrait bientôt rendre l'expérience de développement hors connexion beaucoup plus agréable.
Jake Archibal a récemment publié un incroyable livre de recettes sur les modèles de service worker, mais je vais vous aider à démarrer rapidement:
L'installation d'un service worker est un jeu d'enfant. Créez un fichier worker.js et enregistrez-le au démarrage de l'application.
Il est important de localiser votre worker.js à la racine de votre application pour qu'il puisse intercepter les requêtes de n'importe quel chemin d'accès dans votre application.
Dans le gestionnaire d'installation du nœud de calcul, je met en cache une multitude de ressources (y compris les données qui alimentent l'application).
Cela permet à mon appli de proposer au moins une expérience de remplacement à l'utilisateur s'il y accède hors connexion.
En avant !
Les composants Web sont un grand ajout à la plate-forme Web et ils n'en sont qu'à leurs balbutiements. Étant donné qu'ils sont compatibles avec de plus en plus de navigateurs, c'est à nous, la communauté des développeurs, de déterminer les bonnes pratiques pour structurer nos applications. Les solutions ci-dessus nous donnent un point de départ, mais il reste encore beaucoup à apprendre. En avant pour créer de meilleures applications !