Tendances et meilleures pratiques en matière de développement frontal (partie III) : à la pointe de la technologie

03.15.2019

Si vous êtes à la recherche d’une technologie pour distinguer les propriétés numériques de votre entreprise, des options telles que la blockchain, la RV, les chatbots, l’apprentissage automatique et l’Internet des objets (IoT) ont probablement traversé votre radar. Mais au-delà du buzz, quelle valeur commerciale ces technologies peuvent-elles apporter à votre entreprise ? Et auront-elles un impact sur le développement de vos applications frontales ? Nous examinerons comment ces tendances technologiques façonnent l’avenir des technologies frontales et quelles sont les meilleures pratiques disponibles aujourd’hui pour vous aider à surpasser la concurrence.

Chatbots

Il faut beaucoup de créativité pour construire un front-end pour un site web attrayant et simple à utiliser, tout en aidant vos clients et vos employés à accomplir leurs tâches de manière discrète. À notre époque, où il est indispensable d’avoir un site, de plus en plus d’entreprises optent pour une simple page d’atterrissage avec un chatbot intégré comme moyen d’établir rapidement une présence sur le web.

Un chatbot est une application capable d’interagir avec les clients pour connaître leurs besoins et leur proposer des produits et services pertinents ou une assistance. Les chatbots sont très pratiques car ils peuvent remplacer l’interface graphique d’un site (https://www.door3.com/ux-design-agency-nyc/) par une interface conversationnelle, permettant aux clients d’explorer les services pendant qu’une équipe de développement frontale travaille sur une version complète du site. En fonction de vos besoins, ils peuvent également constituer une solution plus permanente pour guider les clients vers ce qu’ils recherchent exactement. Les chatbots permettent d’aller à l’essentiel lorsque les clients ont besoin d’une assistance immédiate ou d’une explication rapide des fonctionnalités d’un produit.

En plus de servir de substitut rapide à une version construite d’un site, les chatbots peuvent aider les entreprises même après le lancement du site web principal :

En étant à la disposition du client 24 heures sur 24 et 7 jours sur 7
En gérant plusieurs conversations (ce qui vous évite d’avoir à embaucher du personnel de bureau)
Recueillir des données analytiques pour améliorer vos entonnoirs de vente et votre assistance

Si le développement d’un chatbot peut sembler intimidant, il est en fait tout à fait réalisable avec la bonne technologie. Il existe des cadres sur le marché qui s’occupent de l’apprentissage automatique et des algorithmes d’IA, comme Cloud Natural Language API et Dialogflow de Google, Cognitive Services APIs de Microsoft et Watson Conversation d’IBM. Certains cadres de développement de chatbots, comme Bot Platform ou Botpress, offrent des fonctionnalités de type CMS de sorte que même les utilisateurs non initiés à la technologie peuvent construire un chatbot simple. Cela dit, le développement d’un chatbot avancé avec une logique commerciale complexe nécessitera une expertise frontale approfondie.

Réalité virtuelle

Les entreprises considèrent souvent la réalité virtuelle (RV) comme une technologie excessive permettant d’impressionner les clients les plus en vue. Mais au cours des deux dernières années, elle a suffisamment évolué pour permettre à l’utilisateur moyen de vivre des expériences immersives, à moindre coût et plus rapidement que jamais. Les casques VR modernes sont suffisamment puissants et précis pour simuler des opérations chirurgicales. Parallèlement, Google Cardboard permet à tout utilisateur de smartphone d’accéder à la RV pour un prix tout à fait raisonnable de 15 dollars.

Le développement web VR est devenu possible avec l’introduction de WebVR dans la communauté des développeurs frontaux. WebVR est une API JavaScript qui permet aux applications web d’afficher du contenu dans une réalité virtuelle en utilisant une technologie WebGL qui rend des graphiques interactifs dans un navigateur web. Cette technologie est prise en charge par tous les principaux navigateurs, notamment Chrome, Firefox, Edge et Samsung Internet, et son implémentation spécifique, WebVR Polyfill, permet aux développeurs frontaux de mettre en œuvre des fonctionnalités VR de base dans d’autres navigateurs web.

L’initiative la plus récente de Google, Mozilla, Samsung et Microsoft, WebXR, s’appuie sur WebVR et prend en compte les commentaires des fabricants d’appareils de RV et des développeurs web. La nouvelle API WebXR améliore WebVR en permettant aux développeurs frontaux d’insérer deux fois plus de pixels dans les applications de RV basées sur le web ; en outre, les applications de RV construites avec l’API WebXR s’exécutent plus rapidement.

Pour les entreprises, cela signifie qu’elles peuvent enfin offrir à leurs clients des expériences de RV fascinantes basées sur le web, quel que soit le matériel de RV qu’ils utilisent. Les entreprises s’appuient sur des applications de RV fonctionnant dans un navigateur web pour créer des environnements virtuels uniques pour des conférences, pour organiser des sessions de formation pour les employés ou pour établir un lien émotionnel fort avec les clients par le biais d’une expérience de RV axée sur le jeu.

Et comme tout ce qui contribue à attirer l’attention des clients, la RV sur le web mérite d’être sérieusement prise en compte par les entreprises dans le monde d’aujourd’hui. Faire partie des entreprises pionnières qui permettent à leurs clients de faire l’expérience d’un produit ou d’un service de près peut s’avérer très utile dans certaines industries, comme l’industrie manufacturière et le divertissement.

Réalité augmentée

La réalité augmentée (RA) est une autre technologie en vogue qui aide les entreprises à obtenir un avantage concurrentiel dans la quête incessante de l’attention des clients en superposant des objets virtuels au monde réel. Nous avons tous fait l’expérience de la réalité augmentée d’une manière ou d’une autre : en visitant une exposition sur la réalité augmentée comme ReBlink ou en obtenant de l’aide pour la navigation intérieure dans les centres commerciaux. Et qui peut oublier Pokemon Go ? Aujourd’hui, les entreprises se tournent vers la réalité augmentée pour accroître l’efficacité et attirer les clients.

Jusqu’à récemment, ces expériences de RA passionnantes étaient réservées à des plateformes spécifiques appartenant à des entreprises telles qu’Apple, Google ou Facebook. La bonne nouvelle, c’est que les technologies web ont considérablement progressé en termes de performances et d’accessibilité pour les utilisateurs, notamment les navigateurs mobiles et les outils de développement frontaux. Aujourd’hui, tout ce dont vous avez besoin pour exécuter une application de réalité augmentée, c’est d’une caméra et d’un navigateur web.

L’une des technologies frontales utilisées par les développeurs web pour créer des expériences de réalité augmentée sur le web est AR.js. Il s’agit d’un cadre frontal construit sur la base de three.js (bibliothèque JavaScript 3D) et d’ARToolKit (la toute première bibliothèque de réalité augmentée). AR.js permet aux équipes frontales de concevoir des expériences de RA multiplateformes basées sur des marqueurs. L’utilisateur doit scanner un marqueur unique - un code AR ou QR - pour déclencher une expérience AR préprogrammée.

Le prochain grand acteur permettant le développement de la RA sur le web est l’API WebXR Device. Nous l’avons déjà mentionné en relation avec les technologies web de RV, mais WebXR est un travail en cours avec des ingénieurs de Google, Mozilla, Samsung, Amazon et d’autres grandes entreprises qui contribuent activement à son initiative de RA. L’objectif est de débloquer des interactions avancées et des effets visuels convaincants dans les applications de RA basées sur le web, afin que les utilisateurs puissent faire plus que simplement observer des objets virtuels en RA. Par exemple, les utilisateurs pourront manipuler des objets virtuels par des gestes, des commandes vocales, etc. Bien entendu, cette fonctionnalité est actuellement en phase de développement, mais voici quelques exemples de Google : un utilisateur dépose des tournesols en réalité augmentée dans un salon et des collègues construisent un objet virtuel en réalité augmentée.

Machine Learning

Depuis que Google a présenté TensorFlow.js lors de la conférence Google I/O ‘18, l’apprentissage automatique est devenu une réalité pour le web. L’apprentissage automatique comprend deux éléments indispensables : la construction de modèles et l’entraînement d’une machine à l’aide de ces modèles, de sorte que, disons, après avoir transmis plusieurs images de chats à une machine, celle-ci apprend à identifier elle-même les chats sur les photos. Ou si, par exemple, votre client décrit un problème à votre chatbot, il est automatiquement redirigé vers l’ingénieur d’assistance le plus apte à résoudre le problème et à regagner la fidélité du client. Ces applications de ML basées sur le web peuvent aider les entreprises à se démarquer par leurs services.

Bien sûr, la ML réalisée avec JavaScript était possible avant TensorFlow.js avec des bibliothèques comme Brain.js et deeplearn.js. (Cette dernière a été rachetée par Google et fusionnée avec TensorFlow.js.) Toutefois, ces bibliothèques JavaScript étaient loin d’atteindre le potentiel de TensorFlow.js.

TensorFlow.js est destiné à “former et déployer des modèles d’apprentissage automatique dans le navigateur” Les développeurs frontaux peuvent s’appuyer sur cette technologie de pointe pour apporter des expériences basées sur l’apprentissage automatique directement dans l’expérience web du client. (Voici une démonstration rapide qui vous permet de faire l’expérience de l’apprentissage automatique dans un navigateur de première main)

Cette bibliothèque JavaScript de ML offre une expérience de développement exceptionnelle : les ingénieurs frontaux peuvent construire et former des modèles directement dans un navigateur, sans aucune configuration requise. Les navigateurs hébergeant des expériences de ML, les données disponibles deviennent plus riches : Les modèles de ML peuvent recueillir des données à partir de caméras, de microphones, de GPS, d’accéléromètres et de gyroscopes, pour n’en citer que quelques-uns. L’avantage supplémentaire est l’amélioration de la confidentialité, car toutes les données collectées pour l’entraînement des modèles de ML restent dans le navigateur de l’utilisateur, et rien n’est transmis à un serveur.

En revanche, les performances de TensorFlow.js sont plus lentes que celles de la programmation ML “native” basée sur Python. Pour entraîner un modèle dans un navigateur, TensorFlow.js doit accéder au GPU de la machine via WebGL, et les performances résultantes peuvent être deux à dix fois plus lentes que la version Python de TensorFlow avec AVX. Bien sûr, nous devons nous rappeler que ce n’est que le début de JavaScript ML, et que Google travaille activement à la résolution de ces problèmes de performance.

C’est sans aucun doute le moment idéal pour expérimenter des prototypes basés sur le web qui exploitent la puissance de l’apprentissage automatique pour offrir un avantage concurrentiel. Il est facile de voir la valeur d’innovations telles que les moteurs de recommandations qui offrent à vos clients de nouveaux produits et services en fonction de leurs actions, tout comme les suggestions que vous voyez sur Netflix.

Smartwatches

Grâce au succès de l’Apple Watch, les smartwatches deviennent un accessoire omniprésent. Selon CCS Insights, les ventes de smartwatches devraient atteindre 140 millions d’appareils en 2022. Bien que ce chiffre soit modeste par rapport aux ventes de smartphones, de PC et d’ordinateurs portables, les entreprises sont susceptibles d’attirer davantage de clients en améliorant leurs sites web pour qu’ils prennent en charge les smartwatches.

Il convient de noter que lorsque nous parlons de “développement frontal pour les smartwatches”, nous pensons à l’Apple Watch. Bien qu’il existe plus de 50 modèles de smartwatches équipées de Wear OS sur le marché, Google n’a toujours pas réglé la question de la navigation web sur ces gadgets.

Apple, en revanche, a décidé qu’il était temps de naviguer sur le web à votre poignet et a ajouté cette fonctionnalité à Watch OS 5 en 2018. Désormais, les propriétaires d’Apple Watch peuvent naviguer sur des sites web et effectuer des actions de base comme faire défiler des pages web, zoomer et dézoomer, et naviguer en avant et en arrière dans leur historique de navigation. Cependant, certaines fonctionnalités avancées de navigation web, comme la lecture vidéo, la prise en charge des travailleurs de service JavaScript et les polices web, manquent encore à l’appel. Apple les ajoutera ultérieurement.

Avec la sortie de Watch OS 5, Apple (fidèle à sa nature) a publié quelques lignes directrices et meilleures pratiques de développement frontal pour sa smartwatch. Sans entrer dans les détails, nous mentionnerons les principaux aspects de la conception d’expériences frontales fluides pour l’Apple Watch :

Tenir compte de trois tailles d’écran.
Appliquer les attributs appropriés aux contrôles de formulaires pour les numéros de téléphone, les dates, l’heure, etc.
Utiliser des balises HTML spéciales sur les pages web contenant beaucoup de texte et d’images pour un affichage optimal.
Utiliser les métabalises open graph pour créer de beaux aperçus de liens partageables.

L’optimisation d’un site web pour un affichage optimal sur l’Apple Watch est un autre facteur de différenciation qui peut donner aux entreprises une longueur d’avance et les aider à gagner la fidélité d’un public averti.

Internet des objets

Le développement de solutions frontales pour l’internet des objets (IoT) - des systèmes basés sur le cloud qui tirent des données d’un réseau d’appareils intelligents et de capteurs interconnectés - nous place dans une situation assez particulière.

Dans sa forme la plus simple, un appareil IoT peut être une bouilloire intelligente que vous contrôlez à partir d’une application ou un appareil domestique intelligent à commande vocale comme Amazon Echo. Un exemple de produit IdO de niveau entreprise serait un système de surveillance de la chaîne du froid pour les camions de livraison transportant des produits surgelés, composé d’une interface web affichant des données critiques provenant de divers capteurs de température, d’unités GPS et d’applications pour smartphones. Ce qui rend le développement de l’interface utilisateur dans l’IdO particulièrement inhabituel, c’est que les produits IdO n’ont souvent pas besoin d’interface utilisateur. Les utilisateurs interagissent avec ces produits par l’intermédiaire d’applications web ou mobiles dotées de leur propre interface graphique.

Cependant, lorsqu’il est nécessaire de fournir aux utilisateurs une interface utilisateur web dans un appareil IoT, il faut tenir compte de certaines contraintes. En effet, les “objets” intelligents ont souvent de petits écrans et leurs performances sont limitées par le matériel. Le développement d’interfaces web pour ces appareils est une alternative viable à l’utilisation de langages de programmation natifs restrictifs.

Les meilleures pratiques de développement web qui aident les concepteurs et ingénieurs d’interface utilisateur à tenir compte de ces limitations lors du développement d’interfaces frontales pour les terminaux IoT sont notamment les suivantes :

Interfaces web réactives qui s’adaptent aux différentes tailles d’écran.
Utilisation minimale de JavaScript et peu ou pas d’animations.
Algorithmes de mise en cache permettant d’accéder aux données essentielles, même dans les zones non couvertes.

La technologie IdO a trouvé des applications dans divers produits B2C et B2B dans de nombreux secteurs : de la logistique pour les grandes entreprises aux maisons intelligentes. Les terminaux intelligents (ou “objets”) varieront en conséquence : des capteurs sans interface utilisateur aux biens de consommation durables dotés d’une interface graphique basée sur le web. Il est important de bien réfléchir à l’utilisation, à la forme et à l’architecture d’un produit IoT au début d’un projet et de décider quels types de terminaux auront besoin d’une interface utilisateur. Les clients apprécieront les interfaces réactives qui s’adaptent à la taille de l’écran d’un terminal et améliorent le fonctionnement de leurs appareils.

No-Code & Low-Code

No-code/low-code est une autre tendance perturbatrice dans le développement de logiciels qui vise à démocratiser le processus de construction de logiciels et à faire gagner du temps et de l’argent aux entreprises. Les outils de développement “no-code” et “low-code” sont, par essence, des modèles puissants qui permettent de développer et de déployer des applications web riches en fonctionnalités avec peu ou pas de connaissances en matière de codage. Les développeurs citoyens (personnes sans qualification en programmation) et les ingénieurs logiciels experts peuvent utiliser une interface utilisateur graphique intégrée dans une plateforme de développement sans code/à faible code pour concevoir les composants frontaux et dorsaux d’une application web.

Front_end_development_more_accessible_with_lo-code_and_no-code_solutions.jpg

La différence entre les outils de développement “no-code” et “low-code” (comme leur nom l’indique) réside dans le type d’utilisateurs auxquels ils s’adressent. Les premiers accueillent tout le monde, quelle que soit leur expérience en matière de codage, tandis que les seconds offrent plus de souplesse aux développeurs en leur permettant d’opérer au niveau du code. L’un des avantages des plateformes “no-code” et “low-code” est, bien entendu, leur capacité à générer automatiquement du code et à remplacer une grande partie du codage manuel qui est commun au processus de développement logiciel standard. Les utilisateurs glissent et déposent des éléments d’interface utilisateur et des événements séquentiels dans des flux de travail, tandis qu’une plateforme sans code/à faible code génère le code source, la base de données et tout ce qui entre dans la construction de l’avant et de l’arrière-plan d’une application web.

Il convient de noter que, si les outils de développement sans code et à faible code peuvent aider les entreprises à fournir des applications web plus rapidement et à moindre coût (en automatisant le développement frontal), l’application de ces outils est encore limitée à la création d’applications web relativement simples, avec une logique commerciale transparente et des flux de travail de base. Le développement d’applications web AR et VR ou l’utilisation de l’IA restent hors de portée pour les plateformes sans code et à faible code. Cela ne veut pas dire que ces outils de développement sont des instruments parfaits pour libérer le développement de logiciels, mais qu’ils peuvent permettre aux utilisateurs professionnels et aux parties prenantes de se faire les champions du développement frontal, en particulier au stade de la validation du concept.

Un cas d’utilisation idéal pour l’approche “low-code” et “no-code” dans le développement frontal est celui des premiers jours d’une startup qui n’a pas d’ingénieur frontal dans l’équipe. Les fondateurs, qui n’ont qu’une perspective commerciale, peuvent construire eux-mêmes un prototype simple et le tester dans la nature.

Blockchain

À l’heure actuelle, la blockchain est probablement la technologie qui suscite le plus d’engouement. Tout le monde, du père au foyer à la grand-mère, connaît l’ascension et la chute du bitcoin. Et tout le monde sait peut-être même qu’elle a joué un rôle dans le vote lors des élections de mi-mandat de 2018. Ces deux évolutions ont été rendues possibles par la blockchain. Cependant, comment cette technologie perturbatrice s’intègre-t-elle dans le développement des applications frontales ? Et comment les entreprises peuvent-elles l’exploiter pour faire passer leurs services de développement web au niveau supérieur ?

Si la majeure partie du développement de la blockchain se fait en amont, les développeurs frontaux peuvent encore avoir besoin d’outils pour intégrer un client web à une infrastructure basée sur la blockchain. Et comme le dit le dicton parmi les développeurs frontaux, “Si c’est en JavaScript, il y a une bibliothèque pour ça !” En effet, les équipes de développement frontal peuvent s’appuyer sur la bibliothèque web3.js, une API JavaScript compatible avec Ethereum. Web3.js prend en charge tous les cadres de développement frontaux courants, tels que React, Angular ou Vue, et permet à la partie frontale d’une application web d’interagir avec le composant blockchain, par exemple, lorsque les utilisateurs doivent signer des transactions ou des messages avec leurs clés privées.

Bien entendu, nous n’en sommes qu’au tout début de l’adoption de la blockchain dans les produits commerciaux, et nous n’avons pas encore vu comment la technologie blockchain se fondra dans le développement frontal. En même temps, l’apparition de projets comme Esprezzo - un middleware blockchain pour les développeurs frontaux - est très prometteuse pour l’avenir de la blockchain et du développement frontal.

Quel est l’objet de votre front-end ?

Nous espérons avoir fait la lumière sur ces tendances de développement front-end et suscité l’intérêt pour l’exploration des opportunités que ces technologies de pointe créent dans le développement web. Faire partie de la première vague d’entreprises qui mettent en œuvre ces innovations frontales est toujours un risque : les technologies évoluent en ce moment même. Toutefois, les premiers à les adopter sont susceptibles de bénéficier d’avantages concurrentiels considérables en comprenant mieux les besoins de leurs clients et en y répondant sur l’ensemble des appareils.

Si vous avez manqué la première partie et la deuxième partie, consultez-les dès aujourd’hui.