豊かなTinkoffエコシステムにはライフスタイルサービスがあります。映画、劇場、コンサート、スポーツイベントなどのさまざまなイベントのチケットは、https：//www.tinkoff.ru/entertainment/やモバイルアプリケーションで購入できます。
私の名前はヴァディムです。ティンコフ銀行のエンターテインメントチームでどのようにそれを行ったかをお話しします。
映画のチケットを購入するには何が必要ですか？
映画と映画館を決定したら、映画館の座席を選択する必要があります。美しい座席スキームを研究し、最高のチケットを購入してください。
このようなスキームを実装するための3つのオプションを考え出しました。
1.古き良きHTMLですべてを行う
長所：
スタイルに便利。
Reactで作業すると便利です。
すべてが利用可能です（A11Y）。
マイナス：
DOM- DOM- ( — ).
( ).
2. SVG
, HTML.
3. Canvas
:
( ).
.
:
Server Side Rendering.
A11Y ( « »).
canvas, , UX . DOM- . canvas Internet Explorer 11.
, , canvas , SVG- HTML-.
canvas
, canvas. , , — Konva, PixiJS, Fabric.js Phaser.
PixiJS. Pixi: , . .
PixiJS. Pixi.App
(, , , , ). (Stage Pixi), 5 × 5 , — Pixi
, . - , .
, 100 , , , .
React
: React?
. , .
, , — react-pixi-fiber. , JSX, Pixi canvas.
Pixi. , Pixi.Text
react- <Text />
.
— CustomPIXIComponent
. Pixi, JSX: Stage, Container, , react-.
. react-, , , . graphics props. , , .
?
. — , : , , .
— , .
. : , — .
: retina- . SVG PixiJS: SVG.
.
PixiJS
:
A — .
B — .
C — .
D — .
E — .
F — .
G — .
— width / 22.
— height / 16.
22 16, , — .
: , . , PixiJS CustomPIXIComponent.
— , , , , .
: , !
, «», , , , — . .
.
sectors , , hallScheme, 236 .
, SVG base64.
?
SVG - PixiJS.
— HTML, .
, — SVG react-.
html-react-parser. HTML react-. Node.js, . , .
parseHtmlToReact
, .
JSX , : , .
, 20%, 80—90%. , .
, , 16 . Ticker_tick
Pixi . , , - , — 16 .
16 ?
«60 » - , . , 60 , .
, 60 : 1000 ÷ 60 = 16,6666 .
Pixi.Ticker
60 canvas, . . , .
Pixi, .
, Pixi Stage react-pixi-library. , react-pixi-library Ticker .
sharedTicker
Pixi. , pixi- Ticker. Ticker .
Ticker . react-, props .
, , . canvas , .
, , Pixi Github wiki, :
, Pixi wiki .
, Pixi.Graphics , , . , , Pixi.Graphics.
?
— .
canvas .
Pixi , .
. , - .