TitaniumWrite in JavaScript, run native everywhere

2

Ayoub Zamouchi

Développeur Mobile / DzMob

azamouchi@gmail.com

http://dzmob.net

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

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

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

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

Bytecodegen

Interpreter

Java

Scri

ptC

ore

/ V8

6

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

Bytecodegen

Interpreter

Java

Scri

ptC

ore

/ V8

7

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

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 Studio9

Alloy pour faciliter la tacheToute 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

Alloy pour faciliter la tache

11

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

É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

Étendre L’SDK Titanium avec des Modules

14

É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

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

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

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

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

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

Merci pour votre attention

21