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

2,444 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,444
On SlideShare
0
From Embeds
0
Number of Embeds
1,793
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

  1. 1. Кто это? ● Gameloft ● DevPro ● Pics.io @blackrabbit99
  2. 2. Назад в будущее
  3. 3. JS binary data
  4. 4. Задача ● Принять/загрузить файл ● ???????? ● Profit
  5. 5. DNG is open
  6. 6. Что делать с закрытыми? Искать open source конверторы
  7. 7. Что делать с закрытыми? Экспериментировать
  8. 8. Canvas Fast drawing
  9. 9. Целочисленные значения ctx.drawImage(myImage, 0.3, 0.5)
  10. 10. CSS3 transform
  11. 11. Nearest-neighbour rendering
  12. 12. Не скейлить с помощью drawImage
  13. 13. Minimize Garbage Collection
  14. 14. Pool common objects and classes
  15. 15. Не создавайте мусор ● Array.slice ● Array.splice ● Function.bind
  16. 16. Асинхронный localStorage API с IndexedDB
  17. 17. Микрооптимизация ● 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)
  18. 18. Debouncing ● Реальный вызов происходит только в случае, если с момента последней попытки прошло время, большее или равное задержке. ● Реальный вызов происходит сразу, а все остальные попытки вызова игнорируются, пока не пройдет время, большее или равное задержке, отсчитанной от времени последней попытки.
  19. 19. Троттлинг ● выполнение метода не чаще одного раза в указанный период, даже если он будет вызван много раз в течение этого периода
  20. 20. Веб воркеры
  21. 21. WebRTC В production уже сегодня Захарченко Артем myzlio@gmail.com @blackrabbit99
  22. 22. Немного ностальгии
  23. 23. Mosaic
  24. 24. IE
  25. 25. Netscape
  26. 26. И тут понеслась
  27. 27. Общее введение
  28. 28. И тут понеслась
  29. 29. Начнем ● MediaStream (aka getUserMedia) ● RTCPeerConnection ● RTCDataChannel
  30. 30. Структура WebRTC приложения
  31. 31. Media Stream
  32. 32. Media Stream Connection Demo
  33. 33. RTCPeerConnection
  34. 34. ICE framework ● сбор местных IP и порт. ● проверка подключения между пирами ● keep alive соединения
  35. 35. Signaling server ● Инициализация связи ● Сетевые настройки ● Информация о кодеках/браузерах
  36. 36. Stun
  37. 37. SDP
  38. 38. RTCPeerConnection 1. Обработка потерянных пакетов 2. Подавление эха 3. Пропускная способность 4. Динамическая буферизация 5. Снижение и подавление шума 6. Очистка изображения
  39. 39. Посмотрим в действии Demo
  40. 40. All fine
  41. 41. Где же проблемы?
  42. 42. А вот и они!
  43. 43. Идеальный мир
  44. 44. Реальный мир
  45. 45. Turn
  46. 46. RTCDataChannel передает ● String ● Blob ● ArrayBuffer ● ArrayBufferView
  47. 47. RTCDataChannel
  48. 48. Основные проблемы ● Скорость ● Размер файлов ● Размер чанков
  49. 49. Поддержка
  50. 50. Safari RIP???
  51. 51. Safari
  52. 52. IE ● CU-RTC-Web ● или Google Chrome Frame
  53. 53. Статистика
  54. 54. Open Source ● PeerJs ● EasyRTC ● PubNub ● ShareFest ● WebRTC.io
  55. 55. Chrome OS packaged apps
  56. 56. Зачем это все? ● Запуск offline ● Доступ к возможностям платформы ● Невероятнейший user experience ● Установка и апдейты прямо из Chrome Market
  57. 57. Из Web
  58. 58. в Offline
  59. 59. Жизнь в офлайне ● Файлы хранятся локально ● Online features работают только при наличии подключения ● Храним данные локально ● HTML5 Filesystem API
  60. 60. Структура приложения
  61. 61. Пример. chrome.storage
  62. 62. Доступ к платформе
  63. 63. Доступ к платформе ● File ● USB ● Bluetouth ● Socket
  64. 64. Безопасность и CSP ● Никакого eval ● Никаких new Function ● Забываем о существовании Iframe ● Указываем откуда приходит контент
  65. 65. Пример кода
  66. 66. Еще секьюрити ● Вставка контента через WebView ● Доступ к удаленным ресурсам XHR, blob, filesystem ● Шаблонизатор Прекомпилируемые библиотеки или Mustache Sandox для вызовов eval/new Function
  67. 67. Итог ● Offline Написание не зависимых приложений ● Could Храним данные в google хранилищах ● UI/UX Каждый js-ер хотел сделать нативные окошки ● Доступ к железу file system/usb ● Не забываем о безопасности
  68. 68. Backbonexs
  69. 69. Что мы хотим? 1. Бизнес логика не зависит от UI и backend 2. Абсолютно автономная инициализация 3. Single responsibility principe
  70. 70. SUPERVISING PRESENTER
  71. 71. MVVM
  72. 72. HMVC
  73. 73. jQuery?
  74. 74. Exoskeleton No jQuery No Undescore
  75. 75. Frameworks Marionette Chaplin Thorax
  76. 76. Aura

×