Titanium : créer une application mobile cross-platforms performante avec du Javascript

Blend Web Mix - Benjamin Clay - Octobre 2014

Titanium : créer une application mobile cross-platforms performante avec du Javascript

Blend Web Mix - Benjamin Clay - Octobre 2014

Nombreux OS mobiles ...

http://www.eco-conscient.com/art-1092-france-quelle-part-de-marche-pour-android-et-iphone-en-fevrier-2011.html

... différents langages ...

Objective-C / Swift
Java
C#
...

... et différents SDKs !

Appcelerator Titanium

Couche d'abstraction
Open-Source - Licence Apache2
Gratuit
Société sponsor : Appcelerator
Soutenu par eBay
Première version en 2009 avec beaucoup de bugs !

Appcelerator Titanium

270 000 000 devices ont au moins une application Titanium
eBay, PayPal, Cisco, VMWare, Avis, ...

Comment ça marche, Jamy ?

Accès aux fonctionnalités matérielles par le biais d'APIs Javascript
Mapping API Javascript <-> APIs natives
ie. développement 100% Javascript

Comment ça marche, Jamy ?

Accès aux fonctionnalités matérielles par le biais d'APIs Javascript
Mapping API Javascript <-> APIs natives
ie. développement 100% Javascript

ಠ_ಠ

Coucou, je suis Benjamin Clay

Expert Web et mobile et éleveur de licornes @ .
PHP/Symfony2/elasticsearch
Javascript/Alloy/NodeJS
Contributeur Open-Source && créateur d'un site à fort trafic

@ternel

Alloy... ou TiAlloy

==

TiAlloy, c'est...

Framework MVC
Source Code Transformer
Code Alloy --> Code Titanium
Alloy ne remplace pas Titanium, il le complète.

TiAlloy

Open Source
Depuis 2012
Utilise de composants existants
S'appuie sur NodeJS, disponible via npm
Documentation plutôt bonne

CLI ou IDE, à vous de choisir

CLI pour Titanium / Alloy

GUI

CLI

Commençons notre application

$ ti create
$ alloy new .
$ ti build -p ios
$ ti build -p android

Oh... wait ! Rappel important !

Qui dit Live Coding, dit effet Bonaldi !
« Toute démonstration d’un produit quelconque qui fonctionnait parfaitement aux répétitions foirera lamentablement lors de la démonstration publique. »

Commençons notre application

$ ti create
$ alloy new .
$ ti build -p ios
$ ti build -p android

Commençons notre application

Voici notre première application !

Fonctionne sur iOS et Android
Les alertes sont bien des éléments de l'OS

#1 app iOS / Android

index.js : le contrôleur

function doClick(e) {
    alert($.label.text);
}

$.index.open();

index.xml : la vue

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
    </Window>
</Alloy>

index.tss : le style

".container": {
    backgroundColor:"white"
}

"Label": {
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000"
}

"#label": {
    font: {
        fontSize: 12
    }
}