1. Cyril Sabbagh
Développement mobile
cross­platform

2. I- Introduction:
Le développement natif sur les plateformes mobiles nécessite la maîtrise de plusieurs
langages de programmation. Pour chaque OS mobile, le développeur est obligé de créer une
application spécifique, ce qui engendre des coûts supplémentaires et ne facilite pas la
maintenance de ces applications.
HTML5 est donc considérée comme une solution au problème de développement cross
platform. Étant compatible avec toutes les plateformes car elle se charge sur un navigateur
web, cette solution permet aux développeurs WEB d’adapter leurs sites pour leurs donner
une apparence d’application mobile. C’est ce que l’on appel une “Web App”. Les Web apps
ne supportent pas la majeure des fonctionnalités natives que peuvent offrir nos appareils c’est
ce qui pousse les développeurs a créer des “Hybrid apps” en utilisant des frameworks
permettant d’accéder aux fonctionnalités natives des plateformes.

3.
Une application hybride est une application web capsulée a l'intérieure d’une application
native. Il existe plusieurs framework qui permettent de créer des applications hybrides et ce
projet traite les deux framework les plus utilisés: Phonegap et Titanium.

4. II- Cross Platform Frameworks:
Il existe beaucoup de framework permettant de créer des applications cross plateformes. Il
est important de bien choisir la framework dependemment des besoins de l’application. Ces
frameworks permettent de développer des applications pour différentes plateformes en
utilisant le même langage de programmation.
II.1- Phonegap:
PhoneGap Cordova est un Framework de développement mobile qui permet de développer
des applications mobiles cross­plateformes. Il est issue d’un projet Open Source qui a
récemment été racheté par Adobe. Le principe de phonegap est d’utiliser une webview native
pour visualiser l’application et fournir une API qui permet d'accéder aux fonctionnalités
natives des terminaux.
Les applications Phonegap sont donc codés en HTML, CSS et javascript tout comme les sites
web.
Avantages
● HTML,Javascript et CSS
● Intégration avec toute autre web framework (ex: commonJS, JQM, AngularJS...)
● Outils de développement web (Chrome inspector ...)
Inconvénients
● Pas d'accès aux UI natives et donc dépend d’une UI framework (Jquery Mobile)
● Les performances dépendent de ceux du navigateur
● Problèmes standards de compatibilité cross­navigateur
La stratégie “Code once, deploy everywhere” adoptée par Phonegap fait ravir le monde du
web. En effet, avec phonegap, la portabilité de l’application pour différentes plateformes est

5. quasi transparente: le même code est utilisé pour créer toutes les applications. Bien écrite,
l’application peut même être utilisée comme site mobile ou “web app”.
II.2- Titanium:
Titanium est une framework Open Source développée par la compagnie Appcelerator qui
permet de developper des application mobiles cross plateformes. Titanium n’adopte pas la
même stratégie que phonegap,elle ne dépend pas de HTML et CSS et offre la possibilité
d’utiliser les UI natives des plateformes. En effet, Titanium ​ ​est basés sur une logique de «
traduction » d’un langage dédié javascript dans les langages natifs des différents OS.
Avantages
● Accès aux UI Natives
● Existe un IDE Titanium Studio
● 100% javascript
● Marketplace riche
● Ne dépend pas d’autre Framework
Inconvénients
● Code peut varier pour différentes plates­formes
● Pas de HTML et CSS
● Temps d’apprentissage
III- Travail Effectué:
III.1- Web Services:
Ce projet libre a pour objectif de tester deux technologies de développement cross
plateformes dans le but de créer une application mobile d’une startup dont le site est déjà
crée. C’est pourquoi, afin de travailler dans les conditions les plus proches de la réalité, il a
fallut créer les webservices qui serviront a alimenter le contenu de l’application mobile.

6. Le site est développé en langage PHP et utilise la framework ELGG. Le travail effectué a
donc été fait sous forme d’un plugin à ajouter au framework ELGG et qui fourni les
webservices.
Les réponses du serveurs sont en langage Json qui est très simple a parser et plus léger que
du XML. Voici un exemple de requête GET suivi de la réponse du serveur:
requête:
http://mawsool.cyrilsabbagh.com/services/api/rest/json/?method=jobs.get_posts&context=all
réponse:
{"status":0,"result":[{"guid":597,"title":"Second role in a TV add","owner":"Wonderful
Production","excerpt":"We are looking for a young and talented drummer to play the second
role in a TV add. He will be paid 500$ and should pass a casting.","job_category":"Full
Time","paid":"Yes","job_location":"Dbaiye, Mount Lebanon,
Lebanon","job_start_date":"2014­07­26","job_deadline":"2014­07­21","owner_icon":"http://m
awsool.cyrilsabbagh.com/avatar/view/wonderfulproduction/medium/1375101324.jpg","time
_created":1402618264},{"guid":173,"title":"Promoter at Virgin Megastore","owner":"Cyril
Sabbagh","excerpt":"We are looking for fresh and motivated student to promote Nikon
cameras and its holiday offers!rnSo if you are a passionate photographer apply
now!","job_category":"Part Time","paid":"Yes","job_location":"Achrafieh, Beirut,
Lebanon","job_start_date":"2014­05­21","job_deadline":"2014­06­28","owner_icon":"http://m
awsool.cyrilsabbagh.com/_graphics/icons/user/defaultmedium.gif","time_created":1400165
415}]}
III.2- Prototype Phonegap:
Le prototype Phonegap consiste a créer une application qui intègre la geolocalisation de
données provenant du site web.
IOS:

7.
Android:
Cet application a été développée a l’aide de Jquery Mobile qui est une librairie permettant de
créer des interfaces utilisateurs pour mobile. Tout le projet est composé de 3 fichiers:
● index.html : contenant les pages ainsi que le chargement des librairies nécessaire
● index.css : contenant le style des pages
● index.js : contenant la logique de l’application

8. La geolocalisation se fait à l’aide de la fonction getCurrentLocation de HTML5 et la carte est
représentée a l’aide de Google maps API comme elle le serait sur un site web normal.
On peut constater que l’application est exactement identique sur les deux plateformes.
III.3- Prototype Titanium:
Le prototype Phonegap consiste a créer une application qui intègre la geolocalisation de
données provenant du site web.
IOS:
Android:

9.
Cet application a été développée a l’aide de CommonJs qui est une librairie permettant de
structurer le code en petits bouts de code appelés modules. Le projet est composé d’un
fichier javascript spécifique a chaque plateforme et d’autres fichier communs a toutes les
plateformes.
La geolocalisation se fait à l’aide des fonctions natives de chaque plateformes et la carte
représentée est native et dépend de la plateforme utilisée.
On peut constater que l’application est différente selon les plateforme car Titanium utilise les
UI native spécifique à chaque plateforme. On peut par exemple noter l’absence du bouton
“Back” dans l’interface Android car ces terminaux disposent d’un bouton “Back” physique.
III.4- Comparaison:
a) Fonctionnalités:
Phonegap Titanium
UI Pas native mais très simple
a coder et a personnaliser
UI Native mais très
complexe a coder et
personnaliser

10. HTTP request Ajax, mais impossible de
tester sur les navigateurs:
CROSS­ORIGIN
Fonction fournie par l’API
MAPS Google Maps API v3 .js Map Native à la plateforme
Geolocalisation HTML5 getCurrentLocation Fonction fournie par l’API
b) IOS app memory allocation:
­ Pour Titanium:
­ Pour Phonegap:
Ces tests effectués à l’aide de l’outil Instruments permettent de représenter la mémoire
allouée pendant la durée de vie de l’application. Les sauts dans les 2 courbes correspondent
aux moments ou la carte est chargée. On remarque que d'après ces graphes, il n’y a pas de

11. différences en terme de mémoire allouée entre le chargement d’une carte native et le
chargement d’une carte Google maps. La réelle différence se trouve lors des temps de repos
de l’application où l’on peut constater que phonegap continu a allouer de la mémoire alors
que Titanium n’en alloue presque pas. Cela est évidemment du au fait que Phonegap génère
l’interface dans une webview et doit donc récupérer les éléments graphiques de celle­ci alors
que Titanium utilise les éléments graphiques natifs contenu dans l’OS même.
IV- Conclusion:
Phonegap:
● Solution la plus adaptée aux développeurs web
● Code once, deploy everywhere
● Performance très correcte grâce aux nouveaux terminaux
● Bien écrit, le même code peut être utilisé pour le site mobile
Titanium:
● Solution la plus adaptée pour créer des apps natives
● Performances
● Nécessite des connaissances en développement mobile