alloy, a MVC framework for Appcelerator Titanium mobile

Alloy, a MVC framework
for Appcelerator Titanium
Initially presented at the Meetup Paris Titanium n° 2 – September 27th, 2012
Xavier Lacot – JoliCode

View Slide

2
Alloy, a MVC framework for Appcelerator Titanium
Meetup Paris Titanium | Xavier Lacot | September 27th, 2012
Hello world
Xavier Lacot
■ Web- and Mobile- expert at JoliCode – http://jolicode.com
■ Contributor to several Open Source projects
■ In PHP, the Symfony framework
■ Titanium developer since 2009
■ Speaker at CodeStrong 2011
■ Web frameworks expert
■ Several conferences – Symfony Live, Forum PHP, Symfony Day, etc.
■ President of the French Association of PHP Users (afup.org)
■ http://twitter.com/xavierlacot

View Slide

3
Summary
■ Developement with Titanium
■ Short reminder
■ An optimizable process: the lack of a RAD framework
■ Alloy, a unifying framework
■ Goals
■ Simple example
■ Presentation of the architecture
■ View
■ Controllers
■ Models
■ Widgets
■ Styles

View Slide

4
A large panel of available solutions

View Slide

5
What is Titanium ?
« Titanium is an open source framework for building
native desktop and mobile applications using open web
technologies (HTML, CSS, and JavaScript) »

View Slide

6
Three good reasons to adopt Titanium
■ Very popular web languages
■ Easy to learn
■ Widespread
■ Open Standards
■ Cross platform
■ Code once, deploy several times!
■ Really native applications
■ Blazing fast
■ Offline capabilities
■ Access to hardware features
■ Active in background

View Slide

7
The productivity is limited...
■ Some limits to Titanium:
■ For the developer, Titanium is « only » a plateform
■ Not a RAD / MVC framework
■ Writing a UI in JS = ouch
■ Wonderful platform but:
■ Unconstrained
■ Good practices: depends on the developer
■ Many pseudo-MVC frameworks
■ Lack of standardization of skills
■ Heterogeneous contributions

View Slide

8
The existing frameworks...
■ IQ SDK - https://github.com/dev-ique/iqsdk
■ EnJS + Joose + custom classes
■ No community
■ Extanium – http://extanium.org
■ Extjs in Titanium
■ V 0.2.1, nothing since june 2011. No community
■ TiMVC - http://timvc.com/
■ Ti.include(), no use of CommonJS
■ No community
■ Kranium - http://kraniumjs.com/
■ Libraries assembled
■ V 0.1.3, nothing since september 2011. No community

View Slide

9
The existing frameworks...
■ IQ SDK - https://github.com/dev-ique/iqsdk
■ EnJS + Joose + custom classes
■ No community
■ Extanium – http://extanium.org
■ Extjs in Titanium
■ V 0.2.1, nothing since june 2011. No community
■ TiMVC - http://timvc.com/
■ Ti.include(), no use of CommonJS
■ No community
■ Kranium - http://kraniumjs.com/
■ Libraries assembled
■ V 0.1.3, nothing since september 2011. No community
Seriously.
WTF???

View Slide

10
Alloy
■ Alloy
■ Open Source, lead by Appcelerator
■ Apparead in spring 2012 (first beta in june)
■ Uses open components (third party projects)
■ Built on top of node.js, available through npm
■ Already well documented
■ GitHub: 250 stars, 49 forks
■ Test it: http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html

View Slide

11
Goals
■ Productivity
■ Develop faster;
■ Build reusabled libraries;
■ Generate code
■ Force to use good practices
■ Bye bye global variables, Ti.include() nightmares loading 200+ files
during the bootstrap of your applications!
■ Improve the maintenability
■ Today: 1 developer = 1 coding-style
■ Target: uniform application architectures = better reversibility

View Slide

12
Demo time
http://projects.appcelerator.com/alloy/docs/Alloy-bootstrap/index.html

View Slide

13

View Slide

14
Install alloy
■ Pre-requisite before playing:
■ node.js 0.6.3 or newer
■ Titanium SDK + Studio >= 2.1
■ OSX 10.6 or Linux (not windows at the moment)
■ Install the stuff:
$ sudo npm install alloy -g

View Slide

15
Toolsbox
■ A command line tool:
■ new: initializes a new
alloy project
■ compile: compiles the
project for the
« webapp » target
■ run: runs the application
■ generate: generates code
(controller / model)

View Slide

16
Architecture of an alloy project
Alloy code directory
Usual Titanium folders
and files
app/
build/
i18n/
modules/
plugins/
Resources/
manifest
tiapp.xml
Do not write code in Resources, it will be overwritten

View Slide

17
assets (images, sounds,
etc.) of your project.
Copied in Resources/
during compilation
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

18
Controllers, ie. the joints of
your application
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

19
CommonJS librairies:
■ Business classes librairies
■ External libraries (lib/vendor)
Create this folder by hand
Loading with:
require('library')
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

20
Migration classes for your
data models.
Create this folder by hand
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

21
Classes of the data models.
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

22
Styles associated with the
views. *.tss files (Titanium
StyleSheet)
Syntax similar to CSS
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

23
Views of the application:
templates in XML format
No need for Ti.UI.create*
anymore
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

24
Widgets specific to your
application (ie., not bundled
in alloy).
Widgets are graphical /
functional components used
to build the app.
Create this folder by hand.
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

25
Makefile-style file, for
defining pre- et post-
compilation operations:
■ Change the configuration
■ Log informations
■ Deploy on a server
■ etc.
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

26
Litterature
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

27
Declaration of constants and
execution parameters (urls,
variables, etc.).
Declaration of the widgets
dependancies of the
application.
app/
assets/
controllers/
lib/
migrations/
models/
styles/
views/
widgets/
alloy.jmk
README
config.json

View Slide

28
How does it work?
Code written for alloy « Standard » Titanium Code
run / compile

View Slide

29
How does it work?
Code written for alloy « Standard » Titanium Code
run / compile
alloy is a compiler which turns structured, reusable
and modern code into « Titanium code » with
good practices
alloy does not replace Titanium, it complements it.

View Slide

30
Architecture of an alloy application
View
Model
Controller
Styles
execution
Third party
libraries
Widgets
decorates animates
uses
Requires loads

View Slide

31
Views management
■ Views are XML files
■ At least one view (the first « screen ») :
index.xml
■ Views do not define the look and feel of the
application, but only its organization
■ .tss styles allow to decorate the views
(similar to HTML and CSS)

View Slide

32
Views management
■ Example of the main view:

Hello, World

: container of the
application
: Prefixed with Ti.UI.
Attribute ns="..."

View Slide

33
Views management
■ Example of the main view:

Hello, World

Support for classes
and identifiers
Possible to
handle events

View Slide

34
Composition of views
■ Inclusion of views
■ « Require » keyword
■ Possible to divide views into smaller parts
■ Hierarchical approach
■ Reuse partial views

View Slide

35
Associate styles to a view
■ Styles are defined in .tss files
■ name_of_view.xml ↔ name_of_view.tss

Hello

app/views/toto.xml
"#a" : {
"backgroundColor": "red",
"height": "100"
},
"#b" : {
"height": Ti.UI.SIZE
},
"#t" : {
"color": "black"
}
app/styles/toto.tss

View Slide

36
Controllers, some activity in the view...
■ Same principle for controllers:
■ name_of_view.xml ↔ name_of_view.js

Hello
Batman

app/views/toto.xml
$.a.backgroundColor = 'blue';
$.b.addEventListener('click', function(e){
$.t.text = 'Robin';
});
function doClick(e) {
$.t.color = 'green';
}
app/controllers/toto.js

View Slide

37
Controllers, some activity in the view...
■ Same principle for controllers:
■ name_of_view.xml ↔ name_of_view.js

Hello
Batman

app/views/toto.xml
$.a.backgroundColor = 'blue';
$.b.addEventListener('click', function(e){
$.t.text = 'Robin';
});
function doClick(e) {
$.t.color = 'green';
}
app/controllers/toto.js
Add a behavior with an
event listener
Add a behavior in the
View

View Slide

38
Data management
■ Your applications manage data
■ These data are stored through Models
■ alloy manages models by using:
■ backbone
■ adaptors for storing the data
Application
(controller)
Models (extend
Backbone.Model)
Adaptors
provided by
alloy
storage

View Slide

39
Several adaptors available
■ sql
■ SQLite database
■ (iOS and Android targets only)
■ localStorage
■ HTML5 localStorage
■ (« MobileWeb » target only)
■ localDefault
■ SQLite or localStorage depending on the plateform
■ properties : uses Ti.API.Properties (yuck)

View Slide

View Slide

41
How to create a data model
■ alloy does the job:
$ 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

View Slide

42
is_enabled:boolean
.__ .__
_____ | | | | ____ ___.__.
is_enabled:boolean
Model creation command
Name of the file to create
Adaptor to use
List of the fields (except
for localStorage)
■ Generates:
■ The definition of the model in app/models/photo.js
■ A migration in app/migrations

View Slide

43
Usage of a data model (1/2)
■ Once the model is defined, we can use it in
the controllers:
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);

View Slide

44
Usage of a data model (2/2)
■ Models extend Backbone.Model!
■ cf. http://backbonejs.org/
// create and fetch the collection
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);
});

View Slide

45
Widgets, for a sprinkle of reusability
■ A widget is a module with its own MVC
logic
■ A widget is a reusable package, autonomous,
which can be imported in every application
■ A widget can bring views, or simply
functionalities

View Slide

46
Widgets, for a sprinkle of reusability
■ Every « generic » part of an application should be developed as
a widget
■ Datepicker
■ Oauth connection form
■ etc.
■ Creating a widget is simple:
$ alloy generate widget com.picmybox.hellobutton
.__ .__
_____ | | | | ____ ___.__.
\__ \ | | | | / _ < | |
/ __ \| |_| |_( )___ |
(____ /____/____/\____// ____|
\/ \/
Alloy by Appcelerator. The MVC app framework for Titanium.
[INFO] Generated widget named com.picmybox.hellobutton

View Slide

47
Structure of a Widget
■ The code is generated in app/widgets/XXX
■ A widget is like an whole application
■ Views
■ Controller
■ Models
■ Librairies
■ widget.json which describes the widget

View Slide

48
Using a Widget
■ You can use widgets in views:
■ A widget comes with its own logic
■ May be overriden locally in the application
■ If present, assets will be copied in Resource/ at
compile time

View Slide

49
Some words about widgets...
■ Appcelerator wants to ease up the distribution of
widgets – in the Marketplace?
■ At the moment, no packaging of widgets as an archive
(possible in a near future?)
■ A widget may expose a public API for the application :
// widget.js controller file
exports.doSomething = function()
{
alert('Hello pony');
}
// application controller
$.foo.doSomething();
exports keyword: defines a
public API (kisses CommonJS)
Call to the method through the
name of the Widget

View Slide

50
Debugging applications
■ Debug (and also compilation / distribution) is
done in Titanium Studio, just like usually with
Ti apps
■ The precompilation alloy → Titanium can
detect some trivial errors. For example:
[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

View Slide

51
As a conclusion...
alloy:
■ A great tool to strongly structure the
developement with Titanium;
■ brings an answer to those who do not
know how to start (well) a Ti project;
■ eases the use of quality js libraries.
alloy is still in pre-release
■ Hey, it works quite well;
■ If you like playing, go ahead and give it
a try!

View Slide

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

View Slide

View Slide

alloy, a MVC framework for Appcelerator Titanium mobile

alloy, a MVC framework for Appcelerator Titanium mobile

Xavier Lacot

More Decks by Xavier Lacot

Other Decks in Programming

Featured

Transcript