Построение мультисервисного стартапа в реалиях full-stack javascript

Кто это?
● Gameloft
● DevPro
● Pics.io
@blackrabbit99

Задача
● Принять/загрузить файл
● ????????
● Profit

Что делать с закрытыми?
Искать open source конверторы

Что делать с закрытыми?
Экспериментировать

Целочисленные значения
ctx.drawImage(myImage, 0.3, 0.5)

Не скейлить с помощью drawImage

Pool common objects and classes

Не создавайте мусор
● Array.slice
● Array.splice
● Function.bind

Асинхронный localStorage API с IndexedDB

Микрооптимизация
● Use x | 0 instead of Math.floor
● Clear arrays with .length = 0 to avoid creating a new Array
● Use if .. else over switch
● Use TypedArrays for floats or integers (e.g. vectors and matrices)

Debouncing
● Реальный вызов происходит только в случае, если с момента последней
попытки прошло время, большее или равное задержке.
● Реальный вызов происходит сразу, а все остальные попытки вызова
игнорируются, пока не пройдет время, большее или равное задержке,
отсчитанной от времени последней попытки.

Троттлинг
● выполнение метода не чаще одного раза в
указанный период, даже если он будет вызван
много раз в течение этого периода

WebRTC В production уже сегодня
Захарченко Артем
myzlio@gmail.com
@blackrabbit99

Немного ностальгии

Начнем
● MediaStream (aka getUserMedia)
● RTCPeerConnection
● RTCDataChannel

Структура WebRTC приложения

ICE framework
● сбор местных IP и порт.
● проверка подключения между пирами
● keep alive соединения

Signaling server
● Инициализация связи
● Сетевые настройки
● Информация о кодеках/браузерах

RTCPeerConnection
1. Обработка потерянных пакетов
2. Подавление эха
3. Пропускная способность
4. Динамическая буферизация
5. Снижение и подавление шума
6. Очистка изображения

Посмотрим в действии
Demo

RTCDataChannel передает
● String
● Blob
● ArrayBuffer
● ArrayBufferView

Основные проблемы
● Скорость
● Размер файлов
● Размер чанков

IE
● CU-RTC-Web
● или Google Chrome Frame

Open Source
● PeerJs
● EasyRTC
● PubNub
● ShareFest
● WebRTC.io

Зачем это все?
● Запуск offline
● Доступ к возможностям платформы
● Невероятнейший user experience
● Установка и апдейты прямо из Chrome Market

Жизнь в офлайне
● Файлы хранятся локально
● Online features работают только при наличии
подключения
● Храним данные локально
● HTML5 Filesystem API

Структура приложения

Доступ к платформе

Доступ к платформе
● File
● USB
● Bluetouth
● Socket

Безопасность и CSP
● Никакого eval
● Никаких new Function
● Забываем о существовании Iframe
● Указываем откуда приходит контент

Еще секьюрити
● Вставка контента через
WebView
● Доступ к удаленным ресурсам
XHR, blob, filesystem
● Шаблонизатор
Прекомпилируемые библиотеки или Mustache
Sandox для вызовов eval/new Function

Итог
● Offline
Написание не зависимых приложений
● Could
Храним данные в google хранилищах
● UI/UX
Каждый js-ер хотел сделать нативные окошки
● Доступ к железу
file system/usb
● Не забываем о безопасности

Что мы хотим?
1. Бизнес логика не зависит от UI и backend
2. Абсолютно автономная инициализация
3. Single responsibility principe

Exoskeleton
No jQuery
No Undescore

Frameworks
Marionette
Chaplin
Thorax

Построение мультисервисного стартапа в реалиях full-stack javascript

More Related Content

Построение мультисервисного стартапа в реалиях full-stack javascript