Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n° 2 – Jeudi 27 septembre 2012 Xavier Lacot – JoliCode 

2 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Qui suis-je ? Xavier Lacot ■ Expert Web et Mobile chez JoliCode – http://jolicode.com ■ Contributeur à plusieurs projets Open Source ■ En PHP, notamment Symfony ■ Développeur Titanium depuis 2009 ■ Conférencier à CodeStrong ■ Expert frameworks Web ■ Plusieurs conférences – Symfony Live, Forum PHP, Symfony Day, etc. ■ Président de l'Association Française des Utilisateurs de PHP (afup.org) ■ http://twitter.com/xavierlacot 

3 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Sommaire ■ Développer avec Titanium ■ Rappels rapides ■ Processus optimisable : le manque d'un framework RAD ■ Alloy, le framework fédérateur ■ Objectifs ■ Exemple simple ■ Présentation de l'architecture ■ Vue ■ Contrôleurs ■ Modèles ■ Widgets ■ Styles 

4 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Un large panel de solutions disponibles 

5 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Qu'est-ce que Titanium ? « Titanium is an open source framework for building native desktop and mobile applications using open web technologies (HTML, CSS, and JavaScript) » 

6 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Trois bonnes raisons d'adopter Titanium ■ Langages Web très populaires ■ Faciles à apprendre ■ Très répandus ■ Standards ouverts ■ Cross platform ■ Codez une fois, déployez plusieurs ! ■ Applications natives ■ Rapides ■ Mode offline ■ Accès aux fonctionnalités matérielles ■ Actives en tâche de fond 

7 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 La productivité a ses limites... ■ Quelques limitations néanmoins : ■ Pour le développeur, Titanium est une plateforme ■ Pas un framework au sens RAD / MVC ■ UI écrite en JS = aïe ■ Plateforme géniale mais : ■ Peu contraignante ■ Bonnes pratiques : selon le développeur ■ De nombreux frameworks pseudo-MVC ■ Manque de standardisation des savoir-faire ■ Contributions hétérogènes 

8 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Les frameworks existants... ■ IQ SDK - https://github.com/dev-ique/iqsdk ■ EnJS + Joose + classes custom ■ Aucune communauté ■ Extanium – http://extanium.org ■ Extjs in Titanium ■ V 0.2.1, rien depuis juin 2011. Aucune communauté ■ TiMVC - http://timvc.com/ ■ Ti.include(), pas d'utilisation de CommonJS ■ Aucune communauté ■ Kranium - http://kraniumjs.com/ ■ Assemblage de briques ■ V 0.1.3, rien depuis septembre 2011. Aucune communauté 

9 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Les frameworks existants... ■ IQ SDK - https://github.com/dev-ique/iqsdk ■ EnJS + Joose + classes custom ■ Aucune communauté ■ Extanium – http://extanium.org ■ Extjs in Titanium ■ V 0.2.1, rien depuis juin 2011. Aucune communauté ■ TiMVC - http://timvc.com/ ■ Ti.include(), pas d'utilisation de CommonJS ■ Aucune communauté ■ Kranium - http://kraniumjs.com/ ■ Assemblage de briques ■ V 0.1.3, rien depuis septembre 2011. Aucune communauté Seriously. WTF??? 

10 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Alloy ■ Alloy ■ Open Source, mené par Appcelerator ■ Apparu début 2012 (première béta en juin) ■ Utilise des composants ouverts (projets tiers) ■ S'appuie sur node.js, disponible par npm ■ Déjà bien documenté ■ GitHub : 250 stars, 49 forks ■ Test : http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html 

11 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Objectifs ■ Productivité ■ Développer plus rapidement ; ■ Construire des librairies réutilisables ; ■ Générer du code ■ Pousser les bonnes pratiques ■ Fini les variables globales et les Ti.include() de 200 fichiers au bootstrap de vos applications ! ■ Améliorer la maintenabilité ■ Aujourd'hui : 1 développeur = 1 style de développement ■ Objectif : architectures uniformes = réversibilité facilitée 

12 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Demo time http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html 

13 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 

14 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Installer alloy ■ Pré-requis pour jouer : ■ node.js 0.6.3 ou plus ■ Titanium SDK + Studio >= 2.1 ■ OSX 10.6 (pas windows ou Linux pour le moment) ■ Installation : $ sudo npm install alloy -g 

15 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Outillage ■ Un outil en ligne de commande : ■ new : initialise un projet alloy ■ compile : compile le projet pour cible « webapp » ■ run : lance l'application ■ generate : génère du code (contrôleur / modèle) 

16 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy dossier de code lié à alloy Dossiers et fichiers habituels d'un projet Titanium app/ build/ i18n/ modules/ plugins/ Resources/ manifest tiapp.xml Ne codez plus dans Resources ! 

17 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les assets (images, sons, etc.) de votre projet. Déployé dans Resources/ à la compilation app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

18 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les contrôleurs, ie. Les articulations de votre application app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

19 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les librairies CommonJS : ■ Vos librairies métier ■ Des libs externes (lib/vendor) Dossier à créer à la main Chargement par : require('library') app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

20 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les classes de migration de vos modèles de données. Dossier à créer à la main app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

21 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les classes du modèle de données. app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

22 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les styles associés aux vues. Fichiers .tss (Titanium StyleSheet) Syntaxe similaire à CSS app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

23 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les vues de l'application : des templates au format XML Plus besoin de Ti.UI.create* app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

24 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Les widgets propres à votre application (ie., non fournis par alloy). Les widgets sont des composants à assembler pour créer l'application. Dossier à créer à la main app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

25 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Fichier type makefile, pour définir des opérations pre- et post- compilation : ■ Changer la configuration ■ Logger des informations ■ Déployer sur un serveur ■ etc. app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

26 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Littérature app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

27 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'un projet alloy Déclaration de constantes et paramètres d'exécution (urls, variables, etc.). Déclaration des dépendances de l'application envers des widgets. app/ assets/ controllers/ lib/ migrations/ models/ styles/ views/ widgets/ alloy.jmk README config.json 

28 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Principe de fonctionnement Code écrit pour alloy Code Titanium « traditionnel » run / compile 

29 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Principe de fonctionnement Code écrit pour alloy Code Titanium « traditionnel » run / compile En résumé, alloy est un compilateur de code structuré, réutilisable et moderne vers du code « Titanium » respectant les bonnes pratiques. alloy ne remplace pas Titanium, il le complète. 

30 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Architecture d'une application alloy Vue Modèle Contrôleur Styles exécution Librairies tierces Widgets décore anime utilise Requires charge 

31 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 La gestion des vues ■ Les vues sont des fichiers XML ■ Au moins une vue (le premier « écran ») : index.xml ■ Les vues ne définissent pas l'apparence de l'application mais seulement son organisation ■ Les styles .tss permettent de styler les vues (analogie à HTML et CSS) 

32 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 La gestion des vues ■ Exemple de vue principale : Hello, World : conteneur de l'application : Préfixé par Ti.UI. Attribut ns="..." 

33 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 La gestion des vues ■ Exemple de vue principale : Hello, World Support de classes et d'identifiants Possible de gérer des évènements 

34 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Composition de vues ■ Inclusion de vues ■ Mot clé « Require » ■ Possibilité de diviser les vues ■ Hiérarchie ■ Réutilisation de vues partielles 

35 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Styler une vue ■ Les styles sont définis dans des fichiers .ts ■ nom_de_vue.xml ↔ nom_de_vue.tss Hello app/views/toto.xml "#a" : { "backgroundColor" : "red", "height": "100" }, "#b" : { "height":Ti.UI.SIZE }, "#t" : { "color":"black" } app/styles/toto.tss 

36 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Les contrôleurs, un peu d'activité en vue... ■ Même principe pour les contrôleurs : ■ nom_de_vue.xml ↔ nom_de_vue.js Hello Michel app/views/toto.xml $.a.backgroundColor = 'blue'; $.b.addEventListener('click', function(e){ $.t.text = 'Gérard'; }); function doClick(e) { $.t.color = 'green'; } app/controllers/toto.js 

37 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Les contrôleurs, un peu d'activité en vue... ■ Même principe pour les contrôleurs : ■ nom_de_vue.xml ↔ nom_de_vue.js Hello Michel app/views/toto.xml $.a.backgroundColor = 'blue'; $.b.addEventListener('click', function(e){ $.t.text = 'Gérard'; }); function doClick(e) { $.t.color = 'green'; } app/controllers/toto.js Ajout de comportement par écouteur d'évènement Ajout de comportement depuis la vue 

38 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Gestion des données ■ Vos applications manipulent des données ■ Ces données sont stockées par le biais de Modèles ■ alloy gère les modèles en s'appuyant sur : ■ backbone ■ des adaptateurs pour le stockage des données Application (contrôleur) Modèles (étendent Backbone.Model) Adapteurs fournis par alloy storage 

39 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Plusieurs adaptateurs disponibles ■ sql ■ base de données SQLite ■ (cibles iOS et android uniquement) ■ localStorage ■ localStorage HTML5 ■ (cible « MobileWeb » uniquement) ■ localDefault ■ SQLite ou localStorage en fonction de la plateforme ■ properties : utilise Ti.API.Properties (beurk) 

No content

41 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Création d'un modèle de données ■ alloy nous aide pour créer un modèle : $ alloy generate model photo sql name:string url:string is_enabled:boolean .__ .__ _____ | | | | ____ ___.__. \__ \ | | | | / _ < | | / __ \| |_| |_( <_> )___ | (____ /____/____/\____// ____| \/ \/ Alloy by Appcelerator. The MVC app framework for Titanium. [INFO] Generated model description named photo [INFO] Generated migration named 201208161505184_photo.js 

42 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 $ alloy generate model photo sql name:string url:string is_enabled:boolean .__ .__ _____ | | | | ____ ___.__. $ alloy generate model photo sql name:string url:string is_enabled:boolean Commande de création de modèle Nom du modèle à créer Type d'adaptateur à employer Liste des champs (sauf pour localStorage) ■ Génère : ■ La définition du modèle dans app/models/photo.js ■ Une migration dans app/migrations 

43 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Utilisation d'un modèle de données (1/2) ■ Une fois le modèle défini, on peut l'utiliser immédiatement dans nos contrôleurs : var photos = Alloy.createCollection('Photos'); // create a new Photo var photo = Alloy.createModel('Photo', { name:"HOTLINE", url:"http://picmybox.fr/media/large/photos/hotline.jpg", is_enabled: true }); // add it to the photos collection photos.add(photo); 

44 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Utilisation d'un modèle de données (2/2) ■ Les modèles étendent Backbone.Model ! ■ cf. http://backbonejs.org/ // create and fetch the collect var photos = Alloy.createCollection('Photos'); photos.fetch(); // retrieve only the enabled photos var enabled_photos = photos.where({is_enabled: true}); // update a view element when photos are fetched from the storage photos.on("fetch", function() { $.table.updateContent(photos); }); 

45 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Les widgets, un soupçon de réutilisabilité ■ Un widget est un module embarquant sa propre logique MVC ■ Un widget est un package réutilisable, autonome, qui peut être importé dans toute application ■ Un widget peut fournir des vues, ou simplement des fonctionnalités 

46 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Les widgets, un soupçon de réutilisabilité ■ Toute partie « générique » d'une application devrait être développée sous la forme d'un widget ■ Datepicker ■ Formulaire de connexion Oauth ■ etc. ■ Créer un widget est simple : $ alloy generate widget com.picmybox.hellobutton .__ .__ _____ | | | | ____ ___.__. \__ \ | | | | / _ < | | / __ \| |_| |_( <_> )___ | (____ /____/____/\____// ____| \/ \/ Alloy by Appcelerator. The MVC app framework for Titanium. [INFO] Generated widget named com.picmybox.hellobutton 

47 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Structure d'un Widget ■ Le code est généré dans app/widgets/XXX ■ Un widget se présente comme une application à part entière ■ Vue ■ Contrôleur ■ Modèles ■ Librairies ■ widget.json décrit le widget 

48 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Utilisation d'un Widget ■ Emploi d'un widget dans une vue : ■ Un widget peut embarquer sa propre logique ■ On peut la surcharger localement dans l'application ■ S'il y en a, les assets seront copiés dans Resource/ 

49 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Au sujet des widgets... ■ Appcelerator souhaite faciliter la distribution de widgets – dans la Marketplace ? ■ Pour l'instant, pas de packaging sous forme d'archive (mais envisagé) ■ Un widget peut exposer une API publique vers l'application : // widget.js controller file exports.doSomething = function() { alert('Coucou poney'); } // application controller $.foo.doSomething(); Mot-clé exports : définition d'une API publique (bisous CommonJS) Appel de la méthode par le biais du nom du Widget 

50 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 Débugger ses applications ■ Le debug (comme la compilation / distribution) se fait directement depuis Titanium Studio, comme d'habitude ■ La précompilation alloy → Titanium peut détecter des problèmes triviaux. Par exemple : [INFO] [index.xml] view processing... [INFO] style: "index.tss" [INFO] view: "index.xml" [ERROR] Error parsing XML document [ERROR] end tag name: Window is not match the current start tagName:Windo [ERROR] Alloy compile failed 

51 Alloy, un framework MVC pour Appcelerator Titanium Meetup Paris Titanium n°2 | Xavier Lacot | Septembre 2012 En guise de conclusion... alloy : ■ structure fortement le développement avec Titanium ; ■ apporte une réponse à ceux qui ne savent pas comment (bien) démarrer leur projet ; ■ facilite l'utilisation de librairies de qualité. alloy est encore en pre-release ■ Mais ça marche déjà bien ■ Si vous aimez jouer, foncez ou au moins testez-le ! 

Questions ? Contact Xavier Lacot [email protected] 06 51 48 59 73 http://jolicode.com Twitter : @JoliCode 

No content