Завтра с утра начнётся трансляция с React London от @andrey_sitnik — готовьтесь и зовите друзей pic.twitter.com/RqEyo72LmL
React London в интересном здании в паре метров от Биг Бэна pic.twitter.com/A31buHieNv
Хорошая идея для конференций с React London — делать чат. Но в Китае такое лучше работает — чат в WeChat, где уже в… twitter.com/i/web/status/8…
На React London не будут задавать вопросы в микрофон — из будут писать в sli.do через телефон и голосовать за лучший
Завтрак хороший, но лучше бы билеты сделали дешевле pic.twitter.com/1IN5CwAsWG
Обсуждаем, когда бежать за водкой twitter.com/chicoxyzzy/sta…
Русские ребята уже нашли уязвимость в sli.do, как накручивать голосование. Чувствую вопросы они поднимут самые весёлые.
Началось. Хорошая традиция заграничных конференций — ведущий с шутками и анонсами pic.twitter.com/BBmRhKjJsc
«Наша конференция сильно выросла и мы практически и приблизились к конференции по Ангуляру» pic.twitter.com/K5oCWBc9yS
React London открывает @Vjeux с рассказом про свой инструмент prettier для автоформатирования JS-кода github.com/prettier/prett…
prettier — это как ESLint, ориентирован именно на автоматические исправление кода pic.twitter.com/9B4Yc4OBuk
Но prettier можно использовать вместе с ESLint
Ведущий трансляции, @andrey_sitnik, выступает следующий и трясётся где-то за сценой, так что робот будет пистать за… twitter.com/i/web/status/8…
prettier v не слишком гибкий, зато он очень умный и оформляет код, как реальные люди — keys тут не переносят, так к… twitter.com/i/web/status/8…
В prettier куча исключений, например тут не нужны скобки, но люди часто не помнят приоритет операторов в этих случа… twitter.com/i/web/status/8…
Главная приема prettier — они выбирали стили кода по Фейсбуку. Что-то он стали слишком влиять на сообщество. pic.twitter.com/fkOxQJbxcy
Правильный пиар в опенсорсе, чтобы люди видели твиты о вашем проекте каждый день. Полностью согласен — так мы и Pos… twitter.com/i/web/status/8…
После Go многие новые языки идут с жёстким стилем кода и официальным инструментом исправления форматирования pic.twitter.com/bhj3INmKHh
На сцену идёт @andrey_sitnik, рассказывать про @logux_io — вместо AJAX-запросов мы синхронизируем лог действий межд… twitter.com/i/web/status/8…
Ситник передаёт привет @nikitonsky из доклада, которого он взял иллюстрации. pic.twitter.com/bzoXxbUjvG
Посмотрите шикарный доклад @nikitonsky о подходах к общению с сервером. Лучшее введение в проблематику @logux_io
youtube.com/watch?v=x9yYlD…
Ситник уже рассказывал про @logux_io на русском — можете посмотреть запись оттуда (и без его ужасного акцента)
youtube.com/watch?v=1RMhUP…
Слайды Ситника о @logux_io. Хорошо, что Лондон переполнен рекламой фильма Ghost in the Shell и гифки стали понятнее… twitter.com/i/web/status/8…
Все, кто помогал делать @logux_io — большинство пришло с cultofmartians.com. Занимайтесь опенсорсом. pic.twitter.com/Cqo6S1hbe1
Дальше выступает @_chenglou про язык (пока сам не понимаю о чём) pic.twitter.com/IENfpyOPqS
Его доклад очень философский. Рассказывает очень хорошо, но не знаю какие факты вынести.
Есть предложите сделать примеси в JS pic.twitter.com/GzKqaxtO80
Его идея сравнить систему модулей с файловой системой. Вообще логично — после вебпака файлов уже нет. Они стали модулями.
Понял — он объясняет философию своей системы сборки Reason
facebook.github.io/reason/
Вроде это сборщик, который использует всю мощь типов. Интересно. Хотя я не уверен под покровом философии.
«Большинство языков имеют конструкцию, чтобы спрятать сложность внутри, но не абстрагироваться от неё»
Пример разницы между ними pic.twitter.com/EgsMhCPAEd
«Я мечтаю, что в будущем мне нужно будет писать только код приложения, а не обвязки и бойлеоплейты»
В Реакте есть шикарное приватное свойство: СЕКРЕТНЫЙ_DOM_НЕ_ИСПОЛЬЗУЙ_А_ТО_ТЕБЯ_УВОЛЯТ
github.com/facebook/react…
RT @roman01la: @webstandards_up он должно быть рассказывает о модулях в OCaml
Народ в Твиттере — «Встречи Реакта начали напоминать презентации про Smalltalk на встречах о Руби. Мозг скоро взорвётся через 3… 2… 1»
Но мне такое нравится — нужно больше смешиваний в ИТ
Герой спикера Бред Виктор — да, он шикарный. Посмотрите, например, доклад Бреда «Изобретая по принципу» youtube.com/watch?v=a-OyoV…
Дальшем секция коротких докладов — мне нравится когда смешивают длинные/коротки, так интереснее
Короткие доклады начинает @lithinn про тестирование снимками (spanshots) pic.twitter.com/IMTwpbtYiV
Со снимками (в отличии от TDD) ты сначала пишешь код, проверяешь его результат и потом генерируешь снимки выхода для тестирования
Совет: используйте enzyme-to-json, чтобы не класть в снимок огромное DOM-дерево
Хотя она говорит об идеи в общем, но все примеры на фреймворке тестирования Jest — я тоже её большой фанат
«AVA для тестирования тоже норм, но у Jest крутой watch-сервер и он сам чистит снимки при их обновлении» pic.twitter.com/V9SubjgzHn
Снимки очень удобны при рефакторинге и обновлении кода. Проверил, что всё нормально и сохранил в снимок одной коман… twitter.com/i/web/status/8…
Проблема снимков — сложно мержить конфликты в git, не православно по TDD и из-за лени начинаешь злоупотреблять pic.twitter.com/bCH4VvygUO
Так что, главный нюанс со снимками — обязательно используйте их, но не злоупотребляйте.
Дальше выступает @oliverwoodings про то, как использовать вебпак на реально огромных проектах pic.twitter.com/yCU8KaQthG
У них вебпак запускается по действия пользователя (а не только во время деплоя) — так что она запускается тысячи раз в день
Так что на диск они не пишут, а используют ФС в памяти и кеши в Редисе pic.twitter.com/kRH5FukO5s
webpack-dev-server тоже использует MemoryFS, когда он собирает ассеты, они сохраняются в этой «фейковой» ФС
«Они не делают минификацию и gzip, так как это должен делать не сборщик, а CDN» — крутая идея, всё равно мало кто делает это лучше CDN
HappyPack — крутой проект по паралелльному запуску лоадеров Вебпака на разных ядрах github.com/amireh/happypa…
Tree shaking в Вебпаке 2 не работает, так как никто не публикует ES6-модулей
Rollup крут тем, что не оборачивает ваши файлы в функции, а просто генерирует плоскую структуру. Советую попробовать его.
Tree shaking — когда вы импортируете 2 функции из файла с 5 функцию, сборщик удаляет 3 ненужные функции
Дальше @jevakallio расскажет про свой проект Redux Offline. Но мне он признался, что мой доклад уничтожил смысл его… twitter.com/i/web/status/8…
Пользователи не понимают, почему приложению нужен интернет, чтобы показывать данные
Progressive Web Apps (ServiceWorkers) изменили рынок и скоро мы все будем делать мобильные приложения
Огромные рынки Индии, Африки и Азии — хороший повод задуматься о Offline-first, так как там по другому нельзя из-за плохо интернета
Но главная причина делать поддержку оффлайн — метро (в Лондоне там вообще нет связи, ни в поезде, ни на станции)
Две категории проблем оффлайн — сеть и поддержка состояния
«Ситник приехал из России, я из Финляндии. Его страна большая с кучей амбиций, а я просто решаю маленькие задачи» :D
Вообще я взял некоторые идеи из React Offline в logux-redux — например, как называть функции. Хороший проект. github.com/jevakallio/red…
«Не фотографируйте код, после того как я сделал слайды, я уже поменял API». Он выпустил релиз за 5 минут до выступления.
В последнем коротком докладе @jazlalli1 расскажет про Next.js pic.twitter.com/P4B0tWi7se
Next.js — минималистичный фреймворк для рендера реакт-приложений на сервере
zeit.co/blog/next
В Next.js есть крутая и простая фича презагрузки страниц — особенно полезно для оффлайна pic.twitter.com/LlnTmHkqHR
Мы используем Redux, не чтобы сделать простые вещи удобнее, а чтобы сделать очень сложные приложение чуть проще
Next.js ещё один пример решения, которое просто объединяет сложные инструменты в «всё работает из коробки» (как create-react-app)
«Готов ли Next.js для продакшена? Хм… Сложный вопрос. Это мой начальник написал вопрос? 😅»
Не конференции перерыв на обед pic.twitter.com/h05jjJm2KN
Вот так мило выглядит площадь перед конференцией pic.twitter.com/0VfIRmv9Wr
Вернулись с обеда. Начинает @mxstbr с рассказом по styled-component, реализации CSS-в-JS pic.twitter.com/BMu8GOhody
styled-components был написано @glenmaddern автором CSS Modules
Идея styled-components — убрать селекторы. Нет селекторов, не нужно БЭМ и другой магии. pic.twitter.com/2EjK2f2f4h
styled-components базируется на строках-щаблонах из ES6 — func`content`
developer.mozilla.org/ru/docs/Web/Ja…
CSS — это хороший язык. Просто некоторые части не очень удобны для компонентов (селекторов). Поэтому в styled-components вы пишите на CSS
В styled-components (в отличии от inline Styles и Radium) можно писать медиа-выражения — это обычный CSS
Внутри строки стилей можно использовать вычисляемые значения pic.twitter.com/CPDrU4mm2o
Реальная крутая функция в styled-components (остальное есть в других решениях), крутая поддержка тем из коробки pic.twitter.com/9d8n9mdm9d
Темы задаются компонентом-обёрткой и наследуется вглубь реакт-дерева на любую глубину (пока не переопределят) pic.twitter.com/TzaU6pzZck
А ещё styled-components поддерживает React Native
styled-components поставь легко, просто напишете npm… какой npm? yarn! pic.twitter.com/WmSqwfDuVu
Очень круто расписали белую доску twitter.com/philipshurpik/…
Анонс! polish — набор хелперов для [любой] CSS-в-JS. Как lodash, только для стилей. Мы выпустили его только час наз… twitter.com/i/web/status/8…
Секция вопросов: к сожалению, пока стили в JS медленнее. Но скоро мы сделаем плагин для Бабеля, чтобы ускорить styled-components.
— Какие ограничения styled-components?
— Производительность.
— styled-components и @PostCSS?
— мы планируем это добавить после прекомпиляции Бабелем
Дальше @iamdustan расскажет про Fiber, новый рендер для Реакта pic.twitter.com/VXwpwIolQ9
Реакту скоро будет уже 4 года! Это много по текущим меркам.
Реакт есть мобильных приложений, виртуальной реальности и железа — так что рендерер должен быть сменяемым
Текущий рендерер Реакта называется Stack. В имя не было смысла пока не появился Fiber.
Лучший доклад про смысл Файбера
youtu.be/ZCuYPiUIONs
Главная идея Файбера — некоторые изменения DOM важнее остальных
Спикер объясняет как написать свой рендерер Реакта по шагам. Но там куча скучных деталей и нет мемов. Не знаю, как транслировать.
Вот ссылка на безумный проект кладется состоянием Ардурино через Реакт
<Led pin={10} value={this.state.value} />
github.com/iamdustan/reac…
В общем, если вы хотите внедрить Реакт в какое-то странное окружение (контроль состояние атомного реактора) — пишите рендерер, это не сложно
sli.do работает отлично, на вопросы отвечают быстрее и вопросы интересные из-за голосования. Надо у нас тоже внедрять.
Конференция ещё не кончилась, а бухло уже подвезли pic.twitter.com/rR7ASf8cJt
Дальше у нас дискуссионный стол с иконками Реакта. Опять же круто, как они перемешивают форматы. pic.twitter.com/9y3wIqss82
Для открытых столов ski.do вообще огонь pic.twitter.com/tM2UI46os1
«Русские хакеры» накрутили вопрос «Анимации в Реакте сосут» с огромным отрывом. Парням пришлось отвечать. pic.twitter.com/O9JYEFPyeJ
— Кто имел опыт драки?
— Дэн Абрамов поднимает руку.
Россия 🇷🇺
— Какие идеи вы бы взяли из Vue и Ангуляра?
— У Vue самая лучшая документация. У Ангуляра есть крутые идеи по препроцессингу компонентов.
Основной вопрос про драку был про то, кто победит — 4 спикера или Марк Цукербург twitter.com/petrthepig/sta…
Хотите получить опыт в опенсорсе — начните с документами. Мейтейнеры не видят проблем там, а результат вашей помощи будет огромным.
Ещё хороший вариант опенсорса — поспрашивайте в комментариях авторов ишью, чтобы стало понятнее причина ошибки
Последний доклад от @ken_wheeler про то, как он сделал систему контроля арбалета на Реакте pic.twitter.com/7QL1awcpht
Спикер крут, но выглядит как бандит в 90-е. Вот фото с его подготовки вчера: pic.twitter.com/Ae0wn6ydW1
Из-за темы оружия и опасного внешнего вида его назвали «профессиональным американцем» pic.twitter.com/3c9VgYKD8t
«Сервомотор отличается от обычного мотора тем, что ты контролируешь угол поворота»
Вы знаете, как сложно гуглить «как заставить робота спустить курок» 😅🤖🔫
Какая связь робота-арбалета и Реакта? react-hardware упрощает контроль состояния pic.twitter.com/D1YUXf6mDi
react-hardware позволяет контролировать Ардурино Реактом. Через замену рендерера, как прошлый докладчик говорил.
Си-подобный код для Ардурино на конференции про Реакт 😅 pic.twitter.com/wv3FrlTHhh
Второе применение Реакта в проекте — приложение управления арбалетом на React Native
Интерфейс стрельбы на React Native pic.twitter.com/qrriOpt6aZ
Зачем я сделал арбалет на Реакте? На работе рутина, а я хотел делать, что-то интересное pic.twitter.com/Pv75nrdax8
Время демонстрации робота-арбалета на Реакте. Стреляем в этого добровольца. pic.twitter.com/RtCPqHAaFu
Вопросы даже лучше доклада 😄 pic.twitter.com/8Lvr46JpL7
— Какая самая безумная твоя идея?
— Сделать ракету на Реакте
React London подходит к концу. Как вам трансляция? pic.twitter.com/GWUzqwzLEu
