Approches de développement pour périphériques mobiles

Comme nous l’avons vu dans les différentes parties de ce livre (Installation de Node.js, Framework Svelte et Framework React), JavaScript est désormais un langage de programmation allant bien au-delà des utilisations imaginées à la conception du produit au milieu des années 1990. Il s’agissait alors d’un langage de programmation essentiellement destiné à écrire des scripts rendant les pages web interactives (contrôles de saisie, animations…).

Plus récemment, JavaScript est devenu un langage de programmation permettant de développer des applications côté serveur, avec l’apparition, à titre d’exemple, de frameworks comme Node.js. Ce framework a été créé en 2009.

Il existe un autre champ dans lequel JavaScript a la part belle : le développement d’applications pour mobiles en mode « hybride ». Ces dernières années, de nombreux frameworks utilisant principalement le JavaScript, avec bien évidemment le classique CSS, sont apparus.

1. Développements web, natif et hybride

Désormais, les applications pour smartphones et tablettes numériques fonctionnent le plus souvent dans le navigateur embarqué du périphérique et emploient des technologies web telles qu’HTML, CSS et JavaScript. Le code tourne dans un composant natif nommé WebView.

La réalité du marché est tout de même un peu plus complexe, avec une subdivision en trois types de solutions.

a. Applications web

Alors que, historiquement, les technologies HTML, JavaScript et CSS ne permettaient pas réellement de développer des applications ayant un rendu identique quel que soit le périphérique (marque, taille d’écran…), des progrès importants ont été effectués et il est désormais possible de produire du code adapté à la majorité des périphériques. Ceci a été rendu possible par les évolutions de ces technologies dans leurs dernières versions, c’est-à-dire HTML 5, JavaScript EcmaScript 2015 à 2021 et CSS3.

Par contre, même avec l’apport de nouveaux frameworks comme jQuery ou Angular, il est encore difficile de piloter des API propres à certains périphériques....

Présentation du framework React Native

Le framework React Native, qui date de 2015, est basé sur le même socle technique que React, apparu deux ans plus tôt. Ces deux frameworks sont appuyés dans leur développement par la société Facebook. Le succès de React, et par extension de React Native, a été immédiat et massif.

React Native est devenu une solution de choix pour le développement d’applications pour périphériques mobiles (smartphones, tablettes…) et ceci dans une approche hybride permettant de développer une application unique pour iOS et Android.

De grands acteurs de l’industrie informatique, comme Facebook et bien d’autres, dans les domaines de la finance (Bloomberg), de la grande distribution (Wallmart), des services (Airbnb), utilisent React Native.

React Native est clairement un concurrent direct d’Ionic évoqué ci-avant.

React Native est, comme React, basé sur des composants réutilisables, nombreux étant d’ailleurs les composants communs aux deux frameworks. Il est à signaler que les composants graphiques développés sous React Native sont convertis en composants natifs.

À titre d’exemple, une vue développée en React est traduite en un composant natif :

UIView sous iOS (iPhone & iPad),
ou Android.view sous Android....

Projets React Native

Nous allons développer une série de petits projets React Native pour découvrir les spécificités du développement avec ce framework.

Une démarche progressive sera adoptée dans ces exemples. Nous n’irons toutefois pas jusqu’au développement d’applications sollicitant, par du code natif, des périphériques comme l’appareil photo ou la caméra.

1. Application « eni_react_native_helloworld »

Nous n’aurons pas recours à un IDE comme Microsoft Visual Code utilisé pour des applications locales. Le développement se fera cette fois-ci sur un site web (http://expo.io) disposant de son propre environnement..

Pour pouvoir utiliser cet outil, il faut se créer un compte utilisateur (gratuit) sur le site. La démarche à suivre est très simple et est décrite ci-après :

Il suffit de demander la création du compte en cliquant sur le bouton Sign Up présent en haut à droite de l’écran. Vous devez renseigner les champs suivants :

Une fois la création du compte réalisée, vous pouvez vous identifier :

Vous remarquez en haut à droite de l’écran que vous êtes authentifié et un clic sur votre avatar fait apparaître une liste de liens (Projects, Snacks, Settings et Log Out) :

Sachez qu’il est aussi tout à fait possible de développer de manière plus conventionnelle (en local) en :

installant le client expo (expo-cli) en local, en saisissant en ligne de commande l’instruction npm install -global expo-cli,
puis en créant le projet, toujours en ligne de commande : dans notre cas, en étant positionné dans le répertoire « D:\ENI_React_Native », l’instruction serait npm init eni_react_native_helloworld, par exemple.

Une documentation très complète sur le fonctionnement d’Expo est disponible à l’adresse https://docs.expo.io/.

Nous développerons directement notre application sur le site Expo. Il nous faut tout de même déployer un composant logiciel de test (téléchargeable depuis le store concerné, Apple Store en l’occurrence) sur le périphérique sur lequel les tests seront effectués. Nous avons pris l’option de faire nos tests sous iOS sur un smartphone iPhone 12 Pro Max.

Débutons notre premier développement en saisissant l’URL http://expo.io dans la barre d’adresse de notre navigateur favori et authentifions-nous.

Expo met à notre disposition un environnement de développement et de test assez original, appelé Expo Snack.

Vous connaissez sûrement des dispositifs analogues, comme Codepen ou JSFiddle, qui permettent d’écrire des séquences de code JavaScript ou d’exécuter du code produit par des tiers. Snack fonctionne dans le même esprit. La liste de vos Snacks est directement accessible à l’adresse https://snack.expo.io/.

Vos Snacks sont aussi accessibles dans votre profil en cliquant sur le lien Snacks. Pour préparer les exemples de ce chapitre, plusieurs Snacks ont été testés (issus de développements...

Framework React Native