1.
From Back-end to Front-end
Kiev 2018
Build IOS/Android Mobile
App with Cordova +
React/Redux
Karpenko Lilia

2.
Немного обо мне
• Senior Frontend (Frontend Team lead)
в Kwebbl (DAXX) - мы занимаемся
IP телефонией для стран Европы
• Увлечена JavaScript, работаю
преподавателем и ментором в Веб
разработке
• Вегетарианка, люблю музыку,
спорт, играю на гитаре и
фортепиано, люблю читать книги и
мечтаю про собственный бизнес =)
Build IOS/Android Mobile App with Cordova + React/Redux

3.
From Back-end to Front-end
Kiev 2018
Karpenko Lilia
• Количество
смартфонов
увеличилось на 39% в
сравнении с прошлым
годом
• К концу 2016 года 46%
населения мира
являются владельцами
смартфонов
• Отрасль мобильных
приложений
расширяется с каждым
днем и останавливаться
пока не собирается.

4.
О чем мы будем говорить сегодня?
1. Окружение в cordova и стек технологий проекта
2. Среда браузера vs. WebView телефона
3. Хранение данных в памяти телефона
4. Работа с плагинами в Cordova
5. Запуск приложения на телефонах
6. Отладка приложения
Build IOS/Android Mobile App with Cordova + React/Redux

5.
Быть или не быть?

6.
Почему Cordova?
Особенностью и плюсом Cordova есть то что одно и
то же приложение может быть запущено как в среде
браузера так и в среде телефона, то есть с помощью
Cordova мы можем создавать как веб приложения
так и приложения для IOS, Android, Windows Phone,
Amazon и т.д.
Build IOS/Android Mobile App with Cordova + React/Redux

7.
При разработке так же стоял выбор - между React и Angular

8.
В результате стек технологий вышел такой:
1. React
2. Redux
3. LESS
4. WEBPACK
5. Cordova
Build IOS/Android Mobile App with Cordova + React/Redux

9.
Особенности работы с React и JS в
мобильном браузере через
Cordova
Build IOS/Android Mobile App with Cordova + React/Redux

10.
Работа с Controlled components в React
Build IOS/Android Mobile App with Cordova + React/Redux

11.
Работа с Controlled
components
в React
в React
Build IOS/Android Mobile App with Cordova + React/Redux
import React, { Component } from 'react';
export default class InputState extends Component {
state = {
value: this.props.value
};
onChange = e => this.setState({ value: e.target.value });
render() {
return (
<input
key={this.props.key}
ref={‘inputRef'}
autoFocus={true}
type={'text'}
value={this.state.value}
onChange={this.onChange}
/>
);
}
}
Каждый раз, после любого
изменения в input у нас
вызывается setState, а значит -
идет полная перерисовка
компонента. Это не очень
приятно. Мало того, нам нужно
чтобы при перерисовке фокус
оставался на элементе.
В телефоне это вызывает
странное поведение - прячется и
показывается клавиатура!

12.
ВЫХОД ЕСТЬ!)
Build IOS/Android Mobile App with Cordova + React/Redux
class InputCustom extends React.Component {
state = {
value: this.props.value || ''
};
onChange = e => {
this.setState({ value: this.state.value + e.target.value });
};
onReset = e => {
let l = this.state.value.length;
this.setState({ value: this.state.value.substring(0, l - 1) });
};
render() {
return <div>
<input
autoFocus={true}
readOnly={true}
ref={'inputRef'}
type={'text'}
value={this.state.value}
/>
<button value='4' onClick={this.onChange}>Click for 4</button>
<button onClick={this.onReset}>Click for reset</button>
</div>
}
}
У нас в приложении была своя
клавиатура поэтому я создала
input который был readOnly и
потом при нажатии на кнопки
менялось его значение, фокус на
нем оставался с помощью css -
просто обычное подчеркивание
через border.
Клавиатура телефона не
показывалась, поэтому проблема
была решена!

13.
Создание больших
списков и пагинация
Build IOS/Android Mobile App with Cordova + React/Redux

14.
WebWorkers
Мы создавали в приложении поиск,
при чем поиск был такой как
например в Dialer в Android - ты
пишешь цифры, а он ищет по имени
и по цифрам одновременно.
Для поиска мы использовали
библиотеку Fuse.js + чтобы поиск по
большим спискам не блочил наше UI
мы решили использовать для поиска
WebWorkers
WebWorkers это один из
инструментов запуска JS кода не в
основном потоке - так как JS
однопоточный это очень ускорило
сам процесс

15.
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
}
start(options) {
this.activeWorker.postMessage(JSON.stringify(options));
return this.activeWorker;
}
update(callback) {
this.stop();
this.create(callback);
}
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false);
this.activeWorker.terminate();
}
}
}

16.
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
}
start(options) {
return this.activeWorker.postMessage(JSON.stringify(options));
}
update(callback) {
this.stop();
this.create(callback);
}
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false);
this.activeWorker.terminate();
}
}
}

17.
Build IOS/Android Mobile App with Cordova + React/Redux
export default class WebWorker {
activeWorker = null;
create(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
}
start(options) {
this.activeWorker.postMessage(JSON.stringify(options));
return this.activeWorker;
}
update(callback) {
this.stop();
this.create(callback);
}
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker"), false);
this.activeWorker.terminate();
}
}
}

18.
Build IOS/Android Mobile App with Cordova + React/Redux
default class WebWorker {
activeWorker = null;
reate(searchFileName) {
let MyWorker;
switch(searchFileName) {
case "dialer":
MyWorker = require("worker-loader?name=dialer.js!webWorkers/search/dialer.js");
break;
case "plain":
MyWorker = require("worker-loader?name=plain.js!webWorkers/search/plain.js");
}
this.activeWorker = new MyWorker();
this.activeWorker.addEventListener('error', err => {
console.warn(err, " err in web worker");
}, false);
return this.activeWorker;
tart(options) {
this.activeWorker.postMessage(JSON.stringify(options));
return this.activeWorker;
update(callback) {
this.stop();
this.create(callback);
stop() {
if (this.activeWorker) {
this.activeWorker.removeEventListener('error', err => console.warn(err, " err in web worker
this.activeWorker.terminate();
}
}

19.
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};

20.
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};

21.
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};

22.
Build IOS/Android Mobile App with Cordova + React/Redux
import WebWorker from "lib/WebWorker";
export default {
webWorker: new WebWorker(),
stopWebWorker() {
this.webWorker.stop();
},
createWebWorker() {
this.webWorker.create("plain");
},
search(search) {
this.stopWebWorker();
return (dispatch, getState) => {
let list = getState().contacts.list;
let searchParams = getState().contacts.searchParams;
this.createWebWorker();
return this.webWorker.start(some_params).onmessage = event => {
do_come_action;
};
}
}
};

23.
Что же такое Apache
Cordova?
Build IOS/Android Mobile App with Cordova + React/Redux

24.
Окружения для cordova
Cordova — это платформа, позволяющая разрабатывать мобильные приложения на разные платформы, путем
встраивания браузера в мобильное приложение. Таким образом, ваше приложение является, по сути, мини-
браузером, который показывает один единственный сайт — ваше приложение.
Установка:
$ sudo npm install -g cordova
Особенности платформ:
Android => нужно установить java, java-sdk и скачать себе все версии Android для которых вы будете билдить
ваше приложение
IOS => Xcode + в Xcode все версии IOS для создания и тестирования приложения
Build IOS/Android Mobile App with Cordova + React/Redux

25.
Создание проекта cordova
$ cordova create _ id_ _имя папки приложения название приложения
Build IOS/Android Mobile App with Cordova + React/Redux
Файл/Папка Предназначение
package.json
config.xml настройки для разных платформ
plugins папка для плагинов которые вы будете использовать в
приложении
platforms платформы у приложения (android/ios/windows)
www папка для ваших HTML/CSS/JS файлов - cordova
автоматически берет файлы из это папки при выгрузке
приложения в телефон
hooks хуки для запуска приложения

26.
Добавление платформ для приложения
$ cordova platform add ios
$ cordova platform add android
После чего у вас в папке platforms добавляются 2 папки
android && ios
Build IOS/Android Mobile App with Cordova + React/Redux

27.
Build IOS/Android Mobile App with Cordova + React/Redux
Environme
nts
Environme
nts
Local
Dev
Production PlatformsPlatforms
Web
IOS
Android
нас были все комбинации наших платформ и окружений - получаеться 9 билдов приложения под разные устрой

28.
Environments
"scripts": {
"start": "node tools/server.js",
«local_w": "BUILD_APP=no webpack --watch --watch-poll --config tools/webpack/config.js",
"dev_w": "NODE_ENV=development BUILD_APP=no webpack --watch --watch-poll --config
tools/webpack/config.js",
"prod_w": "NODE_ENV=production BUILD_APP=no webpack --watch --watch-poll --config
tools/webpack/config.js",
"an_dev_w": "NODE_ENV=development BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll
--config tools/webpack/config.js",
"an_stage_w": "NODE_ENV=stage BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll --config
tools/webpack/config.js",
"an_prod_w": "NODE_ENV=production BUILD_APP=yes PLATFORM=android webpack --watch --watch-poll
--config tools/webpack/config.js",
"ios_dev_w": "NODE_ENV=development BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config
tools/webpack/config.js",
"ios_stage_w": "NODE_ENV=stage BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config
tools/webpack/config.js",
"ios_prod_w": "NODE_ENV=production BUILD_APP=yes PLATFORM=ios webpack --watch --watch-poll --config
tools/webpack/config.js"
}
Build IOS/Android Mobile App with Cordova + React/Redux

29.
Build IOS/Android Mobile App with Cordova + React/Redux
WebView vs. Браузер

30.
1. onDOMContentLoaded + onDeviceReady
2. IOS = «resume» && «pause» and Android = «active» && «resign»
3. Закрытие приложение = закрыть вкладку в браузере
4. IOS открывает приложение в WebView в Safari, а Android открывает в
WebView в Chrome
5. Запросы на сторонний сервер только после установки плагина Cordova
Whitelists и добавление заголовков в meta tag в html файле для The W3C
Content Security Policy:
<meta http-equiv="Content-Security-Policy" content="default-src *
gap://ready file: 'self' data: gap: polyblob: blob: ws: wss:
https://ssl.gstatic.com 'unsafe-eval'; style-src * 'self' 'unsafe-inline'; media-src
*; connect-src * ws: wss:;»>
Build IOS/Android Mobile App with Cordova + React/Redux

31.
Определение платформы
Определение платформы происходит через установку
плагина cordova-plugin-device.
После этого у вас появиться глобальная переменная device где
будет лежать значение платформы модели и т.д.:
Build IOS/Android Mobile App with Cordova + React/Redux
document.addEventListener("deviceready", () => {
console.log(device.model);
console.log(device.platform);
}, false);

32.
Определение платформы через build
Build IOS/Android Mobile App with Cordova + React/Redux
import config from ‘envConfig';
const isIOS = deviceInfo.isIOS();
if (!config.process.isIOS()) {
not_for_ios;
} else {
for_ios;
}

33.
Build IOS/Android Mobile App with Cordova + React/Redux
Хранение данных в
памяти телефона

34.
Хранение локальных данных
1. localStorage
2. Secure Storage (cordova plugin)
3. IOS - Apple’s Keychain Services - зашифрованный
контейнер, который надежно хранит мелкие куски
данных в приложении
Build IOS/Android Mobile App with Cordova + React/Redux

35.
Плагины Cordova
Плагины это независимые модули которые позволяют вам
получить доступ к API на уровне устройства.
Вы можете использовать как доступные плагины в
репозитории cordova или написать свои если вы знаете еще
дополнительно - Java и Objective-C.
Большинство плагинов доступны в репозитории npm
Build IOS/Android Mobile App with Cordova + React/Redux

36.
Добавление плагина
$ cordova plugin add plugin_name
Код плагина устанавливается в папку plugins и там вы можете посмотреть
исходный код и все что вам интересно
После установки плагина у вас будет доступ к его API через глобальную
переменную обычно что-то схожее с названием плагина
Build IOS/Android Mobile App with Cordova + React/Redux

37.
Список плагинов необходимых для любого
приложения
1. Cordova diagnostic plugin
2. Cordova status bar
3. Cordova Keyboard plugin
4. Cordova plugin dialogs
5. Cordova Secure Storage
6. Cordova plugin network information
7. Cordova plugin whitelist
Build IOS/Android Mobile App with Cordova + React/Redux

38.
Запуск приложения на телефоне
$ cordova run _ _(android/ios) —-deviceплатформа
Для Android вам понадобится установленная java && java-sdk и вы
легко сможете запустить приложение в тестовом режиме на телефоне,
также для этого вам понадобиться включить на телефоне разрешения
для отладки по USB
Для IOS вам нужен Xcode + аккаунт в Apple Developers
Build IOS/Android Mobile App with Cordova + React/Redux

39.
Отладка приложения на Android
Для отладки приложения:
1) Ваш телефон должен быть подключен к компьютеру через USB
2) На телефоне должно быть включено разрешение на отладку через
USB
3) Должно быть активно приложение которое вы тестируете
4) Заходим в Google Chrome во вкладку chrome://inspect/#devices
находим там ваше приложение и открываем, у вас сразу же будет видно
все то же самое что и при отладке любого другого сайта
Build IOS/Android Mobile App with Cordova + React/Redux

40.
Отладка приложения на IOS
Для отладки приложения:
1) Ваш телефон должен быть подключен к компьютеру через USB
2) На телефоне должно быть включено разрешение на отладку через
USB
3) Должно быть активно приложение которое вы тестируете
4) Заходим в Safari вверху ищем = Разработка -> Название вашего
телефона -> Название Приложения, дальше открывается console и там
вы можете тестировать все как в обычном браузере
Build IOS/Android Mobile App with Cordova + React/Redux

41.
Build IOS/Android Mobile App with Cordova + React/Redux

42.
Итоги
Почему создавать приложение на Cordova это выгодно:
1.Кроссплатформенное
2.Не требует знаний Java и Objective-C и вместо 2 разработчиков у вас 1 разработчик
на все платформы
3.Популярно поэтому постоянно есть новые фишки плагины и большое комьюнити
Почему нет:
1.Если выходит новая версия ПО жди проблем в ближайшие месяцы, потому что
решений может не быть
2.Нету доступа ко всем API телефона и если нету специального плагина нужно
искать решение самому или писать плагин самостоятельно
•Не так нативно ощущаешься как настоящее приложение
•Медленнее работает чем нативное приложение
Build IOS/Android Mobile App with Cordova + React/Redux

43.
Предложения
пожелания и
вопросы?
Build IOS/Android Mobile App with Cordova + React/Redux