Erstellen eines Sitzschemas im Kino in Reaktion: Über Leinwand, schönes Design und Optimierung

Das reichhaltige Tinkoff-Ökosystem bietet Lifestyle-Dienstleistungen. Sie können Tickets für verschiedene Veranstaltungen - Kino, Theater, Konzerte, Sportveranstaltungen - unter https://www.tinkoff.ru/entertainment/ sowie in der mobilen Anwendung kaufen .

Mein Name ist Vadim und ich werde Ihnen erzählen, wie wir es im Entertainment-Team der Tinkoff Bank gemacht haben.

---

Was brauchst du, um eine Kinokarte zu kaufen?

Wenn Sie sich für einen Film und ein Kino entschieden haben, müssen Sie sich einen Platz im Kino aussuchen - studieren Sie das schöne Sitzschema und kaufen Sie die besten Tickets.

Wir haben drei Optionen für die Implementierung eines solchen Systems entwickelt.

1. Mach alles in gutem alten HTML

Vorteile:

• Bequem zu stylen.

  
  
  
  
  

• Es ist bequem, in React zu arbeiten.

  
  
  
  
  

• Alles ist vorhanden (A11Y).

  
  
  
  
  

Minuspunkte:

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