fifty shades of alloy - tips and tools for a great titanium mobile development

Alessio Ricco

Fifty Shades of Alloy - tips and tools for better Titanium Mobile apps

@alessioricco - Wallive ltd

MILAN november 28th/29th 2014

MILAN november 28th/29th 2014 – Alessio Ricco

Fifty shades of Alloy - @alessioricco 2

Titanium



Platform



Architecture



Alloy



Views



Styles



Controllers



Models



Media and resources



Appcelerator Blog [web]

http://www.appcelerator.com/blog/

http://www.appcelerator.com/blog/



TiDev [web]

http://www.tidev.io/

http://www.tidev.io/



Prototyping e Frameworks



Ti-Browser [prototyping]

http://www.ti-browser.com/en/ John Anderson

http://www.ti-browser.com/en/



Ti UX Templates [framework]

http://www.uxmobilepatterns.com/ Sonia Villanueva and Javier Rayon

http://www.uxmobilepatterns.com/



Ti UX Templates [framework]

https://github.com/jaraen/Ti.UX.Templates Sonia Villanueva and Javier Rayon

https://github.com/jaraen/Ti.UX.Templates



\ [framework]

https://github.com/TNuzzi/wriststrap Tony Nuzzi

A Twitter Bootstrap inspired framework for Appcelerator Titanium (Alloy)

https://github.com/TNuzzi/wriststrap



Repositories and Marketplace



gitTio [repo]

http://gitt.io/

http://gitt.io/



TitaniumControls [repo]

http://www.titaniumcontrols.com/ Autore

http://www.titaniumcontrols.com/



Tools and Utilities



grunt plugins [tools]

http://tonylukasavage.com/blog/2014/01/23/automating-appcelerator-tasks-with-grunt-titanium-and-grunt-alloy/

module.exports = function(grunt) {

// configure the plugins grunt.initConfig({ titanium: { all: { options: { command: 'create', name: 'app_name', workspaceDir: '.' } } }, alloy: { new_app: { options: { command: 'new', args: ['app_name'] } }, compile: { options: { command: 'compile', platform: 'ios', outputPath: 'app_name' } } } });

// Actually load this plugin's task(s). grunt.loadTasks('tasks');

// These plugins provide necessary tasks. grunt.loadNpmTasks('grunt-titanium'); grunt.loadNpmTasks('grunt-alloy');

grunt.registerTask('default', ['titanium', 'alloy']);};

“In a natural fusion of my current technological entanglements, I took to creating grunt task plugins for Appcelerator’s core cross-platform mobile development tools. As a result, we now have grunt-titanium for the Titanium CLI and grunt-alloy for the Alloy MVC framework. With these plugins you can now automate all functionality involved by these 2 tools, in turn letting you shift your focus onto your mobile app development, where it should be.” (Tony Lukasavage)

http://tonylukasavage.com/blog/2014/01/23/automating-appcelerator-tasks-with-grunt-titanium-and-grunt-alloy/



stss [preprocess]

https://github.com/RonaldTreur/STSS Ronald Treur

https://github.com/RonaldTreur/STSS



Titaniumifier [tools]

https://github.com/smclab/titaniumifier Pier Paolo Ramon - SMC

https://github.com/smclab/titaniumifier



Titanium-jsduck [documentation]

https://www.npmjs.org/package/titanium-jsduck Jamil Hassan Spain

https://www.npmjs.org/package/titanium-jsduck



TiCons [training]

http://ticons.fokkezb.nl/ Fokke Zandbergen

http://ticons.fokkezb.nl/



Sublime Text [preprocess]

https://github.com/MattTuttle/sublime-ti-build Matt Tuttle

https://github.com/MattTuttle/sublime-ti-build



Submodules [preprocess]

http://emanuele.decup.is/articles/reuse-code-alloy-custom/ Emanuele Decupis (a.k.a. Ciccio Balanza)

http://emanuele.decup.is/articles/reuse-code-alloy-custom/



General Pourpose Libraries



Trimethyl 2 [library]

https://github.com/CaffeinaLab/Trimethyl CaffeinaLab

https://github.com/CaffeinaLab/Trimethyl



UTiL [library]

https://github.com/FokkeZB/UTiL Fokke Zandbergen

https://github.com/FokkeZB/UTiL



Titanium Modules [documentation]

https://github.com/appcelerator/titanium_modules Appcelerator

https://github.com/appcelerator/titanium_modules



Libraries



ti-soap [library]

https://github.com/smclab/ti-soap SMC

var soap = require('soap');var config = require('config');soap.createClient('http://www.webservicex.net/CurrencyConvertor.asmx?WSDL', function (err, client) { if (err) throw err;

Ti.API.error("Methods:"); Ti.API.error(Object.keys(client));

Ti.API.error(client.ConversionRate);

client.ConversionRate({ FromCurrency: 'USD', ToCurrency: 'CNY' }, function (err, results) { if (err) throw err; Ti.API.error(results); });});

https://github.com/smclab/ti-soap



TiWorker [code]

https://github.com/appcelerator-modules/ti.worker Appcelerator

https://github.com/appcelerator-modules/ti.worker



Ti-superagent [training]

https://github.com/smclab/ti-superagent SMC

https://github.com/smclab/ti-superagent



XHR Http Client [library]

https://github.com/raulriera/XHR Autore

https://github.com/raulriera/XHR



Google Auth (OAuth 2.0) for Titanium [library]

https://github.com/ejci/Google-Auth-for-Titanium Miroslav Magda

https://github.com/ejci/Google-Auth-for-Titanium



RestAPI Sync Adapter for Titanium Alloy [code]

https://github.com/viezel/napp.alloy.adapter.restapi Mads Møller

https://github.com/viezel/napp.alloy.adapter.restapi



Code Tips



underscore.js [code]

http://underscorejs.org/

http://underscorejs.org/



Custom View in Alloy [code]

http://fokkezb.nl/2013/07/14/custom-alloy-view-components/ Fokke Zandbergen

http://fokkezb.nl/2013/07/14/custom-alloy-view-components/



Use Alloy.jmk [documentation]

http://docs.appcelerator.com/titanium/3.0/#!/guide/Build_Configuration_File_(alloy.jmk) Appcelerator

http://docs.appcelerator.com/titanium/3.0/#!/guide/Build_Configuration_File_(alloy.jmk)



TiIconicFont [code]

https://github.com/k0sukey/TiIconicFont Kosuke Isobe

https://github.com/k0sukey/TiIconicFont



Slideshare [code]

http://www.slideshare.net/alessioricco/titanium-appcelerator-best-practices?related=1 Alessio Ricco

http://www.slideshare.net/alessioricco/titanium-appcelerator-best-practices?related=1



WebViews



take the best from the Webview [code]

WebView is not only for web pages… Communication between App and Webview (local pages) Lot of powerful js libraries immediately available Easy to implement but… …Pay attention to the performance



Mapbox [code]

https://www.mapbox.com/mapbox.js/api/v2.1.4/

https://www.mapbox.com/mapbox.js/api/v2.1.4/



Charts [code]

http://www.appcelerator.com/blog/2013/09/interactive-charts-in-appcelerator-titanium/ L. Brenman

“A simple method of adding high quality, cross device, interactive charts to your Titanium mobile applications by leveraging the Titanium web view control and the Highcharts JavaScript charting engine”

http://www.appcelerator.com/blog/2013/09/interactive-charts-in-appcelerator-titanium/



Testing



TiInspector [test]

http://titaniumninja.com/debugging-titanium-apps-with-chrome-devtools/ Olivier Morandi

http://titaniumninja.com/debugging-titanium-apps-with-chrome-devtools/



Tio2 [test]

https://github.com/appcelerator/tio2 Appcelerator

https://github.com/appcelerator/tio2



ti-mocha [test]

http://tonylukasavage.com/ti-mocha/ Tony Lukasavage

Simple and reliable support for mocha testing with Appcelerator's Titanium SDK

http://tonylukasavage.com/ti-mocha/



TiCalabash [test]

https://github.com/appersonlabs/TiCalabash AppersonLabs

picture by Andrew McElroy

https://github.com/appersonlabs/TiCalabash



TiShadow [test]

http://tishadow.yydigital.com/ David Bankier

TiShadow provides Titanium developers the ability to deploy apps, run tests or execute code snippets live across all running iOS and Android devices.

There are three parts to TiShadow: the TiShadow server, TiShadow app and TiShadow CLI which are all need.

http://tishadow.yydigital.com/



Rapiddev [test]

http://appersonlabs.com/2014/01/09/rapiddev-titanium-development-speed-light/ Apperson Labs

So why use RapidDev? RapidDev provides a more simple toolset with the idea that less is more.

http://appersonlabs.com/2014/01/09/rapiddev-titanium-development-speed-light/



Deployment



installr [deployment]

https://github.com/amitkothari/ti-installr-hook

https://www.installrapp.com/

https://github.com/amitkothari/ti-installr-hook



Communities



Be a certified developer [training]

http://training.appcelerator.com/get-certified

call my friends from etnatraining.it for a great Titanium Course in Italy…

http://training.appcelerator.com/get-certified



tiConf [community]

http://ticonf.org/ http://www.tipsyandtumbler.co.uk/

http://ticonf.org/

http://www.tipsyandtumbler.co.uk/



ti-connect [community]

http://ti-connect.com/

http://ti-connect.com/



Join your local community [training]

https://www.facebook.com/groups/TitaniumMobileItaly/ Great people and friends

https://www.facebook.com/groups/TitaniumMobileItaly/



[credits]

Thank you to all my Ti.Friends and colleagues

A special thank to my friend Dick

https://www.facebook.com/groups/TitaniumMobileItaly/http://www.html.it/guide/guida-titanium/http://www.linkedin.com/in/alessioriccohttp://www.slideshare.net/alessioricco

https://www.facebook.com/groups/TitaniumMobileItaly/?fref=ts

http://www.html.it/guide/guida-titanium/

http://www.linkedin.com/in/alessioricco

http://www.slideshare.net/alessioricco

fifty shades of alloy - tips and tools for a great titanium mobile development

Mobile

shades of alloy

alessio ricco

alessioricco wallive

loadnpmtasksgruntalloy

plugins grunt

grunt plugins toolshttp

plugins tasks

ti ux templates frameworkhttps