Calendrier HTML par défaut vs calendrier commercial React

Dans cet article, nous allons comparer le composant React Calendar disponible dans la bibliothèque d’interface utilisateur KendoReact avec le calendrier HTML par défaut, en examinant toutes les fonctionnalités uniques et les décisions UX qui entrent dans un composant de calendrier de bibliothèque commerciale robuste et complet.

Il y a beaucoup de composants d’interface utilisateur que nous tenons pour acquis – des blocs de construction que nous voyons et utilisons tout le temps sans vraiment y penser. Ils sont devenus une partie si discrète de notre expérience de navigation sur le Web que, même en tant que développeurs, nous ne considérons jamais leur importance, jusqu’à ce que nous ayons besoin de créer quelque chose qui inclut l’un de ces composants, c’est-à-dire.

Le calendrier React est l’un de ces composants d’une simplicité trompeuse : nous ne considérons jamais la quantité de réflexion et de conception qui y est consacrée. Cependant, si jamais vous avez besoin d’en coder un à partir de zéro, vous apprenez combien de temps et d’efforts cela prend vraiment. Dans ces situations, on nous dit parfois : « Utilisez simplement l’élément HTML par défaut ! »

Il est vrai que de nos jours, il y a beaucoup plus de composants d’interface utilisateur par défaut que nous obtenons en HTML qu’auparavant… mais parfois, ils ne font tout simplement pas tout ce dont nous avons besoin. Il y a des avantages à utiliser ces valeurs par défaut (généralement dans les domaines de l’accessibilité et de la vitesse de développement), mais il y a aussi des inconvénients importants en termes de personnalisation et d’options de fonctionnalités.

Dans cet article, nous allons comparer le calendrier React composant disponible dans le Bibliothèque d’interface utilisateur KendoReact avec le calendrier HTML par défaut, en examinant toutes les fonctionnalités uniques et les décisions UX qui entrent dans un composant de calendrier de bibliothèque commerciale robuste et complet. Parce que bien sûr, vous pourrait utilisez simplement le calendrier HTML par défaut, non stylisé… mais Pourquoialors que vous pouviez avoir une UX plus fluide, un ensemble de beaux thèmes prédéfinis, la mondialisation et bien plus encore, sans sacrifier l’accessibilité ou la facilité de développement !

Cohérence

Commençons par l’évidence : l’apparence du composant pour vos utilisateurs. L’un des principaux inconvénients de l’utilisation du composant de calendrier HTML par défaut est que la conception n’a pas été normalisée dans tous les navigateurs.

Ici, j’ai pris des captures d’écran du calendrier HTML tel qu’il s’affiche dans Chrome, Firefox et Safari. Vous pouvez voir que non seulement l’aspect et la convivialité, mais aussi l’expérience utilisateur sont assez différents pour chacun, et cela ne tient même pas compte de l’expérience mobile ! Idéalement, vos utilisateurs devraient toujours avoir la même expérience, quel que soit leur choix de navigateur, c’est donc un sérieux inconvénient.

Captures d’écran du composant Calendrier HTML par défaut dans Firefox, Chrome et Safari (de gauche à droite).

Lorsque vous utilisez un composant commercial tel que le calendrier KendoReact, vous pouvez garantir une expérience cohérente à vos utilisateurs, quelle que soit la manière dont ils accèdent à votre application. Nos composants ont été minutieusement testé sur plusieurs navigateurs et sont garantis de rendre de la même manière dans tous les navigateurs modernes.

Capture d’écran du composant KendoReact Calendar, tel qu’il apparaît systématiquement dans Firefox, Chrome et Safari.

Personnalisation

L’autre inconvénient notable de l’utilisation des composants HTML par défaut est le fait que vous n’avez aucun contrôle sur l’UX. Vous obtenez ce que vous obtenez, et si vous avez besoin de fonctionnalités supplémentaires (ou si vous souhaitez limiter l’expérience à ce qui est exactement pertinent pour vos utilisateurs), vous n’avez malheureusement pas de chance.

Sans oublier que la fonctionnalité est un peu différente selon le navigateur que vous utilisez. Notez comment le calendrier Chrome inclut les boutons « Effacer » et « Aujourd’hui » tandis que les autres ne le font pas, et comment Chrome et Firefox permettront à l’utilisateur de choisir un mois dans un menu déroulant, mais pas Safari.

Le calendrier KendoReact, d’autre part, propose une grande variété d’options en ce qui concerne personnalisation et fonctionnalités. Retirer le barre de navigation rapide le long du côté gauche, ajoutez numéros de semaine le long du bord de la vue du calendrier – ou soyez ambitieux et personnalisez tout ça. Par exemple, un emoji peut être ajouté à un jour particulier pour indiquer un jour férié spécial ou un anniversaire.

Chaque partie du calendrier KendoReact, depuis la cellule de jour individuelle, les cellules de semaine, les éléments de navigation ou le titre du calendrier, peut être remplacée par un rendu personnalisé. Et quelle que soit la façon dont vous personnalisez le composant, il apparaîtra de la même manière dans tous les navigateurs.

Le calendrier KendoReact avec la barre de navigation rapide supprimée, les numéros de semaine ajoutés et personnalisés pour afficher un emoji (de gauche à droite).

Style et thème

Lorsque vous utilisez un composant par défaut, vous ne pouvez pas être trop surpris quand il a l’air… eh bien, défaut. Bien entendu, les composants natifs ne correspondent pas au thème et aux styles que vous avez choisis pour votre application. Ils s’inspirent des paramètres de thème du navigateur et du système d’exploitation de l’utilisateur.

Il est également notoirement difficile (voire impossible) d’écraser les styles. Ainsi, lorsqu’il est important que votre composant corresponde à l’apparence du reste de votre page, cela signifie qu’il est temps pour quelque chose qui vous offre un peu plus de contrôle.

En plus de toute la personnalisation que vous pouvez faire pour la fonctionnalité réelle du calendrier KendoReact, vous pouvez également avoir un contrôle total sur le style. Choisissez l’un des multiples thèmes et échantillons préexistants ou utilisez le Kits Figma plonger profondément dans la conception du calendrier dans tous ses différents états.

Les 16 thèmes prédéfinis KendoReact disponibles.

Le composant Calendrier des kits Kendo UI Figma, montrant chaque élément de l’interface utilisateur décomposé pour une personnalisation complète de la conception.

Accessibilité

L’un des rares endroits où le calendrier par défaut d’habitude gagne est l’accessibilité. Étant donné que le calendrier HTML par défaut est naturellement entièrement accessible, cela l’emporte souvent sur les alternatives, même si elles sont plus belles ou cohérentes.

Mais que se passerait-il si vous pouviez avoir tous les deux: un calendrier React non seulement facile à utiliser et entièrement personnalisable, mais aussi accessible: entièrement accessible aux lecteurs d’écran, avec prise en charge complète de WAI-ARIA et conformité à la section 508 ?

Eh bien, vous pouvez avoir votre gâteau (entièrement accessible) et le manger aussi ! Le calendrier KendoReact utilise le aria-selected, aria-disabled et aria-activedescendant propriétés sur les éléments imbriqués en fonction de l’état actuel du composant et de ses options. Il prend également en charge la grid rôle—chaque cellule du calendrier a un gridcell rôle. L’un des avantages de l’utilisation de KendoReact est prise en charge de l’accessibilité à tous les niveaux— pas seulement sur le calendrier, mais sur chacun des plus de 100 composants de la bibliothèque.

Facilité de développement

Une autre catégorie où le calendrier par défaut remporte la victoire est la facilité du développeur. Il n’y a pas deux façons d’y parvenir, utiliser quelque chose qui est intégré directement dans le HTML est inévitablement plus rapide et plus facile que d’avoir à ajouter n’importe quel type de bibliothèque externe à votre application. Cela facilite également la maintenance et les mises à niveau futures, car il n’y a aucune dépendance à gérer. Enfin, vous n’aurez pas à vous soucier de la taille du package ou du temps de chargement supplémentaire, car (encore une fois) vous n’ajoutez rien de nouveau, vous utilisez simplement les valeurs par défaut déjà disponibles.

En fin de compte, c’est une question à laquelle vous devrez répondre en tant que développeur : les fonctionnalités, les styles et la cohérence supplémentaires de l’utilisation d’un composant commercial l’emportent-ils sur la facilité d’utiliser la valeur par défaut, en empruntant le chemin de la moindre résistance ?

La réponse à cela dépend de votre équipe, de votre budget, de votre application et bien plus encore. Je ne peux pas vous dire quel est le bon choix pour votre situation spécifique… mais je peux vous en dire un peu plus sur la façon dont KendoReact a essayé de minimiser le travail supplémentaire lié à l’utilisation d’une bibliothèque externe.

L’une des choses les plus importantes que vous puissiez faire est de profiter de la Modèle KendoReact CRA (Créer une application React) pour démarrer votre projet. Il existe des raccourcis pour vous permettre de créer rapidement un nouveau projet React avec KendoReact, ainsi que certaines de vos autres bibliothèques préférées, TypeScript et Sass. Vous pouvez ignorer les difficultés d’installation et accéder directement au code !

KendoReact est également intentionnellement divisé en plusieurs sous-bibliothèques, vous pouvez donc ajouter uniquement ce dont vous avez besoin pour les composants que vous utilisez. Cela permet de gérer la taille du package et le temps de chargement – pas besoin d’installer tout ce qui est nécessaire pour le composant Data Grid si vous souhaitez simplement utiliser le calendrier !

Conclusion

Ce n’était probablement pas un énorme choc d’apprendre que le composant Calendrier par défaut ne le coupe pas tout à fait en ce qui concerne le développement d’applications modernes, mais plutôt que d’avoir à créer un remplacement vous-même ou à essayer de bricoler différents composants de divers tiers. bibliothèques, donner KendoRéagir un coup de feu! Découvrez à quel point il peut être facile de créer une interface utilisateur accessible et de haute qualité pour votre application React.