Перепись приложения. Нативного. На JS. Done. | Odessa Frontend Meetup #10

Перепись приложения. Нативного.Перепись приложения. Нативного.
На JS. DoneНа JS. Done
Тимофей Лавренюк
@geek_timofey
1

О проектеО проекте
3 . 1

ЯдроЯдро
Архитектура
3 . 3

ЯдроЯдро
RPC ServerRPC ServerАрхитектура
3 . 3

ЯдроЯдро
А что умеет?А что умеет?
3 . 4

ЯдроЯдро
Работа с локальной БДА что умеет?А что умеет?
3 . 4

ЯдроЯдро
ШифрованиеРабота с локальной БДА что умеет?А что умеет?
3 . 4

ЯдроЯдро
ШифрованиеРабота с локальной БД
Общение с RPC-сервером
3 . 4

ЯдроЯдро
ШифрованиеРабота с локальной БД
Работа с PDFОбщение с RPC-сервером
3 . 4

Настал 2017 годНастал 2017 год
3 . 5

Настал 2017 годНастал 2017 год
Нужна web-версия...
3 . 5

СРОЧНО НУЖНАСРОЧНО НУЖНА
WEB-ВЕРСИЯ !!!11WEB-ВЕРСИЯ !!!11 3 . 6

WEB-ВерсияWEB-Версия
1.01.0
3 . 8

Старая архитектура
3 . 9

SPASPA
3 . 9

SPASPA
REST APIREST API
ЯдроЯдро
3 . 9

SPASPA
REST APIREST API
ЯдроЯдро
RPC ServerRPC ServerСтарая архитектура
3 . 9

Старая WEB-версия
3 . 10

Не было режима автораНе было режима автора
3 . 10

Зависило от интернетЗависило от интернет
соединениясоединения
3 . 10

Зависило от интернетЗависило от интернет
соединениясоединения
Был PHPБыл PHP
3 . 10

Полноценное web-приложениеПолноценное web-приложение
Задача:Задача:
3 . 12

Полноценное web-приложениеПолноценное web-приложение
Задача:Задача:
Не уступающее нативным клиентам
3 . 12

Пришлось переписать
веб приложение
3 . 15

Новая WEB-версия
3 . 16

Есть режим автораЕсть режим автора
3 . 16

Работает в OﬄineРаботает в Oﬄine
3 . 16

Работает в OﬄineРаботает в Oﬄine
Не уступает нативнымНе уступает нативным
клиентамклиентам
3 . 16

Криптография
Oﬄine + Web Worker Работа с PDFОбщение с RPC-сервером
Framework Progressive Web App
4

КриптографияКриптография
5 . 1

Основная проблемаОсновная проблема
5 . 2

Основная проблемаОсновная проблема
Никто не знает как работает шифрование в проекте
5 . 2

RSARSA
AESAES
Основные алгоритмы
5 . 6

AESAES
cipher = encrypt(block, key) // шифруем block с помощью key
block = decrypt(cipher, key) // расшифровываем cipher с помощью key
5 . 8

Как реализовать алгоритмыКак реализовать алгоритмы
шифрования?шифрования?
5 . 9

JS библиотека
5 . 10

Web Crypto API
5 . 10

Web Crypto API
OpenSSL -> WebAssembly
5 . 10

JS библиотекаJS библиотека
5 . 11

+ Изоморфный код
5 . 11

+ Поддержка RSA
5 . 11

- Производительность
5 . 11

- Производительность
- Размер
5 . 11

Web Crypto APIWeb Crypto API
5 . 12

+ Размер
5 . 12

+ Размер
+ Производительность
5 . 12

- Неполная поддержка RSA
+ Размер
5 . 12

- Неполная поддержка RSA
- Изоморфный код
+ Размер
5 . 12

Алгоритм PBKDF2Алгоритм PBKDF2
5 . 13

OpenSSL -> WebAssemblyOpenSSL -> WebAssembly
5 . 14

5 . 14

- Размер
5 . 14

5 . 15

Node-ForgeNode-Forge
5 . 15

Node-ForgeNode-Forge
Про улучшение оптимизации - в следующих слайдах...
5 . 15

NodeForge FailsNodeForge Fails
5 . 16

Oﬄine + Web WorkerOﬄine + Web Worker
6 . 1

Что хранить в Oﬄine?Что хранить в Oﬄine?
6 . 2

СтатикаСтатика
6 . 2

Данные пользователяДанные пользователя
6 . 2

ФайлыФайлы
6 . 2

7 . 1

Service WorkerService Worker
7 . 2

{
"globDirectory": "dist",
"globPatterns": [
"index.html",
"*.js",
"assets/**/*.{png,svg}",
"assets/*.{png,svg}"
],
"swSrc": "src/service-workers/main.worker.js",
"swDest": "dist/service-worker.js"
}
workbox.conﬁg.js
7 . 4

{
"assets": [
"src/assets",
"src/service-workers",
"src/manifest.json",
{
"glob": "workbox-sw.js",
"input": "node_modules/workbox-sw/build",
"output": "./workbox-3.5.0"
},
{
"glob": "workbox-core.dev.js",
"input": "node_modules/workbox-core/build/",
},
{
"glob": "workbox-precaching.dev.js",
"input": "node_modules/workbox-precaching/build/",
}
],
}
angular.json
7 . 5

importScripts('workbox-3.5.0/workbox-sw.js');
workbox.setConfig({
debug: true,
modulePathPrefix: 'workbox-3.5.0/'
});
workbox.skipWaiting();
workbox.clientsClaim();
workbox.precaching.precacheAndRoute([]);
main.worker.js
7 . 6

workbox injectManifest
workbox.precaching.precacheAndRoute([
{
"url": "index.html",
"revision": "4f8109353581284e76b88e568d642376"
},
{
"url": "0.js",
"revision": "2af14762103b4c1f18e620bd30a53d2e"
},
{
"url": "main.js",
"revision": "ef2fb7f5913e6614c9ee3621ad299d1b"
}
])
service-worker.js
7 . 7

7 . 8

8 . 1

Service WorkerService Worker
8 . 2

Persistent StoragePersistent Storage
8 . 3

LocalStorageLocalStorage
8 . 4

LocalStorageLocalStorage Небольшой лимит
8 . 4

File APIFile API
8 . 4

File APIFile API FileWriter deprecated
8 . 4

CookiesCookies
8 . 4

CookiesCookies WATTT??
8 . 4

CacheStorage CacheStorage
8 . 4

CacheStorage CacheStorage Нет гибкости
8 . 4

WebSQLWebSQL
8 . 4

WebSQLWebSQL Deprecated
8 . 4

IndexedDBIndexedDB
8 . 4

IndexedDBIndexedDB
Большой лимит
Хорошая поддержка
Не Deprecated
8 . 4

IndexedDBIndexedDB
объектно-ориентированная база данныхобъектно-ориентированная база данных
8 . 5

IndexedDBIndexedDB
хранит обьекты, проиндексированные с ключомхранит обьекты, проиндексированные с ключом
8 . 5

IndexedDBIndexedDB
выполнение операций происходит асинхронновыполнение операций происходит асинхронно
8 . 5

IndexedDBIndexedDB
умеет хранить JS-объекты и блобыумеет хранить JS-объекты и блобы
8 . 5

IndexedDBIndexedDB
имеет жутко неудобное низкоуровневое APIимеет жутко неудобное низкоуровневое API
умеет хранить JS-объекты и блобыумеет хранить JS-объекты и блобы
8 . 5

https://caniuse.bitsofco.de/embed/index.html?
feat=indexeddb&periods=future_2,future_1,current&accessible-
colours=false
ПоддержкаПоддержка
8 . 6

IndexedDB в боюIndexedDB в бою
9 . 1

1. Открыть или создать базу
9 . 2

var open = indexedDB.open("MyDatabase", 1);
9 . 2

2. Создать Schema
9 . 2

2. Создать Schema
open.onupgradeneeded = () => {
const db = open.result;
const store = db.createObjectStore("MyObjectStore", {keyPath: "id"});
const index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};
9 . 2

3. Создать транзакцию
9 . 3

open.onsuccess = () => {
const db = open.result
const tx = db.transaction("MyObjectStore", "readwrite")
const store = tx.objectStore("MyObjectStore");
const index = store.index("NameIndex");
}
9 . 3

4. Запросить данные
}
9 . 3

4. Запросить данные
const getJohn = store.get(12345); // по id
const getBob = index.get(["Smith", "Bob"]); // через index
}
9 . 3

5. Получить данные
9 . 4

getJohn.onsuccess = () => {
console.log(getJohn.result.name.first); // => "John"
};
getBob.onsuccess = () => {
console.log(getBob.result.name.first); // => "Bob"
};
9 . 4

};
};
5. Закрыть транзакцию
9 . 4

};
};
5. Закрыть транзакцию
tx.oncomplete = function() {
db.close();
};
9 . 4

Boilerblate!!!1Boilerblate!!!1
9 . 5

Недостатки чистого IndexedDBНедостатки чистого IndexedDB
9 . 6

Тяжело поддерживать
9 . 6

Не поддержки JOIN'ов
9 . 6

Нельзя частично обновить документ
9 . 6

Скудная сортировка
9 . 6

Скудная сортировка
Auto-commit транзакций
9 . 6

"Никто не использует IndexedDB в чистом виде"
- Все JS-разработчики
9 . 7

"Никто не использует IndexedDB в чистом виде"
- Все JS-разработчики
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API 9 . 7

БиблиотекиБиблиотеки
ОберткиОбертки
9 . 8

DB EngineDB Engine
9 . 8

Idb
ZangoDb
MiniMongo
jsStore
PouchDB
Dexie
LocalForage
DB EngineDB Engine
9 . 8

Idb
ZangoDb
MiniMongo
jsStore
PouchDB
Dexie
LocalForage
DB EngineDB Engine
YDN-DB
AlaSQL
Loveﬁeld
9 . 8

КроссбраузерностьКроссбраузерность
9 . 10

Chrome
Firefox
IE 11+, Edge
Safari 10+
9 . 10

SQL-подобный APISQL-подобный APIКроссбраузерностьКроссбраузерность
Chrome
Firefox
IE 11+, Edge
Safari 10+
9 . 10

SQL-подобный APISQL-подобный API
select, insert, update, delete
group by, order by, limit, skip
join
Chrome
Firefox
IE 11+, Edge
Safari 10+
9 . 10

select, insert, update, delete
group by, order by, limit, skip
join
Chrome
Firefox
IE 11+, Edge
Safari 10+
Отличная производительностьОтличная производительность
Оптимизация и анализ запросов
9 . 10

Создание SchemaСоздание Schema
9 . 11

Создание SchemaСоздание Schema
const schemaBuilder = lf.schema.create('KEEPSOLID_SIGN_DB', 1.0);
schemaBuilder.createTable('Documents')
.addColumn('id', lf.Type.STRING)
.addColumn('parentId', lf.Type.OBJECT)
.addColumn('type', lf.Type.STRING)
.addColumn('signOrder', lf.Type.NUMBER)
.addColumn('encryptionKey', lf.Type.STRING)
.addIndex('idxSignOrder', ['signOrder'], false, lf.Order.DESC);
.addPrimaryKey(['id']);
schemaBuilder.connect().then((db) => {
// Можно работать с базой
});
9 . 11

Типы полейТипы полей
9 . 12

String
9 . 12

String
Number
9 . 12

String
Number
Integer (32bit)
9 . 12

String
Number
Integer (32bit)
Boolean
9 . 12

String
Number
Integer (32bit)
Boolean
Object
9 . 12

String
Number
Integer (32bit)
Boolean
Object
Date
9 . 12

String
Number
Integer (32bit)
Boolean
Object
Date
Array Buﬀer
9 . 12

SQL Lovefield
9 . 13

SQL Lovefield
SELECT *
FROM Documents
WHERE type = "TEMPLATE"
9 . 13

SQL Lovefield
SELECT *
FROM Documents
Database
.select()
.from(document)
.where(document.type.eq('TEMPLATE'))
.exec()
9 . 13

SQL Lovefield
SELECT *
FROM Documents
Database
.select()
.from(document)
.exec()
SELECT encryptionKey
FROM Documents
WHERE signOrder >= 1
ORDER BY signOrder DESC
LIMIT 10
9 . 13

SQL Lovefield
SELECT *
FROM Documents
Database
.select()
.from(document)
.exec()
SELECT encryptionKey
FROM Documents
WHERE signOrder >= 1
ORDER BY signOrder DESC
LIMIT 10
Database
.select(document.encryptionKey)
.from(document)
.where(document.signOrder.gte(1))
.orderBy(document.signOrder, lf.Order.DESC)
.limit(10)
.exec()
9 . 13

SQL Lovefield
SELECT *
FROM Documents d, Files f
WHERE d.fileId = f.id
AND d.id = '123'
9 . 14

SQL Lovefield
SELECT *
AND d.id = '123'
Database
.select()
.from(document, file)
.where(lf.op.and(
document.fileId.eq(file.id),
document.id.eq('123'),
))
.exec()
9 . 14

SQL Lovefield
SELECT *
AND d.id = '123'
Database
.select()
.where(lf.op.and(
))
.exec()
SELECT * FROM document
INNER JOIN file
ON document.fileId = file.id
WHERE document.id = '123'
9 . 14

SQL Lovefield
SELECT *
AND d.id = '123'
Database
.select()
.where(lf.op.and(
))
.exec()
SELECT * FROM document
INNER JOIN file
ON document.fileId = file.id
WHERE document.id = '123'
Database
.select()
.from(document)
.innerJoin(
file,
document.fileId.eq(file.id)
)
.where(document.id.eq('123'))
.exec()
9 . 14

Интересные особенностиИнтересные особенности
9 . 16

Позволяет задавать Schema в YAML (SPAC)
9 . 16

Типы Storage: IndexedDB, Memory, Firebase
9 . 16

Поддерживает Import/Export в Javascript-объект
9 . 16

Поддерживает Import/Export в Javascript-объект
Поддерживает Data Observation
9 . 16

Data ObservationData Observation
9 . 17

Data ObservationData Observation
var query = db.select()
.from(documents)
.where(documents.id.eq('1'));
var handler = function(changes) {
// Будет вызываться всегда, когда происходит изменение данных
};
db.observe(query, handler);
db.update(documents)
.set(documents.title, 'New Title')
.where(documents.id.eq('1'))
.exec();
db.unobserve(query, handler);
9 . 17

НюансыНюансы
9 . 18

Изменение SchemaИзменение Schema
9 . 19

Вывод ошибокВывод ошибок
9 . 20

Вывод ошибокВывод ошибок
Constraint error: (202) Attempted to insert NULL value to non-nullable ﬁeld
Documents.signOrder.
9 . 20

Хранение файловХранение файлов
10 . 1

Oﬄine + Web WorkerOﬄine + Web Worker
11 . 1

АрхитектураАрхитектура
12 . 2

Redux + Side Eﬀects + Entities + Selectors
12 . 3

Side EﬀectsSide Eﬀects
@Effect()
documentCreate$ = this.actions$.pipe(
ofType(DocumentActions.Types.DocumentCreate),
map(action => action.payload.query),
exhaustMap(query =>
this.dbService.createDocument(query)
),
flatMap(() => [
new DocumentAction.DocumentCreateSuccess();
new DocumentAction.GenerateDocumentPreview();
])
);
12 . 4

EntitiesEntities
export interface Document {
id: string;
name: string;
}
export interface State extends EntityState<Document> {
activeDocumentId: number | null;
}
12 . 5

EntitiesEntities
export interface Document {
id: string;
name: string;
}
export interface State extends EntityState<Document> {
activeDocumentId: number | null;
}
export const adapter: EntityAdapter<Document> = createEntityAdapter<Document>();
12 . 5

Entity adapterEntity adapter
addOne
addMany
addAll
removeOne
removeMany
removeAll
updateOne
updateMany
upsertOne
upsertMany
map
12 . 6

SelectorsSelectors
export const getDocumentState = (state: AppState) => state.documents;
export const getDocumentEntities = (state: DocumentState) => state.entities;
export const getDocumentEntities = createSelector(
getDocumentState,
getDocumentEntities
);
export const getAllDocuments = createSelector(getDocumentEntities, entities =>
Object.keys(entities).map(id => entities[id])
);
12 . 7

SchematicsSchematics
ng generate action
store
entity
reducer
effect
container
feature
12 . 9

class GetDocumentPreviewAction implements IDocumentAction {
readonly type = DocumentActionTypes.GetDocumentPreview;
documentType: DocumentType;
constructor(public payload: any) { }
}
class GetDocumentPreviewSuccessAction implements IDocumentAction {
readonly type = DocumentActionTypes.GetDocumentPreviewSuccess;
constructor(public payload: IFileWithData) { }
}
class GetDocumentPreviewFailureAction implements IDocumentAction {
readonly type = DocumentActionTypes.GetDocumentPreviewFailure;
}
12 . 10

https://github.com/pelotom/unionize
import { unionize, ofType, UnionOf } from 'unionize';
const DocumentActions = unionize({
GET_DOCUMENT_PREVIEW: ofType<{ id: string }>(),
GET_DOCUMENT_PREVIEW_SUCCESS: ofType<IFileWithData>()
GET_DOCUMENT_PREVIEW_FAILURE: {}
});
type DocumentAction = UnionOf<typeof DocumentActions>;
12 . 11

Коммуникация с Web WorkerКоммуникация с Web Worker
12 . 12

Eﬀect
Action
ReduxRedux
12 . 13

Eﬀect
Action
ReduxRedux ComutterComutter
12 . 13

Eﬀect
Action
ReduxRedux Web WorkerComutterComutter
12 . 13

Eﬀect
Action
ReduxRedux Web Worker
Success/Failure
Action
ComutterComutter
12 . 13

ВыводыВыводы
13 . 1

Спасибо за вниманиеСпасибо за внимание
Тимофей Лавренюк
@geek_timofey
14

Перепись приложения. Нативного. На JS. Done. | Odessa Frontend Meetup #10

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Перепись приложения. Нативного. На JS. Done. | Odessa Frontend Meetup #10

Similaire à Перепись приложения. Нативного. На JS. Done. | Odessa Frontend Meetup #10 (20)

Plus de OdessaFrontend

Plus de OdessaFrontend (20)

Перепись приложения. Нативного. На JS. Done. | Odessa Frontend Meetup #10