Maxim Salnikov
@webmaxru
We need a mobile app
Products from the future
UI Engineer at ForgeRock
Hybrid
Web
RWD
Native
The biggest mistake we’ve made as a company is betting on HTML5 over native.
One code base. Running everywhere.
Open source framework for building truly native mobile apps
Learn once, write anywhere
Reliable, Fast, Engaging
App
Service worker
<ion-header>
<ion-navbar>
<ion-title>Ionic Blank</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="content">
<h2>Tap the button</h2>
<button primary>TAP</button>
<div class="message">16 taps left</div>
</ion-content>
<ActionBar title="NativeScript Blank"></ActionBar>
<StackLayout>
<Label text="Tap the button" class="title"></Label>
<Button text="TAP"></Button>
<Label [text]="message" class="message"></Label>
</StackLayout>
import React, { Component } from 'react';
import { View, Button, AppRegistry } from 'react-native';
class MainApp extends Component {
render() {
return (
<View>
<Button title="Press me" color="#841584" />
</View>
);
}
}
AppRegistry.registerComponent('MainApp', () => MainApp);
import React, { Component, PropTypes } from 'react';
import { NavigatorIOS, Text } from 'react-native';
export default class NavigatorIOSApp extends Component {
render() {
return (
<NavigatorIOS
initialRoute={{
component: MyScene, title: 'My Initial Scene',
}}
/>
);
}
}
render: function() {
return (
<ToolbarAndroid
logo={require('./app_logo.png')}
title="AwesomeApp"
actions={[{
title: 'Settings',
icon: require('./icon.png')
}]}
/>
)
}
$ ionic cordova plugin add cordova-plugin-camera
$ npm install --save @ionic-native/camera
import { Camera, CameraOptions } from '@ionic-native/camera';
export class UsingCameraPage {
constructor(private camera: Camera) { }
const options: CameraOptions = { ... }
this.camera.getPicture(options)
.then((imageData) => {
let base64Image = 'data:image/jpeg;base64,' + imageData;
}, (err) => {
// Handle error
});
}
$ npm install nativescript-camera --save
import { ImageAsset } from "image-asset";
import { takePicture, ... } from "nativescript-camera";
export class UsingCameraComponent {
onTakePhoto() {
let options = { ... };
takePicture(options)
.then(imageAsset => {
this.imageTaken = imageAsset;
}).catch(err => {
// Handle error
});
}
}
$ npm install react-native-camera --save
$ react-native link react-native-camera
import Camera from 'react-native-camera';
class UsingCameraComponent extends Component {
render() {
return (
<View>
<Camera ref={(cam) => { this.camera = cam; }}>
<Text onPress={this.takePicture.bind(this)}>Photo</Text>
</Camera>
</View>
);
}
takePicture() {
const options = {...};
this.camera.capture(options)
.then((imageData) => { // Process imageData })
.catch(err => { // Handle error });
}
}
navigator.mediaDevices.getUserMedia(options)
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
// Handle error
});
function takepicture() {
var context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
We need a mobile app