Une introduction sur Titanium, comment ça fonctionne et ses composants majeurs.

1. Titanium
Write in JavaScript, run native everywhere

2. 2
Ayoub Zamouchi
Développeur Mobile / DzMob
azamouchi@gmail.com
http://dzmob.net

3. Sommaire
● Introduction
● Comment ça fonctionne ?
● Appcelerator Studio
● Alloy pour faciliter la tache
● Étendre l’SDK Titanium avec des modules
● Avantages / Inconvénients
● Est-ce que Titanium correspond à mon projet ?
3

4. Introduction
● Appcelerator Titanium, est un framework open source qui permet la
création d’applications mobiles sur les différentes plates-formes (iOS,
Android, Windows Phone, Tizen) à partir d’un seul code JavaScript.
● Introduit en 2008, à la base dédié pour développer des applications Desktop
cross plates-formes. À partir de 2009, le support pour le développement
mobile a été ajouté.
● Le composant majeur c’est Titanium SDK , d’autres produits ont été ajoutés
par la suite (Alloy , Titanium Studio et Appcelertaor Studio, Appcelerator
Platform).
4

5. Comment ça fonctionne ?
● L’application est écrite en JavaScript
● Le code Javascript sera optimisé et minimisé, il est ensuite interprété lors de
l’exécution de l’application
● Le code JavaScript interagit avec des composants natifs à travers une couche
d’abstraction (Pas dans une webView)
● Ce n’est pas de la traduction de code
● Titanium utilise un frameWork MVC sous le nom de Alloy pour séparer la
partie logique de l’interface
5

6. Comment ça fonctionne ?
Lors de l’exécution de l’application, il y a trois
composants majeurs
● Le code source Javascript
● Un moteur Javascript (V8 pour Android) et
(JavaScriptCore pour iOS)
● Titanium API (Interaction avec les composants
natifs du système)
Code source JavaScript
Phone APIs
UI APIs
Titanium
Modules (APIs)
KROLL
Bridge
Native SDK (iOS / Android)
Parser
Bytecode
gen
Interpreter
JavaScriptCore/V8
6

7. Comment ça fonctionne ?
● Le moteur Javascript interprétera le code
source de l’application et créera des
connexions vers les objets natifs à travers
Titanium APIs
● Par exemple le code :
Ti.UI.createTextField ( ) va créer un
UItextView sur iOS et TextView sur Android.
Code source JavaScript
Phone APIs
UI APIs
Titanium
Modules (APIs)
KROLL
Bridge
Native SDK (iOS / Android)
Parser
Bytecode
gen
Interpreter
JavaScriptCore/V8
7

8. Appcelerator Studio
● IDE utilisé pour créer, tester et publier les
applications mobiles
● Basé sur Aptana Studio
● Appcelerator studio a été introduit en Avril
2015 avec de nouvelles fonctionnalités (Live
view, Code profiling, automated testing ..
etc)
● Titanium Commande Line Interface pour
ceux qui veulent utiliser leur éditeur de
texte préféré et travailler avec la ligne de
commande
8

9. Alloy pour faciliter la tache
● En mode classique, tout le code de l’
application (Logique , interface ,
Communication avec l’API Titanium ) est en
Javascript (Fichier .js)
● Introduit en 2012, Alloy est un framework
MVC open source (Basé sur Backboone.js)
○ Models : Les enregistrements en base
de données
○ Views : fichiers .xml et .tss pour définir
et styler l'interface utilisateur
○ Controllers : fichiers .js pour la logique
(que se passe-t-il quand un bouton est
pressé )
● Intégré avec Appcelerator / Titanium Studio
9

10. Alloy pour faciliter la tache
Toute la partie logique de
l’application est dans les
fichiers .js
Les fichiers .tss et .xml
pour gérer l’interface
Les models sous format
de fichiers .js aussi
Tout est dans les fichiers .js
10

11. Alloy pour faciliter la tache
11

12. Alloy pour faciliter la tâche
● Un code propre et réutilisable
● Possibilité d'utiliser les librairies de CommonJS , les librairies populaires
comme underscore.js et moment.js son inclus par défaut.
● Possibilité de spécifier le code pour une plat-forme
● Le format TSS est très proche du CSS
12

13. Étendre L’SDK Titanium avec des Modules
● Un module est une extension de l’SDK Titanium
○ Ajouter le support d’une fonctionnalité du système qui n’est pas fournit par Titanium
○ Ajouter le support à une Bibliothèque tiers (Flurry Analytics par exemple)
○ Optimiser l’expérience utilisateur
● Titanium lui même est composé de plusieurs modules
● Il sert comme un “Bridge” entre le code Javascript et le code natif
● Développé dans le langage natif de la plat-forme
13

14. Étendre L’SDK Titanium avec des Modules
14

15. Étendre L’SDK Titanium avec des Modules
● Une connaissance du langage natif de le plateforme est nécessaire pour
créer un module
● Disponibilité sur Appcelerator MarketPlace / Github
15

16. Avantages
● l’SDK Titanium est open source
● Un seul code à maintenir pour plusieurs plateformes
● (Théoriquement) ça demande moins de temps de créer une application
cross plate-forme que deux applications natives
● L’expérience utilisateur la plus poche du natif
● Réutilisation de code sur différents projets (Alloy widgets)
16

17. Avantages
● Un développeur mobile peut facilement se familiariser avec Titanium
(JavaScript , xml , tss)
● Une grande communauté active
● Mise à jour rapide de l’SDK pour supporter les différents nouveautés (iOS9 ,
3D Touch , watchOS2, Android 5.0 )
● Une solution complète est proposée (MBaaS , Analytics , PushNotifications )
17

18. Inconvénients
● La performance des applications n’est pas à 100% que celle d’une
application native (Consommation mémoire, Utilisation du processeur)
● Connaître les bases du natif ça peut aider (Création de modules, Mieux
comprendre les Bugs)
● La taille de l’application finale est volumineuse (12Mb pour une application
de test)
18

19. Inconvénients
● Difficile de tracer les fuites de mémoire si le projet est trop complexe
● Une création de compte est nécessaire pour utiliser Appcelerator Studio
● Depuis Mars 2015, il faudrait souscrire à une offre “indie” pour pouvoir
publier son application (35$/month) .
19

20. Est-ce que Titanium correspond à mon projet ?
● Sur un grand projet ou il y a beaucoup de
taches qui s’exécutent à la fois
● Sur un projet qui demande des animations,
des transitions customisées, des layouts
trop complexes
● Une exigence sur la performance de l’
application
● L’application dépend beaucoup du
hardware de l’appareil
● Si le client ne dispose pas d’un grand budget
● Vous voulez lancer un produit rapidement
et créer une communauté
● Pas besoin de maintenir le produit final
(Une application dédiée pour un salon ou
un évènement)
● Temps de réalisation limité
● Des développeurs qui connaissent bien
Javascript (jQuery Mobile , PhoneGap .. )
Non Oui
20

21. Merci pour votre attention
21