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.

1. Building Native
Mobile Apps
with Javascript

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

6. Mobile LandScape
Native
Hybrid
Transpiled
Abstracted
‣ Objective c, Swift, Java
‣ PhoneGap/Cordova
‣ Xamarin
‣ NativeScript, React Native, Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

7. Define ab·stract·ed
consider (something)
theoretically or separately
from something else
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

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>

9. Abstracted platforms
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript React Native Titanium

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

13. platform Setup
‣ https://facebook.github.io/react-native/docs/getting-started.html
‣ https://docs.nativescript.org/getting-started#install-nativescript-and-configure-your-environment
‣ http://docs.appcelerator.com/platform/latest/#!/guide/Installation_and_Configuration
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

14. Build
Times
Initial
0
17.5
35
52.5
70
Build Times
60.347
14.345
4.646
NativeScript React Native Titanium

15. Build
Times
Subsequent
0
1.25
2.5
3.75
5
Build Times
3.504
0.68
4.645
NativeScript React Native Titanium

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)

17. Mobilejs.io Todo App
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
http://mobilejs.io - Source

18. Application Structure
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

19. Application
Structure
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Inline Css,JS,XML
Base File
Build Files
Fonts
Resources

20. Application
Structure
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Page
Base File
Build Files
Row Component

21. Application
Structure
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Controllers
Base File
Views
Styles
Build Files

22. Layout Methods
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

23. Layouts
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<StackLayout
orientation="horizontal"
id="formWrapper">
<Label
id=“selectAllIcon"
/>
<TextField
id=“textInput"
/>
</StackLayout>
#formWrapper
{
margin-­‐right:
10;
margin-­‐top:
10;
margin-­‐left:
10;
}
#textInput
{
height:
60;
padding:
10;
}
#selectAllIcon
{
margin-­‐left:
18;
width:
30;
height:
30;
}

24. Layouts
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<AbsoluteLayout
/>
<DockLayout
/>
<GridLayout
/>
<StackLayout
/>
<WrapLayout
/>

25. Layouts React NAtive
BUILDING NATIVE MOBILE APPS WITH
JAVASCRIPT
<View
style={styles.formWrapper}>
<Icon
name='fontawesome|chevron-­‐down'
style={styles.selectAllIcon}
/>
<TextInput
ref="textInput"
style={styles.textInput}
/>
</View>
formWrapper:
{
flexDirection:
'row'
},
selectAllIcon:
{
alignSelf:
'center',
width:
40,
height:
40
},
textInput:
{
flex:
1,
height:
60,
padding:
10,
}

26. <View
id="formWrapper">
<Label
id="selectAllIcon"></Label>
<TextField
id="textInput"
/>
</View>
Layouts
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
"#formWrapper":
{
top:
0,
height:
Ti.UI.SIZE,
layout:
"horizontal"
}
"#selectAllIcon":
{
left:
10,
height:
60,
width:
30
}
"#textInput":
{
width:
Ti.UI.FILL,
height:
60
}

27. Initializing an Application
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

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

32. Getting to
Hello World
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page
xmlns="http://www.nativescript.org/tns.xsd">
<Label
text="Hello
World"/>
</Page>

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

35. Adding Custom Fonts
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

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

38. Adding
Custom Fonts
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
1. Add the font files to App > assets
1. > iphone > fonts
2. > android > fonts

39. Label
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

40. Label
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label
text="Todo"
id=“header"
/>
#header
{
font-­‐family:
"HelveticaNeueThin";
font-­‐size:
80;
text-­‐align:
center;
color:
#d2d2d2;
right:
10;
}

41. Label
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Text
style={styles.header}>todos</Text>
header:
{
fontFamily:
'Helvetica
Neue',
fontWeight:
'100',
fontSize:
80,
textAlign:
'center',
color:
'#e7e7e7',
marginTop:
20
}

42. Label
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label
id="header">Todos</Label>
"#header":
{
top:
20,
color:
"#e7e7e7",
textAlign:
"center",
font:
{
fontFamily:
"HelveticaNeue-­‐Thin",
fontSize:
80,
}
}

43. ListView / Table View
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

44. ListView
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page
xmlns="http://www.nativescript.org/tns.xsd"
navigatedTo="navigatedTo">
</Page>
exports.navigatedTo
=
function(args)
{
var
pageData
=
new
observableModule.Observable();
page.bindingContext
=
pageData;
}
List.xml
List.JS

45. ListView
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<ListView
items="{{
todoItems
}}"
id="listView"
itemTap="rowOnPress"
separatorColor="#fff">
<ListView.itemTemplate>
<StackLayout
orientation="horizontal"
cssClass="todo-­‐row">
<Label
text="{{
isChecked
?
''
:
''
}}"
color="{{
iconColor
}}"
tap="onPressCheckbox"
cssClass="fa
checkbox"
/>
<Label
text="{{
text
}}"
/>
</StackLayout>
</ListView.itemTemplate>
</ListView>
List.xml
pageData.set("todoItems",
todoItems);
List.JS

46. ListView
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
todoItems.unshift(_.extend({
text:
text,
children:
new
observableArray.ObservableArray([])
},
config.rowTypes.notDone));
<ListView
items="{{
todoItems
}}"
id="listView"
itemTap="rowOnPress"
separatorColor="#fff">
<ListView.itemTemplate>
<StackLayout
orientation="horizontal"
cssClass="todo-­‐row">
<Label
text="{{
isChecked
?
''
:
''
}}"
color="{{
iconColor
}}"
tap="onPressCheckbox"
cssClass="fa
checkbox"
/>
<Label
text="{{
text
}}"
/>
</StackLayout>
</ListView.itemTemplate>
</ListView>
List.xml
List.JS

47. ListView React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var
ListPage
=
React.createClass({
getInitialState:
function()
{
this.ds
=
new
ListView.DataSource({rowHasChanged:
(r1,
r2)
=>
r1.rowID
!==
r2.rowID});
return
{
todoItems:
this.props.todoItems
||
[],
dataSource:
this.ds.cloneWithRows(this.props.todoItems
||
[]),
};
}
}

48. ListView React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<ListView
style={styles.todoListView}
initialListSize={15}
dataSource={this.state.dataSource}
renderRow={(rowData,
sectionID,
rowID,
highlightRow)
=>
(
<TodoRow
rowParams={{
sectionID,
rowID,
highlightRow,
updateRow:
this.updateRow,
deleteRow:
this.deleteRow,
rowOnPress:
this.rowOnPress
}}
rowData={rowData}
/>
)}
automaticallyAdjustContentInsets={false}
/>

49. ListView React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
this.state.todoItems.unshift(_.extend({
rowID:
new
Date().getTime(),
text:
e.nativeEvent.text,
children:
[]
},
config.rowTypes.notDone));
this.setState({
dataSource:
this.ds.cloneWithRows(this.state.todoItems)
},
function()
{
this.clearTextInput();
});

50. TableView
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<TableView
id="todoTable"
/>
List.xml
$.todoItems
=
args.todoItems
||
[];
function
createRow(e)
{
$.todoItems.unshift(_.extend({
text:
e.value,
children:
[]
},
config.rowTypes.notDone));
$.todoTable.setData(buildRows($.todoItems));
}
List.js

51. Tap Event Handlers
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

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

56. Code Reuse
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

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

60. Code Reuse
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Alloy.createController('list',
{});
var
args
=
arguments[0]
||
{};

61. Navigation
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

62. NAvigation
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var
frameModule
=
require("ui/frame");
frameModule.topmost().navigate({
moduleName:
"todo/list",
context:
{
rowID:
args.index,
updateRowChildren:
updateRowChildren,
todoItems:
todoItems.getItem(args.index).children
}
});

63. NAvigation / Code Reuse
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page
xmlns="http://www.nativescript.org/tns.xsd"
navigatedTo="navigatedTo">
</Page>
exports.navigatedTo
=
function(args)
{
var
page
=
args.object;
};
page.navigationContext

64. NAvigation
REact NAtive
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
this.props.navigator.push({
title:
'',
component:
require('./list'),
passProps:
{
rowID:
rowID,
showBack:
true,
todoItems:
this.state.todoItems[rowID].children,
updateRowChildren:
this.updateRowChildren
}
});

65. NAvigation
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
application.navWindow.openWindow(
Alloy.createController('list',
{
rowID:
e.index,
todoItems:
rowData.children
||
[],
updateRowChildren:
updateRowChildren
}).getView()
);
var
application
=
require('application');
if
(OS_IOS)
{
application.navWindow
=
$.navWindow;
}

66. Extending Each Platform
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

67. Extending
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var
device
=
AVCaptureDevice.defaultDeviceWithMediaType(AVMediaTypeVideo);
flashlight.on
=
function()
{
this._checkAvailability();
device.lockForConfiguration(null);
device.torchMode
=
AVCaptureTorchMode.AVCaptureTorchModeOn;
device.flashMode
=
AVCaptureFlashMode.AVCaptureFlashModeOn;
device.unlockForConfiguration();
};
Source: https://github.com/tjvantoll/nativescript-flashlight

68. Extending React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var
React
=
require('react-­‐native');
var
{
NativeModules
}
=
React;
var
{
RNControlFlashlight
}
=
NativeModules;
RNControlFlashlight.turnFlashlight("flashlightOn",
function
errorCallback(results)
{
console.log('JS
Error:
'
+
results['errMsg']);
},
function
successCallback(results)
{
console.log('JS
Success:
'
+
results['successMsg']);
}
);
Source: https://github.com/rhaker/react-native-control-flashlight-ios

69. Extending Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
-­‐(void)turnFlashLightOn:(id)args
{
if
([device
hasTorch])
{
[device
lockForConfiguration:nil];
[device
setTorchMode:AVCaptureTorchModeOn];
[device
unlockForConfiguration];
}
}
var
NappFlashLight
=
require('NappFlashLight');
NappFlashLight.turnFlashLightOn()
Source: https://github.com/viezel/NappFlashLight

70. Pros & Cons
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

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

74. Native Mobile Apps
with Javascript

75. THANK YOU
646.876.2777
Josh@pixelflavor.com
@joshJ
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Questions?