Доброе утро! С вами снова @mr_kovalyov и я буду вести трансляцию второго дня #fullstackfest, который начнётся уже через несколько минут
А пока что вот ссылка на видео-трансляцию:
youtube.com/watch?v=SyeTI2…
Первым докладчиком будет @andrestaltz с реактивными потоками данных #cyclejs #rxjs
Будит народ лайвкодингом из будущего :) pic.twitter.com/kuGylMYEDk
Демо pic.twitter.com/ISZdn4BW11
Автор #cyclejs расскажет как работать с данными pic.twitter.com/5QTSZ9TxSM
Cycle.js создавался чтоб решить три задачи
. иметь архитектуру удобную для любого UI
. - иметь чистый, читаемый и предсказуемый код
. - понимать как код работает
Redux хорош, но конкретные решения вносят коррективы в архитектуру: redux-saga, redux-loop...
Чтобы удобно дебажить - нужны удобные инструменты для визуализации потоков данных в приложении
Реактивные потоки легко визуализировать pic.twitter.com/RYcAViSgpi
Объясняет реактивные потоки на фигурках lego pic.twitter.com/PzmdlJLfSG
Лучшее объснение observables. Обязательно посмотрите в записе, кто хочет разобраться с rxjs pic.twitter.com/3ZBGKMPfdG
"Such cycle much js" - @andrestaltz pic.twitter.com/O9yXxdNl5T
Основная идея: есть источники событий, есть observers, которые следят за событиями и drivers которые производят сайт эффект - например DOM
Кстати, для cycle есть удобный девтул для визуализации потоков pic.twitter.com/Yhzmwuah3h
Код на cycle.js легко визуализировать, чего трудно достичь с другими фреймворками pic.twitter.com/eiIKwjrvzh
Напомню, вы можете задавать вопросы в твиттер с хештегом #askfsf и возможно они прозвучат на сцене
На сцене @D3DVincent с рассказом про CSP в JavaScript
CSP это... pic.twitter.com/XBePAUnOkF
Проблема конкурентного программирования на JS - общая память (shared memory)
Что приводит к гонкам, дэдлокам
Сори, это проблемы конкурентного программирования вообще
JS синхронный, поэтому казалось бы эти проблемы не актуальны
У текущая реализация асинхронных задач есть проблема координации конкурентного выполнения
Докладчик говорит что callback'и - зло! Но мы то и так это знаем!
Promise хороши, но мало кто понимает их внутреннее устройство
Генераторы - асинхронный код в синхронном стиле
У промисов есть ограничения - они не очень хорошо работают с событиями
Код на слайдах плохо видно, был пример как правильно работать с промисами в обработчиках событий
Высокоуровневые паттерны:
- Observable (RxJS)
- Communicating Sequental Processes
CSP это просто pipes "cat file | grep search"
Процессы в CSP это не процессы ОС, а окружение которое выполняет ваш код. Память не шарится
Простейщий пример: один процесс создает сообщение, друг его обрабатывает - one to one
В One-to-one - второй процесс блокируется и ждет сообщений
Есть подходы one-to-many, many-to-one и many-to-many
Пошло демо использования CSP с библиотекой js-csp
Побежали циферки на экране - значит всё работает. Вот библиотека: github.com/ubolonton/js-c…
Итоги pic.twitter.com/6eLxcVj6N9
Ребята приглашают контрибьютить и популяризовать csp pic.twitter.com/doUIws4kB2
Идём пить кофе, чтобы до конца проснуться!
Возвращаемся к докладам!
Сейчас выступит @adunkman с докладом про синхронизацию состояния без сервера
Доклад будет про стандартные браузерные API
Как синхронизировать состояние приложения между вкладками?
Веб это больше чем веб-страница pic.twitter.com/VuXewjwhlc
document.cookie… но не вздумайте использовать их для синхронизации состояния
Они заменили cookie на localStorage, пока не начали получать QuoteExceededError
А еще пользователи начали жаловаться на то что их сайт не работает… в приватном режиме Safari на iOS
Использование ивентов "storage" может помочь в отслеживании изменения состояния
Можно использовать SharedWorkers лля коммуникаций между вкладками pic.twitter.com/pwHNmyjLb3
Но Safari просто выпилили SharedWorkers
А также SharedWorkers были удалены из стандарта ;(
И вот подоспели ServiceWorkers
Самое сложное в сервис-воркерах – это объяснить принцип их работы в двух словах :)
MDN, W3C не очень понятно формулируют определение сервис-воркеров
Вот определение от докладчика pic.twitter.com/B6WnpVVvSL
Бойлерплейт для установки воркера pic.twitter.com/wxfqZ53FqO
"Push" событие pic.twitter.com/t3bxuU6J96
Подписываемся на sync событие pic.twitter.com/KuqBgwL945
Через event.tag передаем, например, действие которое надо выполнить
Sync событие pic.twitter.com/jZD5p9d9ZJ
"sync" поддерживется только в Chrome :(
Fetch - перехват запроса между приложением и браузером pic.twitter.com/QiwPoiFT7F
"fetch" поддерживается в большинстве современных браузерах
Итоги по сервис-воркерам pic.twitter.com/6R28abAASz
Следующий доклад от @slobodan_ про разработку веб-сайтов, которые будут работать даже на Марсе!
Немного фактов о Марсе pic.twitter.com/4kUFR2F5JT
Проблемы которые ждут нас на Марсе pic.twitter.com/NqRB7sZPnl
Так зачем же нам лететь на Марс?!
Нам нужен бекап! pic.twitter.com/TgtH13dQ4H
А теперь представьте что у вас есть сайт! Внезапно pic.twitter.com/PL4ygreUU9
Марс, между прочем, единственная планета населенная роботами :) Большинство из которых - металлолом
Так почему же наш сайт не будет работать на Марсе?!?
Дистанция и задержки. Никакого netflix... pic.twitter.com/2WyfegHz4q
Коммуникации с Марсом осуществляются посредством радиоволн
Межпланетный интернет отличается от привычного нам pic.twitter.com/UMnlwF2yIE
Нужны узлы-повторители чтоб избегать потерь данных pic.twitter.com/lfUjNnVKQ1
Сервис-воркеры обеспечат офлайн режим нашему приложению pic.twitter.com/Yc2Qq1j88S
Опять пример кода установки сервис-воркера
Для экономии трафика @slobodan_ предлагает воспользоваться #graphql или чем-нибудь подобным
Для хранения данных локально можем использовать IndexedDB
IndexedDB - key-value хранилище, работает асинхронно и использует DOM-события
Для синхронизации пожалуй возьмём @pouchdb. Где-то радуется один @nolanlawson
Для peer-to-peer коммуникаций можем использовать WebRTC
Почему же не загружать html/css через p2p?! pic.twitter.com/8rJQZoUKk5
А как на счет межпланетной файловой системы? pic.twitter.com/cjZRKQj0R5
Проблемы которые ждут разработчиков:
- таймстампы
- хранение сессий
- безопасность и приватность
- как тестировать экстремальные ситуации?
Главная проблема на нашей планете! pic.twitter.com/0kfTMrlu0K
Прежде чем решать проблемы для Марса - не плохо бы решить проблемы на Земле
А мы идем обедать! pic.twitter.com/2EcCRYRZ8R
Скоро начинаем!
А пока слайды с последнего доклада @slobodan_ про вебсайты на Марсе:
speakerdeck.com/slobodan/how-t…
И первый доклад после обеда – @binjimint про WebAssembly
Этот парень разрабатывал Overwatch, а сейчас работает Google над WebAssembly
Что же это такое? pic.twitter.com/4x01h2UI1N
WebAssembly - это не язык программирования, а "compilation target" для языков типа C++, Rust (не придумал перевод)
И главное! Это НЕ замена JavaScript!
Если ваш код делает много вычислений, напр. cимуляция, сжатие, VR – WebAssembly вам в помощь
Для чего хорош WebAssembly pic.twitter.com/QMD48yDkU5
Смотрим демку "Super Mario Bros." собранную на WebAssembly
А сейчас будут технические детали…
C/C++ компилируется с помощью emscripten pic.twitter.com/vmueXpdIEx
Немного истории - asm.js pic.twitter.com/K0zXCMRuuQ
Почему же не использовать asm.js?
Это всё же просто JavaScript
- дорогой парсинг
- тежёло расширять функиональность
- нет 64bit Integers
Пример WASM кода - выглядит lisp'y pic.twitter.com/cbs3yzBfMS
Но на самом деле wasm это код стэковой машины (stack machine) pic.twitter.com/AIcyFFiFBp
И дальше мы получаем wasm-binary код pic.twitter.com/dytlS2Y9kW
Дальше у нас есть JS API и мы можем запускать этот код
в webassembly есть еще много чего интересного pic.twitter.com/ZtZIirAxnO
Вся работа над WebAssembly сосредоточена здесь: github.com/webassembly
Следующий доклад от @M_a_s_s_i про VR, 3D и React…
"Virtual Reality is sexy" - @M_a_s_s_i
Докладчик разрабатывает продукт с 3D интерфейсом и сейчас они переходят к VR
Мечта - использовать веб технологии для 3d pic.twitter.com/Vi0m45XJZY
Используя CSS 3D transforms можно строить 3d интерфейсы. Но это не вариант…
Можно ли рендерить DOM в контексте канваса?!
Через SVG! Но тут есть много проблем с безопасностью
Есть идея! Рендерить UI в отдельный 2d canvas. И использовать эту текстуру в 3d canvas
Будем рисовать UI пиксель за пикселем. Но какой взять фреймворк, чтоб не кодить пиксели до смерти?!
Давайте возьмем React!
@M_a_s_s_i <3 React :)
А еще React может вместо dom'а генерить данные канвас
Сейчас нам покажут демо todo-app в Redux стиле…
Неужно с рендерингом в канвас?!
Пока что много кода который плохо видно... pic.twitter.com/PzHtiNA67J
Много react/redux кода…
Ага! Рассказывает про тяготы поиска canvas фреймворка с поддержкой react биндинга
React-canvas (больше не разрабатывается)
Pixi.js
Konva.js
Так-так, взяли Konva и konva-react…
Ещё оказывается нужен css-layout для построения лэйаута приложения
Это просто нужно видеть! Слева канавас, справа dom. И волшебный акцент... pic.twitter.com/Ur7IcRwoXJ
Вроде как работает, но вооот сколько проблем! pic.twitter.com/EAiAi2Oqw1
Теперь у нас есть 2D UI в канвас, а теперь мы соберем из него 3D
А вот как это в 3D!!! pic.twitter.com/yaZwHbirgz
Теперь появилась проблема с маппингом 3d координат для ивентов
Не смотря на все проблемы – это работает!
А теперь нам нужен VR! И для этого в bablylon есть WebVRCamera
А вот и VR pic.twitter.com/WgaUseNQkq
Выводы – proof of concept работает, но пришлось много костылить, чтобы всё подружить
Уходим на кофе-брейк
«Виртуальная реальность уже здесь, в Вашем браузере» от @misslivirose на #fullstackfest
Доклад тоже в VR pic.twitter.com/JBLWSMKLje
VR устройства бывают разные:
- Mobile VR - управляется смартфоном
- Desktop VR - управляется копьютером (Oculus)
Почем VR?
Во-первых это ФАН!!!
Во-вторых меняется модель взаимодействия человека с компьютером
Поговорим о том, как браузер работает с VR и какие есть инструменты для VR
Со спекой WebVR можно познакомиться тут - webvr.info
aframe.io - фреймворк для создания VR приложений от Mozilla VR
Таблички эксель в VR - мечта бухгалтеров! pic.twitter.com/hMpvIOIlIf
Смотрим код приложения…
… и код презентации построенной на A-Frame
Ооочень много комментариев по коду
А вот та же презентация, завернутая в Electron pic.twitter.com/sOLm3SpZts
VR и WebVR - это круто и весело!
Следующий доклад про физический веб от @scottjenson, который разрабатывал Apple System 7 25 лет назад! pic.twitter.com/Qt19kDOc1J
Что такое "физический веб"?
У нас сейчас много различный "умных" устройств. Но большинству нужны собственные приложения
Вебу нужен сервис обнаружения pic.twitter.com/8SgGhtXpgx
Пример "умного" паркомата pic.twitter.com/m5VzXuKBOx
Физический веб - мост между вебом и физическими (реальными) устройствами
Например, вы приходите к памятнику и получаете ссылку на информацию о памятнике без всяких приложений
Как работает умный паркомат - транслирует урлы. Никаких айдишников, просто урлы pic.twitter.com/72QXRyu42k
QR коды не работают - их никто не сканирует в реальном мире и никто не печатает на товарах/устройствах/памятниках
Как физический веб борется с проблемой спама? Фильтрация и анализ до того как отправить пользователю
Bluetooth метки хранят урл. Короткие урл могут динамически подменять назначение без необходимости обновлять метку (например tiny.cc)
Веб становиться лучше! Вы пришли в ресторан, "зачекинились" - телефон подпишется на уведомления и вы будете знать когда ваш столик готов
ОМГ веб! pic.twitter.com/5JLqncE602
Как поместить bluetooth метки в маленький размер?! Например, упаковку лекарства
Но физический веб - не только bluetooth метки
Можно встроить в сами смартфоны для нового способа обмена информацией
Итого pic.twitter.com/8W069hifwn
Проект open-source:
github.com/google/physica…
Технология развивается pic.twitter.com/xbOsSRYLv5
Планы на будущее pic.twitter.com/ELotmRlZ7N
Это был последний доклад на #fullstackfest 2016!
Аплодисменты организаторам и спикерам! pic.twitter.com/GiKb0kDFrz
