Чем можно обмениваться данными: XMLHttpRequest, fetch(), Server-Sent Events, WebSocket, WebRTC. В чем отличия. Какие недостатки. Примеры задач, под которые они заточены.
2 июля 2011, Я.Субботник в Екатеринбурге
Алексей Андросов "HTML5 в Я.Почте"
О докладе:
Вопросы практического применения современных технологий передачи и хранения данных в браузере на примере Яндекс.Почты, проблемы и ограничения, с которыми можно столкнуться, а также способы их решения.
Для чего нужны WebSocket, localStorage и кроссдоменные AJAX запросы? Как реализовать их поддержку с учетом старых браузеров, которые не поддерживают эти технологии? Как обойти проблемы и баги в этих технологиях?
2 июля 2011, Я.Субботник в Екатеринбурге
Алексей Андросов "HTML5 в Я.Почте"
О докладе:
Вопросы практического применения современных технологий передачи и хранения данных в браузере на примере Яндекс.Почты, проблемы и ограничения, с которыми можно столкнуться, а также способы их решения.
Для чего нужны WebSocket, localStorage и кроссдоменные AJAX запросы? Как реализовать их поддержку с учетом старых браузеров, которые не поддерживают эти технологии? Как обойти проблемы и баги в этих технологиях?
01 - Web-технологии. Архитектура Web приложенийRoman Brovko
1. Понятие URL и документа
2. Виды документов: HTML, CSS, JS, JSON.
3. Абсолютные и относительные URL
4. Правила разрешения URL-ов
5. Гиперссылки
6. Клиент-серверная архитектура
Протокол HTTP/2 обещает ускорение загрузки страниц и очень активно продвигается. Так ли это и какую пользу от протокола могут получить Frontend разработчики? Стоит ли переходить на новый протокол? В качестве киллер фичи заявлена поддержка Server push. Что это и как этим пользоваться? Эти и другие вопросы будут освещены в докладе.
Positive Hack Days. Баранов. DNS Rebinding возвращается (0-day)Positive Hack Days
Доклад посвящен известной несколько лет атаке под названием "DNS Rebinding" ("Anti-DNS Pinning"). Суть атаки состоит в возможности обойти ограничения "Same Origin Policy" во всех современных веб-браузерах и тем самым получить доступ к любым данным, обрабатываемым в уязвимом приложении. Несмотря на богатую историю, считается, что современные средства защиты блокируют атаку, и реализовать ее на практике почти невозможно.
В докладе будут продемонстрированы практические приемы использования метода Anti-DNS Pinning для атак на корпоративные сети, системы виртуализации и защищенные внешние ресурсы, представлен инструментарий для использования уязвимости. Будут приведены реальные сюжеты получения максимального доступа к любым целевым системам в крупных гетерогенных сетях, а также возможные варианты защиты.
Мой доклад о создании yeoman генератора своими руками на митапе 4front. Рассказ о том, как yeoman.io упрощает жизнь, спасает от рутины и экономит время.
Обзор технологии и типичных граблей.
01 - Web-технологии. Архитектура Web приложенийRoman Brovko
1. Понятие URL и документа
2. Виды документов: HTML, CSS, JS, JSON.
3. Абсолютные и относительные URL
4. Правила разрешения URL-ов
5. Гиперссылки
6. Клиент-серверная архитектура
Протокол HTTP/2 обещает ускорение загрузки страниц и очень активно продвигается. Так ли это и какую пользу от протокола могут получить Frontend разработчики? Стоит ли переходить на новый протокол? В качестве киллер фичи заявлена поддержка Server push. Что это и как этим пользоваться? Эти и другие вопросы будут освещены в докладе.
Positive Hack Days. Баранов. DNS Rebinding возвращается (0-day)Positive Hack Days
Доклад посвящен известной несколько лет атаке под названием "DNS Rebinding" ("Anti-DNS Pinning"). Суть атаки состоит в возможности обойти ограничения "Same Origin Policy" во всех современных веб-браузерах и тем самым получить доступ к любым данным, обрабатываемым в уязвимом приложении. Несмотря на богатую историю, считается, что современные средства защиты блокируют атаку, и реализовать ее на практике почти невозможно.
В докладе будут продемонстрированы практические приемы использования метода Anti-DNS Pinning для атак на корпоративные сети, системы виртуализации и защищенные внешние ресурсы, представлен инструментарий для использования уязвимости. Будут приведены реальные сюжеты получения максимального доступа к любым целевым системам в крупных гетерогенных сетях, а также возможные варианты защиты.
Мой доклад о создании yeoman генератора своими руками на митапе 4front. Рассказ о том, как yeoman.io упрощает жизнь, спасает от рутины и экономит время.
Обзор технологии и типичных граблей.
Functional programming techniques in regular JavaScriptPavel Klimiankou
How to apply some functional programming ideas in regular JavaScript.
1. Immutability
2. Simple functions
3. Not that simple functions
4. Combining OOP and FP
5. Functors
6. Monads
Приёмы функционального программирования в обычном JavaScriptPavel Klimiankou
Что можно привнести в объектно-ориентированный JavaScript из функционального программирования, не переходя в секту свидетелей монад. В программе:
1. Immutability
2. Просто функции
3. Непросто функции
4. Комбинация ООП/ФП
5. Функторы
6. Ок, монады
Сейчас в мире веба каждый день появляются все новые и новые технологии, и наши проекты наполняются кучей новых библиотек, переписываются раз в 6 недель, становятся толстыми и неповоротливыми, и успеть выучить все практически нереально. А действительно ли это нужно?
Зачем нужен и что такое докер. Чем он отличается от виртуальных машин. Как создать, сохранить и запустить свой докер-контейнер.
Обновленная презентация с шестого 4front митапа в Минске.
Лекция #2. Принцип организации World Wide WebЯковенко Кирилл
Web-программирование
Лекция #2. Организация взаимодействия в World Wide Web
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
DevConf2013: Особенности применения WebSocket на примере работы в ERP системе.Alexander Frolov
Краткий обзор существующих решений
Что такое web sockets
обеспечение работы web sockets на стороне сервера
основной механизм работы с web sockets в PHP
Нюансы использования
Разработка кроссплатформенного фреймворка на С++ для мобильных платформ / Вла...Ontico
В процессе разработки нашего Enterprise-ready продукта HyperHive — http://eigenmethod.com/products/hh/ (бренд EigenMethod создан для продвижения продукта на Запад, не удивляйтесь другому домену) мы столкнулись с необходимостью реализации ряда задач на нескольких платформах: iOS, Android, Cordova (Android и iOS), а в перспективе и под Windows для мобильных устройств.
Был вариант реализации под каждую платформу на родных языках, но мы выбрали путь создания кроссплатформенного фреймворка на C++ с последующим его портированием под все целевые платформы.
Функционал фреймворка:
1. Параллельные потоки загрузки данных с сервера и записи в базу (sqlite) и передачи на сервер в рабочих потоках (без блокирования UI).
2. Поддержка Дельта-обновлений при передаче данных (пересылается только разность между двумя версиями данных).
3. Шифрование трафика и базы данных алгоритмами ГОСТ и RSA.
4. Сжатие трафика.
5. Аутентификация и авторизация на сервере, поддержка сессий.
6. Обработка push-уведомлений (MQTT).
7. API для мобильных приложений для предоставления данных, в том числе в оффлайн-режиме.
8. Логирование действий мобильного клиента на сервере.
С задачей успешно справились, но, так как задача нетривиальна и мало освещена в сети, были сложности — как технические, так и в подходе к разработке.
2017-03-26 01 Анна Тарасенко. Как устроен Web изнутриHappyDev-lite
Интернет, без которого вы уже не мыслите свое существование, обеспечивается разнообразным оборудованием — от серверов до роутеров в локальной сети — и программным обеспечением, которое работает на серверах, персональных компьютерах и других устройствах.
В докладе я постараюсь дать общее понимание того, как это все работает, и подскажу, что нужно изучать, чтобы оказаться в рядах разработчиков серверного программного обеспечения.
Темное настоящее и светлое будущее WebRTCVoximplant
Игорь Шеко (Voximplant)
Темное настоящее и светлое будущее WebRTC
О спикере
Игорь разрабатывает WebSDK в Voximplant. До вступления в команду Voximplant стал сооснователем и техническим директором компании Appatbox и сервиса обратных звонков Rocketcalback. Игорь — бывший FullStack-разработчик и человек, разочарованный в Scrum.
О докладе
WebRTC — это большая технология и состоит из многих частей. Из доклада Максима Лапшина вы узнаете о подводных камнях серверной реализации, а Игорь поделится опытом разработки коммерческого Web SDK, который совместим с Microsoft Edge и стандартом ORTC. Он расскажет о направлении развития этих API и попробует предсказать, что нас ждет в ближайший год.
INTERCOM 2016, Москва
Сайт конференции: https://intercomconf.com/
Three tricks how to understand what's happening inside of .NET Core app running on Linux: perf, lttng and lldb. As unrelated bonus, last slides have a brief intro into Google Cloud Platform
Browser APIs for data exchange: types and applicationPavel Klimiankou
What browser APIs can we use for data exchange. XMLHttpRequest, fetch(), Server-Sent Events, WebSocket, WebRTC. What's the difference. Use cases for each of those.
How to create basic physic effects in JavaScript game: gravity, collisions, friction, restitution, impulse, compound objects and their destruction.
Examples: http://pavel-klimiankou.github.io/physics-talk/
Sources: http://github.com/pavel-klimiankou/physics-talk
Как сделать базовые физические штуки в JavaScript игре: гравитация, столкновения, трение, упругость, импульс, создание и разрушение сложных объектов. И.. машинки!
Примеры: http://pavel-klimiankou.github.io/physics-talk/
Код: http://github.com/pavel-klimiankou/physics-talk
11. XML HTTP REQUEST
LEVEL 2 (2011)
+ бинарные данные и файлы
+ поддержка html форм - объект FormData
+ кросс доменные запросы (CORS)
+ события о прогрессе загрузки
19. ПОДРЕЗЮМИРУЕМ
У нас есть XMLHttpRequest и fetch()
Они работают по HTTP(S)
Ориентированы на атомарный запрос: сделал -
свободен
Работают как с текстом, так и с файлами
Поддержка кросс доменных запросов
20. ЧТО ПЛОХО
Минус одно TCP соединение
Не годится для real time доставки событий с
сервера
> polling
> long polling
34. WEB SOCKET
WebSocket это API, который позволяет
отправлять и получать текстовые и бинарные
сообщения серверу сколько угодно раз и в
любом порядке
35. ОСОБЕННОСТИ
Начинается как HTTP(S), но потом переходим
на свой бинарный формат сообщений
ws:// и wss:// вместо http:// и https://
как текстовые, так и бинарные данные
37. КАК Я ВНЕДРЯЛ WEB SOCKET
В СВОЙ СЕРВЕР
Более сложный протокол, чем HTTP
Управление состоянием соединения на
клиенте
Различные спецификации (Hybi 13)
SSE был бы лучше
39. ЧТО НЕ ТАК С WEBSOCKET
Сложный протокол (если придется внедрять)
Нет сжатия (что-то эксперементальное в
Chrome)
40. ЧТО НЕ ТАК СО ВСЕМИ:
XHR, SSE, WEBSOCKET
Нет мультиплексирования.
Большой запрос тормозит все остальные
Всего 6 доступных TCP соединений.
Каждый API сжирает по одному
41.
42.
43.
44. WEBRTC
2010
WebRTC это API для двунаправленной
передачи текста и бинарного медиа напрямую
между клиентами
45. ОСОБЕННОСТИ
UDP вместо TCP
Текст и банарные данные
Встроенная поддержка медиа данных
peer-to-peer
Обязательное шифрование не-медиа данных
54. ВСЕ ОБХОДНЫЕ МАНЕВРЫ
ЭТО ICE
ICE - interactive connectivity
establishment
Используя STUN и TURN
сервера, он перебирает пары
IP:Port (ICE candidate), по
которым можно подключиться
снаружи
55. И ВСЁ ВМЕСТЕ
1) Нам нужен signaling channel
2) Нам нужен список STUN/TURN серверов
3) RTCPeerConnection поможет создать Offer
и найти ICE кандидатов
4) Всё это нужно передать через signaling
channel другой стороне
5) Через signaling channel мы получим эти
данные от второго клиента