Тимофей Лавренюк
@geek_timofey
Архитектура
Шифрование
Работа с локальной БД
Работа с PDF
Общение с RPC-сервером
Нужна web-версия...
Старая архитектура
Старая WEB-версия
Не уступающее нативным клиентам
Увидел PHP
Новая WEB-версия
Без PHP
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
+
+
+
+
+
+
Архитектура веб приложения
?
Никто не знает как работает соединение с сервером
Protocol Buffers
Document.proto
Document.d.ts
ArrayBuffer
Client
Server
TS Model
C++ Model
NodeJS
//TODO: красивая визуализация
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
Никто не знает как работает шифрование в проекте
cipher = encrypt(block, key) // шифруем block с помощью key
block = decrypt(cipher, key) // расшифровываем cipher с помощью key
+ Поддержка RSA
+ Изоморфный код
- Производительность
- Размер
- Неполная поддержка RSA
- Изоморфный код
+ Размер
+ Производительность
web crypto
+ Изоморфный код
+ Производительность
- Размер
1) Perfomance перед релизом
2) Edge и краш
b3d38902-9d5b-45df-931b-580364a45c06
23TplPdS
65876348756
String
String
Int
128 bit Int
1473574375358436568436564568648623850000
Number.MAX_SAFE_INTEGER
=
9007199254740991 (2 53)
340282366920938463463374607431768211456 (2128)
128bit MAX
=
Low Bit
High Bit
Sign Bit
"4713949395975284736:-4954997526967152640"
{
"high":{
"high":34234234,
"low":-437598348
},
"low":{
"high":97163629,
"low":-748735
}
}
"F8C044003D248000:69C74800E626C800"
Поддержка WebAssembly
function generate32BitLong() {
const uuid = uuidv4().replace(/-/g, '');
const highHex = uuid.substr(0, 16);
const lowHex = uuid.substr(16, 16);
return Long.fromValue({
high: parseInt(highHex, 16),
low: parseInt(lowHex, 16),
unsigned: true
});
}
message IdType {
optional uint64 high = 1;
optional uint64 low = 2;
}
id_type.proto
function generateDocumentId() {
return coresign.IdType.create({
high: new Long({
high: generate32BitLong(),
low: generate32BitLong()
}),
low: new Long({
high: generate32BitLong(),
low: generate32BitLong()
})
});
};
67+
65+
(flag)
54+
65+
10+
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
148 094 234 (RGB)
234B9A (HEX)
216809089 (32bit Int)
RED
GREEN
BLUE
int >>> 24 & 255
int >>> 8 & 255
int >>> 16 & 255
Битовые операции обращаются со своими операндами как с 32-х разрядными последовательностями нулей и единиц, а не как с десятичными, восьмеричными или шестнадцатиричными числами.
MDN
& | ^ ~ << >> <<<
216809089 (base 10)
=
00001100111011000011111010000001 (base 2)
216809089 >>> 16 (base 10)
=
00000000000000000000110011101100 (base 2)
=
3308 (base 10)
255 (base 10)
=
00000000000000000000000011111111 (base 2)
3308 & 255 (base 10)
=
00000000000000000000000011101100 (base 2)
=
236 (base 10)
++
Целочисленное переполнение
rgb(254, 182, 69) = -21609089
ситуация в компьютерной арифметике, при которой вычисленное в результате операции значение не может быть помещено в n-битный целочисленный тип данных.
Сервер не воспринимает отрицательный Int
Глюк в SimCity 2000.
Здесь дело в том, что бюджет игрока стал очень большим, а после перехода через 231 внезапно стал отрицательным. Игра оканчивается поражением.
Глюк из Diablo III.
Из-за одного из изменений патча 1.0.8, игровая экономика сломалась. Максимальную сумму для сделок повысили с 1 млн до 10 млн. Стоимость покупки переполнялась через 32-битный тип, а при отмене операции возвращалась полная сумма. То есть игрок оставался с прибылью в 232 игровой валюты
Angular Ivy Renderer
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
UI + WASM Модуль
Надо делать все своими руками
Рендеринг документа
С++ библиотека
А не скомпилить ли ее в WebAssembly?
Почему это не так просто?
WASM
WASM
Я
Я
В итоге:
на клиенте
На сервере
C++ PDF Hummus
HummusJS
HummusRecipe
var cxt = pdfWriter.startPageContentContext(page);
cxt.q()
.cm(2,0,0,2,0,0)
.Q()
.y(inX1,inY1,inX3,inY3)
.h();
.re(inLeft,inBottom,inWidth,inHeight);
.q();
.Q();
.cm(inA,inB,inC,inD,inE,inF);
.w(inLineWidth);
.J(inLineCapStyle);
.j(inLineJoinStyle);
.M(inMiterLimit);
HummusJS
pdfDoc
// edit 1st page
.editPage(1)
.text('Add some texts to an existing pdf file', 150, 300)
.rectangle(20, 20, 40, 100)
.comment('Add 1st comment annotaion', 200, 300)
.image('/path/to/image.jpg', 20, 100,
{width: 300, keepAspectRatio: true})
.endPage()
// edit 2nd page
.editPage(2)
.comment('Add 2nd comment annotaion', 200, 100)
.endPage()
// end and save
.endPDF();
HummusRecipe
WebAssembly не так прост, когда чужую библиотеку компилируешь
Создание обьектов в PDF руками
PDFPage* pdfPage = new PDFPage();
pdfPage->SetMediaBox(PDFRectangle(0,0,595,842));
PageContentContext* pageContentContext =
pdfWriter.StartPageContentContext(pdfPage);
// Start adding content to page
// Draw a Line, stroke
pageContentContext->q();
pageContentContext->w(2);
pageContentContext->K(0,0,1,0);
pageContentContext->m(10,500);
pageContentContext->l(30,700);
pageContentContext->s();
pageContentContext->Q();
// Draw a Polygon, stroke
pageContentContext->q();
pageContentContext->w(2);
pageContentContext->K(0,1,0,0);
pageContentContext->m(40,500);
pageContentContext->l(60,700);
pageContentContext->l(160,700);
pageContentContext->l(140,500);
pageContentContext->s();
pageContentContext->Q();
const browser = await puppeteer.launch({
headless: true
});
const page = await browser.newPage();
await page.emulateMedia('screen');
await page.goto(
`data:text/html,${compiledTemplate}`, {
waitUntil: 'networkidle2'
}
);
const pdfBuffer = await page.pdf();
Генерация PDF с помощью Pupputeer
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
с помощью Credential Management API
KeepsSolid Sign Mac
Бонус - Apple Pay
const canMakePayment = await paymentRequest.canMakePayment();
if (canMakePayment) {
const paymentRequest = stripe.paymentRequest({
country: 'US',
currency: 'usd',
total: {
label: 'Demo',
amount: 1000,
}
});
}
Stripe Fallback
Криптография
Offline
Работа с PDF
Общение с RPC-сервером
Framework + Web Worker
Progressive Web App
Тимофей Лавренюк
@geek_timofey