Outils et pratiques pour accélérer le processus de développement Vue.js —
Résumé rapide ↬
Même si Vue.js prétend avoir un cadre minimaliste accessible qui peut être progressivement adaptable, cela peut être un peu écrasant lorsque vous commencez en tant que débutant de Vue.js. Dans cet article, nous cherchons des moyens de simplifier l'écriture de Vue.js.
Tout au long de ce tutoriel, nous examinerons les pratiques à adopter, les choses à éviter et nous examinerons de plus près certains outils utiles pour faciliter l'écriture de Vue.js. Je me concentrerai principalement sur Vue 2 car la plupart des gens et des organisations utilisent encore l'ancienne version. Aucune raison de s'inquiéter cependant, car la plupart des choses mentionnées ici s'appliquent toujours à Vue 3 car il s'agit simplement d'une version suralimentée et plus rapide. Néanmoins, si vous connaissez déjà Vue 2 et que vous souhaitez simplement en savoir plus sur les nouveautés de Vue 3, vous pouvez consulter le guide de migration pour en savoir plus.
Remarque :Cet article est destiné aux développeurs débutants et chevronnés qui souhaitent améliorer leurs compétences Vue.js. Des connaissances de base de JavaScript et de Vue.js seront très utiles au fur et à mesure que vous progresserez tout au long de ce didacticiel.
Structuration de projet basée sur des modules ou basée sur des fichiers
Commençons par examiner comment structurer les fichiers par modules, comment la structuration basée sur des fichiers n'est peut-être pas une bonne idée lorsqu'il s'agit de créer des projets à grande échelle et de structurer des modules pour qu'ils s'adaptent aux exigences de l'entreprise. la structure de fichier par défaut qui a été mappée par l'équipe Vue.js. L'utilisation de la structure de fichier proposée n'est pas une mauvaise façon de structurer votre projet en soi, mais au fur et à mesure que votre projet grandit, vous aurez besoin d'une meilleure structure car votre code devient groupé et il est plus difficile de naviguer et d'accéder aux fichiers.
C'est là que le
la méthode de structuration de votre projet basée sur les modules entre en jeu.
Une mauvaise façon de structurer votre projet consistera à stocker différentes données qui ne sont pas liées au même dossier, telles que le composant de notification et le composant d'authentification dans le dossier du composant racine :
Donc, ce que nous voulons faire, c'est découpler le projet en fonction de la logique métier et des préoccupations afin que nous ayons quelque chose comme un module d'authentification, un module de produit, un module de service, etc. De cette façon, nous pouvons nous assurer que tout ce qui concerne cette fonctionnalité particulière est mis dans le module, ce qui rend notre code plus propre et la navigation moins difficile.
Vous pouvez organiser vos modules de deux manières :
Modules de base Vue.js,
Modules de fonctionnalités d'application.
Les modules de base Vue.js sont ici pour faciliter votre développement Vue.js. Des modules tels que le module de service contenant toutes les demandes de réseau nécessaires à l'entreprise sont conservés dans ce module de base et toutes les demandes de réseau correspondantes sont effectuées à partir d'ici.
La modularisation de votre application en fonction des fonctionnalités est un excellent moyen de créer une meilleure structure de fichiers dans votre application. Cela permettra de séparer vos préoccupations et de vous assurer que vous ne travaillez que sur la fonctionnalité à laquelle vous ou votre équipe êtes affecté. Un autre avantage de la modularisation en fonction des fonctionnalités est sa facilité de maintenance et sa capacité à éviter la dette technique à long terme où il pourrait être nécessaire de retravailler l'application.
Désormais, chaque fois qu'il est nécessaire d'ajouter, de supprimer ou de modifier l'état de une fonctionnalité particulière, tout ce que nous avons à faire est de naviguer vers cette fonctionnalité et d'apporter des modifications sans casser l'application. Cette méthode de modularisation permet un développement de programme efficace et un débogage et une modification faciles dans notre application.
Par exemple, une fonction de paiement qui vous est attribuée et à votre équipe est un bon moment pour mettre en œuvre un module de paiement qui encapsule toutes les fonctionnalités et données pour la fonctionnalité.
Sur la base de notre fonctionnalité de paiement ci-dessus, nous avons un fichier index.js pour importer et utiliser des plugins associés uniquement au module de paiement. Le dossier des actifs contient tous les actifs (images et styles) du module. Notre dossier de composants contient des composants liés à la fonction de paiement. Le dossier de stockage contient nos actions, mutations et getters utilisés pour gérer l'état de cette fonctionnalité. Il existe également un dossier de test pour effectuer des tests pour cette fonctionnalité.
En savoir plus après le saut ! Continuez à lire ci-dessous ↓
Utilisation de directives personnalisées
Les directives dans Vue.js sont un moyen pour nous de dire à Vue.js de faire quelque chose ou de présenter un certain comportement pour nous. Des exemples de directives sont v-ifv-modelv-foretc. Dans notre application Vue.js, lorsque nous utilisons quelque chose comme v- modèle pour lier des données à une entrée dans un formulaire, nous donnons au code Vue.js certaines instructions propres à Vue.js. Mais que se passe-t-il si nous voulons une action ou un comportement particulier que notre directive fournie par Vue.js ne nous permet pas de faire, que faisons-nous alors ? Nous pouvons créer ce que nous appelons des directives personnalisées.
Enregistrement de directives personnalisées et de crochets de directives
Nous pouvons procéder à l'enregistrement de directives de deux manières :
Globalement Dans notre main.js.
Localement Dans notre composant.
Les hooks dans les directives sont comme des méthodes qui se déclenchent lorsqu'une certaine action se produit dans nos directives. Comme les crochets de cycle de vie des crochets créés et montésnous disposons de crochets à utiliser dans nos directives.
Disons que nous construisons une application et dans l'une de nos pages, nous voulons que la couleur d'arrière-plan change toujours à chaque fois que nous y naviguons. Nous allons nommer cette directive colorChange. Nous pouvons y parvenir à l'aide d'une directive.
Notre modèle ressemble à ceci :
Nous pouvons voir la directive personnalisée ci-dessus, mais pour la faire fonctionner, dans notre fichier main.js nous ajoutons :
// directive personnalisée
Vue.directive("changement de couleur", {
lier : fonction (el) {
const random = Math.floor(Math.random() * 900000) + 100000 ;
el.style.backgroundColor = `#${aléatoire}`
}
})
La directive Vue.js ci-dessus prend le nom de la directive comme premier argument, puis un Object comme deuxième argument qui contrôle le comportement des directives. bind est l'un des hooks dont nous avons parlé et sera appelé une fois que la directive sera liée à l'élément. Il accepte les arguments suivants :
el Il s'agit du nœud d'élément auquel nous avons attaché la directive.
binding Il contient des propriétés utiles qui modifient le comportement de la directive.
vnode C'est le nœud virtuel de Vue.js.
Nous avons créé un ensemble aléatoire de nombres à 6 chiffres afin que nous puissions l'utiliser pour modifier le code hexadécimal de notre style de couleur d'arrière-plan.[19659046]Meilleures pratiques lors de la rédaction de directives personnalisées
Nous avons créé une directive personnalisée pour ce qui précède, mais nous devons prendre note de quelques éléments. En dehors de elne modifiez jamais les arguments de hook et assurez-vous que les arguments sont en lecture seule car les arguments de hook sont des objets avec des méthodes natives qui peuvent provoquer des effets secondaires s'ils sont modifiés. Si nécessaire, utilisez l'ensemble de données Vue.js pour partager des informations entre les hooks.
Si nous utilisons la version CLI de Vue.js, les directives personnalisées doivent se trouver dans le fichier main.js afin que tous les Les fichiers .vue peuvent y avoir accès. Le nom de votre directive devrait être quelque chose qui résonne avec ce que fait cette directive particulière, très descriptif sur la fonctionnalité de la directive.
Le système de réactivité Vue.js est puissant de manière à détecter les éléments qui nécessitent une mise à jour et à les mettre à jour sans vous en tant que développeur faisant n'importe quoi. Par exemple, re-afficher une page chaque fois que nous y naviguons. Parfois, le cas peut être différent car nous pouvons nous retrouver à écrire du code qui nous oblige à forcer une mise à jour.
Remarque :Si vous devez forcer une mise à jour, ce qui est une occasion rare, vous devrez peut-être pour vraiment comprendre la réactivité de Vue et comment utiliser correctement les accessoires pour communiquer des données dynamiques.
Forcer une mise à jour à se produire
Dans la plupart des cas, lorsque la valeur de l'objet de données vue change, la vue est automatiquement restituée, mais c'est pas toujours comme ça. un cas classique de notre point de vue, pas de re-rendu, c'est lorsque nous utilisons un v-for dans notre modèle pour boucler certaines données dans l'objet de données, et nous n'ajoutons pas de :key valeur dans la boucle v-for.
Cela donne à Vue.js un moyen de suivre l'identité de chaque nœud et de restituer la vue pour tout changement.[19659007]Une situation rare qui peut nous amener à forcer une mise à jour est si nous définissons intentionnellement ou accidentellement un élément de tableau avec l'index.
var app = new Vue({
Les données: {
éléments : ['1', '2']
}
})
app.items[1] = '7' //vue ne remarque aucun changement
Il existe différentes manières de forcer une mise à jour ou un nouveau rendu. Certaines sont de très mauvaises pratiques comme l'utilisation de v-if pour restituer la page lorsqu'elle est trueet lorsqu'elle est fausse, le composant disparaît et n'existe plus. C'est une mauvaise pratique car le modèle n'est jamais détruit mais simplement caché jusqu'à ce qu'il puisse être réutilisé.
Dans le code ci-dessus, l'état de show est initialement défini sur true, ce qui signifie que notre composant est initialement rendu. Ensuite, lorsque nous cliquons sur le bouton, la fonction rerender() est appelée et l'état de show est défini sur falseet le composant n'est plus rendu. Au prochain tick, qui est un cycle de mise à jour DOM unique, show est défini sur true et notre composant est à nouveau rendu. Il s'agit d'une manière très compliquée de re-rendu.
Je voudrais parler de deux manières légitimes de le faire :
Vue's $forceUpdate.
Modèle de changement de clé.[19659017]Vue's $forceUpdate : Dans l'utilisation de $forceUpdateles composants enfants ne sont pas rendus, seuls l'instance Vue.js, l'instance et les composants enfants avec des emplacements.
Utiliser le modèle de changement de clé qui est bien meilleur que la méthode $forceUpdate est une autre façon de procéder. La raison pour laquelle le modèle de changement de clé est meilleur est qu'il permet à Vue.js de savoir quel composant est lié à une donnée spécifique et lorsque la clé change, il détruit l'ancien composant pour en créer un nouveau, selon matthiasg sur ce problème Github que j'ai rencontré. Vous pouvez utiliser un attribut :key pour indiquer à Vue.js quel composant est attaché à une donnée spécifique. Lorsque la clé change, Vue.js détruit l'ancien composant et un nouveau est créé.
Bibliothèques tierces et optimisation
Il est presque inévitable que nous n'utilisions pas de bibliothèques tierces dans nos applications. Les bibliothèques tierces peuvent commencer à être un problème si nous fermons les yeux, augmentant la taille de l'ensemble et ralentissant notre application.
J'ai récemment utilisé la bibliothèque de composants Vuetify dans un projet et vérifié que la taille globale de l'ensemble était un 500kb minifié. Des choses comme celle-ci peuvent devenir un goulot d'étranglement dans notre application. Vous pouvez vérifier la taille de l'ensemble de votre application en utilisant webpack-bundle-analyzer. Vous pouvez l'installer en exécutant :
npm install --save-dev webpack-bundle-analyzer
et l'inclure dans votre fichier de configuration webpack :
Bonnes pratiques pour optimiser votre application Vue
Notre bundle principal ne doit contenir que les dépendances essentielles à notre application, comme vuevuex. Nous devons éviter de placer les bibliothèques utilisées dans des routes spécifiques de notre application dans le bundle principal.
Lorsque vous utilisez des bibliothèques de composants, vous pouvez importer des composants individuels à partir des bibliothèques, au lieu de tout importer. Par exemple, vuetify :
En faisant ce qui précède, nous avons réduit la taille du bundle et le code redondant, en utilisant uniquement les composants que nous souhaitons utiliser dans cette route particulière.
Prendre des décisions précoces pour utiliser Vuex
Souvent, je me suis retrouvé me demandant si je devrais démarrer un projet avec Vuex. Parfois, je veux juste démarrer un petit projet parallèle et je le démarre sans Vuex pour gérer mon état et la communication à l'aide d'accessoires commence à devenir compliquée.
Alors, quand devrions-nous utiliser Vuex ? Pour répondre à cette question, nous devons considérer :
La taille du projet,
La simplicité du code,
Le routage,
L'ensemble de données concerné,
L'imbrication des composants.
Si votre application démarre pour grandir, il est seulement approprié d'inclure Vuex pour gérer l'état dans votre application. Si jamais vous ne savez pas si vous devez utiliser un gestionnaire d'état lors du démarrage de votre projet, utilisez-le simplement. Cependant, il est question que la nouvelle API de composition Vue3 remplace vuex.
Comment Vuex devrait être configuré pour les grandes applications
Nous avons quatre composants dans le magasin vuex : [19659087]État : Stockez les données dans notre magasin.
Getters : Récupérez les données d'état.
Mutations : Utilisé pour muter les données d'état.
Action : utilisé pour commettre des mutations.
Lorsque nous utilisons ce qui précède dans Vuex, nous devons garder à l'esprit que les actions doivent toujours commettre des mutations, quoi qu'il arrive. Cela permet à nos devtools de suivre les modifications et de revenir à une période particulière de notre état et des opérations asynchrones ou une logique métier doivent être effectuées dans les actions.
Vous pouvez créer un fichier séparé pour chacun. des composants Vuex pour ressembler à ceci :
Si notre projet est un très grand projet avec une équipe, nous pouvons modulariser notre magasin en fonction des fonctionnalités de l'application. Cela se fait surtout lorsqu'il y a des projets complexes et volumineux avec de nombreux fichiers et dossiers et que nous voulons juste une manière organisée de gérer la structuration de notre application. Nous devons faire attention à la façon dont nous procédons, sinon nous pouvons faire plus de mal que de bien. Un magasin simple modularisé selon la fonctionnalité ressemble à ceci :
Bonne pratique lors de l'utilisation des modules Vuex
Comme les modules que nous avons créés deviennent plus compliqués, il devient plus difficile d'importer et d'organiser manuellement. Il est conseillé que vos modules aient un fichier index.js à la racine de votre module, rassemblant tous les fichiers.
Assurez-vous d'avoir un modèle de nommage standard dans votre magasin car cela augmentera la maintenabilité. Vous pouvez utiliser camelCase pour nommer les modules puis une extension .store.js. Exemple : CartData.store.js.
Le code lié à la logique métier ou au code asynchrone ne doit pas s'exécuter à l'intérieur des mutations en raison de son comportement de blocage, mais des actions doivent être utilisées. Il est considéré comme la meilleure pratique de ne pas accéder directement à un objet d'état. Au lieu de cela, utilisez la fonction getter car elle peut être mappée dans n'importe quel composant vue à l'aide de mapGetters se comportant comme une propriété calculée avec le résultat getters mis en cache en fonction de ses dépendances. Assurez-vous également que chaque module est dans un espace de noms et qu'il n'y accède pas à l'aide de la portée de l'état global.
Utilisation de la méthode Provide/Inject pour transmettre des données
Pensez à une application qui a différents composants. Nous avons le composant parent et le composant parent a de nombreux composants enfants. Dans l'image ci-dessous, nous voyons nos composants enfant A, B et D comme composants supérieurs, puis nous voyons le composant E imbriqué dans le composant D et le composant F imbriqué dans le composant E. Et si nous avons des données d'application (comme l'adresse de l'utilisateur), cela nous voulons utiliser dans les composants enfants A, C et F, et ces données d'adresse utilisateur se trouvent dans notre composant parent.
Le architecture de la communication parent-enfant. ( Grand aperçu)
Pour ce faire, nous devons :
Fournir la valeur dans le composant parent (Fournisseur de dépendances).
Injecter la valeur dans le composant F (consommateur de dépendances).
Dans notre composant parent, nous fournissons les données :
Nous utilisons provide comme fonction en renvoyant un objet pour accéder aux propriétés d'instance du composant.
Dans notre composant child-fnous avons ce qui suit :[19659010]app.component('enfant-f', { injecter : [‘userAddress’], modèle : `
Propriété injectée : {{ this.userAddress }}
` })
Cependant, nous avons remarqué que si nous modifions notre user.address à une autre adresse, le changement ne sera pas reflété dans notre valeur injectée, c'est parce que les données fournies au fournisseur/injecter ne sont pas réactifs au départ. Nous pouvons résoudre ce problème en passant un objet reactive à provide. Nous devons affecter une propriété calculée à notre objet utilisateur.
Ce modèle peut être très utile et plus simple que d'utiliser Vuex.
Cependant, avecVue3 et la récente mise à jour, nous pouvons désormais utiliser des fournisseurs de contexte, nous permettant de partager des données entre plusieurs composants tout comme vuex.
Utilisation appropriée des accessoires pour les composants de formulaire
Créer des formulaires sur le Web est l'une de ces choses que tout le monde n'aime pas faire. Vue.js facilite la création d'excellents formulaires. Pour y parvenir, nous devons savoir comment utiliser correctement les accessoires dans nos composants de formulaire. Dans une application traditionnelle où nous avons une inscription, des connexions ou une page de produit, nous voulons avoir un comportement et une conception cohérents. Par exemple, la page de connexion ci-dessous.
Nous aimerions avoir un composant BaseInput que nous pouvons utiliser pour les trois entrées de formulaire ci-dessus. Notre BaseInput ressemble à ceci :
Nous voulons que notre BaseInput accepte une prop label qui est toujours une chaîne, et si l'entrée a une étiquette, nous l'affichons dans notre modèle comme nous pouvons voir ci-dessus.
Lorsque nous remplissons le formulaire, la méthode updateInput est déclenchée. La méthode updateInput prend l'événement d'entrée comme argument et émet un événement avec le nom de Input, ainsi que la charge utile event.target.value qui est le nom (John Doe) sous la forme :
Le v-model écoutera l'événement d'entrée, puis lorsqu'il l'aura, il définira notre userData.name sur la charge utile qu'il a obtenue.
Si nous voulons définir un espace réservé pour une entrée, nous pouvons rencontrer une erreur, car dans vue2, les attributs s'attachent toujours au parent, donc pour résoudre ce problème, nous définissons inheritAttrs à false et lier attrs.
À l'endroit où nous voulons que l'attribut d'espace réservé soit. Le code de notre page de formulaire ressemble maintenant à ceci :
Nous avons enfin un composant de formulaire réutilisable autonome. Vous pouvez jouer avec le code dans la codesandbox que j'ai créé.
Remarque :$Attrs dans Vue3 inclut désormais tous vos auditeurs, liaisons de style et classes.[19659148]Vue.js Devtools est un outil très puissant car il nous aide à déboguer efficacement notre application en temps réel. Il est plus puissant lorsque nous utilisons Vuex et que nous devons gérer les mutations et suivre les changements dans notre application. La plupart des développeurs de Vue.js utilisent devtools en tant qu'extensionmais nous pouvons également l'installer en tant qu'application autonome.
Remarque :Les devtools de Vue.js ne fonctionnent que dans le mode de développement de votre build. et ne fonctionnera pas en production afin que d'autres personnes ne puissent pas l'utiliser pour inspecter votre application.
Installation de Devtools en tant qu'application autonome
Vous vous demandez peut-être pourquoi nous voudrions installer une application autonome pour devtools lorsque nous le pouvons utiliser l'extension de navigateur pour cela ? C'est parce que lorsque vous l'installez localement en tant qu'application autonome, vous pouvez l'utiliser à partir de n'importe quel navigateur.
Puis dans notre fichier index.htmlsitué dans le dossier public dans la racine de notre application Vue.js, nous ajoutons :
Une fois votre application rechargée, elle se connectera automatiquement.
Quelques opérations que nous pouvons faire avec Vue Devtools
Voici quelques opérations utiles que vous pouvez effectuer sur Vue.js DevTools.
Dark Theme Dans le nouveau DevTools, il existe désormais une option permettant de définir entre des thèmes clairs, sombres ou contrastés. Vous pouvez le faire en allant dans vos paramètres globaux et en le sélectionnant.
Chronologie La nouvelle chronologie dans les outils de développement affiche des informations sur les événements qui se produisent et elle est classée par ordre chronologique. Il est situé à côté de l'inspecteur et de la vue des paramètres.
Formater le nom du composant Vous pouvez choisir d'afficher le nom de votre composant soit en camelCase, soit en kebab-case.
Il existe de nombreuses autres opérations que vous pouvez utiliser dans les outils de développement de vue. Vous pouvez consulter leur changelog.
Lorsque vous travaillez avec Vuejs, nous pouvons rencontrer certaines fonctionnalités que nous aimerions implémenter, mais cela peut prendre beaucoup de temps pour coder en dur ou juste un peu difficile à mettre en œuvre. En tant que développeurs professionnels, nous ajoutons certains outils et bibliothèques d'aide pour faciliter les choses et nous en examinerions certains.
Bibliothèques de test
Les tests peuvent jouer un rôle crucial lors de la création d'applications à grande échelle. Cela nous aide à éviter les bugs inutiles pendant le développement lorsque nous travaillons avec une équipe. Examinons les trois types de tests que nous pouvons effectuer dans notre application Vue et leurs frameworks.
Bibliothèques de composants
Une bibliothèque de composants est un ensemble de composants réutilisables que nous pouvons utiliser dans notre application pour rendre le développement de l'interface utilisateur beaucoup plus rapide et plus cohérente dans notre application. Comme React et Angular, Vue possède son propre ensemble de bibliothèques de composants. Certains d'entre eux incluent :
Vue Material Kit Un kit d'interface utilisateur Vue.js « Badass » basé sur la conception matérielle. Il contient plus de 60 composants fabriqués à la main.
Buefy Une bibliothèque de composants légère basée sur le framework CSS Bulma. Si vous êtes à l'aise avec SASS, vous n'aurez aucun problème à l'utiliser.
Vuetify C'est aussi un framework de composants de conception matérielle avec la disponibilité d'un échafaudage déjà fait pour le code, avec une grande communauté et des mises à jour régulières
Quasar Mon préféré en ce qui concerne le framework de composants. Quasar avec sa pile frontale hautement performante vous permet de créer des applications multiplateformes pour le Web, le mobile et le bureau.
Autres bibliothèques intéressantes
D'autres bibliothèques dignes de mention sont :
FilePond Cette vue La bibliothèque .js télécharge n'importe quelle image que vous lui donnez et optimise ces images avec une expérience soyeuse.
Vuelidate Cette bibliothèque est très importante lorsque vous travaillez avec des formulaires et vous avez besoin d'un moyen de valider les entrées de l'utilisateur sur le l'extrémité avant. Il s'agit d'une validation basée sur un modèle simple et légère.
vue-Clickaway Vue n'a pas d'écouteur d'événement natif pour savoir quand un utilisateur a cliqué en dehors d'un élément, par exemple, une liste déroulante, c'est pourquoi vue-clickaway existe pour détecter les événements de clic.
Les extensions sont des outils vraiment utiles, qui peut faire une grande différence dans votre productivité quotidienne lors de l'écriture de vuejs. Pendant le temps que j'ai passé à écrire du code Vuejs, j'ai trouvé les extensions suivantes très utiles :
Vetur C'est l'extension numéro un sur ma liste. Me faire gagner des heures lors de l'écriture de Vuejs. Il fournit une mise en évidence spécifique, des extraits de code, Intellisense, le débogage et bien plus encore pour Vue.js.
Favoris Cette extension est très pratique lorsque vous travaillez sur un grand projet car vous pouvez marquer et définir un signet dans endroits dans votre code et accédez à cet endroit spécifique lorsque vous le souhaitez.
Eslint Eslint nous aide à trouver facilement les erreurs de codage en lançant un avertissement si nous faisons quelque chose de mal dans le code. Il est conseillé de l'utiliser dans un plus joli format.
Vue.js Extension Pack Ce pack d'extension contient une collection d'autres extensions qui vous aideront dans votre développement Vue.js comme Prettier, Vetur, Night Owl , Etc.
Conclusion
Dans ce tutoriel, nous avons examiné quelques astuces et outils pour vous aider à devenir un meilleur développeur Vue. Nous avons commencé avec quelques informations utiles sur l'organisation de nos projets à l'échelle et d'autres points importants à noter et nous l'avons complété avec des outils et des extensions qui facilitent l'écriture de Vuejs.
Gardez à l'esprit que la plupart de ce qui est appris dans cet article. est centré sur Vue.js 2, pour éviter les malentendus.
Autres ressources
Voici quelques liens utiles que vous pouvez consulter si vous souhaitez approfondir certaines des choses dont nous avons discuté ci-dessus.
(yk)