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

Comme nous l’avons vu dans les différents chapitres 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....

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)...