Connect.js 2015 - Building Native Mobile Applications with Javascript

Building Native
Mobile Apps
with Javascript

Josh JEnsen ABOUT Me
mobile application consultant,
entrepreneur, Technology Addict,
OCR enthusiast, Beer Drinker.
@joshJ
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT

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

What this session is Not
• A study in best practices
• a comprehensive look at each platform
• A time to bash one platform or another

What this session is
• A developers journey through 3 platforms
• Initial Impressions and results
• A tool for deciding what is right for you

Mobile LandScape
Native
Hybrid
Transpiled
Abstracted
‣ Objective c, Swift, Java
‣ PhoneGap/Cordova
‣ Xamarin
‣ NativeScript, React Native, Titanium

Define ab·stract·ed
consider (something)
theoretically or separately
from something else

Define: Abstracted Platform
A platform where an API is abstracted away from or
separated from the primary language by proxy and/or
runtime.
var
myView
=
Ti.UI.createView();
UIView
*
myView
=
[[UIView
alloc]
init];Obj c
Titanium
NativeScript
React Native
var
myView
=
UIView.alloc().init();
<View></View>

Abstracted platforms
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.

Open Source ○ ○ ○
Licence Apache BSD Apache / Proprietary
iOS ○ ○ ○
Android ○ ○ ○
Windows Coming Soon No Limited
Platform Quick Facts
Source: https://github.com/skypanther/mobileframeworks

platform Tooling
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

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

Build
Times
Initial
0
17.5
35
52.5
70
Build Times
60.347
14.345
4.646

Build
Times
Subsequent
0
1.25
2.5
3.75
5
Build Times
3.504
0.68
4.645

Build Times: Live Reload
NativeScript:
React Native:
Titanium:
<1 second
Instant
1+ seconds (requires Subscription or 3rd party tooling)

Mobilejs.io Todo App
http://mobilejs.io - Source

Application Structure

Application
Structure
NativeScript
Inline Css,JS,XML
Base File
Build Files
Fonts
Resources

Application
Structure
React Native
Page
Base File
Build Files
Row Component

Application
Structure
Titanium
Controllers
Base File
Views
Styles
Build Files

Layout Methods

Layouts
NativeScript
<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;

}

Layouts
NativeScript
<AbsoluteLayout
/>
<DockLayout
/>
<GridLayout
/>
<StackLayout
/>
<WrapLayout
/>

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,

}

<View
id="formWrapper">

<Label
id="selectAllIcon"></Label>

<TextField
id="textInput"
/>

</View>

Layouts
Titanium
"#formWrapper":
{

top:
0,

height:
Ti.UI.SIZE,

layout:
"horizontal"

}

"#selectAllIcon":
{

left:
10,

height:
60,

width:
30

}

"#textInput":
{

width:
Ti.UI.FILL,

height:
60

}

Initializing an Application

Initializing an
Application
NativeScript
Base File
var
application
=
require('application');

application.mainModule
=
'todo/list';

application.cssFile
=
'./app.css';

application.start();

Initializing an
Application
React Native
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

Initializing an
Application
Titanium
Base Filevar
application
=

if
(OS_IOS)
{

application.navWindow
=
$.navWindow;

}

$.navWindow.open();

application.init();

Getting to Hello World

Getting to
Hello World
NativeScript
<Page
xmlns="http://www.nativescript.org/tns.xsd">

<Label
text="Hello
World"/>

</Page>

Getting to
Hello World
React Native
var
React
=

var
{

AppRegistry,

Text

}
=
React;

var
todomjs
=
React.createClass({

render:
function()
{

return
(

<Text>Hello
World</Text>

);

}

});

AppRegistry.registerComponent('todomjs',
()
=>
todomjs);

<Alloy>

<Window>

<Label>Hello
World</Label>

</Window>

</Alloy>
"Window":
{

backgroundColor:
"#fff"

}
$.getView().open();
Getting to
Hello World
Titanium

Adding Custom Fonts

Adding
Custom Fonts
NativeScript
Font File
if
(application.ios)
{

var
fontModule
=
require('ui/styling/font');

fontModule.ios.registerFont('fontawesome-‐webfont.ttf');

}
.fa
{

font-‐family:
FontAwesome;

}

Adding
Custom Fonts
React Native
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

Adding
Custom Fonts
Titanium
1. Add the font files to App > assets
1. > iphone > fonts
2. > android > fonts

Label

Label
NativeScript
<Label
text="Todo"
id=“header"
/>
#header
{

font-‐family:
"HelveticaNeueThin";

font-‐size:
80;

text-‐align:
center;

color:
#d2d2d2;

right:
10;

}

Label
React Native
<Text
style={styles.header}>todos</Text>
header:
{

fontFamily:
'Helvetica
Neue',

fontWeight:
'100',

fontSize:
80,

textAlign:
'center',

color:
'#e7e7e7',

marginTop:
20

}

Label
Titanium
<Label
id="header">Todos</Label>
"#header":
{

top:
20,

color:
"#e7e7e7",

textAlign:
"center",

font:
{

fontFamily:
"HelveticaNeue-‐Thin",

fontSize:
80,

}

}

ListView / Table View

ListView
NativeScript
<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

ListView
NativeScript

<ListView
items="{{
todoItems
}}"
id="listView"
itemTap="rowOnPress"

separatorColor="#fff">

<ListView.itemTemplate>

<StackLayout
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

ListView
NativeScript
todoItems.unshift(_.extend({

text:
text,

children:
new
observableArray.ObservableArray([])

},
config.rowTypes.notDone));

<ListView
items="{{
todoItems
}}"
id="listView"
itemTap="rowOnPress"

separatorColor="#fff">

<ListView.itemTemplate>

<StackLayout
cssClass="todo-‐row">

<Label
text="{{
isChecked
?
''
:
''
}}"
color="{{
iconColor
}}"

tap="onPressCheckbox"
cssClass="fa
checkbox"

/>

<Label
text="{{
text
}}"
/>

</StackLayout>

</ListView.itemTemplate>

</ListView>

List.xml
List.JS

ListView React Native
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
||
[]),

};

}

}

<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}

/>

this.state.todoItems.unshift(_.extend({

rowID:
new
Date().getTime(),

text:
e.nativeEvent.text,

children:
[]

},

this.setState({

dataSource:
this.ds.cloneWithRows(this.state.todoItems)

},
function()
{

this.clearTextInput();

});

TableView
Titanium
<TableView
id="todoTable"
/>
List.xml
$.todoItems
=
args.todoItems
||
[];

function
createRow(e)
{

$.todoItems.unshift(_.extend({

text:
e.value,

children:
[]

},

$.todoTable.setData(buildRows($.todoItems));

}

List.js

Tap Event Handlers

Tap Event Handlers
NativeScript
<Label
text="back"
tap="onBackTap"
/>
exports.onBackTap
=
function()
{

};
List.xml
List.JS

Tap Event Handlers
React Native
<TouchableOpacity

onPress={()
=>
this.backOnPress()}

activeOpacity={0.2}

>

<Text>back</Text>

</TouchableOpacity>
List.JS

Tap Event Handlers
Titanium
<Label
id="backButton"></Label>
$.backButton.addEventListener('click',
backOnPress);
List.xml
List.JS

NativeScript:
React Native:
Titanium:
Tap
Press
Click or singletap
Tap Event Handlers

Code Reuse

Code Reuse
NativeScript
<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

Code Reuse
React NAtive
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()}

Code Reuse
React NAtive
<TodoRow
rowParams={{

sectionID,

rowID,

highlightRow,

updateRow:
this.updateRow,

deleteRow:
this.deleteRow,

rowOnPress:
this.rowOnPress

}}
rowData={rowData}
/>
var
TodoRow
=
require('./../components/todorow');
this.props

Code Reuse
Titanium
Alloy.createController('list',
{});
var
args
=
arguments[0]
||
{};

Navigation

NAvigation
NativeScript
var
frameModule
=
require("ui/frame");

frameModule.topmost().navigate({

moduleName:
"todo/list",

context:
{

rowID:
args.index,

updateRowChildren:
updateRowChildren,

todoItems:
todoItems.getItem(args.index).children

}

});

NAvigation / Code Reuse
NativeScript
<Page
xmlns="http://www.nativescript.org/tns.xsd"
navigatedTo="navigatedTo">

</Page>
exports.navigatedTo
=
function(args)
{

var
page
=
args.object;

};
page.navigationContext

NAvigation
REact NAtive

this.props.navigator.push({

title:
'',

component:
require('./list'),

passProps:
{

rowID:
rowID,

showBack:
true,

todoItems:
this.state.todoItems[rowID].children,

updateRowChildren:
this.updateRowChildren

}

});

NAvigation
Titanium
application.navWindow.openWindow(

Alloy.createController('list',
{

rowID:
e.index,

todoItems:
rowData.children
||
[],

updateRowChildren:
updateRowChildren

}).getView()

);
var
application
=

if
(OS_IOS)
{

application.navWindow
=
$.navWindow;

}

Extending Each Platform

Extending
NativeScript
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

Extending React Native
var
React
=

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

Extending Titanium
-‐(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

Pros & Cons

Pros & CONS NativeScript
‣ 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

Pros & CONS React Native
‣ 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

Pros & CONS Titanium
‣ 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

Native Mobile Apps
with Javascript

THANK YOU
646.876.2777
Josh@pixelflavor.com
@joshJ
Questions?

Connect.js 2015 - Building Native Mobile Applications with Javascript

Connect.js 2015 - Building Native Mobile Applications with Javascript

Recommended

More Related Content

What's hot (20)

Similar to Connect.js 2015 - Building Native Mobile Applications with Javascript (20)

Recently uploaded (20)

Connect.js 2015 - Building Native Mobile Applications with Javascript