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

Кто это?

● Gameloft● DevPro● Pics.io

@blackrabbit99

Назад в будущее

JS binary data

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

DNG is open

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

Искать open source конверторы

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

Экспериментировать

Canvas Fast drawing

Целочисленные значения

ctx.drawImage(myImage, 0.3, 0.5)

CSS3 transform

Nearest-neighbour rendering

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

Minimize Garbage Collection

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

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

Mosaic

IE

Netscape

И тут понеслась

Общее введение

И тут понеслась

Начнем

● MediaStream (aka getUserMedia)

● RTCPeerConnection

● RTCDataChannel

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

Media Stream

Media Stream Connection

Demo

RTCPeerConnection

ICE framework

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

Signaling server

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

Stun

SDP

RTCPeerConnection

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

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

Demo

All fine

Где же проблемы?

А вот и они!

Идеальный мир

Реальный мир

Turn

RTCDataChannel передает

● String● Blob● ArrayBuffer● ArrayBufferView

RTCDataChannel

Основные проблемы

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

Поддержка

Safari

RIP???

Safari

IE

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

Статистика

Open Source

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

Chrome OS packaged apps

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

Из Web

в Offline

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

подключения● Храним данные локально● HTML5 Filesystem API

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

Пример. chrome.storage

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

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

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

Пример кода

Еще секьюрити● Вставка контента через

WebView

● Доступ к удаленным ресурсамXHR, blob, filesystem

● ШаблонизаторПрекомпилируемые библиотеки или MustacheSandox для вызовов eval/new Function

Итог● Offline

Написание не зависимых приложений

● CouldХраним данные в google хранилищах

● UI/UXКаждый js-ер хотел сделать нативные окошки

● Доступ к железуfile system/usb

● Не забываем о безопасности

Backbonexs

Что мы хотим?

1. Бизнес логика не зависит от UI и backend

2. Абсолютно автономная инициализация

3. Single responsibility principe

SUPERVISING PRESENTER

MVVM

HMVC

jQuery?

Exoskeleton

No jQueryNo Undescore

Frameworks

MarionetteChaplinThorax

Aura