Build native mobile apps using JavaScript and Appcelerator

April 17th 2015Christian Brousseau

@TheBrousse

Christian Brousseau

Husband

Father of 2

Book Author

Speaker (mostly for fun)

I build mobile apps for a living

Founder, CEO Things Are Moving

@TheBrousse

What is Titanium

@TheBrousse

How does it work?

Native Application

Native components

JavaScript Runtime

JavaScript Code

Titanium Code(JavaScript)

Native Code

Objective-CJavaOther

TitaniumCompiler

NativeCompiler

@TheBrousse

Under the hood

Operating System

JavaScript - Native Bridge

UI API Phone API Modules

Your Application

@TheBrousse

Enough with the little boxes already!

@TheBrousse

var window = Ti.UI.createWindow({

backgroundColor: ‘white’

});

var label = Ti.UI.createLabel({

color: ‘black’,

text: ‘Hello World’

});

label.addEventListener(‘click’,

alert(‘YOU CLICKED!’);

);

window.add(label);

window.open();

Resources/app.js

Alloy

@TheBrousse

How does “that” work?

Titanium Code

Native Code

Titanium Compiler

Native compiler

Alloy Code

JavaScriptXMLTSS

Alloy Pre-compiler

@TheBrousse

Project Structure@TheBrousse

You should see a pattern here…

The Same Hello World

Using Alloy

@TheBrousse

Our window structure@TheBrousse

<Alloy>

<Window class="container">

<Label id="label">

Hello, World

</Label>

</Window>

</Alloy>

app/index.xml

Our window style@TheBrousse

".container": {

backgroundColor: "white"

}

"Label": {

width: Ti.UI.SIZE,

height: Ti.UI.SIZE,

color: "#000"

}

"#label": {

font: {

fontSize: 12

}

}

app/index.tss

Where is the JavaScript?@TheBrousse

$.index.open();

app/index.js

Titanium vs. Appcelerator@TheBrousse

There is a book for that

Christian Brousseau

@TheBrousse

Let’s dive in!!!!!!!!!!!!!!!

@TheBrousse

Because we are 1337@TheBrousse

@TheBrousse

We need tools…

Install Titanium@TheBrousse

Download the SDK@TheBrousse

Initial Setup@TheBrousse

@TheBrousse

Let’s play!