connect.js 2015 - building native mobile applications with javascript
TRANSCRIPT
![Page 1: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/1.jpg)
Building Native Mobile Apps
with Javascript
![Page 2: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/2.jpg)
Josh JEnsen ABOUT Me
mobile application consultant, entrepreneur, Technology Addict, OCR enthusiast, Beer Drinker.
!@joshJ
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 3: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/3.jpg)
Additional Sessions
Exploring React.Native15:30 (3:30pm) Today
Me
Expanding Your Nativescript App with
Native Libraries 16:30 (4:30pm) Today
Stephen Feather
State of Titanium10:00am Tomorrow
Rick Blalock
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 4: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/4.jpg)
What this session is Not
• A study in best practices • a comprehensive look at each platform • A time to bash one platform or another
![Page 5: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/5.jpg)
What this session is
• A developers journey through 3 platforms • Initial Impressions and results • A tool for deciding what is right for you
![Page 6: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/6.jpg)
Mobile LandScape
Native Hybrid
Transpiled Abstracted
‣ Objective c, Swift, Java ‣ PhoneGap/Cordova ‣ Xamarin ‣ NativeScript, React Native, Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 7: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/7.jpg)
Define ab·stract·ed
consider (something) theoretically or separately from something else
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 8: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/8.jpg)
Define: Abstracted PlatformA 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>
![Page 9: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/9.jpg)
Abstracted platforms
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript React Native Titanium
![Page 10: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/10.jpg)
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.
![Page 11: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/11.jpg)
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
![Page 12: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/12.jpg)
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
![Page 13: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/13.jpg)
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
![Page 14: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/14.jpg)
Build Times Initial
0
17.5
35
52.5
70
Build Times
60.347
14.345
4.646
NativeScript React Native Titanium
![Page 15: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/15.jpg)
Build Times Subsequent
0
1.25
2.5
3.75
5
Build Times
3.504
0.68
4.645
NativeScript React Native Titanium
![Page 16: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/16.jpg)
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)
![Page 17: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/17.jpg)
Mobilejs.io Todo App
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
http://mobilejs.io - Source
![Page 18: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/18.jpg)
Application Structure
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 19: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/19.jpg)
Application Structure NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Inline Css,JS,XML
Base File
Build Files
Fonts
Resources
![Page 20: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/20.jpg)
Application Structure React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Page
Base File
Build Files
Row Component
![Page 21: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/21.jpg)
Application Structure Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
ControllersBase File
Views
Styles
Build Files
![Page 22: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/22.jpg)
Layout Methods
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 23: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/23.jpg)
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; }
![Page 24: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/24.jpg)
Layouts NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<AbsoluteLayout />
<DockLayout />
<GridLayout />
<StackLayout />
<WrapLayout />
![Page 25: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/25.jpg)
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, }
![Page 26: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/26.jpg)
<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 }
![Page 27: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/27.jpg)
Initializing an Application
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 28: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/28.jpg)
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();
![Page 29: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/29.jpg)
Initializing an Application React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPTvar 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
![Page 30: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/30.jpg)
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();
![Page 31: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/31.jpg)
Getting to Hello World
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 32: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/32.jpg)
Getting to Hello World NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page xmlns="http://www.nativescript.org/tns.xsd"> <Label text="Hello World"/> </Page>
![Page 33: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/33.jpg)
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);
![Page 34: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/34.jpg)
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Alloy> <Window> <Label>Hello World</Label> </Window> </Alloy>
"Window": { backgroundColor: "#fff" }
$.getView().open();
Getting to Hello World Titanium
![Page 35: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/35.jpg)
Adding Custom Fonts
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 36: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/36.jpg)
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; }
![Page 37: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/37.jpg)
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
![Page 38: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/38.jpg)
Adding Custom Fonts Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
1. Add the font files to App > assets
1. > iphone > fonts
2. > android > fonts
![Page 39: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/39.jpg)
Label
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 40: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/40.jpg)
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; }
![Page 41: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/41.jpg)
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 }
![Page 42: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/42.jpg)
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, } }
![Page 43: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/43.jpg)
ListView / Table View
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 44: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/44.jpg)
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
![Page 45: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/45.jpg)
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
![Page 46: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/46.jpg)
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
![Page 47: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/47.jpg)
ListView React NativeBUILDING 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 || []), }; } }
![Page 48: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/48.jpg)
ListView React NativeBUILDING 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} />
![Page 49: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/49.jpg)
ListView React NativeBUILDING 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(); });
![Page 50: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/50.jpg)
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
![Page 51: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/51.jpg)
Tap Event Handlers
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 52: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/52.jpg)
Tap Event Handlers NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label text="back" tap="onBackTap" />
exports.onBackTap = function() { };
List.xml
List.JS
![Page 53: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/53.jpg)
Tap Event Handlers React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<TouchableOpacity onPress={() => this.backOnPress()} activeOpacity={0.2} > <Text>back</Text> </TouchableOpacity>
List.JS
![Page 54: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/54.jpg)
Tap Event Handlers Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label id="backButton"></Label>
$.backButton.addEventListener('click', backOnPress);
List.xml
List.JS
![Page 55: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/55.jpg)
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript:
React Native:
Titanium:
Tap
Press
Click or singletap
Tap Event Handlers
![Page 56: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/56.jpg)
Code Reuse
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 57: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/57.jpg)
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
![Page 58: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/58.jpg)
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()}
![Page 59: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/59.jpg)
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
![Page 60: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/60.jpg)
Code Reuse Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Alloy.createController('list', {});
var args = arguments[0] || {};
![Page 61: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/61.jpg)
Navigation
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 62: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/62.jpg)
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 } });
![Page 63: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/63.jpg)
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
![Page 64: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/64.jpg)
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 } });
![Page 65: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/65.jpg)
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; }
![Page 66: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/66.jpg)
Extending Each Platform
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 67: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/67.jpg)
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
![Page 68: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/68.jpg)
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
![Page 69: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/69.jpg)
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
![Page 70: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/70.jpg)
Pros & Cons
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
![Page 71: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/71.jpg)
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
![Page 72: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/72.jpg)
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
![Page 73: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/73.jpg)
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
![Page 74: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/74.jpg)
Native Mobile Apps with Javascript
![Page 75: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/75.jpg)
THANK YOU
# 646.876.2777 $ [email protected] ! @joshJ
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Questions?
![Page 76: Connect.js 2015 - Building Native Mobile Applications with Javascript](https://reader034.vdocuments.net/reader034/viewer/2022051404/58ee06741a28ab5f3a8b4635/html5/thumbnails/76.jpg)