Titanium, Native Script, React Native, and others promise cross platform mobile applications from a common code base. Let's take a closer look at each platform's advantages and disadvantages to find out what is the best option for you and your project.
2. Josh JEnsen ABOUT Me
mobile application consultant,
entrepreneur, Technology Addict,
OCR enthusiast, Beer Drinker.
@joshJ
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
3. Additional Sessions
Exploring React.Native
15:30 (3:30pm) Today
Me
Expanding Your
Nativescript App with
Native Libraries
16:30 (4:30pm) Today
Stephen Feather
State of Titanium
10:00am Tomorrow
Rick Blalock
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
4. What this session is Not
• A study in best practices
• a comprehensive look at each platform
• A time to bash one platform or another
5. What this session is
• A developers journey through 3 platforms
• Initial Impressions and results
• A tool for deciding what is right for you
8. Define: Abstracted Platform
A platform where an API is abstracted away from or
separated from the primary language by proxy and/or
runtime.
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var
myView
=
Ti.UI.createView();
UIView
*
myView
=
[[UIView
alloc]
init];Obj c
Titanium
NativeScript
React Native
var
myView
=
UIView.alloc().init();
<View></View>
10. BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript React Native Titanium
Open Source: Free Open Source: Free Open Source: Free*
Seat: $39/mo Free Indie: $39/mo
Add-ons: vary FRee Team: $259/seat/mo
Enterprise: call FRee Enterprise: call
Platform Pricing
*Appcelerator’s distributed open source offering is one to two version behind their commercial offering.
11. BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript React Native Titanium
Open Source ○ ○ ○
Licence Apache BSD Apache / Proprietary
iOS ○ ○ ○
Android ○ ○ ○
Windows Coming Soon No Limited
Platform Quick Facts
Source: https://github.com/skypanther/mobileframeworks
12. BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
platform Tooling
NativeScript React Native Titanium
Node.JS 0.12.x 4.x 0.12.x
Xcode Latest 6.3+ 6.4.x
Gradle Required N/A N/A
ANT N/A N/A REQUIRED
JDK Latest Latest Latest
HomeBrew Recommended Recommended N/A
16. Build Times: Live Reload
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript:
React Native:
Titanium:
<1 second
Instant
1+ seconds (requires Subscription or 3rd party tooling)
28. Initializing an
Application
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Base File
var
application
=
require('application');
application.mainModule
=
'todo/list';
application.cssFile
=
'./app.css';
application.start();
29. Initializing an
Application
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var
React
=
require('react-‐native');
var
ListPage
=
require('./app/pages/list');
var
{AppRegistry,
StyleSheet,
NavigatorIOS}
=
React;
var
todomjs
=
React.createClass({
render:
function()
{
return
(
<NavigatorIOS
style={styles.topLevelNavigator}
navigationBarHidden={true}
initialRoute={{
title:
'',
component:
ListPage
}}
/>
);
}
});
AppRegistry.registerComponent('todomjs',
()
=>
todomjs);
Base File
30. Initializing an
Application
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Base Filevar
application
=
require('application');
if
(OS_IOS)
{
application.navWindow
=
$.navWindow;
}
$.navWindow.open();
application.init();
31. Getting to Hello World
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
33. Getting to
Hello World
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var
React
=
require('react-‐native');
var
{
AppRegistry,
Text
}
=
React;
var
todomjs
=
React.createClass({
render:
function()
{
return
(
<Text>Hello
World</Text>
);
}
});
AppRegistry.registerComponent('todomjs',
()
=>
todomjs);
34. BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Alloy>
<Window>
<Label>Hello
World</Label>
</Window>
</Alloy>
"Window":
{
backgroundColor:
"#fff"
}
$.getView().open();
Getting to
Hello World
Titanium
36. Adding
Custom Fonts
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Font File
if
(application.ios)
{
var
fontModule
=
require('ui/styling/font');
fontModule.ios.registerFont('fontawesome-‐webfont.ttf');
}
.fa
{
font-‐family:
FontAwesome;
}
37. Adding
Custom Fonts
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
1. Add the font files to your resource files
2. Edit your Info.plist: Add a new entry with the key Fonts
provided by application.
3. For each of your files, add the file name to this array
Source: http://stackoverflow.com/questions/4969329/how-to-include-and-use-new-fonts-in-iphone-
sdk
52. Tap Event Handlers
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label
text="back"
tap="onBackTap"
/>
exports.onBackTap
=
function()
{
};
List.xml
List.JS
53. Tap Event Handlers
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<TouchableOpacity
onPress={()
=>
this.backOnPress()}
activeOpacity={0.2}
>
<Text>back</Text>
</TouchableOpacity>
List.JS
54. Tap Event Handlers
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label
id="backButton"></Label>
$.backButton.addEventListener('click',
backOnPress);
List.xml
List.JS
55. BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript:
React Native:
Titanium:
Tap
Press
Click or singletap
Tap Event Handlers
57. Code Reuse
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page
xmlns:customOtherControls="xml-‐declaration/mymodulewithxml">
<customOtherControls:MyControl
/>
</Page>
Source: http://docs.nativescript.org/ui-with-xml#example-custom-xml-based-component-with-code-file
Var Name Folder
File Name
58. Code Reuse
React NAtive
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
renderBackButton:
function()
{
if
(this.props.showBack)
{
return
(
<TouchableOpacity
style={styles.touchableAreaBackIcon}
onPress={()
=>
this.backOnPress()}
activeOpacity={0.2}
>
<Icon
name='fontawesome|arrow-‐circle-‐o-‐left'
size={30}
color='#ead7d7'
style={styles.backButtonIcon}
/>
</TouchableOpacity>
);
}
}
{this.renderBackButton()}
59. Code Reuse
React NAtive
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<TodoRow
rowParams={{
sectionID,
rowID,
highlightRow,
updateRow:
this.updateRow,
deleteRow:
this.deleteRow,
rowOnPress:
this.rowOnPress
}}
rowData={rowData}
/>
var
TodoRow
=
require('./../components/todorow');
this.props
71. Pros & CONS NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
‣ Best Feature: Direct API access
Pros Cons
Direct API Access No JS Encryption
Excellent Support and Response Time to Tickets Very Young
Open Source You really need to know typeScript
Cross-platform UI abstractions Limited Cross-platform UI abstractions
Difficult Documentation
72. Pros & CONS React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
‣ Best Feature: Live Reload
Pros Cons
Live Reload / No compile Time No JS Encryption
Growing Community Very Young
Completely Open Source ES6 Fluency is almost required
Expressive Markup React Methodology Learning Curve
Component Modularity Limited Cross-platform Apis
Modules Required for Native API access
73. Pros & CONS Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
‣ Best Feature: Maturity
Pros Cons
JS Source EnCryption Technical Debt
very Mature Platform OSS version is behind
Largest Community Modules Required for Native API access
Extensive API docs Compile Time
Extensive Cross-platform APIs