Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Building Native
Mobile Apps
with Javascript
Josh JEnsen ABOUT Me
mobile application consultant,
entrepreneur, Technology Addict,
OCR enthusiast, Beer Drinker.
@joshJ
...
Additional Sessions
Exploring React.Native

15:30 (3:30pm) Today

Me
Expanding Your
Nativescript App with
Native Libraries...
What this session is Not
• A study in best practices
• a comprehensive look at each platform
• A time to bash one platform...
What this session is
• A developers journey through 3 platforms
• Initial Impressions and results
• A tool for deciding wh...
Mobile LandScape
Native
Hybrid
Transpiled
Abstracted
‣ Objective c, Swift, Java
‣ PhoneGap/Cordova
‣ Xamarin
‣ NativeScrip...
Define ab·stract·ed
consider (something)
theoretically or separately
from something else
BUILDING NATIVE MOBILE APPS WITH ...
Define: Abstracted Platform
A platform where an API is abstracted away from or
separated from the primary language by prox...
Abstracted platforms
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript React Native Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript React Native Titanium
Open Source: Free Open Source: Free Open So...
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript React Native Titanium
Open Source ○ ○ ○
Licence Apache BSD Apache...
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
platform Tooling
NativeScript React Native Titanium
Node.JS 0.12.x 4.x 0.12.x
...
platform Setup
‣ https://facebook.github.io/react-native/docs/getting-started.html
‣ https://docs.nativescript.org/getting...
Build
Times
Initial
0
17.5
35
52.5
70
Build Times
60.347
14.345
4.646
NativeScript React Native Titanium
Build
Times
Subsequent
0
1.25
2.5
3.75
5
Build Times
3.504
0.68
4.645
NativeScript React Native Titanium
Build Times: Live Reload
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript:
React Native:
Titanium:
<1 second
Insta...
Mobilejs.io Todo App
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
http://mobilejs.io - Source
Application Structure
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Application
Structure
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Inline Css,JS,XML
Base File
Build Files
Fon...
Application
Structure
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Page
Base File
Build Files
Row Component
Application
Structure
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Controllers
Base File
Views
Styles
Build Files
Layout Methods
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Layouts
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<StackLayout	
  orientation="horizontal"	
  id="formWrapp...
Layouts
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<AbsoluteLayout	
  />
<DockLayout	
  />
<GridLayout	
  />...
Layouts React NAtive
BUILDING NATIVE MOBILE APPS WITH
JAVASCRIPT
<View	
  style={styles.formWrapper}>	
  	
  
	
  	
  <Ico...
<View	
  id="formWrapper">	
  
	
  	
  	
  	
  <Label	
  id="selectAllIcon"></Label>	
  
	
   	
   	
  <TextField	
  id="t...
Initializing an Application
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Initializing an
Application
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Base File
var	
  application	
  =	
  ...
Initializing an
Application
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var	
  React	
  =	
  require('react-­...
Initializing an
Application
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Base Filevar	
  application	
  =	
  requi...
Getting to Hello World
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Getting to
Hello World
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page	
  xmlns="http://www.nativescript.or...
Getting to
Hello World
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var	
  React	
  =	
  require('react-­‐nati...
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Alloy>	
  
	
  	
  <Window>	
  
	
  	
  	
  	
  <Label>Hello	
  World</Label>...
Adding Custom Fonts
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Adding
Custom Fonts
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Font File
if	
  (application.ios)	
  {	
  
	
...
Adding
Custom Fonts
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
1. Add the font files to your resource files
...
Adding
Custom Fonts
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
1. Add the font files to App > assets
1. > iphone...
Label
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Label
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label	
  text="Todo"	
  id=“header"	
  />
#header	
  {	
  ...
Label
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Text	
  style={styles.header}>todos</Text>
header:	
  {	
 ...
Label
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label	
  id="header">Todos</Label>
"#header":	
  {	
  
	
   to...
ListView / Table View
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
ListView
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page	
  xmlns="http://www.nativescript.org/tns.xsd"	
  ...
ListView
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
	
  	
  	
  	
  <ListView	
  items="{{	
  todoItems	
  }...
ListView
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
todoItems.unshift(_.extend({	
  
	
  	
  text:	
  text,	...
ListView React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var	
  ListPage	
  =	
  React.createClass({	
  
	
  	
  ...
ListView React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<ListView	
  
	
  	
  style={styles.todoListView}	
  
	
...
ListView React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
this.state.todoItems.unshift(_.extend({	
  
	
  	
  rowI...
TableView
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<TableView	
  id="todoTable"	
  />
List.xml
$.todoItems	
  ...
Tap Event Handlers
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Tap Event Handlers
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label	
  text="back"	
  tap="onBackTap"	
  />...
Tap Event Handlers
React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<TouchableOpacity	
  
	
  	
  onPress={()	
  =...
Tap Event Handlers
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Label	
  id="backButton"></Label>
$.backButton.ad...
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NativeScript:
React Native:
Titanium:
Tap
Press
Click or singletap
Tap Event H...
Code Reuse
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Code Reuse
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page	
  
	
  	
  	
  	
  xmlns:customOtherControls="x...
Code Reuse
React NAtive
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
renderBackButton:	
  function()	
  {	
  
	
  	
  if	
 ...
Code Reuse
React NAtive
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<TodoRow	
  rowParams={{	
  
	
  	
  sectionID,	
  
	
...
Code Reuse
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Alloy.createController('list',	
  {});
var	
  args	
  =	
 ...
Navigation
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
NAvigation
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var	
  frameModule	
  =	
  require("ui/frame");	
  
fr...
NAvigation / Code Reuse
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
<Page	
  xmlns="http://www.nativescript.o...
NAvigation
REact NAtive
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
	
  	
  	
  	
  this.props.navigator.push({	
  
	
  	
...
NAvigation
Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
application.navWindow.openWindow(	
  
	
  	
  Alloy.create...
Extending Each Platform
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Extending
NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var	
  device	
  =	
  AVCaptureDevice.defaultDeviceWith...
Extending React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
var	
  React	
  =	
  require('react-­‐native');	
  
var...
Extending Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
-­‐(void)turnFlashLightOn:(id)args	
  
{	
  
	
  	
  	
  	
...
Pros & Cons
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Pros & CONS NativeScript
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
‣ Best Feature: Direct API access
Pros Cons
Direct AP...
Pros & CONS React Native
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
‣ Best Feature: Live Reload
Pros Cons
Live Reload / N...
Pros & CONS Titanium
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
‣ Best Feature: Maturity
Pros Cons
JS Source EnCryption T...
Native Mobile Apps
with Javascript
THANK YOU
646.876.2777
Josh@pixelflavor.com
@joshJ
BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
Questions?
Connect.js 2015 - Building Native Mobile Applications with Javascript
Upcoming SlideShare
Loading in …5
×

Connect.js 2015 - Building Native Mobile Applications with Javascript

1,884 views

Published on

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.

Published in: Technology

Connect.js 2015 - Building Native Mobile Applications with Javascript

  1. 1. Building Native Mobile Apps with Javascript
  2. 2. Josh JEnsen ABOUT Me mobile application consultant, entrepreneur, Technology Addict, OCR enthusiast, Beer Drinker. @joshJ BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  3. 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. 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. 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. 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. 7. Define ab·stract·ed consider (something) theoretically or separately from something else BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  8. 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. 9. Abstracted platforms BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT NativeScript React Native Titanium
  10. 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. 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. 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. 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. 14. Build Times Initial 0 17.5 35 52.5 70 Build Times 60.347 14.345 4.646 NativeScript React Native Titanium
  15. 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. 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. 17. Mobilejs.io Todo App BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT http://mobilejs.io - Source
  18. 18. Application Structure BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  19. 19. Application Structure NativeScript BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT Inline Css,JS,XML Base File Build Files Fonts Resources
  20. 20. Application Structure React Native BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT Page Base File Build Files Row Component
  21. 21. Application Structure Titanium BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT Controllers Base File Views Styles Build Files
  22. 22. Layout Methods BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  23. 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. 24. Layouts NativeScript BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT <AbsoluteLayout  /> <DockLayout  /> <GridLayout  /> <StackLayout  /> <WrapLayout  />
  25. 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. 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. 27. Initializing an Application BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  28. 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. 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. 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. 31. Getting to Hello World BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  32. 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. 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. 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. 35. Adding Custom Fonts BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  36. 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. 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. 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. 39. Label BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  40. 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. 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. 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. 43. ListView / Table View BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  44. 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. 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. 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. 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. 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. 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. 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. 51. Tap Event Handlers BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  52. 52. Tap Event Handlers NativeScript BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT <Label  text="back"  tap="onBackTap"  /> exports.onBackTap  =  function()  {   }; List.xml List.JS
  53. 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. 54. Tap Event Handlers Titanium BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT <Label  id="backButton"></Label> $.backButton.addEventListener('click',  backOnPress); List.xml List.JS
  55. 55. BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT NativeScript: React Native: Titanium: Tap Press Click or singletap Tap Event Handlers
  56. 56. Code Reuse BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  57. 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. 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. 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. 60. Code Reuse Titanium BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT Alloy.createController('list',  {}); var  args  =  arguments[0]  ||  {};
  61. 61. Navigation BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  62. 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. 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. 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. 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. 66. Extending Each Platform BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  67. 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. 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. 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. 70. Pros & Cons BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT
  71. 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. 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. 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. 74. Native Mobile Apps with Javascript
  75. 75. THANK YOU 646.876.2777 Josh@pixelflavor.com @joshJ BUILDING NATIVE MOBILE APPS WITH JAVASCRIPT Questions?

×