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

•

1 gefällt mir•1,082 views

Meduza запустилась полгода назад. Сейчас это 25 миллионов хитов в месяц, тысячи 5-звездочных отзывов в аппсторе и гугл-плее, релизы мобильных приложений раз в две недели. И все это за полгода. Техническая команда при этом — 7 человек, а весь трафик может обслуживать один небольшой сервер. О чем будем говорить: — как синхронно поддерживать десктоп, мобильный веб и нативные приложение с одинаковым функционалом; — как добавлять новые функции в нативное приложение без процедуры апрува; — как поддерживать большие нагрузки в бизнес-критичном функционале, но легко и быстро программировать некритичные функции; — как и зачем бороться с webview, CORS, jsonp и ASAP.

Ingenieurwesen

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

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

сложности в мобилах
• нет возможности откатиться
• креши видны явно
• апдейты с рекламой = не круто
• ревью 2 недели в iOS
13

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

кто сталкивался с
webview в
iOS/Android?
23

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

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

native+web proﬁt
• native feel
• новые фичи в обход обновления
приложения
• веб-инфраструктура: деплой, ролбек,
поддержка
28

• CORS в iOS ⟶ JSONP
• Дублирующиеся элементы из-за SEO
⟶ удалили SEO из материала с игрой
• Правки стилей / JS кода ⟶ исправить
материал, опубликовать, обновить
лэйаут
Проблемы и решения
32

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

Проблемы и решения
• CORS ⟶ duckling на том же домене
• Респонсив по высоте ⟶ postMessage
• Коммуникация эмбеда с вебом ⟶
postMessage
• Коммуникация эмбеда с приложением
⟶ postMessage + bridge
37

Профит от подхода с эмбедами
• Модный стэк технологий - быстрая и простая
разработка
• Можно выпилить множеством способов не
ломая сам материал
• API медузы доступно без магии
• Минимальные изменения в коде вэба/лэйаутов
38

Нерешенные проблемы
• Из-за сложной архитектуры
сложно запускать локально
• Отладка Webview
41

Какие вопросы у вас
возникли?
Ярослав Кравченко
@sowingthewounds
Самат Галимов @samat
Meduza Dev @mdzdev

Weitere ähnliche Inhalte

Was ist angesagt?

Language Shop

guest86d9be

иваничева анна. пм и работа над ошибками. начало.

Ann Ivanicheva

Instalook.ru итоги 1-7 мая 2017

Instalook

React.js: Ускоряем UX/UI

Max Klymyshyn

Agile вне сферы ИТ

Alexander Burdun

Agile вне IT

Agile Base Camp

лизинг презентация V3

Anastasia Karimova

Тестирование производительности клиентсайда

SQALab

Web Not Bombs: Design & UX #1. Eugene Nevgen

Eugene Nevgen

MVC in JavaScript

Alexander Tarasyuk

Was ist angesagt? (10)

Language Shop

иваничева анна. пм и работа над ошибками. начало.

Instalook.ru итоги 1-7 мая 2017

React.js: Ускоряем UX/UI

Agile вне сферы ИТ

Agile вне IT

лизинг презентация V3

Тестирование производительности клиентсайда

Web Not Bombs: Design & UX #1. Eugene Nevgen

MVC in JavaScript

Andere mochten auch

Cпецпроекты рбк

Vitaliy Eremin

Чем плох console.log, и как сэкономить время на отладке в Dev Tools? - Точки останова. - Просмотр состояния стеков. - Работа с repl в контексте активного стека. - Как удобно следить за состояниями переменных и выражений с помощью watch expressions. - Как поставить точку останова на события, мутации DOM, XHR, на обращения к полям объектов и на неперехваченные исключения? - Pretty print и source maps. - Немного о логах и debug.js.

Отладка кода в браузере / Антон Шувалов (Rambler&Co)

Ontico

Визуализация данных в браузере с помощью D3.js / Михаил Дунаев (Rambler&Co)

Ontico

1. Типы шаблонизаторов DOM/innerHTML. 2. Внутренности AngularJS и почему он тормозит. 3. Внутренности ReactJS и почему он тормозит. 4. Менее раскрученные решения Blaze/PaperclipJS/Riot и что там сделано лучше. 5. Плюсы и минусы virtualdom. 6. Работа с DOM может быть быстрее, если: 6.1 Использовать одни и те-же участки DOM несколько раз. 6.2 Сокращать количество reflow с DocumentFragment. 6.3 Быстрое создание повторяющихся участков DOM с помощью cloneNode. 6.4 Создавать куски DOM ahead of time. 7. Встречаем temple - шаблонизатор, работающий в разы быстрее reactjs и не требующий загрузки 40k библиотеки времени исполнения.

Быстрый рендеринг с DOM шаблонизаторами / Борис Каплуновский (aviasales.ru)

Ontico

“Страница должна загружаться быстрее чем за 1 секунду; количество серверных запросов должно быть сведено к минимуму; CSS и JS файлы должны быть сжаты и не превышать 50 килобайт…” — это лишь малая часть технических решений и рекомендаций, которыми нас снабжает индустрия в погоне за производительностью. Но во всем этом есть одна проблема — пользователям нет никакого дела до килобайтов, миллисекунд и количества запросов. Производительность — это не математика. Производительность — это восприятие. Именно восприятие создает впечатление медлительности сайта с малым количеством серверных запросов, в то время как сайт, возвращающий результаты поиска в течение секунд, может восприниматься как достаточно быстрый для пользователя. И именно восприятие пользователя является единственным мерилом производительности вашего сайта. В докладе будут рассмотрены психологические и технические теории, приемы и примеры, позволяющие управлять восприятием пользователя.

В погоне за производительностью. Психология пользователя / Денис Мишунов (Dig...

Ontico

Мы создаем nodejs приложения, используя различные современные технологии, такие как Docker, Consul, pm2. Современный спектр решений настолько обширен, что сложно не заблудиться. Как же выбрать нужные вашему проекту технологии, чтобы успешно его запустить и поддерживать? Будут рассказаны истории и, конечно же, даны вредные советы :) Как на nodejs пройти путь от Hello world приложения до распределённого решения, состоящего из микросервисов? Мы пройдём жизненный цикл продукта, начав с простого приложения на nodejs. Научимся его правильно запускать и будем постепенно добавлять элементы, убирая при этом ненужные. Так к нашему приложению присоединится гипервизор, а само оно будет разделено на части, где каждая сущность будет управлять своей частью приложения. Построив таким образом архитектуру на чистом nodejs, мы займёмся развитием приложения, добавим современные технологии и применим новые подходы к организации инфраструктуры. Запакуем приложение в Docker, попутно обсудим, зачем он нужен и что может дать. И, наконец, решим проблему поиска запущенных сервисов и отслеживания их статусов, используя Consul.

Инфраструктура распределенных приложений на nodejs / Станислав Гуменюк (Rambl...

Ontico

В MySQL 5.7 появился целый ряд новых возможностей, позволяющих использовать MySQL в приложениях и как хранилище JSON-документов, и как реляционную базу данных. В этом докладе мы расскажем о поддержке JSON в MySQL 5.7, а также поговорим о том, когда имеет смысл её использовать, и насколько хорошо она работает. Кроме того, мы остановимся на новом протоколе доступа к MySQL, поддерживающем SQL. Помимо этого, мы рассмотрим CRUD-операции и такие дополнительные функции, как асинхронная коммуникация и пайплайнинг (pipelining). В заключительной части доклада мы расскажем о возможностях MySQL 5.7 в качестве хранилища документов.

MySQL 5.7 - NoSQL - JSON, Protocol X, Document Store / Петр Зайцев (Percona)

Ontico

Сегодня много дискуссий о том, что лучше - MySQL или PostgreSQL? Однако перед тем, как выбирать именно реляционную базу данных для своего проекта, стоит понять, является ли реляционная база данных наилучшим решением для него. В рамках этого доклада мы сравним наиболее популярную реляционную базу данных с открытым кодом с наиболее популярным хранилищем документов с открытым кодом. Мы определим, в каких случаях эффективнее всего работает MySQL, а в каких - MongoDB. Мы также рассмотрим ситуации, в которых ни одна из этих баз данных не будет лучшим решением и в которых целесообразно остановить свой выбор на других технологиях.

MySQL® и MongoDB® - когда что лучше использовать? / Петр Зайцев (Percona)

Ontico

#StoryThinking: что такое сторителлинг, нативная реклама, брендированный конт...

Vera Chernysh

В выпуске 4.8 ядра Linux появилась поддержка NVMf (NVM Express over Fabrics) — стандартизованной возможности присоединять по сети как блочные устройства твердотельные накопители, установленные в разъёмы PCI Express. NVMf лишён многих недостатков iSCSI, повторяющего по сети SCSI-команды со всеми их издержками времён дисковых накопителей, и главное — позволяет по полной использовать возможности сетей с прямым доступом к оперативной памяти (RDMA). Таким образом, можно под управлением одного узла собрать сверхбыстрый и сверхотзывчивый пул блочных устройств, не прибегая к покупке дорогого флэш-массива. Но как воспользоваться этим пулом, не загубив теоретические показатели программными обёртками? В докладе будут рассмотрены варианты применения NVMf для различных конфигураций PostgreSQL, Oracle Database, Hadoop, файловых хранилищ, о разработках в направлении «программно-определяемой памяти» с применением NVMe-устройств, доступных по сети, обсуждены текущие проблемы, ограничения и перспективы. Особое внимание будет уделено практическим способам измерения производительности ввода-вывода с учётом задачи, решаемой подсистемой хранения.

NVMf: 5 млн IOPS по сети своими руками / Андрей Николаенко (IBS)

Ontico

Andere mochten auch (10)