Comment utiliser les composants Web avec des outils de conception d'interface utilisateur

Comment utiliser les composants Web avec des outils de conception d'interface utilisateur
4.8 (95.38%) 39 votes


La réutilisation du code est indéniablement précieuse. Avec des modules d'application réutilisables, les développeurs peuvent aller encore plus loin dans les applications Web et les interfaces utilisateur.

Les composants Web sont des éléments modulaires d'un que les développeurs peuvent assembler, réutiliser et porter entre navigateurs et parfois même environnements applicatifs. Les développeurs créent des interfaces utilisateur à partir de composants Web de la même manière que pour la composition d'applications à partir de services ou de microservices. Comme pour la programmation basée sur les services ou les microservices, le modèle de composant Web comporte des règles, des astuces et des inconvénients.

Expliquons comment utiliser les composants Web et les éléments qui les composent.

Qu'est-ce qui constitue les composants Web?

Les composants Web sont des extraits de code JavaScript ou HTML conçus pour exécuter une fonction simple et complète. Pratiquement tous les navigateurs et prend en charge l'ensemble fondamental d'API pour les composants Web, ce qui signifie que les développeurs peuvent introduire des composants Web dans presque toutes les pages HTML. Cette modularité évite aux développeurs de passer à un autre langage de programmation, qui crée généralement des fonctionnalités de page opaques pour les concepteurs Web.

Les normes des composants Web et les processus associés se composent de quatre éléments:

  • Éléments personnalisés, qui conçoit ou définit les composants Web;
  • la Shadow DOM qui encadre les éléments personnalisés de manière à les rendre portables;
  • Modules ES, qui permet aux développeurs de définir des documents JavaScript portables; et
  • Modèles HTML qui décrivent comment instancier des composants Web.

Les spécifications des composants Web permettent aux développeurs d’utiliser Custom Elements, une extension du jeu d’API du navigateur, pour définir un élément particulier que le navigateur doit analyser. Chaque composant Web est intégré à son DOM Shadow, ce qui signifie Modèle d'objet de document, la représentation d'une page Web. Chaque composant peut alors fonctionner comme un élément autonome de la plus grande page.

Pour utiliser les composants Web, les développeurs doivent les installer, les importer puis les référencer. le site détaille ce processus et héberge des exemples de composants Web et une communauté de développeurs Web.

Comment utiliser les composants Web pour créer une interface utilisateur

Écrire des composants Web est une chose, mais concevoir des interfaces utilisateur pour en tirer parti en est une autre. Il existe deux méthodes pour utiliser les composants Web dans une interface utilisateur. Vous pouvez les intégrer au développement de pages Web à l'aide de HTML, ce qui implique normalement l'utilisation de Composants dans leur formulaire JavaScript ou HTML natif. Ou vous pouvez vous tourner vers un outil pour travailler directement avec les composants Web.

Tout outil de création HTML moderne offrant un moyen de créer JavaScript prend en charge les composants Web, que ce soit pour les développer ou pour utiliser des composants prédéfinis, commerciaux ou libres dans les tâches de création d'interface utilisateur. Cependant, la création HTML n'impose pas nécessairement une discipline dans la conception de page, et les développeurs doivent faire preuve de discipline pour tirer pleinement parti des composants Web.

Les composants sont des objets. Pensez à un composant Web en tant que sous-page qu'un constructeur doit appeler pour être visible et actif. Chaque composant a un constructeur qui s'exécute lorsqu'il est activé, ce qui le rend visible et définit son état initial. Ainsi, la réflexion est importante lorsque vous construisez une interface utilisateur pour l'implémentation de composants Web.

Il est assez facile pour la plupart des concepteurs de sites Web connaissant bien JavaScript d’utiliser directement des composants Web, mais il peut être plus difficile de réaliser une conception cohérente à partir d’un ensemble de composants autonomes. Avant que les concepteurs n'utilisent des composants Web, les éléments de conception doivent être accessibles. ils devraient également savoir comment utiliser un cadre pour décrire une interface utilisateur, ainsi que la pour le remplir avec des composants Web.

Outils de conception d'interface utilisateur, langages et frameworks

Pour les obstacles les plus bas à l’entrée avec les composants Web, utilisez les outils de conception d’interface utilisateur. Ces outils peuvent vous aider à concevoir une interface utilisateur correspondant aux fonctionnalités des composants Web. La plupart des outils de conception Web suivent les préceptes du système de conception de matériel; et Google, qui l’a conçu à l’origine, propose un cadre, ainsi qu’un ensemble plus large d’outils et de pratiques associés à la création d’une interface utilisateur modulaire compatible avec les composants Web.

La conception matérielle est le langage de conception le plus utilisé sur Internet, mais il existe d'autres options pour les concepteurs d'interface utilisateur qui préfèrent une apparence personnalisée. Materialise est un sur-ensemble de Material Design qui offre, selon de nombreux concepteurs de sites Web, un meilleur support créatif. MUI et Flat Remix sont des langages de conception légers constituant des sous-ensembles de Material Design.

Ant et Grommet sont des langages de conception qui représentent des déviations totales par rapport aux principes de conception et d'utilisation.

Il existe également une Material Designs Lite qui possède ses propres composants Web, non dépendants de JavaScript mais encadrés directement au format HTML; Cet outil de conception d'interface utilisateur permet de créer une apparence similaire à celle des conceptions de matériaux avec de nombreux avantages des composants Web.

Beaucoup de développeurs veulent et des conceptions d'interface utilisateur interactives, qui peuvent être difficiles à créer avec des composants Web. Ils peuvent être amenés à utiliser un langage de conception d'interface utilisateur tel que Material Design dans un framework de développement Web JavaScript, tel que AngularJS ou Bootstrap, qui incluent tous les deux des crochets Material Design. Pour la construction d'interface utilisateur avancée, utilisez l'un de ces cadres et intégrez-les aux principes de l'interface utilisateur Material Design via ces crochets.

Design + Web Components = l'interface utilisateur. Plus une équipe de logiciels maîtrise mieux ses conceptions et plus elle s’appuie sur des structures normalisées, plus elle échappera à l’utilisation des composants Web.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *