42

Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

  • Upload
    ontico

  • View
    584

  • Download
    4

Embed Size (px)

Citation preview

Page 1: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)
Page 2: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

План• Самат Галимов, техдир — разогрев — 10 минут

• Ярослав Кравченко, фронтенд — спецпроекты без боли — 30 минут

Page 3: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)
Page 4: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)
Page 5: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)
Page 6: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)
Page 7: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

7

Page 8: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

8

Page 9: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)
Page 10: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

desktop vs mobile

8млн vs 2млн сессий в месяц

10

Page 11: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

11

Page 12: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

12

Page 13: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

сложности в мобилах• нет возможности откатиться

• креши видны явно

• апдейты с рекламой = не круто

• ревью 2 недели в iOS13

Page 14: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

14

Page 15: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

ops problem now

15

Page 16: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

скрудж

Page 17: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)
Page 18: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

итого

• нет быстрым спецпроектам (реклама!)

• нет экспериментам

18

Page 19: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

Что же делать?

Page 20: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

20

Page 21: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

21

Page 22: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

22

Page 23: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

кто сталкивался с webview в

iOS/Android?

23

Page 24: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

24

Page 25: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

1 <html> 2 <head> 3 JS 4 CSS 5 </head> 6 <body> 7 %%json>body%% 8 </body> 9 </html>

25

Page 26: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

26

1 { 2 meta: { 3 published_at: 4 ... 5 }, 6 content: { 7 body: "<div>text</div>", 8 layout_url: "layouts/19" 9 } 10 }

Page 27: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

mdza.io/json

27

Page 28: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

native+web profit• native feel

• новые фичи в обход обновления приложения

• веб-инфраструктура: деплой, ролбек, поддержка

28

Page 29: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

Ярослав Кравченко

29

Page 30: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

Решения

• inline • iframe

30

Page 31: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

31

Page 32: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

• CORS в iOS ⟶ JSONP

• Дублирующиеся элементы из-за SEO ⟶ удалили SEO из материала с игрой

• Правки стилей / JS кода ⟶ исправить материал, опубликовать, обновить лэйаут

Проблемы и решения

32

Page 33: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

33

Page 34: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

34

Page 35: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

35

Page 36: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

duckling• Gulp + Webpack • Node.js + Express • React • LESS • MongoDB

36

Page 37: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

Проблемы и решения• CORS ⟶ duckling на том же домене

• Респонсив по высоте ⟶ postMessage

• Коммуникация эмбеда с вебом ⟶ postMessage

• Коммуникация эмбеда с приложением ⟶ postMessage + bridge

37

Page 38: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

Профит от подхода с эмбедами

• Модный стэк технологий - быстрая и простая разработка

• Можно выпилить множеством способов не ломая сам материал

• API медузы доступно без магии

• Минимальные изменения в коде вэба/лэйаутов38

Page 39: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

39

Page 40: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

40

Page 41: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

Нерешенные проблемы

• Из-за сложной архитектуры сложно запускать локально

• Отладка Webview

41

Page 42: Единая платформа для сайта и приложений Медузы / Ярослав Кравченко, Самат Галимов (Meduza)

Какие вопросы у вас возникли?

Ярослав Кравченко @sowingthewounds

Самат Галимов @samat

Meduza Dev @mdzdev