Download - Mix-IT 2015
![Page 1: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/1.jpg)
Build native mobile apps using JavaScript and Appcelerator
April 17th 2015Christian Brousseau
@TheBrousse
![Page 2: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/2.jpg)
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
![Page 3: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/3.jpg)
What is Titanium
@TheBrousse
![Page 4: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/4.jpg)
How does it work?
Native Application
Native components
JavaScript Runtime
JavaScript Code
Titanium Code(JavaScript)
Native Code
Objective-CJavaOther
TitaniumCompiler
NativeCompiler
@TheBrousse
![Page 5: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/5.jpg)
Under the hood
Operating System
JavaScript - Native Bridge
UI API Phone API Modules
Your Application
@TheBrousse
![Page 6: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/6.jpg)
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
![Page 7: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/7.jpg)
Alloy
@TheBrousse
![Page 8: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/8.jpg)
How does “that” work?
Titanium Code
Native Code
Titanium Compiler
Native compiler
Alloy Code
JavaScriptXMLTSS
Alloy Pre-compiler
@TheBrousse
![Page 9: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/9.jpg)
Project Structure@TheBrousse
You should see a pattern here…
![Page 10: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/10.jpg)
The Same Hello World
Using Alloy
@TheBrousse
![Page 11: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/11.jpg)
Our window structure@TheBrousse
<Alloy>
<Window class="container">
<Label id="label">
Hello, World
</Label>
</Window>
</Alloy>
app/index.xml
![Page 12: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/12.jpg)
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
![Page 13: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/13.jpg)
Where is the JavaScript?@TheBrousse
$.index.open();
app/index.js
![Page 14: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/14.jpg)
Titanium vs. Appcelerator@TheBrousse
![Page 15: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/15.jpg)
There is a book for that
Christian Brousseau
@TheBrousse
![Page 16: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/16.jpg)
Let’s dive in!!!!!!!!!!!!!!!
@TheBrousse
![Page 17: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/17.jpg)
Because we are 1337@TheBrousse
![Page 18: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/18.jpg)
@TheBrousse
We need tools…
![Page 19: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/19.jpg)
Install Titanium@TheBrousse
![Page 20: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/20.jpg)
Download the SDK@TheBrousse
![Page 21: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/21.jpg)
Initial Setup@TheBrousse
![Page 22: Mix-IT 2015](https://reader031.vdocuments.net/reader031/viewer/2022032217/55a7781e1a28ab580a8b4788/html5/thumbnails/22.jpg)
@TheBrousse
Let’s play!