Technologies de développement front-end que vous n'avez peut-être pas remarquées

"Si vous voulez vivre, soyez capable de tourner." Il s'agit du travail d'un programmeur frontal. Pour s'acquitter de ses tâches avec succès, un tel spécialiste doit résoudre de nombreux problèmes et doit avoir de nombreuses capacités. De plus, il est très important de ne pas oublier l'objectif principal pour lequel les sites Web sont développés. À savoir, que les sites devraient aider les gens à simplifier leurs tâches quotidiennes.

Dans cet article, je vais parler de divers aspects du développement Web que tout programmeur du profil pertinent devrait connaître. Si possible, je fournirai des liens vers des documents démontrant des exemples d'utilisation des capacités correspondantes et des recommandations pour leur utilisation correcte. Ici, je vais me concentrer sur la mise en œuvre de certains mécanismes dans Angular, React et Vue.

Interface utilisateur

▍ Disposition de la page

La création d'une application Web commence par la conception d'une mise en page attrayante et soignée qui plaira aux utilisateurs et les aidera à passer beaucoup de temps sur le site.



Il existe de nombreux frameworks CSS. Peut-être que parmi eux, vous trouverez exactement celui qui vous convient parfaitement. Le plus célèbre d'entre eux est Bootstrap, et grâce aux nouvelles fonctionnalités des préprocesseurs CSS, vous pouvez profondément personnaliser les styles de ce framework. Vous y trouverez divers composants et contrôles, dont l'utilisation cohérente vous permettra de créer des sites conçus de manière cohérente.



La version alpha de la version 5 de Bootstrap est actuellement disponible .



Si vous préférez créer vous-même des ensembles de styles pour vos projets (composants, remplissage, conteneurs, etc.), vous pouvez vous concentrer sur CSS Flexbox , faisant de cette mise en page flexible des éléments de page Web la base de votre propre cadre CSS.



CSS Grid adopte une approche différente pour organiser le contenu des pages Web en le plaçant dans une grille.

▍ Conception adaptative

La réactivité est la capacité d'un site à adapter son contenu à l'appareil sur lequel il est consulté. Par exemple, sur un smartphone et un ordinateur portable, cet article sera différent.



La réactivité d'une application web lui permet de s'afficher correctement sur différents écrans, améliore la lisibilité du contenu et l'expérience utilisateur.



Sur MDN, vous pouvez découvrir que les requêtes multimédias sont utilisées lorsque vous devez appliquer différents styles CSS pour différents périphériques (par exemple, pour une imprimante ou un moniteur), ainsi que pour prendre en compte les caractéristiques et paramètres spécifiques de l'appareil (par exemple, pour différentes résolutions d'écran ou pour différentes largeurs de la fenêtre du navigateur).



Les requêtes multimédias CSS sont un outil puissant pour prendre en charge la conception réactive.



Ils peuvent être utilisés en conjonction avec la CSS Flexbox ou CSS Grid déjà mentionnée. Si vous préférez utiliser des frameworks CSS, ces frameworks implémentent généralement déjà les capacités correspondantes. Avec cette approche, pour créer des pages responsives, ajoutez simplement les classes appropriées aux éléments.



Quand il s'agit du concept de réactivité appliqué aux images , on peut penser à un attribut srcset. L'utilisation de cet attribut vous permet d'afficher des images de différentes tailles en fonction des caractéristiques de l'écran de l'appareil, ce qui contribue à réduire la quantité de données transférées du serveur vers le navigateur.

▍Composants et commandes homogènes

L'utilisateur se fera un plaisir de travailler avec le site, dont les composants et les commandes sont conçus de manière uniforme, dans le même style. Cette approche de la conception permet à l'utilisateur de mieux maîtriser les nouvelles fonctionnalités du site et fait office de carte de visite de l'entreprise.



Si vous souhaitez utiliser des frameworks et des bibliothèques existants, Angular, React ou Vue pour développer vos projets, voici quelques exemples de bibliothèques de styles qui implémentent les principes de Material Design conçus pour ces outils:

• Angulaire. Bibliothèque de matériaux angulaires où vous pouvez trouver des composants puissants et un CDK complet.
• Réagir. Les principes de Material Design sont implémentés dans les composants Web Material UI .
• Vue. Nous avons ici Vuetify , une implémentation de Material Design conçue pour les projets Vue.

▍Validation de formulaire et gestion des erreurs

La validation des données est la tâche la plus importante pour les projets qui reçoivent quelque chose de l'utilisateur. De plus, rien ne doit empêcher l'application de recevoir les données correctes de l'utilisateur: ni problèmes de réseau, ni erreurs sur le serveur, ni erreurs faites par l'utilisateur lui-même. Voici quelques-unes des solutions de validation des entrées utilisateur conçues pour différents frameworks:

• Angulaire. Comme Angular est un framework à part entière, il nous fournit une API spéciale pour la validation de formulaire.
• Réagir. La bibliothèque React Hook Form est probablement le validateur de formulaire le plus couramment utilisé dans les projets React .
• Vue. Le nom de la bibliothèque correspondante pour Vue, vuelidate , est construit sur un jeu de mots intéressant.

Expérience utilisateur

▍Utilisation de mécanismes asynchrones

Le chargement de données dans une application ou l'enregistrement de données peut prendre des millisecondes, des secondes ou même des minutes. C'est pourquoi il est important d'informer l'utilisateur de telles opérations à l'aide des indicateurs appropriés et de ne pas bloquer le travail de l'utilisateur avec le projet.



Les moteurs JavaScript comme les promesses et les API de navigateur comme Fetch peuvent nous aider dans ces tâches .

▍ Prise en charge des navigateurs obsolètes (polyfills)

Le monde du développement front-end évolue très rapidement. La même chose peut être dite pour les navigateurs. Mais différentes personnes utilisent différents navigateurs et différentes versions d'entre eux. Par conséquent, pour s'assurer que leur code fonctionne correctement sur toutes les plates-formes utilisées, le développeur doit veiller à la compatibilité. Par exemple, l'ancienne version d'IE ne prend pas en charge les mêmes fonctionnalités JS et CSS que la dernière version de Google Chrome. Les polyfills



sont utilisés pour garantir que le projet fonctionne correctement dans les anciens navigateurs . Ils sont assez bien décrits dans cet article: "Un polyfill (polyfiller) est un morceau de code (ou plug-in) qui fournit une implémentation d'une technologie que vous, le développeur, vous attendez à trouver parmi les capacités de navigateur standard."



Pour savoir si une certaine règle CSS ou une certaine fonction JS est prise en charge dans une version de navigateur particulière, consultez le site Can I Use .



Si nous parlons de résoudre les problèmes de prise en charge du navigateur dans Angular, React et Vue, la situation est la suivante:

• Angulaire. La documentation Angular contient une section spéciale sur la prise en charge des navigateurs.
• Réagir. Projets créés avec le support de Create React App , comme ReactDOM , les navigateurs commençant par IE 9. Ce support est basé sur l'utilisation de polyfills.
• Vue. Les détails de la prise en charge des navigateurs hérités sont décrits ici dans la documentation CLI.

▍Localisation et internationalisation

Votre site peut avoir des utilisateurs du monde entier. Tenir compte de ce fait lors de la création d'un projet augmentera la convivialité du site pour tous ceux qui décideront de le consulter.



La localisation (l10n, localisation) est, telle que définie par le W3C, l'adaptation du contenu d'un produit, programme ou document aux exigences linguistiques, culturelles et autres d'un marché cible spécifique.



L'internationalisation (i18n, internationalisation) est, sur la base des matériaux du W3C, la création et le développement de contenu de produit, de programme ou de documentation qui permet une localisation facile pour des marchés cibles qui diffèrent par la culture, la région ou la langue.



Ces deux concepts sont interdépendants et peuvent être mis en œuvre de différentes manières. Cela comprend, par exemple, les techniques suivantes:

• Utilisation d'une liste déroulante sur le site avec une liste de langues prises en charge par le projet.
• Accédez aux informations sur la localisation géographique de l'utilisateur (à l'aide de l'API du navigateur de géolocalisation ) et adaptez le site Web en fonction des données reçues.
• Spécification des informations de langue dans l'URL. Par exemple, il pourrait ressembler à ceci: example.com?lang=enou comme ceci: example.com/enou même si: en.example.com.

Maintenant, pour ces concepts dans Angular, React et Vue.

• Angulaire. Angular, encore une fois, est un framework à part entière, il donne au développeur une solution toute faite .
• Réagir. Les tâches d'internationalisation des projets peuvent être résolues à l'aide de la bibliothèque react-i18next , populaire dans l'environnement React .
• Vue. vue-i18n.

▍

L'accessibilité (a11y, accessibilité) est la capacité du site à s'adapter aux besoins des utilisateurs handicapés.



L'accessibilité du site Web est souvent négligée. Afin de rendre le projet accessible aux utilisateurs handicapés, il peut être nécessaire de réviser l'approche de la formation de l'expérience utilisateur utilisée sur celui-ci, ce qui peut parfois nécessiter une refonte profonde du projet. Dans tous les cas, il est important de prendre en compte les besoins de tous les utilisateurs, d'autant plus que même de petits changements dans le code du projet peuvent considérablement améliorer la convivialité du site pour ceux qui ont du mal à utiliser des sites réguliers.



Diverses techniques sont applicables pour rendre les projets Web accessibles. Ceux-ci comprennent les éléments suivants:

• Utilisation de l'attribut image alt.
• L'utilisation des attributs ARIA pour concevoir des descriptions du contenu des pages du site.
• Prise en charge de la possibilité de redimensionner le texte.
• Mode de contraste élevé disponible.
• Prise en charge de la navigation sur le site à l'aide du clavier, en particulier des touches TABet des touches fléchées.

Le projet a11yproject.com met en œuvre l'idée de standardiser ces concepts. Cette initiative est digne de respect! Les principaux frameworks et bibliothèques JS font également des efforts pour soutenir le développement de sites accessibles:

• Angulaire. Il existe une section spéciale dans la documentation de ce framework . Le développement de projets accessibles est pris en charge au niveau Angular CDK .
• Réagir. L'accessibilité est également abordée dans la documentation de la bibliothèque React. Il existe également une bibliothèque spéciale - react-a11y . Mais cette bibliothèque n'est plus prise en charge, alors utilisez-la avec précaution et gardez à l'esprit qu'elle est prévue pour être remplacée par la bibliothèque react-ax .
• Vue. Le plugin vue-a11y vous aidera à développer des projets accessibles dans Vue . Les considérations d' accessibilité ont également été prises en compte lors de la création de la bibliothèque vuetify .

▍Notifications

Afin de rester en contact avec les visiteurs de votre site, vous pouvez utiliser les notifications de l' API du navigateur . Avec son aide, vous pouvez informer les utilisateurs que quelque chose de nouveau est apparu sur le site.

Chargement et traitement des données

▍Une source unique de données fiables

Les outils de gestion de l'état des applications, qui ont gagné en popularité en 2015, sont désormais incontournables pour presque tous les projets Web. Bien que le domaine de la gestion de l'état des applications ne soit pas simple, l'utilisation de solutions personnalisées est généralement une méthode simple et efficace de centralisation des données d'application. Tous les outils de gestion d'état sont basés sur le modèle Flux.





Implémentation NgRx du pattern Flux (source - ngrx.io )



Ces outils utilisent des noms différents pour les mêmes entités. Par exemple, ce que NgRx appelle des sélecteurs s'appelle des getters dans Vuex. Ce que Angular appelle les réducteurs s'appelle des mutations dans Vue.



Voici les outils de gestion d'état utilisés dans Angular, React et Vue:

• Angulaire. "Gestion d'état réactive pour Angular": NgRx .
• Réagir. Ici, bien sûr, Redux est utilisé .
• Vue. Vuex est utilisé pour gérer l'état des applications Vue .

▍Téléchargement des données

Il existe différentes manières de charger des données dans des applications. Le plus courant est l'utilisation de requêtes HTTP dirigées vers une API Web. Le navigateur dispose d'une API Fetch conçue pour organiser le chargement des données, mais pour les principaux frameworks et bibliothèques, leurs propres solutions ont été développées:

• Angulaire. La documentation Angular recommande d'utiliser rxjs et l'approche basée sur l'observateur (les observables ou les sujets sont utilisés ici).
• Réagir. La documentation React recommande d'utiliser l'API Fetch pour charger des données.
• Vue. La communauté Vue préfère utiliser la bibliothèque Axios . Cette implémentation du mécanisme de chargement des données est basée sur des promesses.

Lorsqu'on parle de mécanismes de chargement de données dans des applications Web, GraphQL mérite d'être mentionné . Cette technologie a changé l'approche utilisée lors du chargement de données dans les applications frontales. Lors de son application, "Le client détermine ce dont il a besoin en utilisant le langage de requête." En utilisant GraphQL, nous pouvons obtenir exactement ce dont nous avons besoin à partir de sources de données distantes et rien de plus.



Voici les implémentations GraphQL pour les outils frontaux qui nous intéressent:

• Angulaire. apollo-angulaire
• Réagir. réagir-apollo
• Vue.js. vue-apollo

▍ Stockage de données locales

Le stockage de données local est le stockage de données sur l'ordinateur de l'utilisateur. Les données peuvent être stockées à l'aide de cookies , ainsi qu'en utilisant localStorage et sessionStorage.

▍Travailleurs Web

Les travailleurs Web sont une technologie introduite par la nouvelle API de navigateur. Il permet au code JavaScript de s'exécuter en arrière-plan, soulageant la charge sur le thread principal et n'affectant pas les performances du code de la page Web.



Les travailleurs Web sont applicables dans Angular, React et Vue:

• Angulaire. Il existe une section spéciale dans la documentation Angular pour ce sujet.
• Réagir. Il y a un hook React spécial que vous pouvez trouver ici .
• Vue. Dans les applications Vue, les web workers sont pratiques à utiliser en utilisant la bibliothèque vue-worker .

Réseau et performances

▍Taille du bundle d'application

La croissance du marché des smartphones a révolutionné le monde du développement Web. Désormais, lors de la création de sites Web, nous devons d'abord prendre en compte les besoins des utilisateurs mobiles. Plus la quantité de données que les appareils mobiles doivent charger lorsqu'ils travaillent avec des projets Web est petite, mieux c'est. Selon le graphique ci-dessous, l'utilisation d'Internet mobile a dépassé celle des ordinateurs de bureau en 2016.





Utilisation d'Internet dans le monde (source - broadbandsearch.net )



Cela nous indique sans équivoque à quel point la taille des bundles de projets Web est aujourd'hui importante. La taille des fichiers téléchargés doit être aussi petite que possible afin d'économiser les ressources des utilisateurs mobiles. Heureusement pour nous, les développeurs des principaux outils frontaux et des modules complémentaires en tiennent compte lors du développement de leurs projets. Réduire la taille des bundles d'applications signifie également de meilleures performances.

• Angulaire. Les bundles d'applications angulaires sont faciles et pratiques à examiner avec webpack-bundle-analyzer . De plus, la CLI angulaire nous offre une option stats-jsonqui nous permet de générer un rapport après la création d'un bundle.
• React. Create React App , .
• Vue. Vue, Angular, report, .

▍- -

Un service worker est un script qui s'exécute dans un navigateur Web et gère la mise en cache des données d'application. C'est l'un des mécanismes utilisés pour transformer un site Web régulier en une application Web progressive (PWA). Vous pouvez travailler avec des PWA comme un site Web ordinaire en utilisant HTTPS, mais les Progressive Web Apps ont des fonctionnalités spéciales. Ces capacités comprennent, par exemple, l'installation de telles applications sur des appareils mobiles sans avoir à les publier dans des magasins d'applications spécialisés et la prise en charge du fonctionnement d'applications sans accès à Internet.



Vous pouvez utiliser des services workers dans Angular, React et Vue:

• Angulaire. Angular fournit des mécanismes pour utiliser les techniciens de service.
• Réagir. Voici un tutoriel sur la façon de développer une PWA avec Create React App.
• Vue. La possibilité de créer des PWA dans Vue est prise en charge au niveau de la CLI.

▍Rendu serveur

Server-Side Rendering (SSR) est un ensemble de technologies qui révolutionnent le développement d'applications basées sur Angular, React et Vue. Avec SSR, le HTML est généré sur le serveur et envoyé au navigateur. Après cela, le balisage HTML statique est mis en état de fonctionnement et l'application Web est complètement prête à être utilisée sur le client. Il y a plusieurs objectifs lors de l'utilisation du rendu serveur:

• Amélioration des sites SEO.
• Accélération de l'affichage des sites dans le navigateur.

Voici les solutions SSR pour les outils frontaux que nous recherchons:

• Angulaire. Il a utilisé Angular Universal .
• Réagir. Pour le rendu côté serveur des applications React, Next.js est utilisé .
• Vue. Le rendu côté serveur des applications Vue est effectué à l'aide du framework NuxtJS .

▍Générateurs de sites statiques

Avec l'utilisation croissante de Jamstack , les générateurs de sites statiques (SSG) sont devenus une technologie très recherchée. Une application Jamstack est un type d'application Web qui est prête pour le navigateur et qui n'a essentiellement pas besoin d'un serveur Web (ces documents peuvent être servis aux clients directement à partir du CDN). Des détails sur ces sites peuvent être trouvés en suivant le lien ci-dessus. Nous n'énumérons ici que les principaux atouts de SSG:

• Vitesse: les générateurs de site statiques créent des pages de site pendant la génération du projet, pas lorsque ces pages sont demandées par le client.
• Sécurité: l'utilisation de SSG permet d'abandonner les systèmes de gestion de contenu (CMS, Content Management System), qui sont souvent la cible d'attaques de pirates.
• Simplifier la mise à l'échelle: un projet Web utilisant SSG est un ensemble de fichiers qui peuvent être transférés vers un client de n'importe où. Cela facilite grandement le stockage de ces fichiers sur un CDN. En conséquence, il s'avère que les sites statiques évoluent très bien.
• Processus de développement simplifié: les projets SSG n'ont pas besoin d'un backend et d'une base de données. Cela facilite la tâche des développeurs.

Il existe des solutions SSG pour Angular, React et Vue:

• Angulaire. Scully .
• Réagir. Gatsby (React GraphQL +), Next.js .
• Vue. Gridsome , Nuxt .

Les autres projets SSG sont les suivants: 11ty , Hugo , Jekyll .

Analytique

▍Surveillance du comportement des utilisateurs et tests A / B

L'observation du comportement des utilisateurs sur le site est facultative, mais la possession de telles données contribue de manière significative à l'amélioration des projets web. Il existe une classe spéciale d'outils conçus pour collecter des informations sur la manière dont les utilisateurs interagissent avec le site. Ces outils permettent aux développeurs de sites de mieux prendre en compte les besoins des utilisateurs et, grâce à des tests A / B, aident à choisir les alternatives les plus appropriées. Nous parlons des capacités des sites, des modèles de comportement des utilisateurs qu'ils soutiennent, de la conception.



Voici quelques solutions pour surveiller le comportement des utilisateurs et les tests A / B:

• Google Analytics (GA). Il existe des guides d'utilisation de GA dans Angular , React et Vue .
• Kameleoon. — A/B- -.

▍ -

Il est difficile de développer une application Web performante en une seule fois. Mais, par exemple, une application qui a été optimisée pour accélérer son chargement générera plus d'émotions positives de la part de l'utilisateur que sa version plus lente. Il existe différents projets qui analysent les sites et donnent des recommandations pour leur amélioration. Par exemple - PageSpeed ​​Insights de Google.



Parmi les outils de développement de Google Chrome, vous pouvez trouver un outil très précieux pour analyser les performances du site - Lighthouse . Il évalue les sites sur cinq critères (performances, accessibilité, bonnes pratiques, SEO, PWA) sur une échelle de 100 points. Après l'analyse, un rapport est généré avec des recommandations pour l'amélioration du site.





Analyse d'un site avec Lighthouse



Un autre analyseur de performances que vous pouvez trouver parmi les outils de développement Chrome est le panneau Couverture , qui vous permet de rechercher du code JS et CSS inutilisé. En excluant ce code du projet, vous pouvez réduire la taille de son bundle. Cela accélérera le chargement du site, ce qui sera particulièrement visible sur les appareils mobiles.

▍SEO

Le référencement, l'optimisation des moteurs de recherche, c'est ce que vous devez faire pour augmenter le classement d'un site dans les moteurs de recherche, tels que Google, Bing, DuckDuckGo, et bien d'autres. Un site bien optimisé devient plus visible. En fait, il est si important que dans le monde du développement Web, il existe même une position particulière: «Spécialiste SEO».



Si nous parlons de SEO dans Angular, React et Vue, alors nous obtenons ce qui suit:

• Angular. , Angular- Angular Universal-.
• React. SEO React-. — React-.
• Vue. Vue-.

Je conviens que le développement frontal est un domaine d'expertise vaste et en constante évolution. En fait, si quelqu'un essaie de devenir un développeur universel qui sait tout et sait comment, il lui sera extrêmement difficile d'y parvenir, et cela lui prendra beaucoup de temps. De plus, chaque projet Web a ses propres besoins et priorités. C'est pourquoi il est nécessaire de décider du plus important au début du travail sur un projet. Cela vous permettra de ne pas être dispersé, de sélectionner et d'étudier uniquement les plus nécessaires, et de planifier l'architecture du projet pour qu'il corresponde à ses objectifs.



Selon vous, quelles nouvelles technologies de développement frontales sont les plus prometteuses?