Les frameworks hybrides

Démarche

Depuis des années, différentes solutions ont été proposées pour traiter cette problématique du développement multi-plateforme. Parmi ces solutions nous trouvons l’approche de l’ingénierie Dirigée par les Modèles (MDA) qui est une pratique d’ingénierie des systèmes utilisant les capacités des technologies informatiques pour décrire à la fois le problème (besoin) et sa solution à travers les modèles, les concepts, et les langages. Cela peut simplifier le développement et réduire le temps et le coût d’implémentation. Le modèle représente clairement l’idée de l’application à l’aide des outils de modélisation comme UML (Unified Modeling Language) et s’il y a des erreurs, il est facile et rapide de corriger en revoyant et modifiant les modèles. L’idée de l’approche d’ingénierie dirigée par les modèles, que nous avons adopté pour notre travail, est que le développement de l’application est guidé par les modèles. Elle est très bien adaptée avec l’approche Cross-Platform2 afin de réaliser l’application mobile pour des différents systèmes d’exploitation. Le code est généré à partir des modèles qui sont définis par le développeur. En effet, en premier lieu, nous avons conçu et développé à l’aide de l’outil Xtext, une grammaire générale permettant de définir un langage dédié aux applications mobiles DSL3 (Domain Specific Language). En second lieu, et en se basant sur le méta-modèle généré par Xtext à partir de notre grammaire, nous proposons un atelier de modélisation graphique à l’aide de l’outil Sirius pour générer des modèles indépendants des plate-formes PIM (Platform Independent Model). Ces derniers, seront utilisés pour définir la sémantique de notre langage en les traduisant en un code react-native compatible avec les trois plate-formes iOS, android et WindowsPhone.

Le développement hybride

Certaines communautés ont très bien compris le problème de compatibilité et proposent d’autres méthodes qui permettent, avec un seul code, de lancer des applications sur les différentes plate-formes d’exécution, “Write once, run everyWhere”. Une application hybride est développée à partir des langages web (HTML, JavaScript, CSS….), et qui s’appuie sur des technologies natives mobiles afin de pouvoir utiliser des fonctionnalitées du smartphone telles que : caméra, GPS, etc…, ces types d’applications sont aussi téléchargées depuis les magasins d’applications en ligne et installées sur le mobile. La solution la plus connue étant Titanium Platform pour décrire une application en utilisant du JavaScript et leur API, une autre nouvelle solution qui vient d’apparaître est l’utilisation du framework react-native. L’avantage majeur de ces solutions est de coder avec un langage connu qui est le JavaScript pour avoir un code unique compatible avec plusieurs plate-formes, par exemple, l’utilisation du framework react-native permet d’avoir un code source d’applications mobiles exécutables dans trois systèmes d’exploitation : android, iOS et WindowsPhone.

React-native

Cela fait déjà plus d’un an que l’annonce d’une possible révolution dans le développement mobile est faite par facebook : il s’agit de React-Native ou comme certains l’appellent « La nouvelle bombe de chez facebook ». [MaxLab, 2015] Comme react, react-native est un framework mobile hybride développé par Facebook en 2015, à la différence de son grand frère qui vise les interfaces web, react-native cible les applications natives. [Antoine, 2017]. React-native comme son nom l’indique est basé sur react, et il repose sur la même API que son grand frère, sans offrir pour autant la même librairie JavaScript. Il est très récent sur le marché des outils multi-plateformes, il adopte la philosophie: ”Learn once, write everywhere” [MaxLab, 2015], car il utilise le langage JavaScript ainsi que react comme couche d’abstraction sans réécrire un nouveau framework mobile, la seule différence ici est au lieu de créer des éléments de DOM12 [TECFA, 2003], nous allons piloter des composants natifs. La figure suivante est une comparaison entre l’architecture des deux moteurs :

Ce qui est intéressant ici est l’utilisation des ingrédients de base :

JavaScript, des feuilles de style CSS et même des balises HTML ce qui donne la même syntaxe que dans un navigateur, seuls les composants changent. Comme react, les composants sont le coeur du react-native, ils s’intègrent bien dans toute application react-native et peuvent être utilisés avec du code JS. Chaque composant graphique créé possède un template, des évènements, des paramètres et un état, de manière complètement indépendante aux autres composants. Chaque composant peut avoir des sous composants ainsi de suite, pour obtenir à la fin un seul composant global qui englobe tous les sous composants qui lui appartiennent. Parmi les avantages de ces composants, c’est qu’ils sont : réutilisables, testables, maintenables [Sandrine, 2017]. Et dans la figure suivante nous présentons quelques exemples de composants et éléments react-native:

Dans un premier temps, react-native est utilisé pour créer des applications mobiles compatibles avec les deux plate-formes Android et iOS, et pas très longtemps d’aujourd’hui exactement avril 2017 il intègre la troisième plate-forme qui est WindowsPhone. De plus en plus react-native devient célèbre, sa popularité n’a cessé de progresser ces derniers mois, car il présente beaucoup de points forts ce qui le rend spécial, les dernières statistiques montrent que 78% des développeurs s’intéressent à l’apprentissage de cette nouvelle technologie comme le montre diagramme à secteur suivant :

Choix du framework

Il existe plusieurs solutions hybrides multi-plateformes, comme Cordova, Ionic et react-native, la question qui se pose toujours dans le développement mobile est : quel framework choisir pour notre future application ? Pour répondre à cette question nous faisons une comparaison entre ces différents frameworks. Cordova et d’autres types comme Ionic, permettent la création des applications mobiles avec un accès aux API natives (l’accéléromètre, caméra…). Côté interface graphique, ils sont conçus autour d’une WebView qui est affichée en pleine écran, ce qui veut dire que leurs interfaces sont basées sur des technologies web classiques HTML/CSS/JS. Pour plus de fonctionnalités, il est possible d’étendre l’API du navigateur en installant des plugins afin d’enrichir le moteur JavaScript. Mais le problème est que les performances de ses applications seront donc équivalentes à une application web, et non une application mobile. Avec react-native, il est obligatoire de composer chaque interface à l’aide de composants React, ces derniers font appel au layout natif de chaque plateforme. Les performances de l’UI sont donc quasi similaires aux performances natives. [Zoontek, 2016]

Pour y voir plus clair, nous avons résumé ici les possibilités et les limites de ces différentes technologies de développement : De plus, il offre un cadre multi-plateforme pour l’avenir qui dépasse l’api iOS et Android, car il couvrira selon les prévisions même les téléviseurs intelligents, consoles Xbox, périphériques Windows et la liste reste longue, il s’appuie sur une communauté active et il a une interface ergonomique. Pour terminer, vous l’avez compris, notre choix se tourne vers react-native qui est une technologie très prometteuse avec un énorme potentiel, et qui a déjà été appréciée par des géants comme Baidu, Discovery, Instagram et d’autres, elle est à deux pas de devenir une alternative à part entière à Objective C, Swift et Java, en particulier sur des projets qui ne sont pas critiques.

Les transformations des modèles MDA

Les transformations sont au coeur de l’approche MDA. Elles permettent convertir un modèle en un autre modèle et d’obtenir différentes vues de ce dernier, de le raffiner ou de l’abstraire, de plus elles permettent de passer d’un langage vers un autre. Elle assure le passage d’un ou plusieurs modèles d’un niveau d’abstraction donné vers un ou plusieurs autres modèles du même niveau (transformation horizontale) ou d’un niveau différent (transformation verticale). Les transformations horizontales sont de type PIM vers PIM ou bien PSM vers PSM. Les transformations verticales sont de type PIM vers PSM ou bien PSM vers code. Les transformations inverses verticales (rétro-ingénierie) sont type PSM vers PIM ou bien code vers PSM. [Fourati, 2010] Tout d’abord, nous trouvons le modèle CIM (Computation Independent Model), nous sommes exactement dans le niveau M0 [Figure III.1] ou le monde réel qui résume les besoins de l’utilisateur et les fonctionnalités du système.

La suite du processus est la construction des modèles PIM (Platform Independent Model) partielles à partir des modèles CIM, cela permet de véhiculer l’information contenue dans les CIM vers les modèles PIM. Ce dernier sera transformé [PIM→ PIM] pour enrichir les PIM partielles en ajoutant des informations et en spécifiant leur contenu. Le modèle PSM (Platform Specific Model) est obtenu d’une transformation de modèle PIM. Il faut noter qu’un modèle PIM doit persister à l’apparition de nouveaux PSM. Dans le cas où le modèle d’analyse et de conception (PIM), ainsi que le modèle de code (PSM) représentent le système, nous sommes exactement dans le niveau M1 [Figure III.1] de l’architecture de l’approche MDA. Remarque Dernière étape est la transformation du modèle PSM vers un code source, cette étape n’est pas à proprement dit considérée comme une transformation par l’approche MDA car c’est une transformation modèle→ texte, nous pouvons plutôt la considérer comme une étape de retranscription textuelle du modèle PSM. Le code source obtenu est compatible avec une ou plusieurs plate-formes d’exécution.

Le rapport de stage ou le pfe est un document d’analyse, de synthèse et d’évaluation de votre apprentissage, c’est pour cela rapport gratuit propose le téléchargement des modèles gratuits de projet de fin d’étude, rapport de stage, mémoire, pfe, thèse, pour connaître la méthodologie à avoir et savoir comment construire les parties d’un projet de fin d’étude.

Table des matières

Introduction Générale
I.Introduction
II.Problématique
III. Démarche
IV.Plan de travail
Chapitre I : Développement des applications mobiles
I.Introduction
II.Applications mobiles
III. Les solutions pour développer une application mobile
III.1. Le développement natif
III.2. Le développement web(HTML)
III.3. Le développement hybride
Choix de la solution
Conclusion
Chapitre II : Les frameworks hybrides
I.Introduction
II.Frameworks des applications mobiles hybrides
II.1. Apache Cordova
II.2. Ionic
II.3. React-native
III. Choix du framework
Conclusion
Chapitre III : L’approche de l’ingénierie dirigé par les modèles MDA
I.Introduction
II.Généralité sur l’IDM
III. L’approche de l’ingénierie dirigée par les modèles MDA
III.1. Les modèles MDA
III.2. Les transformations des modèles MDA
Les objectifs de l’approche MDA
Conclusion
Chapitre IV : Atelier graphique de modélisation d’applications mobiles
I.Introduction
II.Détails de la solution proposée
II.1. Création du méta-modèle
II.2. Manipulation du modèle
II.3. Génération du code source
III. Application de la méthode proposée
III.1. Processus de développement
III.2. Evaluation
Conclusion
Conclusion Générale
Conclusion
Perspectives
Références Bibliographique
Annexes
I.Annexe A : Définir une grammaire DSL avec Xtext
I.1. Généralité sur les DSLs
I.2. Types de DSL
I.3. Conclusion
Annexe B : Création d’un éditeur graphique avec sirius
II.1. Généralité sur Sirius
II.2. Commencer avec sirius
II.3. Conclusion
Liste des figures
Liste des tableaux