Артем Захарченко воркшоп «Построение мультисервисного стартапа в реалиях full-stack javascript»​ Frontend Dev Conf'14 www.fdconf.by

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

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

12. JS binary data

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

15. DNG is open

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

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

19. Canvas Fast drawing

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

21. CSS3 transform

22. Nearest-neighbour rendering

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

24. Minimize Garbage Collection

25. Pool common objects and classes

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

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

28. Микрооптимизация
● 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)

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

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

31. Веб воркеры

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

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

34. Mosaic

35. IE

36. Netscape

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

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

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

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

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

42. Media Stream

43. Media Stream Connection
Demo

44. RTCPeerConnection

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

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

59. Stun

80. SDP

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

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

83. All fine

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

85. А вот и они!

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

87. Реальный мир

88. Turn

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

90. RTCDataChannel

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

92. Поддержка

93. Safari
RIP???

94. Safari

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

96. Статистика

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

98. Chrome OS packaged apps

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

100. Из Web

101. в Offline

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

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

104. Пример. chrome.storage

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

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

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

108. Пример кода

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

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

111. Backbonexs

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

114. SUPERVISING PRESENTER

115. MVVM

116. HMVC

117. jQuery?

119. Exoskeleton
No jQuery
No Undescore

120. Frameworks
Marionette
Chaplin
Thorax

121. Aura