Le développement hybride

Le développement hybride

Flutter

La première version de Flutter date de décembre 2018, c’est un framework développé par Google. Ce framework permet, tout comme React Native, de développer des applications mobiles pour différentes plateformes comme Android, iOS, Windows ou MacOS. Flutter malgré son jeune âge est utilisé par de grands groupes internationaux comme : Alibaba, BMW, eBay ou encore Tencent.
Les widgets sont au cœur de ce framework. Un widget est n’importe quel composant de l’application. Un widget peut représenter un bouton, mais un widget permet aussi de styliser un interface en permettant de centrer un élément. Un widget peut aussi être le composant qui permet le défilement d’une liste. Par exemple, pour centrer un bouton, le widget « bouton » devra être un enfant du widget « centrer ».

Architecture

L’architecture de Flutter est en trois couches. La première couche est appelée « Dart Framework », c’est simplement le code de l’application écrite en langage Dart (voir chapitre 6.3.2). La deuxième couche est appelée « Engine », elle permet de faire le lien entre le code écrit par le développeur et l’appareil mobile. Enfin, la troisième couche est appelée « Embedder », elle permet de faire, comme son nom l’indique, l’intégration de la deuxième couche, en faisant la connexion avec le système natif de l’appareil mobile.
Figure 6 : Architecture de Flutter
(The Engine architecture, 2019)

 L’ « Engine »

Cette couche embarque Skia et Dart et les ‘’encapsules’’. Elle permet de faire de la lecture et de l’écriture sur des fichiers ou sur le réseau. Elle permet aussi de faire des actions spécifiques à la plateforme comme par exemple, la communication avec les claviers des différents OS.
L’ « Engine » ne s’occupe pas de créer et de gérer les différents threads nécessaires au fonctionnement de l’application, ceux-ci sont gérés par la troisième couche. Il est nécessaire d’avoir 4 threads qui sont :
 Le thread de la plateforme  Le thread de l’interface utilisateur  Le thread du GPU  Le thread d’écriture et de lecture
Le thread de la plateforme est le thread principal. Il permet de recevoir et d’exécuter les messages de l’OS, la plupart des API peuvent être atteints de manière sécurisée seulement depuis le thread principal d’une application.
Le thread de l’interface utilisateur permet de construire ou de modifier les éléments qui seront affichés à l’écran. Il permet donc de modifier les animations, de reconstruire les widgets qui ont étés modifiés et de faire la mise en pages. Ces composants et ces modifications sont ensuite passés au thread du GPU.
Le thread du GPU reçoit des informations de composant à afficher à l’écran. Il construit les commandes qui seront passées au GPU de l’appareil. Il est quasiment impossible pour le développeur d’avoir un accès direct à ce thread afin de ne pas avoir des bases de fluidités.
Le thread d’écriture et de lecture permet de lire ou d’écrire dans des fichiers. Ce sont en général des opérations assez lentes et afin de ne pas bloquer l’application elles sont faites dans un thread spécifique. (The Engine architecture, 2019)

 Dart

Dart est un langage de programmation créé par Google. C’est un langage qui permet de créer des applications sur n’importe quelle plateforme. Ce langage est optimisé et spécialisé dans la création d’interfaces utilisateur.
Dart est un langage qui permet de créer des fonctions asynchrone qui permettent donc de ne pas bloquer le rendu de l’application. Contrairement à d’autres langages qui offrent la possibilité d’exécuter des processus en parallèle, Dart propose l’utilisation d’ « isolates ». Un Isolates est un peu comme un thread à la différence que sa mémoire n’est pas partagée avec les autres Isolates, c’est d’ailleurs pour cela qu’il porte ce nom. Deux Isolates peuvent quand même se passer des informations via des messages et lorsqu’un Isolate reçoit un message, il peut exécuter une certaine portion de code. (WALRATH, 2019)

 Skia

Skia est une librairie graphique 2D produite initialement par le groupe Ski Graphic Engine. Skia a ensuite été acheté par Google en 2005 et est maintenant utilisé par Google Chrome, Chrome OS, Firefox, Android et évidemment Flutter. Flutter peut prendre le contrôle de l’entièreté de l’écran de l’appareil mobile, cela permet d’avoir des animations plus fluides. Grâce à Skia, Flutter peut donc faire un affichage indépendant de l’OS et avoir par exemple des messages d’alertes Android sur un smartphone iOS. Skia n’as pas besoin d’échanger avec le smartphone pour faire un affichage et donc l’affichage est plus rapide. (KURIAN, 2019)

 Les widgets

Comme déjà expliqué au paravent, dans Flutter tout est un widget. Les widgets sont composés d’autres widgets plus simples qui eux même sont composé de widgets plus simples et ainsi de suite. Cette hiérarchie de widget est appelée le « render tree » et a comme racine le widget nommé « RenderObjectWidgets ».
Ce composant est extrêmement basique ce qui lui permet de s’adapter à des mises en pages différentes sans avoir à le modifier. Par exemple ce widget, malgré qu’il soit responsable de l’affichage de tous les widgets de l’application, n’as pas de système de coordonnées fixe.
Le « render tree » doit être représenté dans une structure de données qui puisse fonctionner efficacement avec beaucoup d’éléments. Puisque chaque widgets est composé de plusieurs widgets, le render tree peut facilement atteindre une très grande taille. Les programmeurs de Flutter ont donc cherché à optimiser cet objet.
L’arbre de widgets est parcouru une seule fois par frame de haut en bas et une seule fois de bas en haut. Lors de la descente de l’arbre, les parents transmettent à leurs enfants la taille maximale et minimale qu’ils peuvent prendre. En remontant la seule information qui transite des enfants vers leurs parents est la taille qu’ils ont pris. À ce moment le parent choisi la position de l’enfant. Afin d’optimiser le parcours de cet arbre, il existe plusieurs conditions qui font qu’une branche ne sera parcourue. Par exemple si la taille minimale possible et la taille maximale possible sont les mêmes, un parent ne devra pas recalculer sa mise en page même si celle de l’enfant a changé. Un autre exemple est que les widgets ont des flags qui permettent d’indiquer si eux même ou un de leurs enfants a changé, si le flag indique que rien n’a changé la branche n’est pas parcourue. (Inside Flutter)

 Widgets stateful et stateless

Il existe deux grands types de widgets qui sont les stateful et les stateless. Les widgets stateless ou sans état en français sont des objets qui ne peuvent pas changer. Par exemple, du texte ou un bouton. Les widgets stateful sont au contraire des widgets qui peuvent changer comme une checkbox.

Table des matières

Remerciements
Résumé
Table des matières
Liste des tableaux
Liste des figures
1. Introduction
2. React Native ou Flutter ?
3. Natif et hybride : quelles différences ?
3.1 Le développement natif
3.2 Le développement hybride
3.3 Pourquoi un développement hybride ?
4. Étude des framework
4.1 Le framework
4.2 React Native
4.2.1 Avantages du rendu en langage natif
4.2.2 Architecture de React Native
4.2.2.1 JavaScript VM
4.2.2.2 React Native Bridge
4.2.2.3 Native Modules
4.2.3 Les threads dans React Native
4.2.3.1 Main thread
4.2.3.2 JavaScript thread
4.2.3.3 Native Modules Thread
4.2.4 React Native Fabric
4.2.4.1 La nouvelle architecture de React Native
4.2.4.2 JSI
4.2.4.3 Turbo Modules
4.2.4.4 Fabric
4.2.4.5 CodeGen
4.2.5 Hermes
4.2.5.1 Pré-compilation du bytecode
4.2.5.2 Pas de compilation à la volée
4.2.5.3 Stratégie de garbage collector
4.3 Flutter
4.3.1 Architecture
4.3.1.1 L’ « Engine »
4.3.2 Dart
4.3.3 Skia
4.3.4 Les widgets
4.3.4.1 Widgets stateful et stateless
4.4 Comparaison
4.4.1 Résumé des frameworks
4.4.2 Documentation
4.4.3 Communauté
4.4.4 Intérêt de la communauté
5. Problématiques à résoudre
5.1 Partager des événements
5.2 Événements unique et récurrents
5.3 Trouver une date pour un
6. Concurrents
6.1 Google Agenda
6.2 Calendrier pour iOS
6.3 Doodle
6.4 NeedToMeet
6.5 Heja
6.6 TimeTree
6.7 Résumé des concurrents
7. Fonctionnalités de haut niveau
7.1 Use-cases
7.1.1 Créer un compte
7.1.2 Connexion
7.1.3 Réinitialiser son mot de passe
7.1.4 Créer un groupe
7.1.5 Créer une disposition
7.1.6 Accepter et refuser une invitation
7.1.7 Indiquer sa présence à un événement
7.1.8 Indiquer ses disponibilités dans une disposition
7.1.9 Modifier et supprimer une disposition dont il est l’auteur
7.1.10 Créer un événement
7.1.11 Créer un événement depuis une disposition
7.1.12 Modifier et supprimer un événement
7.1.13 Modifier et supprimer une disposition
7.1.14 Envoyer une invitation
7.1.15 Modifier et supprimer un groupe
7.1.16 Modifier le rôle d’un membre
7.1.17 Retirer un membre
7.2 Vues
7.2.1 Écran de connexion
7.2.2 Écran de création de compte
7.2.3 Écran de profil
7.2.4 Écran de création de groupe
7.2.5 Écran de liste des groupes
7.2.6 Écran de détails d’un groupe
7.2.7 Écran de modification de groupe
7.2.8 Écran d’accueil
7.2.9 Écran de création de disposition
7.2.10 Écran de liste des dispositions
7.2.11 Écran de détails de disposition
7.2.12 Écran de modification de disposition
7.2.13 Écran de création d’évènement d’après une disposition
7.2.14 Écran de création d’événement
7.2.15 Écran de détails d’évènement
7.2.16 Écran de modification d’évènement
7.2.17 Écran de liste d’invitations
8. Perspectives d’avenir
8.1 S’inscrire en utilisant les réseaux sociaux
8.2 Synchroniser les calendriers
8.3 Envoie de notification dans l’application
8.4 Chats dans les événements
9. Utilisation des frameworks
9.1 Apprentissages
9.1.1 React Native
9.1.2 Flutter
9.1.2.1 Prototype
9.2 Difficultés
9.2.1 React Native
9.2.2 Flutter
10. Conclusion
Bibliographie

Télécharger le rapport complet