Créer un schéma de sièges dans le cinéma dans React: à propos de la toile, du beau design et de l'optimisation

Le riche écosystème de Tinkoff propose des services de style de vie. Vous pouvez acheter des billets pour divers événements - cinéma, théâtres, concerts, événements sportifs sur https://www.tinkoff.ru/entertainment/ , ainsi que dans l'application mobile.

Je m'appelle Vadim et je vais vous dire comment nous l'avons fait dans l'équipe de divertissement de Tinkoff Bank.

---

De quoi avez-vous besoin pour acheter un billet de cinéma?

Lorsque vous avez choisi un film et un cinéma, vous devez choisir une place dans le cinéma - étudier le magnifique schéma de sièges et acheter les meilleurs billets.

Nous avons proposé trois options pour mettre en œuvre un tel système.

1. Tout faire dans le bon vieux HTML

Avantages:

• Pratique à coiffer.

  
  
  
  
  

• Il est pratique de travailler dans React.

  
  
  
  
  

• Tout est disponible (A11Y).

  
  
  
  
  

Moins:

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