45
React + БЭМ = Гибкая архитектура библиотеки компонентов

React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

  • Upload
    others

  • View
    13

  • Download
    0

Embed Size (px)

Citation preview

Page 1: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

React + БЭМ = Гибкая архитектурабиблиотеки компонентов

Page 2: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 3: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 4: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

Организации, проектирующие системы, неизбежно производят конструкцию, чья структура является копиеи ̆ структуры взаимодеи ̆ствия внутри самои ̆ организации»

Закон Конвея

«

Page 5: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 6: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 7: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 8: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 9: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 10: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

10

click.alfabank.ru link.alfabank.ru/deposit/

Page 11: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 12: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 13: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 14: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

Консистентность Гибкость

Page 15: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

FIЖERalfa bankui library

github.com/alfa-laboratory/arui-feather

Page 16: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 18: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

18

Page 19: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

19

Page 20: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

20

Page 21: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

21

Page 22: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

22

Page 23: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

Темы

Page 24: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 25: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

25

Page 26: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

26

Page 27: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

27

Page 28: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

А что, если у меня компонент чуть-чуть отличается?Проксирование `className`

Page 29: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

29

Page 30: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

30

Page 31: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

Как быть, если мой компонент совсем отличается?Перегрузка имени блока

Page 32: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

32

Page 33: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

33

Page 34: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

34

Page 35: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

35

Page 36: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

36

Page 37: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

DI компоненты

Page 38: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура
Page 39: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

Button

Popup

Page 40: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

40

Page 41: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

41

Page 42: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

42

Page 43: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

43

Page 44: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

Итого

Page 45: React + БЭМ - s.conf.guru · Организации, проектирующие системы, неизбежно производят конструкцию, чья структура

Cndecorator

github.com/alfa-laboratory/cn-decorator

facebook.com/vitaliy.green

[email protected]

● БЭМ для React

● Темы

● Проксирование `className`

● Перегрузка имени блока

● DI компоненты