Mix-IT 2015
-
Upload
christian-brousseau -
Category
Technology
-
view
308 -
download
1
Transcript of Mix-IT 2015
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!