Nov 14, 2014
Кто это?
● 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 уже сегодня
Захарченко Артем[email protected]@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