Fazendo um esquema de assentos no cinema em reação: sobre tela, design bonito e otimização

O rico ecossistema Tinkoff oferece serviços de estilo de vida. Você pode comprar ingressos para vários eventos - cinema, teatros, concertos, eventos esportivos em https://www.tinkoff.ru/entertainment/ , bem como no aplicativo móvel.

Meu nome é Vadim e contarei como fizemos isso na equipe de entretenimento do Tinkoff Bank.

---

O que você precisa para comprar um ingresso de cinema?

Quando você decidir por um filme e um cinema, você precisa escolher um assento no cinema - estudar o belo esquema de assentos e comprar os melhores ingressos.

Apresentamos três opções para implementar esse esquema.

1. Faça tudo no bom e velho HTML

Prós:

• Conveniente para o estilo.

  
  
  
  
  

• É conveniente trabalhar no React.

  
  
  
  
  

• Tudo está disponível (A11Y).

  
  
  
  
  

Desvantagens:

• 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, :

• Gotchas

  
  
  
  
  

• C

  
  
  
  
  

• 
  
  
  
  

, Pixi wiki .

, Pixi.Graphics , , . , , Pixi.Graphics.

? 

1. — .

   
   
   
   
   

2. canvas .

   
   
   
   
   

3. Pixi , .

   
   
   
   
   

4. . , - .