Build your own multistack JS startup

  • 137 views
Uploaded on

Pics.io team presentation about latest technologies

Pics.io team presentation about latest technologies

More in: Internet
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
137
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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