Real-time данные на фронтенде

Real-time данные на фронтенде

Сергей РубановJavaScript Samurai

• Многие баги, которые туда попали однажды и были как-либо использованы, остаются там навсегда

• Всё в вебе должно иметь обратную совместимость• Вендоры браузеров не готовы поддерживать все

стандарты• Существуют конкурирующие группы разработки

стандартов (w3c, whatwg) и конкурирующие спецификации

• Сложность спецификаций растет• Не смотря на значимость принципа обратной

совместимости, вендоры могут убрать поддержку каких-либо Web API в любой момент (WebSQL, AppCache)

• DOM однопоточный и делит тред с мейн тредом JS, рендеринг однопоточный

• WebWorker’ы — ограниченные потоки• не имеют доступа к localStorage• не имеют доступа к DOM• требуют использования сериализации или структурного

клонирования (может циклические зависимости, но не может дескрипторы, геттеры, сеттеры, цепочку прототипов)

• Web Storage синхронный и требует сериализации данных• IndexedDB имеет много багов в Safari и неполную

реализацию в IE• Нормальных подписок в браузере не существует в

принципе

• Изначально содержит баги, которые не могут быть исправлены

• Не был спроектирован для создания приложений• Практически отсутствующие возможности управления

памятью• Непредсказуемое поведение GC• Примитивная система типов

• Некоторые типы ошибок нельзя выявить на этапе написания

• Никакая математика• Условная, во многом ограниченная многопоточность

• Отсутствие разделяемой памяти

JavaScript fatigue

Как не поддаться JavaScript fatigue

• Принять факт, что все очень плохо• Использовать статическую проверку

типов (TypeScript и Flow)• это лучше, чем использовать

компиляцию из других, синтаксически более далеких от JS языков

• Использовать линтеры (TSLint, ESLint)

Ускоряем JavaScript• Не используем новые фичи языка (или

транспилируем код в ES5.1)• Пишем императивный код в стиле Си• Используем TypedArrays везде, где возможно• Используем asm.js для математики

• есть оверхед по размеру файла• нужен разработчик, который умеет C / C++

/ Rust

Популярные заблуждения о

фронтенд-разработке• JavaScript медленный• DOM медленный• Чтобы сделать приложение быстрым,

надо переписать его на React (Angular 2 / Preact / Riot / Vue / etc.)

Как сделать real-time web-приложения

производительными и отзывчивыми?

Нужно держать UI-тред свободным

Canvas?SVG?

WebGL?

или VanillaJS?

Web Workers

Service Worker

Service Worker

IndexedDB

Market Data APIhttps://developers.exante.eu/

Задавайте вопросы!

@chicoxyzzy