Crear un esquema de asientos para un cine en React: sobre lienzo, hermoso diseño y optimización

El rico ecosistema de Tinkoff tiene servicios de estilo de vida. Puede comprar entradas para varios eventos: cine, teatros, conciertos, eventos deportivos en https://www.tinkoff.ru/entertainment/ , así como en la aplicación móvil.

Mi nombre es Vadim y les contaré cómo lo hicimos en el equipo de entretenimiento de Tinkoff Bank.

---

¿Qué necesitas para comprar una entrada al cine?

Cuando se haya decidido por una película y un cine, debe elegir un asiento en el cine: estudiar el hermoso esquema de asientos y comprar las mejores entradas.

Se nos ocurrieron tres opciones para implementar tal esquema.

1. Haz todo en buen HTML antiguo

Pros:

• Conveniente para peinar.

  
  
  
  
  

• Es conveniente trabajar en React.

  
  
  
  
  

• Todo está disponible (A11Y).

  
  
  
  
  

Desventajas:

• El número de nodos DOM y la profundidad del árbol DOM crece (ejemplo, en la imagen de arriba).

  
  
  
  
  

• Problemas de rendimiento con la interacción del usuario (movimiento del esquema).

  
  
  
  
  

2. Utilice SVG

Los pros y los contras son casi los mismos que con 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. . , - .