С вами @thought_sync и прямое включение из Исландии с @jsconfis
Начинаем с Myles Borins и его доклада про эпопею с left-pad
Майлз рассказывает про историю с left-pad blog.npmjs.org/post/141577284…
Немного рассуждений про эмпатию и почему это важно. В чем разница между эмпатией и симпатией.
Если коротко: эмпатия 👍, симпатия 👎.
«Эмпатия это выбор». В общем, много про философию и отношения. И тесты.
Теперь @misslivirose про AR & VR.
Почему VR привлекает много людей: «Это весело».
VR позволяет рассказывать более реалистичные истории.
VR позволяет общаться по-новому. pic.twitter.com/JA1nfE118q
Первый вариант VR: мобильник в очках. Не очень мощно.
Десктопный VR. Мощно, но со шнуром 😞. pic.twitter.com/ypVCLFeSoz
Standalone VR. Все в одном. Мобильное и достаточно мощное. pic.twitter.com/7LnhJPN2K5
Полшу прощения за бутылку пива на переднем плане. Она не моя😟.
Зачем делать VR в браузере? Ну мы все понимаем зачем. Responsive VR.
Вы же в курсе что есть уже спешка Web VR и Mozilla уже выкатила её поддержку в Nightly? webvr.info
Чтобы писать для Web VR можно использовать three.js и babylon.js уже сейчас.
Уже есть polyfill для мобильных устройств, которые не поддерживают хардверный VR
HTML для WebVR aframe.io/examples/
А теперь демо: Excel в VR pic.twitter.com/Gu5GhgzHlw
Демо с использованием a-frame aframejs.azurewebsites.net
Unity поддерживает экспорт в Web VR.
Проблемы для браузера: 60 fps.
Ссылка на репозиторий с кучей инфы. Это был отличный доклад от @misslivirose. pic.twitter.com/Q26BagYQxk
Сейчас у нас был перерыв. А теперь я пошел на докладной React, уж простите.
Во втором потоке идёт рассказ про то, как начинать проект.
React и скетчи, что может быть лучше. А расскажет про это @linclark.
Главный тред. pic.twitter.com/AbIiCwqMxU
Главный тред это то, где работает JS, DOM и все.
Иногда на главном треде при изменении происходит reflow, и нам надо переделать render tree.
Как нам переделать render tree оптимально?
Реакт умеет это делать и помогать главному треду работать быстрее. Сейчас расскажут как.
Что такое элемент? Тип, дети и параметры. Способ объяснить реакту, что тебе нужно нарисовать. pic.twitter.com/C8w3PtgZZ1
Блин, в общем я сдаюсь, я не смогу вам пересказать алгоритм рендеринга реакта в твиттере. Сори(
В общем, он пытается при изначальном рендеринге максимально работать на отсоединённых нодах, чтобы не вызывать лишние рефлоу.
Если чтото поменялось, кладём в ящик и обрабатываем потом. Чтобы батчить разные изменения.
Уникальные key на массивах детей спасут вас только при изменениях порядка детей. Структурные изменения работают так же
Теперь я пошел на доклад про Reactive animations на CSS-переменных от @DavidKPiano. Во втором зале будет про то, что React везде.
Поехали. pic.twitter.com/MYdtesHEwL
Что можно сделать без JS на CSS.
Функциональное реактивное программирование на CSS.
CSS не может много и это хорошо. Больше ограничений — проще код. pic.twitter.com/8Ang8v8Adl
Дальше будем говорить про CSS variables и rxjs observables.
Зачем мешать observables и CSS vars: потому что можно сделать более крутые анимации через декларативное программирование.
CSS анимации: нет внешних зависимостей, хорошая поддержка, не на главном треде. Но они не динамичные.
Новое апи для js-анимаций. И тоже на gpu, похожий синтаксис и они динамичные. pic.twitter.com/938iUrE2ZL
Но сегодня все плохо. pic.twitter.com/23DaiDcWpQ
Главный тред, рефлоу, инлайн стили. Ну вы поняли.
Вот спека для Web Animations. developer.mozilla.org/en-US/docs/Web…
Теперь про CSS переменные. developer.mozilla.org/en-US/docs/Web…
Важно: эти переменные работают с каскадом и specificity. Их можно достать из js, можно менять согласно media queries.
Их можно и менять из js.
К слову: стрим. twitter.com/grim_juz/statu…
И другая комната. twitter.com/grim_juz/statu…
Я вот даже был не в курсе. Ребята молодцы.
Стандартная картина для потока. pic.twitter.com/ewuOoY861r
Стрим — асинхронный массив, неизменяемый и на него можно подписаться.
Ну по rxjs стоит всем почитать, штука важная.
Хорошая статья про реактивное программирование от @andrestaltz gist.github.com/staltz/868e7e9…
Я же говорил: это замаскированный доклад про FRP pic.twitter.com/uMiQXiZjsx
События от браузера отправляются в CSS переменные и другие обзерверы. pic.twitter.com/R9ewExiqht
Либа которая уже пишет в переменные github.com/davidkpiano/Rx…
Можем использовать данные из js в css через переменные: наши анимации становятся динамичными.
CSS анимации.
CSS анимации работаю в SVG, работают с calc и тд.
В общем было круто, обязательно попробую.
А я пойду поем.
Я поел, а на сцену вытащили велосипед. pic.twitter.com/CUbenrAYFY
Доклад от @chromakode про Bluetooth LE
Точнее про Web Bluetooth
Сейчас будут демо. pic.twitter.com/Hh3hUQUpSh
В Web Bluetooth тоже все на промисах.
Данные пересылается в бинарном виде, поэтому придётся ручками все кодировать/декодировать.
В Bluetooth LE все работает на стримах. Вы поняли: стримы и просимы надо знать везде.
Показывают все на примере xstream x-stream.github.io
Хороша тем, что в разы меньше, чем rxjs.
Интересная конвенция: переменные стримы заканчивать на $.
Спикер демонстрирует все на myo. Штука которая умеет детектировать жесты руки. myo.com
Теперь устройство которое считывает данные с колеса велика.
Очень хорошая презентация, много демо. Вывод: все проще с Web Api, стримы проще событий.
Велокомпьютер на Web Bluetooth и cycle.js pic.twitter.com/HGOdqdeqBZ
Следующий доклад будет про Progressive Web Apps от @callahad.
А пока зацените конференц-холл pic.twitter.com/hyFGlSLV68
Я единственный, кто поднял руку на вопрос, кто может написать XMLHTTPRequest от руки. Было неловко.
Стандартная картинка про Service Worker. pic.twitter.com/u7HnT9yfsv
Если вы ничего не знаете про SW. Почитайте от одного из авторов спеки jakearchibald.com/2014/using-ser….
Теперь про веб пуш нотификации. Кстати, ребята из @meduzaproject кажется использует их в проде.
Можно почитать про это на их медиуме medium.com/meduza-dev/веб…
Вот кстати cookbook по SW от мозиллы serviceworke.rs
@Di_Ed_Seagull нет, они используют браузерные нотификации. А не пуш нотификации. Значит они будут работать только пока открыт таб.
@webholt нельзя
Теперь про App Manifest
На сайте, который я скинул есть примеры именно пуш-нотификаций. twitter.com/di_ed_seagull/…
App Manifest нужен в основном, чтобы ставить сайт на мобильник как Приложение. Aka add to home screen.
Пока никто не понимает как правильно перейти от режима приложения к режиму сайта. Потому что нужен URL.
А ещё всякая жесть типа deep linking не нужна.
Теперь разговор про то, что боаузеры дают разработчикам больше возможностей (App Cache vs SW).
На эту тему есть ещё проект Гудини smashingmagazine.com/2016/03/houdin….
Про PWA все, след доклад про микросервисы.
Морские свинки как микросервис. pic.twitter.com/PkbN4fW7GJ
Создавать дизайн систем от внешнего вида плохо, создавать от БД тоже.
Начинать надо с доменв Приложение. И отсылка к DDD Эрика Эванса.
DDD кстати часто всплывает: вот источник amazon.com/Domain-Driven-…
А теперь речь идёт про Reactive Design Patterns, советую почитать книгу manning.com/books/reactive…. А выступление скучное и непонятно о чем.
Последний тезис в том, что не надо забивать на 40 лет ООП в погоне за функциональном программированием.
Даже если ФП сейчас очень модное.
Society is a left fold over ideas. Это просто buzz-talk.
Теперь доклад про node и docker от Tsubomi Imamura.
Раньше нетфликс использовал REST. Но не хотелось делать много запросов на сервер.
Поэтому решили фетчить данные через 1 endpoint, но не всем устройствам нужны все данные.
Поэтому решили разрешить UI-разработчикам скрипты на груви-скрипт, которые заливаю на сервера с Java. И они решают какие данные нужны.
Проблема: разработчики страдали.
Так же не было изоляции. Упал скрипт: упал весь слой данных.
Поэтому решили сделать докер + ноду. pic.twitter.com/8wwNJtcrvp
Используют restify. Говорят очень быстрый restify.com.
Роутинг хранится в одном месте. github.com/restify/enroute кажется Groupon такое ужа делал.
Докер мониторят через их опенсорсный проект Atlas. github.com/Netflix/atlas
Теперь для каждого устройства поднят докер контейнер с кодой. Легко развертывать в девелопменте, изоляция в проде.
Вот как-то так. pic.twitter.com/4t81nGNQgU
Через 15 минут будет Витайлий Фридман @smashingmag
Как сделать ссылку внутри ссылки? Обернуть внутреннюю в object.
Это рубрика «вредные советы» если что.
Можно стилизовать битую картинку псевдоэлементами. У битой картинки они есть, у загруженной нет.
Как сделать точки останова для шрифтов на сайте, в зависимости от viewport. pic.twitter.com/9ZYUKUgXZK
Как выделить колонку и строку таблицы через CSS? pic.twitter.com/yW28YF6Ysg
Теперь по-настоящему грязные трюки: респонсив email верстка!
Как отобразить картинку во всех клиентах (даже в тех, которые не отображают)? Можно конвертнуть её в HTML-таблицу. Ячейка = пиксель.
Дальше идёт какойто абсолютно упоротый способ использовать min-width, чтобы делать респонсив верстку.
Ресурсы для этих страдальцев. responsiveemailresources.com responsiveemailpatterns.com
Про вертикальные ритмы.
Вертикальные ритмы без фреймворка. pic.twitter.com/asZhIIpFan
Подробная статья pilot.co/blog/implement…
Последний доклад на сегодня про WebGL от @sethfsamuel.
WebGL способ говорить на языке максимально близком к железу в вебе. pic.twitter.com/xhLAYJ3rgT
Шейдеры удобный инструмент параллелизации вычислений. Можно искать края в картинке.
Шейдеры вычисляются на GPU. 60 fps все дела.
Демо системы частиц на шейдерах. pic.twitter.com/lXIu8otNnQ
Спеки webcl и computing shaders зависли но можно доставать данные из пикселей.
Достать данные из шейдерах.
Но проблема в сериализации/десериализации. Цена высока, поэтому надо понимать, что туда надо отгружать только очень сложные вычисления.
Проблемы: нет битовых операций и заморозка рендеринга. Скоро будет следующая версия GLSL, и WebGL в веборкерах.
На сегодня с лекциями все. Я пошел тусить, увидимся завтра, если я вам не надоел. pic.twitter.com/k3emY6kcP6
