memoire2

MEMOIRE M1
Quel type de développement utiliser pour une
application mobile multiplateformes ?
Dylan ouanounou - 2019
[Adresse de messagerie]
Table des matières
1.
Historique du développement mobile ............................................................................ 2
2.
Développement d’application mobile ............................................................................ 6
3.
Applications natives et hybrides d’un point de vu scientifique .................................... 18
4.
Les Framework CSS ...................................................................................................... 24
a.
b.
c.
d.
e.
a.
b.
c.
d.
e.
f.
a.
b.
c.
d.
e.
f.
g.
h.
L’application Native ........................................................................................................................ 6
L’application Web ........................................................................................................................... 9
L’application Hybride .................................................................................................................... 10
Les PWA ....................................................................................................................................... 14
React Native : ............................................................................................................................... 17
PWA : Progressive Web Apps ........................................................................................................ 19
Native app: ................................................................................................................................... 20
Hybrid App : ................................................................................................................................. 20
React: ........................................................................................................................................... 21
Vue.js : ......................................................................................................................................... 22
Angular 7 : .................................................................................................................................... 23
Bulma ........................................................................................................................................... 24
UIKIT ............................................................................................................................................ 25
Bootstrap ..................................................................................................................................... 26
Fondation ..................................................................................................................................... 27
Materialize ................................................................................................................................... 27
Ionic : ........................................................................................................................................... 33
React native :................................................................................................................................ 34
Flutter : ........................................................................................................................................ 35
1. Historique du développement mobile
Utilisation des mobiles :
6,9 Milliard de terminaux vendu en 2014
La couverture atteint environ 95% de la population mondiale
Il vend environ 130 millions de smartphones par mois dans le monde soit
1,56 milliard d'euros par an pour un chiffre d'affaires de 388,7 milliards
d'euros (2017). C'est en Chine que nous trouvons le plus grand nombre
d'utilisateurs de smartphones en 2017 (713,31 millions) devant l'Inde, les
États-Unis, le Brésil et la Russie.
En 2018, il y a plus de smartphones actifs (7,7 milliards) que d'habitants sur
la planète (7,4 milliards).
Les ventes de téléphones en France
Les ventes de smartphones en France en 2018
32 200 000
Les ventes de smartphones ont chuté pour la première fois en France en
2016 avec 20,2 millions de téléphones vendus (-6%) pour un chiffre
d'affaires de 3,7 milliards d'euros (+ 5%).
L'usage du Smartphone en France
Selon un sondage Credoc de juin 2018, les Français utilisent leur
Smartphone pour : naviguer sur Internet (55%), télécharger des
applications (48%), géolocaliser (42%), regarder des vidéos (34%).
Avec un taux d'équipement de 70% en Smartphone en 2018, le marché
français bascule davantage dans une logique de renouvellement que
d'équipement. Autre développement, les consommateurs français se
tournent de plus en plus vers les téléphones à grand écran et de milieu de
gamme haut de gamme, donc plus chers.
70 %
Avec un taux d'équipement de 70% dans les smartphones en 2016, le
marché français bascule davantage dans une logique de renouvellement
que d'équipement. Autre évolution, les consommateurs français se
tournent de plus en plus vers les téléphones à grand écran et les
téléphones moyens et haut de gamme, qui sont donc plus chers.
Nous avons tous une calculatrice "intelligente" ou un téléphone portable,
Avec le jeu Snake à installer.
Le but du jeu était simple :
Un serpent représente une longue ligne de pixels et des points à manger
pour grandir.
C'était l'ennui dans les années 80 et 90.
À part les jeux comme Snake, Tic-Tac Toe ou Pong, les applications sur les
appareils mobiles étaient très limitées à l'époque.
Faits intéressants sur les téléphones mobiles utilisés au début :
•
Il a fallu 10 heures pour remplir la batterie, mais seulement 30
minutes d’appel pour la vider.
La couverture réseau n'était pas optimale
Puis vint le WAP :
Le protocole d'application sans fil, ou WAP, est un système permettant
d'accéder à des informations via un réseau mobile sans fil.
Avant le développement des smartphones, les utilisateurs souhaitant
accéder à Internet via une connexion cellulaire, le WAP était utile pour
télécharger des applications supplémentaires proposées par l'opérateur ou
le fabricant du téléphone.
Cela aurait pu être une bonne idée dans la théorie, mais les utilisateurs ont
rapidement remarqué qu’il fallait non seulement télécharger des
applications spécifiques chez le fabricant ou le modèle, mais aussi qu’il
était coûteux et difficile à télécharger.
De nombreuses personnes ont cessé d'essayer de télécharger du contenu
supplémentaire sur leur téléphone en raison de ces problèmes.
9 janvier 2007 Steve Job annonce une nouvelle ère dans l'industrie du
téléphone.
L’affichage multi-touch, l’absence de clavier physique, un navigateur Web
fonctionnel et le fait qu’il offre un écran large lorsqu’il est tourné sur le côté
en font un produit révolutionnaire.
Chaque développeur souhaitait créer et ajouter ces fonctionnalités au
téléphone, c'est donc la naissance des applications mobiles
En 2008, l'industrie du téléphone est impatiente de lancer des applications
téléchargeables sur l'App Store.
552 applications ont été lancées le premier jour, dont 135 téléchargements
gratuits. En une semaine seulement, plus de 10 000 000 (dix millions)
d'applications ont été téléchargées et plus de 800 applications disponibles
au téléchargement.
En 2009, la campagne "il y a une application pour cela" sonne toujours
juste aujourd'hui.
Apple store compte 6 millions d’applications et augmente chaque jour de
façon exponentielle.
En 2017, 977 milliards d'applications ont été téléchargées.
Les applications mobiles sont une question vitale. Leur importance
augmente avec le temps. Le développement mobile continue de croître
avec des technologies toujours plus puissantes.
Si nous revenons à l'époque traditionnelle de la conception et du
développement d'applications mobiles, nous verrons probablement que
les premières applications utilisées étaient principalement des calendriers
mensuels, des calculatrices et même des jeux développés dans le cadre
Java.
Cependant, il est intéressant de noter que le tout premier smartphone
connu a été lancé par IBM en 1993. Il comprenait des fonctionnalités telles
que le carnet de contacts, l'agenda, l'horloge mondiale et la calculatrice.
En 2017, plus de 1 000 applications ont été développées et lancées chaque
jour. Le développement d'applications a créé plus de 600 000 emplois aux
États-Unis et est même devenu son propre secteur en moins de dix ans.
Le développement d'applications est énorme et il ne se développe que
chaque année.
Si cela ne suffisait pas à vous surprendre, voici quelques informations
supplémentaires :
•
•
•
•
•
85% des utilisateurs mobiles préfèrent les applications mobiles aux
pages Web.
2 utilisateurs de smartphones et de tablettes sur 3 accèdent aux
médias sociaux à partir de leur appareil.
Le temps passé dans les applications mobiles dépasse maintenant
l'utilisation du Web sur les ordinateurs de bureau aux États-Unis.
89% du temps utilisé sur un smartphone ou une tablette se trouve
dans une application mobile.
224 millions d'utilisateurs utilisent activement des applications tous
les mois aux États-Unis.
Selon comScore, le pourcentage de minutes mobiles consacrées aux
applications mobiles se situe entre 80% et 90% aux États-Unis, au
Royaume-Uni, au Canada, en Espagne, en Chine, en Italie, en Indonésie, au
Brésil et au Mexique.
Sur les 7,676 milliards de personnes, il y a :
•
•
•
•
5,112 milliards d'utilisateurs de téléphones (67%)
4,388 milliards d’utilisateurs d’Internet (57%)
3 484 milliards d'utilisateurs de réseaux sociaux (45%)
3,256 milliards d'utilisateurs de réseaux sociaux mobiles (42%)
6H42 PAR JOUR SUR INTERNET
En moyenne, un internaute passe 6h42 par jour sur Internet. Les Français
sont beaucoup plus raisonnables, avec (seulement) 4h38. Les Philippins
sont les seuls à passer plus de 10 heures par jour sur Internet.
Cette année encore, la part du mobile augmente : il représente 48% du
temps passé sur Internet. Si la tendance se confirme, le mobile devrait
dépasser le desktop en 2020.
6,3 MILLIARDS D’UTILISATEURS DE
SMARTPHONES EN 2021
Le nombre d'utilisateurs de smartphones passera de 5,1 à 6,9 milliards de
personnes en 2021. En conséquence, la durée d'utilisation passera de 2,6 à
3,5 milliards de milliards d'heures au cours de la même période (chiffres du
CDI). Trimestriel téléphone mobile Tracker).
En France en 2019, sur 65,36 millions d'habitants, on compte :
•
•
•
•
64,70 millions d’abonnements mobiles (99%)
60,42 millions d'internautes (92%)
38 millions d'utilisateurs de réseaux sociaux (58%)
33 millions d'utilisateurs de réseaux sociaux mobiles (50%)
Les applications mobiles évoluent constamment et il est peu probable
qu'elles s'arrêtent dans un avenir proche.
En termes simples, le paradigme qui a dominé l’ensemble du secteur de la
téléphonie mobile au cours de la dernière décennie a changé. Pour les
utilisateurs, l'UX mobile est désormais plus important que tous ces
processeurs octacore, gigaoctets de RAM et modules de caméra
supplémentaires.
Deux systèmes d'exploitation dominent le marché :
Android et iOS. Le premier est développé par Google et représente environ
80% du marché en France. Son principal concurrent, iOS, développé par
Apple, représente un peu moins de 20% du marché. Comme vous le
comprendrez certainement, ces deux systèmes d’exploitation sont
destinés à des marchés distincts.
Par exemple, les utilisateurs d'iOS sont généralement plus aptes à
dépenser de l'argent pour des applications et sont également plus
exigeants. Pour cette raison, il est courant de trouver une application
payante sur iOS qui sera gratuite sur Android. Les modèles commerciaux
ne sont donc pas les mêmes pour ces deux plateformes.
On peut également comparer les deux systèmes d’exploitation mobiles
avec des ordinateurs Windows et Mac. Une application Mac ne
fonctionnera pas sous Windows et inversement. Les langues d'écriture
sont différentes, les règles sont différentes, les possibilités sont différentes,
sans parler de la partie immergée de l'iceberg.
Aujourd'hui plus que jamais, les smartphones sont au cœur de nos vies et
nous accompagnent au quotidien.
Les applications que nous téléchargeons pour répondre à nos besoins
confirment cette tendance. S'agissant du marché des applications mobiles,
la domination de Google et d'Apple ne devrait pas s'arrêter de sitôt, car leur
avance sur la concurrence est importante.
2. Développement d’application mobile
a. L’application Native
Bien que le terme application native ne soit pas largement connu du grand
public, il représente la grande majorité des applications que nous
téléchargeons tous les jours.
L'évocation d'application mobile est immédiatement dans la référence
inconsciente aux applications
Une application native c'est quoi :
C'est une application développée spécifiquement pour un système
d'exploitation. Comme auparavant, une application Mac ne fonctionnerait
pas sous Windows et inversement.
Pour les applications natives, c'est le même principe.
Cela signifie que le langage de programmation est différent d'un système
d'exploitation à un autre.
Pour iOS, Objective-C ou Swift, alors qu'Android utilise Java.
Le développement en natif présente de nombreux avantages :
Amélioration de la vitesse, de la fiabilité, de la réactivité et de la résolution
pour une meilleure expérience utilisateur. Il permet un accès plus facile à
toutes les fonctionnalités du téléphone, de l'accéléromètre à travers
l'appareil photo et même du microphone.
Notifications push, disponibles uniquement sur les applications natives.
Ces notifications vous permettent d’alerter vos utilisateurs et d’attirer leur
attention à tout moment, qu’il s’agisse d’un nouveau contenu ou d’une
offre promotionnelle.
Ne nécessite pas forcément Internet pour fonctionner, ce qui constitue un
réel avantage. Même en 2017, il existe encore des zones très peu couvertes
par Internet, et permettre aux utilisateurs d'accéder à l'application sans
connexion Web est un atout majeur à ne pas négliger.
Cependant, une application native ne permet pas seulement d’accroître les
performances et d’accéder à toutes les fonctionnalités du téléphone. Bien
conçus et réalisés, ils respectent les codes de conception de chaque plateforme. Il existe des centaines de différences entre le système d'exploitation
de Google et celui d'Apple.
Les applications natives permettent de s'adapter à chaque plate-forme afin
d'offrir à vos utilisateurs une expérience optimale.
Afin de mieux étudier les possibilités de développement dans les
applications natives, nous allons nous concentrer sur les outils
technologiques et techniques de développement :
v IOS :
Ø Objectif C : Objective-C est un langage de programmation orienté
objet réflexif. C'est une extension du C ANSI, comme le C++, mais qui
se distingue de ce dernier par sa distribution dynamique des
messages, son typage faible ou fort, son typage dynamique et son
chargement dynamique. Contrairement au C++, il ne permet pas
l'héritage multiple mais il existe toutefois des moyens de combiner
les avantages de C++ et d'Objective-C.
Aujourd'hui, il est principalement utilisé dans les systèmes
d'exploitation d'Apple : macOS et son dérivé iOS, basés sur la
bibliothèque de classes Cocoa mais il existe aussi une bibliothèque
de classes libre GNUstep sous GNU/Linux. Cocoa et GNUstep sont les
successeurs de l'API OpenStep, utilisée dans les systèmes
d'exploitation NeXTSTEP (à l'origine de macOS) et son pendant
libre OPENSTEP.
Ø Swift 4 :
Swift a été́ développé́ afin de faciliter la réalisation des applications.
En effet, il est beaucoup plus rapide, plus concis, plus simple que
l’Objective-C, langage jusque-là̀ incontournable pour réaliser des
applications iOS ou OS X (c’est-à-dire pour iPhone, iPad, iPod Touch
ou encore Mac OS X). Swift est son successeur, et a d’ailleurs été́
annoncé comme « de l’Objective-C mais sans le C ». Il est néanmoins
toujours possible aujourd’hui de développer des applications en
Objective-C, ce qui fait que les deux langages coexistent.
Avec Swift, moins de lignes de code, moins de fichiers et on dispose
d’une syntaxe facile à comprendre. Cette dernière a été conçue de
façon à ce qu’un débutant puisse rapidement prendre ses marques.
Ø Android
L'écosystème d'Android s'appuie sur deux piliers :
• le langage Java
• le SDK qui permet d'avoir un environnement de développement
facilitant la tâche du développeur
Le kit de développement donne accès à des exemples, de la
documentation mais surtout à l'API de programmation du système
et à un émulateur pour tester ses applications.
Stratégiquement, Google utilise la licence Apache pour Android ce
qui permet la redistribution du code sous forme libre ou non et d'en
faire un usage commercial.
Le SDK était :
• anciennement manipulé par un plugin d'Eclipse (obsolète)
• maintenant intègré à Android Studio (IntellJ)
L'Operating System
Android est en fait un système de la famille des Linux, pour une
fois sans les outils GNU.
L'OS s'appuie sur :
•
•
•
•
•
•
•
Un noyau Linux (et ses drivers)
Une couche d'abstraction pour l'accès aux capteurs (HAL)
Une machine virtuelle : Dalvik Virtual Machine (avant Lollipop)
Un compilateur de bytecode vers le natif Android Runtime
(pour Lollipop)
Des applications (navigateur, gestion des contacts, application
de téléphonie...)
Des bibliothèques (SSL, SQLite, OpenGL ES, etc...)
Des API d'accès aux services Google Anatomie d'un
déploiement :
b. L’application Web
Une application Web est simplement un site Web qui s'adapte au mobile.
Ce terme est adaptable à ce qui est sensible.
Une application qui fonctionne comme un modèle de site Web, sans
différence de plate-forme, de système d’exploitation, de code ...
Cela signifie que les utilisateurs n’auront pas à installer l’application sur leur
smartphone, le stockage reste intact. C'est un point de vue très rapide.
Entre applications, musique et photos, les gigas s'accumulent rapidement
et nous trouvons très rapidement un stockage malgré nous.
En général, on peut toujours utiliser le Web. Elle se comporte comme une
application normale, ressemble à une application normale, mais son
accessibilité et son prix ne sont jamais vus avec les applications mobiles. En
fait, une application Web coûte jusqu'à trois fois moins qu'une application
native.
Cependant, une application web a son lot d’inconvénients comme toute
autre application. Elle ne permet pas d’utiliser les fonctionnalités au
maximum de leur potentiel, et surtout, elle ne fonctionne généralement
pas sans internet.
Les applications web sont également plus lentes et moins adaptées à
chaque plateforme. Elles ne sont pas développées spécifiquement pour
une plateforme, ce qui limite leur adaptabilité. Le fait qu’une application
web soit créée en une seule version pour toutes les plateformes et
systèmes d’exploitation ne lui permet pas d’avoir des performances
équivalentes à tout autre type d’application.
De plus, le fait que l’on ne puisse pas télécharger d’application web sur les
stores rend le processus de fidélisation extrêmement compliqué. Sans
compter le fait que cela influe grandement sur le trafic de l’application et
donc son nombre de téléchargements. L’envoi de notifications push est
également impossible avec une application web.
Bien sûr, tout n’est pas négatif avec les applications web, et les possibilités
restent tout de même très larges. Il faut juste savoir que les cibles et
objectifs de ce genre d’application sont différents des autres applications.
c. L’application Hybride
Une application hybride est un mélange entre le monde et le web
Si vous devez comparer une application native, son développement est
plus rapide et moins coûteux. Ils offrent également une application Web.
Hybrid est une application rapide et native pour l'application native.
La maintenance de l'application sera également plus facile à suivre une
seule fois. Ce n'est pas un logiciel facile : les performances de l'application
sont moins bonnes et moins stables.
Bien sûr, il est possible de se rapprocher du fonctionnement d’une application
native, mais avec le même niveau de qualité et de performances. Un autre grand
avantage du développement hybride est que vous gérez une seule version, quel
que soit le nombre de plates-formes sur lesquelles vous souhaitez être.
Autrement dit, si vous souhaitez ajouter de nouvelles fonctionnalités ou mettre à
jour, il vous suffit de le faire une fois. Nous avons une application native, ces
modifications doivent être effectuées sur chaque plate-forme. Cela prend plus de
temps et coûte plus cher.
Afin de mieux étudier les possibilités de développement dans une application
hybride, nous nous intéresserons aux outils techniques et techniques de
développement :
Cordova
Anciennement PhoneGap, il a ouvert la route vers une uniformisation de
l’accès aux fonctions natives des plates-formes mobiles. Non sans surprise,
il reste aujourd’hui l’un des grands piliers du mobile hybride. Non
seulement il continue d’être maintenu et amélioré très régulièrement mais
surtout il sert de base à de nombreux Framework dont Ionic dont nous
parlons ci-dessous.
Cordova seul n’est pas suffisant, mais il convient parfaitement à certains
types d’applications où la lourdeur d’un Framework complet est une chose
dont on peut largement se passer.
PhoneGap est aujourd'hui le nom du service propriétaire d'Adobe,
construite sur Cordova.
Avantages :
• Compatible avec de très nombreuses plates-formes (Android, iOS,
Windows Phone, Blackberry, Ubuntu mobile, Firefox OS, LG web OS,
FireOS) ;
• Liberté technologique
• Performances entièrement dépendantes de ce que l’on en fait ;
• Une base de plugins très complète et bien maintenue ;
• Technologie mûre.
Inconvénients :
• Demande un travail plus conséquent pour avoir un résultat utilisable
en production ;
• Interface graphique non comprise ;
• Absence de visualisation hors émulateur / périphérique par défaut.
Ionic :
Ionic est un Framework en partie open-source permettant de construire
des applications natives en utilisant les technologies WEB. Par natives on
doit comprendre : disponibles via les Stores et pouvant utiliser les
fonctionnalités natives des OS. Créé en 2013, et après presque 12 000
commit et 128 releases différentes, il en est à sa version stable "3" avec les
toutes premiers alphas de la version 4.
Ionic s’appuie sur une sous couche d’Angular 7.X couplé à du Typescript
pour nous assurer d'une bonne qualité de code. Les feuilles de style, elles,
sont générées via SASS. Il faudra donc s'assurer d'avoir la dernière version
de node.js sur sa machine.
La puissance de ionic est de nous proposer une librairie complète de
composants graphiques à utiliser dans notre application.
Ces composants auront plusieurs avantages non négligeables lorsque l'on
connait la difficulté de maintenir ce genre d'éléments sur une gamme de
navigateurs :
•
Leur design correspond automatiquement à celui "natif" de
la plateforme d'exécution. Un toggle switch aura un "design"
Android sous Android et un design "IOS" sur un iPhone. À ce
niveau il sera difficile de faire la différence entre du natif et du
ionic sur un simple coup d'œil.
•
Leur comportement est aussi celui de la plateforme
d'exécution. L'intégration avec la plateforme est complète : il
est par exemple possible de naviguer vers la page précédente
avec un slide depuis le bord gauche de l'écran sur IOS (la
gesture classique sur cette plateforme).
•
Modernes et à jour : certains composants que l'on voit
dernièrement dans les tendances designs sont disponibles. Les
cards de matérial en sont un très bon exemple.
•
Personnalisables : nous sommes sur du développement web
et de base ces composants sont donc facilement
personnalisables à coup de CSS mais les composants sont
pensés personnalisables dans la façon dont ils sont construits.
Pour nous faciliter la vie, Ionic propose aussi un système de disposition
par grille qui ressemble assez à ce dont on peut avoir l'habitude avec
bootstrap. Rien ne nous oblige de passer par lui mais cela devient simple
de créer des layouts à colonne/lignes.
Une application mobile c'est aussi une navigation de page en page et ionic
propose ainsi son propre modèle de navigation pour nous faciliter la vie.
Tout est basé sur un composant de navigation racine "ion-nav" qui propose
les différentes APIs nécessaires à la gestion des pages :
affichage, retour en arrière, etc.
En général on place le composant ion-nav dans la page principale (comme
le fait le template "navigation de base") et on le récupère par injection de
dépendances (il est du type NavController) pour accéder à ses APIs.
Les applications natives finalement générées sont basées sur Cordova. Il
est donc tout d'abord nécessaire de rajouter une plateforme ciblée en
utilisant la CLI ionic
Ionic propose aussi sous forme de services payants des fonctionnalités
diverses.
En général, ces fonctionnalités sont testables sous forme de version d'essai
gratuite.
• Creator : un éditeur d'interface graphique en ligne pour prototyper
rapidement une application.
• Ionic view App : une application sur les Stores qui permet d'afficher
une application "servie" sur un poste de développement et la tester
en conditions réelles.
• Ionic deploy : un service de code push.
• usine de build : qui génère le build IOS , ANDROID , WINDOWS
PHONE
• Monitor : un service de monitoring & analyse d'usage pour vos apps.
Avantage :
•
•
•
•
•
•
Vitesse de développement : on développe sur son PC/MAC dans un
navigateur et on est donc ultra productif.
Contrôles graphiques : la liste des composants très complète, simple.
Ionic Pro : déploiement et teste directement sur un device comme le
fait Xamarin Live Player (mais sans les plugins).
La documentation est vraiment très bien
faite : https://ionicframework.com/docs/components/ avec des
exemples en live !
Ils proposent des icônes auto-désignées par
plateformes : https://ionicframework.com/docs/ionicons/
Angular + Typescript
Inconvénients :
•
Requêtes http limitées à la sécurité Web classique :
•
Intégration complète avec le natif : proches mais il reste des choses
des points complexe exemple : afficher le clavier "numérique avec
virgules et signes négatifs" sur ios.
•
Performances : on est loin du natif, même avec du virtual scroll pour
afficher une liste de beaucoup d’éléments.
•
Web : pas de multi threading et donc freeze potentiel d’UI quand on
fait des calculs.
Différences entres navigateurs : même avec Ionic, il reste des choses
différentes (css, comportement de la validation HTML par exemple,
etc.) à prendre en compte sur les différentes plateformes si l'on
souhaite une UI relativement uniforme.
•
•
•
Tendance à l’utilisation de plugin intempestive
La difficulté à mettre en place une build
d. Les PWA
Une application Web progressive est une application Web composée de
pages ou de sites Web et peut être facilement identique à une application
native ou à une application mobile. Ce type d’application tente de
combiner les offres d’achat avec les principaux navigateurs modernes avec
les avantages de l’expérience offerte par les appareils mobiles.
Un PWA est accessible sur un site Web régulier, à partir d'une URL
sécurisée, mais permet une utilisation de l'application mobile comme un
utilisateur, sans les contraintes de cette dernière (envoi à App-Stores,
utilisation importante de la mémoire de l'appareil). .)
Ils allient vitesse, fluidité et légèreté tout en limitant les coûts de
développement : nul besoin de faire quoi que ce soit de spécifique aux
plateformes basées sur des applications : iOS, Android ...
Une application Web progressive combine le meilleur du Web et le
meilleur d’une application.
Plus concrètement, il s’agit d’un site Web ayant l’aspect et le
comportement de l’application mobile native. Il peut donc :
• Affichage en plein écran ;
• charger très rapidement ;
• envoyer des notifications push ;
• fonctionner hors ligne.
Ainsi, un PWA offre une expérience utilisateur à la hauteur de l'application
native, tout en offrant des avantages supplémentaires :
• Il n'est pas nécessaire d'installer et n'est pas stocké sur le téléphone.
• Il n'était pas nécessaire de le publier sur les magasins d'applications
(Apple Store, Google Play, ...);
• Le référencement naturel de PWA est facile (optimisation du magasin
d'applications);
• Totalement réactif, il fonctionne sans problème sur tous les supports
(smartphone, tablette, ordinateur ...)
• Afin de mieux explorer les possibilités de développement dans
l'application PWA, nous nous concentrerons sur les outils technologiques
et les techniques de développement :
v Native Script :
NativeScript, le Framework open source qui permet de développer des
apps mobiles natives en utilisant les technologies JavaScript, inclut
désormais la version 1.0 du projet open source NativeScript-Vue. Grâce à un
ensemble d'abstractions et de runtimes cross-platform, NativeScript
permet de développer des apps mobiles natives avec JavaScript,
TypeScript ou Angular.
Le runtime NativeScript traduit les codes JavaScript, TypeScript, et Angular
vers les API natives pour Apple iOS et Google Android, si bien que les
développeurs peuvent écrire une seule fois leur application pour les deux
plates-formes.
NativeScript inclut désormais la version 1.0 du plug-in NativeScript-Vue qui
permet aux développeurs d'utiliser simultanément le Framework
JavaScript Vue.js et le Framework de développement mobile NativeScript.
Le Framework JavaScript Vue.js sert à construire des interfaces utilisateurs
en mode visuel.
NativeScript-Vue, toujours en développement, est un Template basé sur
Webpack lequel permet de partager du code entre applications web et
mobiles. Un nouvel outil CLI pour Vue.js appelé vue-cli 3, destiné à
accélérer le développement est également prévu.
v Flutter
Flutter est un Framework Dart Open Source et gratuit pour développer des
applications Android et iOS. Son mantra est “Build beautiful native apps in record
time”. Il est développé et maintenu par les équipes de Google.
Flutter possède son propre moteur de rendu natif sur iOS et Android. Dart étant
un langage compilé, les applications faites avec Flutter sont donc composées d’un
code 100% natif.
Flutter n’utilise pas les widgets natifs car son moteur de rendu dessine
directement nativement dans un Canvas. Cela permet au SDK d’avoir de très
bonnes performances, mais aussi une grande capacité de personnalisation.
Flutter permet également d’avoir exactement le même code sur iOS et Android,
et donc d’avoir exactement le même design.
Flutter est principalement utilisé pour gagner en temps et en coup de
développement pour développer des applications sur iOS et Android.
Ses performances étant proches du natif, l’utiliser permet de développer des
applications très performantes en un temps record.
De plus, sa grande capacité de personnalisation permet de développer des
applications aux designs originaux et de renforcer l’image de la marque de
l’entreprise proposant l’application.
Avantages :
•
•
•
•
•
•
•
•
Le SDK est simple et rapide à installer
La documentation est claire et simple à comprendre
Le développement est réalisé par Google
Le SDK est Open Source
Les mises à jour sont courantes (toutes les 2 semaines)
Les IDEs de Jetbrains (Android Studio et IntelliJ Ultimate) ainsi que
Visual Studio disposent d’une très bonne intégration de Flutter
Le Dart est compilé directement en langage natif sur iOS et Android
L’application se recharge automatique quand le code est modifié de
manière presque instantanée, malgré le fait que Flutter soit compilé
(la compilation est extrêmement rapide)
•
•
•
•
•
•
•
•
Un moteur de rendu natif est intégré, il n’y a donc pas besoin de
manipuler des widgets natifs
Il n’y a pas de bridge Javascript comparé à React Native
Les performances sont proches des applications natives
Flutter propose un nouveau système de layout et de style plus
performant que le CSS
Les possibilités de personnalisation du design des applications sont
infinies
Le code est exactement le même sur iOS et Android
Le Material Design (design Android) et Cupertino (design iOS) sont
directement intégrés au SDK
Il n’y a aucune problématique de rétrocompatibilité sur les anciennes
versions d’iOS et Android
Inconvénients :
•
•
•
•
•
Le langage Dart est très peu connu, peu de développeurs ont cette
compétence
Le SDK est encore très jeune (Première version en alpha en Mai 2017)
La communauté est encore petite
Flutter n’utilisant pas de composant natif, les mises à jour des
widgets de Flutter après une nouvelle version d’Android ou d’iOS
peut prendre du temps
Il n’y a pas à ce jour d’application importante faisant la vitrine de
Flutter
e. React Native :
React Native est un Framework mobile hybride développé par Facebook
depuis début 2015. Il continue d'évoluer avec le soutien de nombreux
contributeurs sur Github.
Facebook a développé l'application de sa dernière Keynote en React
Native, qui est un très bon exemple de ce qu'il est possible de faire.
Le but de React Native est de pouvoir réutiliser le maximum de code entre
les différentes plateformes (iOS et Android). Il offre un gain de temps
considérable par rapport à du développement spécifique, tout en étant
aussi performant.
L'écriture en JavaScript permet aux développeurs web de construire une
application mobile native, contrairement à Cordova qui encapsule
l'application dans une webview.
React Native utilise le moteur JavaScriptCore avec le transpileur Babel, il
est compatible ES5, ES6 ou ES7 sans problème.
Avantages :
•
•
•
•
•
L’un des gros atouts de React Native est sans doute le gain de
temps et d’efforts considérables qu’il permet, parce que, vous l’aurez
compris, le développeur de l’application n’a pas à maîtriser les
langages spécifiques à iOS & Android et à passer deux fois plus de
temps pour créer l’application. Ils en ont d’ailleurs fait leur célèbre
slogan :
« Learn once, write anywhere ! »
Un autre point fort est la rapidité d’apprentissage. En effet, on
estime qu’il faut environ un mois pour se familiariser et maîtriser les
outils React, là où il faudra des années pour maîtriser un Framework
pour application native.
React Native met à votre disposition des outils de développement
cohérents basés sur JavaScript et vous permet de puiser dans la
bibliothèque React pleine de ressources libres et gratuites, ce qui va
réduire considérablement le coût de votre application et augmenter
la vitesse de son développement.
On peut citer également comme avantage l’applicabilité et la
possibilité d’intégrer React Native dans une application IOS déjà
existante.
Inconvénients :
•
•
•
•
Malgré ses nombreux avantages, React Native présente certains
inconvénients qui pourraient dissuader les développeurs de l’utiliser,
à savoir :
L’inadéquation de JavaScript, qui est un langage qui ne garantit pas
contre les erreurs de programmation.
La plupart des entreprises citées ci-dessus l’ont utilisé pour des
modules uniquement et non pas pour des applications toutes
entières.
Difficulté de s’organiser et de créer plusieurs pages en React.
3. Applications natives et hybrides d’un point de vu scientifique
Une application native est une application smartphone pour un système
d'exploitation mobile (pensez à Objective-C ou Swift pour iOS ou Java pour
Android).
Étant donné que l'application est en place dans un écosystème mature en
respectant les consignes techniques et l'expérience utilisateur (paroles,
gestes définis par l'application, entête Android, en-tête centralisé iOS, etc.),
ses performances sont excellentes.
L'interaction dans l'application semble cohérente avec la plupart des
autres applications de périphérique natif. L'utilisateur final est donc
susceptible d'apprendre à naviguer et à utiliser l'application plus
rapidement. Enfin, les applications natives présentent l’avantage d’être
significatives (par exemple, GPS, carnet d’adresses, appareil photo, etc.).
Envoyez des messages texte, prenez des photos en utilisant l’application
par défaut, définissez des rappels ou utilisez l’application de musique de
l’utilisateur, elle utilise des applications natives. En bref, les applications
natives sont exactement cela, le système d'exploitation de l'utilisateur et
donc construites conformément à ces instructions.
Les applications hybrides sont en quelque sorte des sites Web dans un
environnement natif. Ils ressemblent à une application native, ils sont
finalement alimentés par le site Web de la société. Fondamentalement,
une application hybride est une application construite en HTML5 et
JavaScript, avec un contenu natif utilisé pour la navigation dans
l'application (Facebook, Twitter, Instagram, votre application de banque
mobile ...).
a. PWA : Progressive Web Apps
Aujourd’hui les progressive web App va plus loin. Ils tirent parti de HTML5
et des fonctionnalités de l'environnement capacités de l'environnement de
JavaScript.
Le terme progressif désigne l'approche consistant à tirer parti des
capacités disponibles dans l'environnement d'application plutôt que
d'avoir des exigences rigides. Cela inclut l'utilisation d'une gamme
d'appareils au lieu de se concentrer sur des catégories restreintes telles
que l'approche mobile first.
Passer à travers un éventail d'environnements devrait inclure l'utilisation
des possibilités disponibles, telles qu'un écran plus grand et l'adaptation
aux limites d'un petit écran. Peut-être qu’à l’avenir, nous considérerons
l’écran comme une surface d’interaction facultative compte tenu de la
disponibilité de la voix, du toucher et autres méthodes.
Pour comprendre l’organisation de l’architecture d’une PWA voici un
schéma explicatif d’une application sous Magneto :
b. Native app:
Les applications natives font référence à des applications spécialement
écrites et développées pour un système d'exploitation mobile spécifique.
Les trois principaux systèmes d’exploitation mobiles sont Android de
Google, iOS d’Apple et
Téléphone Windows. Pour créer de véritables applications natives, le
langage de programmation Java doit être utilisé pour Android, le langage
de programmation Objective C pour iOS et le framework .NET pour
Windows Phone.
Les applications natives se caractérisent généralement par le fait que ces
applications ont un accès sans entrave au matériel du périphérique et
prennent en charge toutes les interfaces utilisateur et interactions
disponibles dans l'environnement d'exploitation mobile respectif.
c. Hybrid App :
Une application Web hybride est une application qui n'est ni vraiment un
application web mobile ni application native. C'est fondamentalement une
application écrite avec le site Web susmentionné techniques de HTML5, les
API JavaScript et CSS, mais il s'exécute dans un conteneur d'applications
natives tierces.
La clé les caractéristiques d'une application hybride sont qu'elles sont
développées avec les langues Web standard, mais ont généralement accès
à les API de périphérique natif et le matériel. Certains des bien connus et
les cadres mobiles hybrides utilisés sont PhoneGap, Appcelerator et
Appspresso.
Les nouveaux Framework tendance permette au JavaScript de tirer
meilleure partie de sa puissance et d’être orientée de plus en plus
mobile.
3 Frameworks se détache: React, Vue.Js, Angular 7
d. React:
Construit et soutenu par Facebook, React est l’un des favoris des
développeurs pour la création et la maintenance de produits, qu’il s’agisse
d’un logiciel POC rapide ou de grandes entreprises. Il est actuellement
utilisé par de nombreuses grandes entreprises telles que Instagram, Netflix,
Walmart, Whatsapp, etc.
Les avantages de React incluent son architecture à base de composants,
Virtual DOM pour des performances exceptionnelles, une courbe
d’apprentissage extrêmement rapide et une popularité auprès des
développeurs disposant d’une énorme communauté de support.
e. Vue.js :
Créé par Evan You et adopté par Alibaba, Vue est en train de devenir un
favori rapide parmi ceux qui le découvrent. La raison en est que Vue a été
initialement conçu pour aider les concepteurs peu expérimentés en
programmation.
L'objectif était de les aider à se concentrer sur la création d'interfaces
fonctionnelles plutôt que de se préoccuper de la programmation ellemême. Cela a rendu très facile l'apprentissage avec un seuil d'entrée
minimal.
De plus, Evan, un ancien employé de Google, a observé des choses
encombrantes ou qui pourraient être améliorées dans Angular et les a
appliquées à Vue. Il a fait de même lorsque React a été publié et a pu
proposer un support qui est devenu l'un des cadres les plus prometteurs à
apprendre et à adopter.
En outre, Vue.js prend en charge le rendu déclaratif, les mises à jour
asynchrones du DOM, la liaison de données bidirectionnelle, le respect
strict des spécifications des composants Web et une intégration simple
aux modèles HTML.
f. Angular 7 :
Construit et soutenu par Google et utilisé par Youtube, Paypal, Google
Maps, etc. Angular a été un choix de premier plan pour les
implémentations d'entreprise. Sa dernière version, Angular 7, a mis en
avant deux points forts principaux. Une promesse avec son moteur de
rendu Ivy d’accélérer le rendu dans l’application et les éléments angulaires
qui permettent l’utilisation de composants angulaires en dehors d’Angular,
comme dans Vue ou React.
En utilisant Elements Package, vous pouvez créer des composants
angulaires et les publier en tant que composants Web, qui peuvent ensuite
être utilisés dans n'importe quelle page HTML. Angular est plus facile à
mettre en œuvre et à apprendre pour ceux qui viennent d’un contexte
OOP ou Java.
4. Les Framework CSS
Afin de pouvoir rendre l’application design d’un point de vue UI ou
ergonomique, des outils ont vu le jour dans les années 2011.
Ces outils appelé Framework CSS ont permis d’avoir des composants
réutilisables personnalisables et évolutifs à destination des plateformes
web.
Actuellement les plus populaires sont :
a. Bulma :
Il est l'un du Framework libre CSS open source qui est basée sur Flexbox., il
est devenu très populaire et plus de 150000 développeurs utilisent ce
Framework sans aucun souci. Ce Framework est destiné à inclure
uniquement les exigences minimales pour vous lancer sur votre projet de
développement web.
Ce Framework léger est tout à fait réactif et basé sur un système de grille 12
de colonne. Si vous êtes un débutant, vous pouvez alors apprendre très
facile et plus rapide avec Bulma. En cas de problème, une grande
communauté est disponible pour ce Framework.
Une fois que vous savez comment utiliser Bulma, vous pouvez
personnaliser rapidement votre site Web. Ce cadre a 33.3K étoiles sur repo
github et mis à jour très fréquemment.
Avantage :
•
•
Très rapide à personnaliser.
Il intègre dans un environnement JS.
Inconvénient :
•
CSS seulement - ne comprend pas de JS ou plugins jQuery.
Ce Framework est idéal pour les débutants et les développeurs qui veulent
créer des sites Web simple.
b. UIKIT :
UIKit est un Framework frontal très léger et très modulaire qui permet de
développer des interfaces web puissantes et rapides. Ce fait puissant qui
inclut dans ce Framework est, il comprend à la fois Sass et moins
préprocesseurs CSS.
UIKit est devenu l'un des les plus populaires Framework front-end là-bas
avec un ensemble de composants sensibles agiles avec les conventions de
nommage cohérentes. Ce Framework est livré avec plus de 30 composants
modulaires extensibles, qui peuvent être combinés pour encore plus de
polyvalence.
Il comprend des éléments tels que des formulaires HTML et des
tableau, composants de navigation tels que les barres de navigation
latérale ; composants JavaScript comme les boîtes de dialogue modales et
barres hors toile ; éléments communs tels que des badges, des boutons et
des superpositions ; et les composants de mise en page avec un système
de grille entièrement réactive.
À l'heure actuelle, UIKit a 14k étoiles dans le dépôt github et mis à jour
régulièrement.
Avantage :
•
•
•
Remarquablement modulaire, de sorte que vous pouvez ajouter des
composants à la feuille de style sans impact négatif sur votre style
général.
Hautement personnalisable.
Créer des interfaces utilisateur avancées avec des composants
comme nestables.
Inconvénient :
•
Le nombre de ressources est très faible en raison de la nouveauté
relative.
Ce Framework est idéal pour les développeurs assez expérimentés en
raison du manque de ressources. Dans le cas contraire, il est idéal pour des
projets simples et complexes.
c. Bootstrap :
Le plus populaire, le Framework plus rapide et convivial, Bootstrap. Ce
Framework est publié en 2011 et créé par les développeurs Twitter. À
l'heure actuelle, il y a des millions de sites Web étonnants à travers le Web
qui exécutent ce cadre étonnant. Vous pouvez vérifier sa popularité en
comptant ses étoiles au repo GitHub, ses plus de 131K.
Comme tous les autres cadres frontaux efficaces, Bootstrap comprend
HTML, CSS et JavaScript. Vous pouvez facilement développer des sites
sensibles de toutes tailles et complexités. Comme ce Framework est mis à
jour régulièrement, il comprend toujours les meilleurs et les dernières
fonctionnalités.
Créez rapidement votre application entière ou prototyper vos idées avec
des variables et mixins Bootstraps Sass. Auparavant, il était fondé sur moins
mais que la popularité augmente à SASS, Bootstrap a sa version 4 en
SASS. Notre version classique de constructeur de la page Quix Joomla est
construit avec la version 3 Bootstrap, qui est basé sur LESS.
Avantage :
•
•
Une documentation complète.
Support web design réactif, qui peut également être désactivé si
nécessaire.
Inconvénient :
•
•
Un nombre démesuré d'éléments DOM et des classes HTML peut
être source de confusion et de désordre.
Sur la taille du fichier de la boîte de 276KB en raison d'un trop grand
nombre de styles rarement utilisés.
Ce Framework est idéal pour les débutants et les personnes qui préfèrent
un cadre solide front-end.
Fondation
Le Framework Fondation est l'un des cadres très avancés qui a été créé par
une société de conception web appelé Zurb. Il est un Framework frontal de
qualité de l'entreprise qui est idéal pour le développement d'un site réactif,
nimbles. De nombreuses organisations populaires comme Facebook, eBay,
Mozilla, Adobe, HP, Cisco, Disney, et d'autres organisations populaires
utilisent ce Framework sur leurs sites.
Si vous êtes un débutant que sans aucun doute, ce n'est pas le Framework
que vous recherchez. Il est assez complexe et ne convient pas pour les
personnes qui ne sont pas connus des cadres. Si vous avez une expérience
antérieure, vous pouvez facilement concevoir des applications belles, des
courriels et des sites Web qui se penchera sur mindblowing tout
appareil. Fondation est lisible, flexible, sémantique et entièrement
personnalisable.
Fondation est livré avec l'accélération GPU pour les animations ultra-rapide
et lisse. Il offre Fastclick.js pour le rendu rapide à des appareils mobiles. Ce
Framework polyvalent fonctionne sur Sass préprocesseur et inclut l'attribut
d'échange de données qui est développé par la Fondation.
Cet attribut vous permet de charger des sections HTML plus lourds pour
les écrans plus grands et des sections HTML légers pour les écrans
mobiles. À l’heure actuelle, ce Framework a plus de 28K étoiles dans le
dépôt GitHub avec une grande communauté d'utilisateurs.
Avantage :
•
•
Grande flexibilité sans style verrouillage.
Au lieu de pixels utilise REMS, élimine la nécessité d'une hauteur
d'état explicitement, la largeur et d'autres attributs pour chaque
appareil.
Inconvénient :
•
•
La taille est assez grande de la boîte.
Un peu de complexe pour les débutants.
Ce Framework est pour les développeurs qui ont une expérience plus tôt le
développement et les préoccupations avec le développement de sites
sensibles, rapides, attractifs.
d. Materialize :
Materialise est un framework de développement frontal réactif et
moderne, basé sur les spécifications de conception des matériaux de
Google. Ce cadre est fourni avec des icônes, des boutons, des formulaires,
des cartes et d’autres composants prêts à l’emploi. Il est offert en version
standard et en version SASS, utilisez celle que vous préférez.
La fonctionnalité de grille de colonnes IZ est incluse dans Materialize afin
de pouvoir être utilisée pour les présentations de sites Web. Ce framework
est chargé avec CSS, qui est prêt à l'emploi pour les couleurs de conception
de matériau, les ombres, la typographie et d'autres fonctionnalités.
Les fonctionnalités supplémentaires de ce Framework incluent les menus
mobiles, les mixins SASS, l’animation par effet d’entraînement, etc.
Ce Framework est noté avec 35K étoiles sur le référentiel GitHub.
Avantages :
Un grand nombre de composants.
Prise en charge de tous types d'appareils.
Les inconvénients :
Très grande taille.
Pas de support de modèle de flexbox.
Ce Framework est idéal pour les développeurs moins expérimentés, qui
ont besoin des conseils de la spécification de conception matérielle de
Google.
e. Le design natif :
Dans le développement natif, le design sur Android est construit
en utilisant une hiérarchie de mises en page (ViewGroup objets)
et widgets (View objets).
Layouts sont des conteneurs qui contrôlent la façon dont leurs vues
enfants sont placées sur l'écran. Les widgets sont des composants
d’interface utilisateur tels que des boutons et des zones de texte.
Android fournit un vocabulaire XML pour ViewGroup et les ViewClasses,
donc la plupart de l’interface utilisateur est définie dans des fichiers
XML. Cependant, au lieu de vous apprendre à écrire du XML, cette leçon
vous montre comment créer une mise en page en utilisant l’éditeur
de mise Android Studio, qui le rend facile de construire une mise en page
en vue de glisser-déposer.
Pour le développement natif IOS les choses sont un peu plus différentes,
pour des interfaces simples, le design s’effectue par drag & drop grâce à
l’Interface Builder
Pour des interfaces plus complexes, il existe des librairies comme Cocoa et
Cocoa Touch qui utilise le Model Vue Controller
il est donc facile de concevoir indépendamment des interfaces, séparées
de leurs implémentations. Les interfaces utilisateur sont en fait des objets
archivés Cocoa ou Cocoa Touch (enregistré sous forme de fichiers. nib), et
Mac OS et iOS crée de manière dynamique la connexion entre l'interface
utilisateur et le code de l'application est exécutée.
5. Les applications mobiles coté serveur :
Une fois l’application développer il faut pouvoir communiquer avec des
bases de données physique, des apis ou encore les faires communiqués
entre elles.
Pour ce faire la manière de procéder n’est pas la même selon les différents
systèmes utilisés
Pour les développements d’application hybride comme Ionic, Cordova, les
PWA ou toutes les technologies utiliser dans le web, des serveurs comme
AWS, Node.js, Google’s cloud services ou encore Microsoft Azure seront de
très bon parti prix.
Pour le développement d’application mobile natif, les solutions de server se
trouve plus dans des technologies structurales comme graph QL ou doc.ai
sont conseillée.
Une fois que l’application est prête il faut pouvoir la déployer
La déployer où ? tout d’abord sur des serveurs et ensuite la rendre
disponible sur les stores actuels
Il existe différents types de déploiement sur les cloud prenons les 3
principaux IaaS, PaaS, SaaS .
IaaS est une plate-forme où une infrastructure est prévue pour vous. Avec
un clic sur un bouton, vous pouvez faire tourner des machines virtuelles
hébergées par un fournisseur avec un système d'exploitation de votre
choix.
Le vendeur fournissant la machine est responsable de la connectivité et
l'approvisionnement initial du système, et vous êtes responsable de tout le
reste. Le vendeur fournit une machine et un système d'exploitation, mais
vous devez installer tous les logiciels, runtimes d'applications / serveurs et
bases de données que votre application a besoin.
En général, IaaS exige que vous ayez une équipe d'administrateurs
système pour gérer le système et appliquer des règles de pare-feu, des
correctifs et errata de sécurité sur une base régulière.
PaaS est une pile de technologie relativement nouvelle qui fonctionne audessus de IaaS et a été créé avec le développeur à l'esprit. Avec la plateforme PaaS, tout est prévu, sauf le code d'application, les utilisateurs et les
données. En règle générale, lorsque vous utilisez un PaaS, le vendeur
conserve le serveur d'applications, bases de données et tous les
composants du système d'exploitation nécessaires, vous donnant le temps
de se concentrer sur le code d'application.
Étant donné que le fournisseur gère cette plate-forme pour vous, il est
souvent difficile d'ouvrir les ports qui ne sont pas appelés spécifiquement
pour le serveur d'application, l'exécution ou la base de données en cours
d'utilisation. PaaS fournit également des fonctionnalités qui sont
spécifiquement destinés à des applications, y compris la capacité à
l'échelle le niveau d'application en fonction de la demande des utilisateurs
de l'application. Dans la plupart des plates-formes, cela se produit avec peu
à aucune interaction du développeur.
Avec la plate-forme SaaS, tout est prévu pour vous, sauf les utilisateurs et
les données d'application. Le vendeur fournit le code d'application et le
développeur a un accès limité à modifier le logiciel utilisé. Ceci n’est
généralement pas un choix pour le déploiement d'applications
personnalisées, en tant que fournisseur fournit l'ensemble de la pile
logicielle. Les clients de messagerie Web hébergés et hébergé des logiciels
d'automatisation des ventes sont deux bons exemples de la façon dont le
SaaS est utilisé.
Pour les développeurs, le PaaS est le plus utilisés, parce que l'infrastructure
est gérée pour eux, afin qu’il puisse se concentrer sur leur code
d'application.
Ensuite vient le choix de la base de données, Presque toutes les
applications en cours de création reposent sur une base de données d'un
type ou d'un autre pour stocker et récupérer les informations à présenter à
l'utilisateur. Lors du développement d'applications pour le cloud, Il faut
également prendre en compte les bases de données utilisé et
l'emplacement de ces bases.
La base de données doit-elle être hébergée sur les mêmes serveurs que
l'application ou est-il préférable de loger la base de données sur un serveur
ou un conteneur séparé ?
Dans de nombreux cas, une application repose sur des informations
stockées dans une base de données située derrière un pare-feu
d’entreprise, tandis que l’application frontale est déployée sur le cloud
public.
Dans ce cas, Il y a deux options pour accéder efficacement aux
informations que vous devez présenter à l'utilisateur dès le départ.
Option 1 : Choisir un fournisseur qui permet d'ouvrir une connexion VPS
distante dans la base de données.
Option 2 : communication avec la base de données via un ensemble de
services REST authentifiés déployés sur l'infrastructure ayant accès aux
données.
Ces deux options comportent des risques de sécurité inhérents que l’on
doit prendre en compte lors de la connexion à une base de données
derrière un pare-feu d'entreprise à partir d'une application cloud externe.
Dans ce cas, la meilleure option consiste à sélectionner un fournisseur de
cloud PaaS permettant de déployer les applications dans un
environnement non multi-locataire.
Si le code d'application n'a pas besoin de se connecter à une base de
données d'entreprise existante, le nombre d'options dont l’on dispose est
presque illimité. Il faut s’assurer également de choisir une base de données
évolutive rapidement et facilement, qu’il s’agisse d’une base de données
SQL ou NOSQL.
6. Développement d’une application mobile « Todolist » :
Afin de mettre en pratique toutes les méthodes de développements
mobile évoquer précédemment, Un Todolist sera développer dans les 3
types d’applications soit Native, Hybrid et PWA.
Pour ce faire 3 différents Framework seront utilisés Ionic, React native et
flutter.
a. Ionic :
NPM
NPM est un package manager qui permet l’installation d’énormément
d’outils et de librairies dont on aura besoin pour tout type de
développement. Pour l’installer, il faut ouvrir une ligne de commande et
taper la commande suivante :
npm install -g npm@latest
IONIC CORDOVA
On va maintenant installer les outils Ionic et Cordova de manière globale
sur la machine avec la commande suivante (avec sudo si besoin) :
npm install -g ionic cordova
À partir de là, la commande ionic est disponible depuis la ligne de
commande, depuis n’importe quel dossier de l’ordinateur.
Création d'un nouveau projet
Maintenant que le CLI d'Ionic est installé de manière globale sur
l’ordinateur, on peut s’en servir pour créer un projet Ionic. Il faut Naviguer
vers le dossier où on a stocké le projet et exécutez la commande suivante :
ionic start todolist-ionic blank
Cette commande crée un nouveau projet de type "blank", c'est-à-dire sans
contenu pré-généré, qui sera le projet sur lequel on travaillera. Pour lancer
le serveur de développement, entrer dans le dossier créé et exécutez ionic
serve :
cd todolist-ionic
ionic serve
Tout comme ng serve pour Angular, ionic serve lance un serveur de
développement qui se recharge à chaque modification de fichier. On
Navigue à localhost :8100 pour visualiser l'application
b. React native :
Grâce à Node.js, on peut installer les lignes de commande CRNA. Ces lignes
de commande nous permettront, de créer une CRNA.
Ouvrez un terminal et taper :
sudo npm install -g expo-cli
Nous voici avec un environnement de développement fonctionnel pour
créer une CRNA.
Il est temps de créer votre première application React Native.
Dans un terminal, se placer dans le dossier de votre choix. Pour ma part, j'ai
créé un dossier exprès /ReactNative :
$ cd /chemin_vers_votre_dossier/ReactNative/
Puis crée notre CRNA. On va appeler notre projet "Doctolibclone" :
$ expo init todolist-ionic
Expo vous demande de choisir le template de départ pour notre
application :
Nous allons partir d’un projet vierge, choisir donc blank , le premier choix.
La création peut prendre un peu de temps ; il faut que le projet installe une
multitude de librairies Javascript. Une fois que cela est fini, on devrez voir
apparaître le message :
Your project is ready at …
create-react-native-app
Une CRNA est une solution créée par la communauté React Native pour se
lancer rapidement dans les développements ; elle nécessite peu de
configuration. C'est le moyen le plus simple de créer une application
mobile React Native.
L'inconvénient est qu'elle ne permet pas d'utiliser du code natif et donc
d'accéder aux composants du téléphone.
Pour utiliser du code natif rien de plus simple Dès que on a besoin des
composants du téléphone, on n'a qu'une commande à taper et notre
projet passera automatiquement d'une CRNA à une application React
Native avec du code natif. À ce moment-là, on peut utiliser autant de
composants du téléphone que souhaité.
c. Flutter :
Qu'est-ce que Flutter ?
C'est le SDK (ou Kit de développement en français) de Google. Il permet de
créer des applications à la fois pour Android et iOS.
Qu'est-ce que Dart?
C'est un langage de programmation orienté objet, développé par Google.
Il est facile à comprendre et à prendre en main et se rapproche de
langages tels que Java ou Swift par exemple.
Il faut télécharge le kit d'installation suivant pour obtenir la dernière
version stable du kit de développement logiciel Flutter SDK :
flutter_macos_v1.7.8 + correctif.4-stable.zip
Extraire le fichier à l'emplacement souhaité, par exemple :
cd ~/development
unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip
Ajouter l'outil Flutter à votre chemin :
$ export PATH="$PATH:`pwd`/flutter/bin"
Cette commande définit votre variable PATH pour la fenêtre de terminal
actuelle uniquement. Pour ajouter définitivement Flutter à notre chemin.
Une fois flutter installer place au développement !
Bibliographie
Huynh, M. Q., Ghimire, P., & Truong, D. (2017). Hybrid app approach: could it mark the end of native app
domination ?. Issues in Informing Science and Information Technology, 14, 049-065.
Khandeparkar, A., Gupta, R., & Sindhya, B. (2015). An introduction to hybrid platform mobile application
development. International Journal of Computer Applications, 118(15).
Biørn-Hansen, A., Majchrzak, T. A., & Grønli, T. M. (2017, April). Progressive Web Apps: The Possible Webnative Unifier for Mobile Development. In WEBIST (pp. 344-351).
A. Herden, P. P. M. Farias, P. R. M. de Andrade and A. B. Albuquerque,“Agile PDD – One Aproach to Software
Development Using BPMN” in 11th International Conference Applied Computing, Porto, Portugal,2014.
Adobe , PhonegGap [online], http://phonegap.com/ (Accessed: 20 October 2014).
Francese, R.; Risi, M.; Tortora, G.; Scanniello, G., “Supporting the development of multi-platform mobile
applications”, Web Systems Evolution (WSE), 2013 15th IEEE International Symposium on, vol., no., pp.87,90,
27-27 Sept. 2013
Intel, Intel's App Framework [ online ] , http://app-frameworksoftware.intel.com/ (Accessed: 20 October 2014).
International Data Group, Market Analysis Perspective: Worldwide Mobile Phone Market [online],
http://www.idc.com/getdoc.jsp?containerId=245240 (Accessed: 18 October 2014).
Li Tian; Huaichang Du; Long Tang; Ye Xu, “The discussion of crossplatform mobile application based on
Phonegap”, Software Engineering and Service Science (ICSESS), 2013 4th IEEE International Conference on,
vol., no., pp.652,655, 23-25 May 2013.
R. Gangundi, “Smartphone Application Development using Cross Platform Frameworks”, Proceedings of the
National Conference on Information and Communication Technology, NMIMS University, Mumbai, India, 2010.
W3C Draft: HTML5, A vocabulary and associated APIs for HTML and XHTML [ online ] ,
http://dev.w3.org/html5/spec/Overview.html (Accessed: 18 October 2014).
B. Frankston, "Progressive Web Apps [Bits Versus Electrons]," in IEEE Consumer Electronics Magazine, vol. 7, no. 2, pp.
106-117, March 2018.
doi: 10.1109/MCE.2017.2776463
keywords: {Consumer electronics;Web and internet services;Computer applications;Browsers;Servers;File systems;Mobile
communications},
URL: http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=8287006&isnumber=8286979
B. Pete LePage « Progressive Web Apps on Desktop » juin 4, 2019
https://developers.google.com/web/progressive-web-apps/desktop
Nayebi, Fatih & Desharnais, Jean-Marc & Abran, Alain. (2012). The State of the Art of Mobile Application Usability
Evaluation. Canadian Conference on Electrical and Computer Engineering. 10.1109/CCECE.2012.6334930.
Jobe, William. (2013). Native Apps Vs. Mobile Web Apps. International Journal of Interactive Mobile Technologies (iJIM).
7. pp. 27-32. 10.3991/ijim.v7i4.3226.
https://ionicframework.com/docs/components
B. Tkachenko (2018) Decentralizing with Server-side Rendering of Native apps
https://techburst.io/decentralizing-with-server-side-rendering-of-native-apps-8fe6a5ee882c