Your SlideShare is downloading. ×
Build your own multistack JS startup
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Build your own multistack JS startup

161
views

Published on

Pics.io team presentation about latest technologies

Pics.io team presentation about latest technologies

Published in: Internet

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
161
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
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