/
index.html
192 lines (159 loc) · 6.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Appcelerator Titanium Presentation by Florent Lamoureux @flrent</title>
<meta name="description" content="A framework for easily creating beautiful natives app">
<meta name="author" content="Florent Lamoureux">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- If the query includes 'print-pdf', use the PDF print sheet -->
<script>
document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section >
<h1>Appcelerator Titanium</h1>
<h3>Native multi platform apps in JavaScript</h3>
<p>
<small>by <a href="http://github.com/flrent">Florent Lamoureux</a> / <a href="http://twitter.com/flrent">@flrent</a></small>
</p>
</section>
<section>
<h2>Who am I ?</h2>
<ul>
<li>Front-end developer</li>
<li>Work at Ziliko (next door!) with Backbone Boilerplate, grunt.js, less...</li>
<li>Mobile freelance (Sencha Touch 2, Titanium, PhoneGap) for 2 years</li>
<li>Migrii cofounder</li>
</ul>
</section>
<!-- Example of nested vertical slides -->
<section>
<h2>What will I present today ?</h2>
<p><img src="logo.png"></p>
<p>Appcelerator <strong>Inc</strong></p>
<p>Appcelerator <strong>Titanium SDK</strong></p>
<p>Small app live coding</p>
<p>Appcelerator <strong>Cloud Services</strong></p>
</section>
<section>
<h2>Appcelerator Inc</h2>
<ul>
<li>Founded in 2006, based in Mountain View, CA</li>
<li>~140 employees</li>
<li>Private held startup, venture-backed</li>
<li>Mixed business model between premium support and cloud services</li>
<li>Bought Aptana to create Titanium Studio in 2011</li>
<li>Codestrong event, every year</li>
<li>350,000 developers, 50,000 apps launched</li>
</ul>
</section>
<section>
<h2>Appcelerator Titanium SDK</h2>
<p><img style="border:0;" src="banner-sdk.png"></p>
<ul>
<li>Simple idea : same code, multiple platforms</li>
<li>Code most people master : web development</li>
<li>Currently supports iOS, Android, Blackberry, and W8/WP8 in early 2013</li>
<li>Desktop version exists, TiDesk</li>
</ul>
</section>
<section>
<h2>How does Titanium really work ?</h2>
<ol>
<li>You write JavaScript code</li>
<li>Titanium API takes your JS code and links it with native functions</li>
<li>At build time, Titanium API packages only what you need</li>
<li>At runtime, your code is evaluated and native functions are called</li>
</ol>
</section>
<section>
<h2>Why it's so great ?</h2>
<ol>
<li>Really fast to get started, on multiple platforms</li>
<li>Native user experience, native UIs</li>
<li>Rich SDK with 2D/3D animations, APIs modules(Facebook, 4square, Twitter..)</li>
<li>Performance over mobile web</li>
<li>It's JavaScript</li>
</ol>
</section>
<section>
<h2>Why it's not so great ?</h2>
<ol>
<li>You don't really have access to the real code</li>
<li>Even if the SDK is rich, it's hard to get out from the framework</li>
<li>Appcelerator maintains it - a company : some features needs a subscription</li>
<li>It's JavaScript</li>
</ol>
</section>
<section>
<h2>Simple demo</h2>
<p>Building a JS Montreal app</p>
</section>
<section>
<h2>ACS and modules</h2>
<p>A lot of modules available (free or paying)</p>
<p>From the developer website interface, you can add modules like Notifications, Users data storage, Photos, services...</p>
</section>
<section>
<h2>So when can you use Titanium ?</h2>
<ul>
<li>You want to write a simple (= non complex algorithms, graphics managements) app</li>
<li>You don't want to learn a native language/framework</li>
<li>Web mobile is good, but you want native feel for your users</li>
</ul>
</section>
<section>
<h2>JavaScript Montreal</h2>
<br>
<p>The app is on Google Play and soon on App Store</p>
<p>Google Play <a href="https://play.google.com/store/apps/details?id=fr.florentlamoureux.jsmontreal">https://play.google.com/store/apps/details?id=fr.florentlamoureux.jsmontreal</a></p>
<p>App Store : soon</p>
</section>
<section>
<h2>That's all for tonight !</h2>
<p>Any questions ?</p>
<br>
<p><a href="http://twitter.com/flrent">@flrent</a></p>
<p><a href="http://github.com/flrent">github.com/flrent</a></p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'zoom', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
// { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>