Making a Seating Scheme for a Cinema in React: About Canvas, Beautiful Design and Optimization

The rich Tinkoff ecosystem has lifestyle services. You can buy tickets for various events - cinema, theaters, concerts, sports events at https://www.tinkoff.ru/entertainment/ , as well as in the mobile application.

My name is Vadim and I will tell you how we did it in the Entertainment team at Tinkoff Bank.

---

What do you need to buy a movie ticket?

When you have decided on a movie and a cinema, you need to choose a seat in the cinema - study the beautiful seating scheme and buy the best tickets.

We came up with three options for implementing such a scheme.

1. Do everything in good old HTML

Pros:

• Convenient to style.

  
  
  
  
  

• It is convenient to work in React.

  
  
  
  
  

• Everything is available (A11Y).

  
  
  
  
  

Minuses:

• The number of DOM nodes and the depth of the DOM tree grows (example - in the image above).

  
  
  
  
  

• Performance issues with user interaction (schema movement).

  
  
  
  
  

2. Use SVG

The pros and cons are about the same as with 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. . , - .