iadramelk

21 марта 2016, Екатеринбург, Россия

# Понедельник 16 твитов

Привет! С вами Алексей Иванов (@iAdramelk) из @evilmartians

17:16

По техническим причинам на этой неделе понедельник начался позже обычного, поэтому сегодня я успею только накидать план действий.

17:16

Но сделаю я это немного позже. Сейчас как раз началась презентация Apple, я подожду пока она закончится чтобы мои твиты не потерялись.

17:18

Окей. Кажется все закончилось. Поехали.

18:14

Эту неделю я хочу посвятить обсуждениям, спорам и холиварам. Судя по архивам прошлых авторов с этим я как раз по адресу.

18:15

У меня есть несколько тем, которые я хочу об кого-нибудь обсудить и вы для этого замечательно подходите. Как раз по теме на день получается.

18:15

Завтра я хочу поговорить про компонентные шаблонизаторы во всех их вариациях: BEM и BEM-tools, React, Web-Components, Riot, и т. д.

18:15

В среду обсудить идею CSS-in-JS и HTML-in-JS, а также то как она живет вместе с идеей компонтентов и помогает/улучшает их.

18:15

В четверг я хочу поговорить про VirtualDOM в разных вариантах его реализации. 1/2

18:15

2/2 И почему мне кажется решение разработчиков React'а встроить его прямо во фреймворк не самым удачным.

18:16

В пятницу же я хочу закончить эту тему разговором об использовании всех этих замечательных штук на сервере, в обычных сайтах, а не в SPA.

18:16

Выходные остаются на свободые темы. В субботу я хочу поговорить про визвиги и draft.js, а воскресенье забъем чем останется.

18:16

Как-то так. Будет весело, не переключайтесь! По крайней мере мне.

18:16

Если вы по какой-то из перечисленных тем хотите что-то подробное обсудить – пишите комментариями. Попытаемся это тоже захватить.

18:17
@jsunderhood без БЭМа будет хорошо ;)

Эээ, не. Какие же без БЭМа холивары. twitter.com/dcromster/stat…

18:23
@jsunderhood @iAdramelk @evilmartians у марсиан не все на ruby? :)

Нет, @andrey_sitnik все переписал на PosttCSS давно! twitter.com/nemons/status/…

19:31

# Вторник 77 твитов

@jsunderhood react все таки фреймворк?(

Вот что значит начинать андерхуды по ночам! :( Ошибся, конечно библиотека. twitter.com/lisovskyvlad/s…

7:07

Окей. Сегодня я хочу поговорить про компоненты в их разных вариациях.

7:58

Году в 2007 я первый раз наткнулся на рассказ о том что такое БЭМ и его идеи мне очень понравились.

7:58

Я как раз закончил обновление новостного портала. Дизайн поменялся, а старая верстка была построена на каскадах и переопределениях.

7:58

Из-за этого мы не могли запускаться по частям – пришлось заменять все. А потом два месяца мы ловили баги вылазящие в самых странных местах.

7:58

БЭМ с идеей независимых блоков позволял низбегать этих проблем и очень сильно упрощал жизнь. Но к сожалению в тот момент был только про CSS.

7:58

Я сразу же попытался разбить на такие же куски JS-файлы и HTML шаблоны, а поулченное разложить по папачкам блоков, но не тут-то было.

7:58

Разбить JS было просто, а вот с HTML я уперся в тот неприятный момент, что блоки имеют свойство вкладываться друг в друга.

7:58

Оказалось что во всяких Django templates и прочих популярных шаблонизаторах нет инструментов для работы с деревьми блоков от слова совсем.

7:58

В результате CSS и JS у меня красиво лежали в отдельных файликах и папоках, а из шаблонов получалась адская солянка с кучей копипаста.

7:58

BEMHTML, React и Web Components же как раз изначально заточены как раз под работу с блоками в терминологии БЭМ и создание деревьев из них.

7:58

И вот когда в HTML тоже блоки, и ты можешь их хранить отдельно и реиспользовать, жизнь становится сильно проще и приятнее.

7:58

Хочу сегодня поговорить про плюсы-минусы подобного подхода.

7:59

Немного самопиара vimeo.com/123930979 – видео с @FrontTalks где я рассказываю и показываю на примерах почему компоненты лучше.

7:59

Примеры github.com/iAdramelk/dump… – React, Riot, Polymer. БЭМ я так и не выложил, потому что не придумал как пару мест сделать красиво.

7:59

Буду эти примеры сегодня как иллюстрации для обсуждения использовать.

7:59

Я пока отойду на пару часов, а вы расскажите что вы сами думаете о компонентах в шаблонах и используете лы вы их? Если да, то какие?

7:59
@jsunderhood строго говоря, БЭМ с самого начала был «не только про CSS» — см. первый коммит в github.com/bem/bem-method…

Это 2010, а я про 2007. :) Как помню в Яндексе тогда "шаблонизатором" был XSLT, который тоже умеет в компоненты? Не? twitter.com/veged/status/7…

8:16
@jsunderhood я как раз сейчас готовлю доклад, почему в 2016 с помощью PostCSS и CSS-в-JS у нас произойдёт революция в компонентах

Про это в том числе мы завтра будем говорить. :) twitter.com/andrey_sitnik/…

8:21
@jsunderhood На самом деле есть наследования/инклуды и макросы. Удавалось такое реализовать на голом php внутри вордпресс. Или на Twig

Include жестко зашит в шаблон, хочется что-то вроде props.children в React, чтобы можно было менять детей. twitter.com/SetAGE/status/…

8:31

@jsunderhood тогда можо строить деревья как из обычных тегов вроде такого github.com/iAdramelk/dump…

8:32

@jsunderhood в Руби это можно эмулировать через do и yield, но довольно некрасиво.

8:33
@SilentImp @jsunderhood я считаю, что браузеры должны стать ассамблером. Бюрократии и централизации должно быть минимум.
8:36
@jsunderhood ну а для этого есть extend. В прочем, всё равно это сложно и нормальной гибкой системы не получается. Но для несложных прил. ок

Не, extend тоже зашивается в шаблон. А хочется чтобы блоки мы отдельно описывали от дерева блоков на странице. twitter.com/SetAGE/status/…

8:55
@jsunderhood так правильно, отдельно дерево, отдельно блоки, а экстенд + инклуд/макрос, чтобы их связать

Пример:

github.com/iAdramelk/dump…

github.com/iAdramelk/dump… twitter.com/SetAGE/status/…

9:49

@jsunderhood Я хочу один раз описать Content и Listing, но при этом свободно менять то что содержимое Listing.Header и Listing.Main

9:51

@jsunderhood один из них я могу поменять extend'ом, но когда их несколько и на разных уровнях, то уже ой.

9:51

Давайте дальше. Я сейчас накидаю список плюсов компонетов. Если вы с чем-то не согласны или хотите что-то дополнить – пишите, обсудим.

11:12

Также я хочу обсудить несколько проблем с ними на текущий момент. Если вы с ними сталкивались и как-то решали, буду благодарен за советы.

11:12

Итак, основные плюсы по моему мнению:

11:12

1. Меньше копипаста, меньше условий в шаблонах, огромные возможности по вкладыванию компонентов друг в друга.

11:12

2. Можно положить все что относится к компоненту (html, css, js, тесты, локали) в одну папку и легко переносить между проектами.

11:12

3.1. Работа с зависимостями: В Web Components css и js подключаются внутри файла компонента, не надо думать о том чтобы не забыть чего.

11:12

3.2. В React, можно подключать css через WebPack для того же результата. В БЭМ'е есть сам сборщик и deps.js для указания зависимостей.

11:12

4. Тестирование: Писать тесты для отдельных компонентов ВНЕЗАПНО сильно проще, чем разбираться с ними в составе страниц.

11:13

Но есть и минусы понятно:

11:13

1. Дополнительная работа по организации и написанию. Для большого сайта, который надо поддерживать она окупается, для лендинга не факт.

11:13

2. Большинство решений рассчитаны под SPA, на сервере их либо нельзя использовать, либо сложно. Про это мы в пятницу отдельно поговорим.

11:13

3. Расширяемость и переопределяемость частей компонента. Про это я сечас напишу подробнее.

11:13

Основной плюс компонентов в том, что это такая вещь в себе. Её можно взять, подключить и забыть, не волнуясь о том что что-то сломается.

11:58

@jsunderhood Это хорошо пока компонент вас устраивает, но если вы хотите изменить готовый компонент под текущую страницу, то у вас проблемы.

11:59

@jsunderhood Либо если вы подключили чужой компонет из NPM и хотите его под себя подправить.

11:59

@jsunderhood BEM решает эту проблему уровнями переопределения и похожим на XSLT шабонизатором.

11:59

@jsunderhood Web Components насколько мне известно не решает её никак, если есть примеры какеё решить – буду рад ссылке.

11:59

@jsunderhood React из коробки тоже не дает частично менять render. Только полностью заменять.

12:00

@jsunderhood Но для Recat пару дней назад пробегал medium.com/@mistadikay/re… , который по идее позволяет там сделать уровни из БЭМ.

12:00

@jsunderhood Как это проблема решается в Riot или VueJS честно говоря тоже не знаю.

12:00

@jsunderhood Все это временами довольно сильно мешает и снова приводит к копипасту и написанию лишнего кода.

12:00
@jsunderhood внутрь Веб-компонента могут заходить CSS-переменные. Через них и предлагают настраивать.

Это только css. А как поменять структуру html? Добавить лишний тег-обертку например? twitter.com/andrey_sitnik/…

12:01
@jsunderhood HTML-атрибуты у того тега, которым ты создаёшь компонент

Для этого ты должен при создании компонента добавить такую возможность. BEMHTML же чем-то на PostCSS похож: twitter.com/andrey_sitnik/…

12:15

@jsunderhood У тебя есть дерево страницы в JSON, и ты на него по очеререди применяешь шаблоны которые это дерево изменяют.

12:15

@jsunderhood Ты можешь сделать дополнительный шаблон, который возьмет сгененерированное дерево и изменит только нужные части.

12:15

@jsunderhood Сам компонент ты не правишь при этом, а правишь только результат его render'а.

12:16
@jsunderhood а где гарантии, что ты ничего не сломаешь? Мы же специально ввели изоляцию.

Гарантий нет. Но так у тебя в разы меньше копипасты и можно брать чужие компоненты из NPM. Что КМК большой плюс. twitter.com/andrey_sitnik/…

12:22
@jsunderhood ну JS и React как-то живут без возможности поломать импортируемый модуль. И правильно делают.

Эээ. То есть я не могу в JS унаследоваться от React-компонента и переписать render? twitter.com/andrey_sitnik/…

12:27

@jsunderhood и так можно в XSLT например, очень удобно. Да и цепочка плагинов в PostCSS ровно так работает.

12:28
@jsunderhood Как раз недавно столкнулся с такой проблемой из-за захардкоженного тега в стороннем компоненте: github.com/moroshko/react…
12:28
@jsunderhood можешь, но ты не можешь взять готовую функцию render() и поменять в ней только часть кода

Вооот. И это очень неудобно, когда я хочу добавить один тег-враппер для css. twitter.com/andrey_sitnik/…

12:33

Пример, чтобы было чуть понеятнее про матчеры. Вот дерево страницы куда подрубается меню: github.com/iAdramelk/dump…

12:43

@jsunderhood Вот ту мы ищем блок меню и превращаем json из прошлого шага в элементы блока: github.com/iAdramelk/dump…

12:43

@jsunderhood Вот мы добавляем пунктам меню вложенный тег <a>: github.com/iAdramelk/dump…

12:44

@jsunderhood @jsunderhood После этого мы можем подрубить следующий файл bemhtml сматчить блок или элемент и снова его преобразовать.

12:44
Очень хороший коментарий про дву-проходную шаблонизацию под видео DUMP 2015. И опять не поняли БЭМ :( vimeo.com/123930979#comm… @jsunderhood

В целом согласен с замечаниями, разеделение на два уровня очень условное и их не обязателньо два совсем. twitter.com/voischev/statu…

12:48
Про шаблонизаторы вообще
events.yandex.ru/lib/talks/329/

Про bem-xjst в частности
events.yandex.ru/lib/talks/3350/
@andrey_sitnik @voischev @jsunderhood #b_

13:23
@bem_ru @andrey_sitnik @jsunderhood А еще обязательно это видео с MoscowJS youtube.com/watch?v=GG669J… там на примерах
13:23

В реплаях Ситник рубится с ребятами из Яндекса про шаблонизаторы. Там много, все не отретвитешь, но если интересно сходите почитайте.

13:24

Мне сейчас надо будет отойти на пару часов. Как вернусь попробуем поговорить про применение этого всего на практике.

13:25
@jsunderhood на практике подружил react и bem очень просто, пользуемся в проекте: github.com/agudulin/dumb-…
15:15

А вот интересный вопрос. Есть ли тут кто-нибудь, кто использовал Web Components в продакшене? Если да, то поделитесь впечатлениями.

15:20

Ну и такой же впрос про BEM. Кто-нибудь за пределами Яндекса использует в проектах что-то из BEM, кроме соглашения о именах классов?

15:24

Мне вчера писали в реплаи про VueJS, как способ делать компоненты и частичную реализацию спек Web Components. Кто-нибудь пробовал?

15:25

Про Реакт не спрашиваю. Про него мы будем завтра говорить вместе с CSS-in-JS.

15:26
@jsunderhood кажется, что как только это случается, человек потом оказывается в Яндексе :)
15:27

Ну и если вы делите код на компоненты каким-то дугим, не указанным способом тоже расскажите.

15:32
@jsunderhood писал мелкий проект на нем — очень понравилось. Быстро и просто
vovanr.github.io/dtr
github.com/VovanR/dtr
15:37
@jsunderhood альфаБанк, мануфактура

О, а у них нет какого-нибудь публичного рассказа о внедрении и деталях использования? twitter.com/Yeti_or/status…

15:42
От Мануфактуры @voischev на прошлогоднем CodeFest рассказывал:

2015.codefest.ru/lecture/1018

@jsunderhood

15:46

# Среда 61 твит

Сервис с таблицами поддержки разных фич в разных в браузерах caniuse.com В ленту @jsunderhood и @cssunderhood

А вдруг и правда кто еще не знает. Пусть будет. twitter.com/de_gis/status/…

10:35

Ок. Сегодня у нас день CSS-in-JS и HTML-in-JS. Я сейчас напишу небольшое вступление и поробуем это все обсудить.

10:36

Ща будет длинная простыня текста, готовьтесь. Начнем с задач.

11:38

Вот решили мы упороться за скорость загрузки и на каждую страницу сделать бандл в котором у нас будет только используемый на ней CSS-правила

11:38

Как нам это сделать? А как не забыть все состояния страницы (авторизован/не авторизован)? А те что из JS добавляются/изменяются?

11:38

Или вот мы решили пойти дальше и сократить названия всех нашил CSS-классов для чего-то вроде "aRz", как делает Gmail.

11:38

Как нам это сделать везде и ничего не забыть? Да, в JS тоже.

11:38

Или вот мы хотим собрать такой же бандл для JS и включить туда только тот JS, который как-то работает и изменяет DOM текущей страницы.

11:38

Но для этого нам опять надо знать что на странице может быть и в каких комбинациях/состояниях.

11:38

Или вот мы хотим упростить работу с зависимостями. Чтобы компонент поключать одной строчкой, а не добавлять в сборку отдельно html/js/css.

11:39

Думаю многие пытались что-то такое сделать у себя, но подозреваю что большинство в итоге бросило потому что это требует кучу времени и сил.

11:39

Сложность тут в том, что мы используем отдельные технологии, ничего друг о друге не знающие, но при этом друг на друга влияющие и изменяющие

11:39

Сейчас я вас пошлю смотреть видео от которого пошла мания на CSS-in-JS: blog.vjeux.com/2014/javascrip…

11:39

В видео разработчики Facebook рассказываю как они боролись с похожими проблемами и в итоге все их решили подключая не css, а json со стилями

11:39

JSON подрубается через require, для него работает dead code elimination от uglifyjs, имена вы можете делать любые, либо просто писать style.

11:39

Вариант со style нормально работает для SPA, но плохо подходит для серверного рендера, поэтому для них появился github.com/css-modules/cs…

11:39

CSS Modules подключается также через require, но при этом умеем генерировать на выходе CSS-файл уникальными именами.

11:40

Продакт плейсмент. Мой коллега @outpunk написал плагин для PostCSS, для использования CSS Modules на сервере: github.com/outpunk/postcs…

11:40

Тут превращение CSS в JS на этапе сборки и назначения класса упростило всем жизнь и дало доступ к JS-инструментам по оптимизации.

11:40

Но в докладах о CSS-in-JS часто упускается важный момент – чтобы Реакт начал работать с CSS-in-JS сначала в JS нужно было превратить и HTML.

11:40

JSX под капотом делает именно это: facebook.github.io/react/docs/jsx… Превращает псевдо-html в набор функций.

11:40

И это тоже в свою очередь позволяет применять к JSX-шаблонам все те же оптимизации и dead code elimination, про котроые я писал выше.

11:40

Мне кажется очень правильной вчерашняя фраза @andrey_sitnik про то что браузеры должны стать ассемблером.

11:40

Не надо думать про финальный HTML, CSS, JS. Это просто машинный код который у нас получается после компиляции.

11:40

А вот чтобы на уровне компиляции получать самый короткий и эффективный машинный код, лучше было бы отдавать компиляторы все в JS.

11:41

Что думаете?

11:41

Собрал в Gist чтобы удобнее было читать: gist.github.com/iAdramelk/da92…

11:46
@jsunderhood знал про компиляцию jsx в функции, но не думал об этом в таком ключе
11:58
Ну #b_ же, с его декларациями и deps.js.

Например, так как сделано в

github.com/vithar/bem.info

@jsunderhood

twitter.com/jsunderhood/st…

ДА! Я ждал этого коммента! Тут начинается моя главная претензия к БЭМ, он умеет почти все из этого, но какой ценой: twitter.com/bem_ru/status/…

11:59

Вместо использования чистого JS и require, бэм зачем-то продолжает держаться за идею о том что все строится на папках и их именовании.

12:00

Чтобы файл попал в сборку давайте его правильно назовем, чтобы уметь не грузить элемент в css – давайте положим его в отдельный файл, и т.д.

12:00

Хотя сейчас в JS уже есть нужные инструменты для того чтобы все эти проблемы разруливать автоматически без конвенций и конфигураций.

12:00

Мне кажется именно это одно из самых больших препятствий на пути развития БЭМа сейчас.

12:01
@jsunderhood И толку от require? Меня вон просят убрать в svgo динамические require, потому что в браузере не пашут.
github.com/svg/svgo/issue…

Не совсем понял. Вопрос: Зачем использовать require если в какой-то сторонней альтернативе NPM они не работают? twitter.com/ruGreLI/status…

12:07

Пока бывшие и настоящие сотрудники Яндекса обсуждаютв в реплаях БЭМ-тулинг, я закину следующую тему.

13:05

На прошлом @FrontTalks у @rdvornov был замечательный доклад про инструментацию кода: vimeo.com/142074240

13:06

Из доклада можно узнать как имея, например, Babel и создавая плагины к нему получить много замечательной и интересной магии.

13:07

Например: React Hot Loader, системы анализа скорости работы, крутые инструменты дебага и много чего еще.

13:07

Теперь представьте что можно сделать со всем этим если CSS и HTML тоже будут в JS.

13:07
Блок=папка — удобно. В блоке лежат ещё документация, картинки, тесты. CSS может быть как CSS, а не в JS
twitter.com/jsunderhood/st…
@jsunderhood

А никто не мешает их хранить в папках при require. Но вот сборка и её настройка с require упрощается на порядок. twitter.com/bem_ru/status/…

13:13
@jsunderhood не обязательно в js-е все это хранить, можно тоже самое делать в лоудерах webpack-a, по сути)

This. JSX тоже не JS, главное чтобы в момент сблрки оно JS стало. twitter.com/hellbeast92/st…

13:15
На порядок?

Есть зачатки сборки на webpack
ru.bem.info/forum/774/

И на gulp
ru.bem.info/forum/782/

@jsunderhood
twitter.com/jsunderhood/st…

Отдаешь на вход 1 файл с require, Webpack сам строит граф зависимостей по ним, Uglify сам удаляет неиспользуемое. twitter.com/bem_ru/status/…

13:24
@jsunderhood немного про инструменты и как работает под капотом youtube.com/watch?v=IUtbbN…
13:28
Я правильно понимаю, что если бы это всё работало — не было бы первоначальных твиттов?У нас — работает

@jsunderhood
twitter.com/jsunderhood/st…

Я думаю это называется "у нас такая же нога и не болит". :) Да работает, но сложно, дорого и труднообучаемо. twitter.com/bem_ru/status/…

13:29
А то, что ты предлагаешь просто, дёшево и просто для понимания?

У нас оправданная сложность.

@jsunderhood
twitter.com/jsunderhood/st…

Вся система выглядит так: Хочешь что-то использовать – напиши require. Как ты называешь файлы и папки неважно. Все. twitter.com/bem_ru/status/…

13:34

@jsunderhood @bem_ru кажется это проще для понимания и на этом фоне сложность не кажется оправданной.

13:35
@jsunderhood зачем? Разве только js поддается анализу? Почему не анализировать html и css?

Потому что js, css, js друг от друга зависят. Их отдельно анализировать сложнее и проще потерять связи. twitter.com/hellbeast92/st…

13:38
@jsunderhood кстати, пока нет хороших линтеров CSS-в-JS, потому что пока нет явного формата, очень трудно найти в JS объект стилей

Его можно линтить как CSS-в-CSS например как в CSS Modules, а потом уже конвертить в js при сборке. :) twitter.com/andrey_sitnik/…

13:43

О, у нас есть возвражения по поводу анализа, ща. Тут я меньший специалист чем @rdvornov

13:45
@jsunderhood CSS/HTML гораздо проще анализировать, когда они не в JS, потому что декларативные языки для анализа проще, чем JS императивные
13:46
@jsunderhood Речь идет про анализ того, что и как используется, прогнозирование структуры, особое поведение значений в ряде атрибутов etc
13:46
@jsunderhood C CSS/HTML-in-JS тоже можно делать анализ, но он менее эффективен и надежен,и обрастает большим кол-вом допущений и соглашений
13:46
@jsunderhood тогда мы теряем кайф от динамических свойств. Можно создать отдельный тип файлов, но тогда не описать всё в одном файле.

Это да, поэтому для SPA проще писать все сразу в JS и потом в style. Но есть и приложения с серверных рендерингом. twitter.com/andrey_sitnik/…

13:47

Кстати, у нас ведь не только в Реакте шаблоны пишутся в JS. Есть еще например github.com/dominictarr/hy… который использует cycle.js

13:50
@jsunderhood @bem_ru тогда теряется возможность пользоваться уровнями переопределений. А это хоть и редко, но нужно

Не обязательно. Делаем require для файла нижнего уровня, а поменять поле в JS-объекте не сложно. twitter.com/halfcupgreente…

15:12
@jsunderhood К сожалению тогда проект обрастает огромным количеством относительных require, и становится не очень maintainable

Огромным количеством require сейчас опутаны почти 100% не-БЭМ проектов и кода на PHP/Python/Node. :) И ничо, норм. twitter.com/halfcupgreente…

16:10
@jsunderhood я бы сказал, что это преувеличение. Большинство проектов не использует require. И БЭМ.

Каюсь, да. Переборщил с гиперболами. Пусть будут не все проекты, а только SPA. twitter.com/SilentImp/stat…

16:27
«
— А что, отец, — спросил молодой человек, — невесты у вас в городе есть?

— Кому и кобыла невеста
»

@jsunderhood
twitter.com/jsunderhood/st…

17:02
Так не получится.

Набор #b_ уровней заранее не известен и определяется на конечном проекте.

@jsunderhood
twitter.com/jsunderhood/st…

Ну require тоже несколько может быть. Но тема интересная, да. twitter.com/bem_ru/status/…

17:05

@jsunderhood @bem_bl а можно решать эту проблему как rebem например, вариантов масса medium.com/@mistadikay/re…

17:09

Лучше даже вот такая ссылка: github.com/rebem/layers-l… смотрим на импорты.

17:09

# Четверг 62 твита

Окей, продолжаем. Вчера мы мило похоливарили с любителями БЭМ, сегодня очередь Реакта.

11:41

А поговорить я хочу сегодня про VirtualDOM.

11:42

Вот небольшой JS Bin с илююстрацией того о чем я вчера говорил про HTML-в-JS: jsbin.com/voduhakujo/edi…

11:44

Код можно запустить и посмотреть в консоли (браузерной, не JS Bin'овской) что именно отдает рендер и как они комбинируются.

11:45

Главное что нужно понимать из этого примера:

11:51

1. Компоненты возвращают объект с описанием какого-то куска HTML.

11:51

2. Никакого HTML до того как вы вызываете ReactDOM.render нету.

11:52

3. ReactDOM.render берет объект который вы дали ему на вход, сравнивает с тем объектом который ему давали в прошлый раз и ищет разницу.

11:52

4. Если ничего не изменилось – в DOM ничего не идет.

11:52

5. Если что-то изменилось – создается патч, который минимальным количеством операций приводит DOM к новому состоянию.

11:52

Пока вы делаете все это в браузере и для SPA все хорошо и замечательно, но вот вам понадобилось сделать интернет-магазин.

12:11

И вы вспоминаете, а ведь Реакт-то умеет server side render! Давайте возьмем наши любимы компоненты и все Реакте напишем.

12:12

Пишете, рендерите, все работает, но есть один маааленкьий нюанс...

12:12

На странице интернет-магазина мало динамики. Возможно только счетчик товаров в корзине и попап с похожими товарами.

12:12

И вот тут оказывается, что если вы решили счетчик и попап сделать на Реакте, то вам придется на клиент тащить вообще все шаблоны страницы.

12:12

Да, даже если почти все шаблоны это dumb components и никогда не поменяются. Почему так?

12:12

Смотрим пример, видим один вызов ReactDOM.render и видим что ему на вход приходит корневая точка нашего дерева компонетов.

12:12

И чтобы получить diff страницы и сделать патч нам нужно иметь весь кусок дерева между кнопкой "Добавить в корзину" и счетчиком товаров.

12:12

Также с попапом, чтобы показать попап сразу внутри body нам нужно иметь все дерево шаблонов между body и кнопкой показа.

12:13

К сожалению это делает Реакт совершенно не пригодным для большого класса проектов: Интернет-магазинов, каталогов, справочников, etc.

12:13

Можно конечно генерить на выходе просто html, а динамику делать, простите, через jQuery. Но это какое-то извращение.

12:13

Все это, как мне кажется, из-за того что в реакте VirtualDOM, шаблоны и логика взаимодействия очень тесно вместе объединены.

12:13

Это упрощает работу с ними и упрощает создание SPA, но накладывает большие ограничения на возможности его серверного использования.

12:13

Производные от Реакта, такие как Riot или VueJS тоже этому подвержены. Web Components тоже требуют подгрузки кучи всего.

12:13

И как в рамках концепции Реакте сделать возможным использования похожих библиотек для классических сайтов мне не очень ясно.

12:14

В связи с этим вопос сегодняшний основной. Сталкивались ли вы с таким? Думали как решать? Может видели какие-то варианты решения?

12:14

Полный гист про VirtualDOM gist.github.com/iAdramelk/76aa…

12:18
@jsunderhood леворуля. Сделай несколько reactdom.render()

Тогда мне придется отбирать руками файлы для сборки, организовывать точки вставки и интерфейс прокидывания эвентов. twitter.com/ALF_er/status/…

12:20

Вот у меня есть шаблон кнопка и один шаблон счетчик что надо поменять, между ними полдома неизменяемых компонентов. Как легко их подружить?

12:21
@jsunderhood эммм... Ну да, чтоб что-то появилось нужно что-то для этого сделать

Да, но тут с Реактом будет больше работы чем с тупым jQuery. В чем смысл тогда? А верстать компонентами хочется. twitter.com/ALF_er/status/…

12:24
@jsunderhood точек рендера ведь может быть несколько, так вроде много кто React используют — только в динамических частях сайта

Вот я хочу все верстать компонентами т. к. удобно, а на клиент только те, что с динамикой тащить. Можно автоматом? twitter.com/mistadikay/sta…

12:25
@jsunderhood если хочется верстать компонентами, то почему не сделать всё на условном Реакте?

Потому что чтобы поменять 1 цифру в счетчике по нажатию на кнопку мне надо тащить 10-ки шаблонов что не поменяются. twitter.com/ALF_er/status/…

12:27
@jsunderhood в теории можно как-то клиентские классы помечать и потом Babel плагином делать магию. Но как-то не выглядит красиво.

Ага. Я думал про это и про кастомный ReactDOM, но хак на хаке выходит. twitter.com/andrey_sitnik/…

12:27
@jsunderhood так ты же не хотел верстать все компонентами только что? twitter.com/jsunderhood/st… Или я что-то неправильно понял?

Наоб., я хочу все компонентами верстать. Но большинство будут тупыми и после первого рендера никогда не поменяются. twitter.com/mistadikay/sta…

12:30

@jsunderhood @mistadikay большие ни один компонент никогда не поменяется.

12:33
@jsunderhood а, понял тебя, все сводится к размеру итогового бандла? Проблема высосана, плюс это частично решается постраничными бандлами

Ну вот у меня на текущем проекте очень жесткие требования к размеру страницы, TTFB и времени до первого рендера. twitter.com/mistadikay/sta…

12:34
@jsunderhood ты сделал какие-то метрики и выяснил, что размер js-бандла — bottleneck, и конкретно именно код компонентов раздувает бандл?

Самый большой кусок что мы оптимизировали – это JS, да. Мы в итоге убрали Реакт и шаблоны с большинства страниц. twitter.com/mistadikay/sta…

12:40

.@mistadikay но самый большой кусок был сам реакт, с наборами шаблонов под страницу не делал тестов.

12:40

Ок пока популярно мнение не крохоборствовать и тащить все шаблоны. Кто-нибудь думает еще чего?

12:46
@jsunderhood есть всякие микро-реализации React API — возможно вам подойдет что-то подобное. Или какой-нибудь cycle.js :)

Ну сам реакт или cycle фиксированного размера, вопрос в шаблонах. Зачем тащить то, что никогда не поменяется? twitter.com/mistadikay/sta…

12:48
@jsunderhood опять же есть реализации VDom — можно их подключить и использовать как-то (правда, у меня нет с этим опыта)

О! Про это я тоже хотел поговорить. Реакт не единственный вариант VirtualDOM: auth0.com/blog/2015/11/2… twitter.com/mistadikay/sta…

12:53

Есть например Incremental DOM от Google: github.com/google/increme… он позволяет строить VirtualDOM из существующего HTML.

12:55

Ну ладно, не пошло обсуждение про React, всем и так норм. Тогда поговорим про вчерашнюю исторю kik: blog.npmjs.org/post/141577284… Что думете?

13:15

И как вы к решению NPM про кик относитесь? Поднимаете ли свое зеркало пакетов?

13:16
@jsunderhood incr-dom не умеет stateful компоненты, одного vdom недостаточно. бенчмарк библиотек, которые умеют localvoid.github.io/uibench/
13:26
@jsunderhood ужас какой, зачем тащить реакт в нединамический веб, да еще и изоморфить

Вопрос не в Реакте, а в любом component-ориентированном решении на сервере, А они все такие. (Да-да, БЕМ, я помню) twitter.com/raxpost/status…

13:28
@jsunderhood я все никак не могу понять всеобщей поддержки Azer’а, который во всем вел себя как последняя истеричка
13:29
@jsunderhood думаю, что kik угрожали azer
13:31
@23ydobemos @jsunderhood это форма протеста которая сработала и начала обсуждение существующей проблемы и даст хороший долгосрочный эффект
13:33
@jsunderhood все что нужно знать об этой истории medium.com/@sarlalian/kik… + комментарии в том же блоге npm все расставляют на свои места
13:33
@jsunderhood также я задумался о NPM Foundation, так npm критичная часть nodejs экосистемы twitter.com/iamstarkov/sta…
13:40
@jsunderhood если бы вместо кик была бы более известная компания, то все выглядело бы иначе. Назови он спорный модуль например Гугл
13:48

Так, меня большую часть дня сегодня не было у компьютера, поэтому сегодняшнюю тему обсудили вскольз, завтра лучше постараемся.

19:15

В реплаях тут прошл активное обсуждение kik, все репостить не буду, елси кому интересно сами посмотрите.

19:16

Вот вам пока пара ссылок на ночь:

19:25

1) smashingmagazine.com/2016/03/houdin… – в браузеры приходит доступ CSSOM, Layout'у и Paint'у, ...

19:25

...a также встроенный парсер CSS. Это как PostCSS, но может в разы больше всего.

19:25

2) В csso появилась очень крутаю функция – оптимизации на основе usage data: github.com/css/csso#scopes

19:34

Если коротко, то теперь можно сказать CSSO как CSS разбивается на блоки/компоненты и он с этим знанием сможет пожать вам CSS гораздо лучше.

19:34

Также, если вы получили из шаблонов список того что и как в них используется, то теперь можно удалить неиспользуемое.

19:34

Это все к разговору про браузер как ассемблер и пользу от того, что одни части знают что находится в других.

19:35

# Пятница 54 твита

@jsunderhood @mistadikay Я примерно для этого написал плагин для Babel, который при сборке вырезает кусок кода.
8:00
@jsunderhood @mistadikay Так я могу не меняя кода рендерить HTML и т.п. или только отслеживать зависимости (стили и дочерние компоненты).
8:00

.@mista_k а у тебя нигде примеров и кода не выложено посмотреть?

8:00
@jsunderhood @veged вечная проблема ConventionOverConfiguration, вот в тему youtube.com/watch?v=wJEX2F…
8:11
@jsunderhood github.com/mistakster/bab… В ридмишку добавил пример. Версия пока очень экспериментальная, если честно. Но концепт «выстрелил».
8:20
@jsunderhood я сейчас заморачиваюсь с тем, чтобы рендеринг обычных сайтов (контент тяну из @neoscms) перевести на #reactjs.Есть идеи в тему?
8:49
@jsunderhood Вот эта штука очень пригодилась пока github.com/RickWong/react… для декларативного требования данных каждым компонентом
8:49
@mista_k @jsunderhood очень хочется tree shaking для js ast, чтобы такие штуки было легче делать
8:50

В продолжение вчерашней темы есть еще такой вариант: github.com/PixelsCommande… но сам не пробовал. Есть кто-то пробовал, поделитесь опытом?

9:04

Ок. У нас сегодня последняя большая тема, в выходные будет формат полегче. Перед тем как к ней переходить несколько тезисов из прошлых дней:

10:48

1. Я считаю что модель верстки компонентами для любого крупного проекта подходит лучше, чем любай другая.

10:49

2. Компонент включает HTML, CSS, JS, тесты, локализации, мануал и т. д. Эти файлы проще всего хранить и использовать вместе.

10:49

3. Браузер это ассемблер которому мы кормим оптимизированный машинный код в разных форматах.

10:49

4. CSS, JS и HTML должны знать структуру друг друга, это позволяет гораздо эффективнее их сокращать, пожимать и оптимизировать.

10:49

Использование в последние годы штук вроде Webpack, React и CSS Modules меня лично убедило что при таком подходе к коду жить проще и приятнее

10:49

Это все хорошо пока ты делаешь SPA, но есть проекты которым противопаказано быть SPA, а пользы от компонентов и оптимизаций было бы много.

10:49

Это сайты магазинов (Amazon), новостные сайты (NY Times), справочники организаций и многие другие.

10:49

Сегодня я хочу поговорить о том как быть создателям таких сайтов и что нужно сделать, чтобы вся эта радость появилась и у них тоже.

10:50

Мне кажется что сейчас у активного переноса таких подходов на сервер есть два препятствия:

11:01

1) В серверной верстке шаблоны до сих пор пишутся, обрабатываются и рендерятся отдельно от CSS и JS, хотя сборка ассетов и переехала в ноду.

11:01

2) Завязанность большинства современных компонентных решения на SPA и VirtualDOM.

11:01

Вторую тему я пытался поднять вчера и возможно мы к ней еще вернемся. Но сегодня я хотел про первую поговорить.

11:01

Итак, главный мой сегодняшний тезис: Я считаю что в ближайшие годы, в крупных проектах шаблонизаторы вслед за ассетами тоже переедут в ноду.

11:03

Тут сразу появляется вопрос – как? Собрать ассеты можно один раз и больше не трогать, а вот шаблон нужно рендерить при каждом запросе.

11:05

Как – возможны варианты. :) Про те что я знаю, я расскажу примерно через час и тогда же обсудим ваши предложения и вариты тоже.

11:06

Можете пока начать кидать свои.

11:07
@jsunderhood #slowpoke по поводу размера бандла можно посмотреть в сторону github.com/developit/prea… и github.com/Lucifier129/re…
12:28
@jsunderhood Это очень пугает. Мы окажемся в заложниках у технологии.

В теории вместо Ноды может быть любой другой язык, но на практике как мы хотим в браузере те же шаблоны, так что… twitter.com/mista_k/status…

12:31
@jsunderhood ну БЭМ же! ;)

Да-да, БЭМ я помню. И меня очень печалит что для описанного мной юзкейса больше ничего и нет. twitter.com/harisov/status…

12:37

.@harisov Поэтому я вот и пытаюсь привлечь внимание к проблеме 4-й день уже! :)

12:38

А вот если серьезно, БЭМ – это технология авторы которой лучше всего понимают те задачи и проблемы которые надо решать для крупных проектов.

12:42

И ЧСХ они их даже решают как-то, но вот способы которыми они в итоге их решают как правило заставляют шевелиться волосы у меня на голове.

12:42

Мне кажется можно как-то проще всегда.

12:42

Но тем не менее шаблонизатор БЭМ'а работает как раз на Ноде и как раз его пользователи смогут нам накидать больше всего примеров интерграции

12:44

Вот как раз Ваня Воищев во вторник прсылал такую ссылку: github.com/bem/bem-forum-… Тут описаны основные варианты интерграции.

12:52

Я в своей практике пробовал только варианты 1 и 2 оттуда правда.

12:53

Вариант 1 – когда вы поднимаете Экспресс, делаете свой роутер, котроллеры и проч., а бэкенд только как API для используете.

12:56

Он хорош когда вы на одних данных хотите сделать несколько представлений: сайт, iOS, Android, в остальных случаях старайтесь избегать его.

12:56

Избегать – потому что вам придется потворять самим кучу того что Rails, Django, Laravel и проч. умеют делать из коробки и лучше.

12:57

Вариант 2 – когда Rails, Django, Laravel делают свю работу, но на выходе из условного контроллера вместо шаблона отправляют JSON в Ноду.

12:58

Нода возвращает им HTML и дальше как обычно.

12:59

Мы делали вариацию второго подхода году в 2013-м, когда в JetStyle разрабатывали для Яндекса проект на Django, BEM и LEGO.

13:02

В Django Templates мы генерировали BEMJSON для страницы, отправляли его в ноду и получали назад уже HTML. Было довольно удобно.

13:03

Про третий пусть расскажут те кто пробовал. Ну и вобоще поделитесь опытом елси кто делал себе что-то такое? :)

13:03

Вот пример интеграции Django и React по похожей модели: github.com/markfinger/pyt… на вход – имя шаблона и JSON, на – выход HTML.

13:24

Сегодняшняя тема одним Gist'ом: gist.github.com/iAdramelk/2623…

13:38
@jsunderhood есть еще тренд с переносом логики формирования API на клиент (Relay+GraphQL/Falcor), и это как раз интересно для вашей темы
14:00
Злые марсиане ищут фронтэнда. React, PostCSS, Ситник. Вы знаете, что делать: amp.gs/jn3d pic.twitter.com/fVqbl3iKDs

И немного злоупотреблю положением (Мне Шувалов разрешил!). Злые Марсиане ищут фронтендера, так что пишите есличо. twitter.com/evilmartians/s…

14:15

И все-таки, если кому-то есть что рассказать про серверный рендеринг на Ноде у себя в проектах, то я с радостью поретвичу. Ваня @voischev ?

15:02

#slowpoke_mode_on Прошел всего год и я заметил что Яндекс выделил БЕМ-овский шаблонизатор в отдельный репозиторий github.com/bem/bem-xjst/

16:32

Я посмотрел по примерам и кажется его можно легко связать с Gulp или Webpack и использовать для простого варианта компонентов на сервере.

16:33

Динамику придется все равно самому отделньо делать, но так все равно сильно проще чем весь БЕМовский стек тащить. Посмотрите короче.

16:35
CSSO 1.8 с поддержкой usage data (github.com/css/csso/relea…) стал вишенкой в нашем pipeline сборки CSS. Наш CSS в сборке похудел на 38.5% \o/
17:56
750Kb собранный CSS
544Kb -> csso (gzip 67Kb)
351Kb + сжатие имен классов
215Kb + usage data (gzip 42Kb)
=
-61.5% от обычной минификации
17:56

# Суббота 31 твит

@jsunderhood вообще-то три года:

github.com/bem/bem-xjst/c…

Ну и БЭМ, а не БЕМ.

Ой. Тут говорят, что я не просто слоупок, а вот какой-то совсем нереальный слоупок. twitter.com/harisov/status…

6:58

Похоже что половина троллинга БЭМа с моей стороны на этой неделе было не по адресу. (Но только половина, вторая половина ок!)

6:59
.@jsunderhood добрые земляне тоже ищут фронтендеров yandex.ru/jobs/vacancies… ;-)

Вот, во искупление ретвичу вакансию Яндекса тоже. (Но сразу говорю – у Марсиан лучше, идите все равно к нам!) twitter.com/veged/status/7…

7:01
@jsunderhood мне тоже нра компонентный поход и жаль, что пока все это лучше всего работает со SPA. =>
7:02
@jsunderhood я сейчас уже panini использую.

Этот? github.com/zurb/panini twitter.com/kuzvac/status/…

7:04

Окей. Новый день, надо обсуждать что-то новое.

8:48

Хотел сегодня рассказать про facebook.github.io/draft-js/ и почему это самое крутое что происходило с визвигами за все время их существования.

8:48

Но прикинул что в осмысленное количество твитом не укладываюсь. Поэтому вам придется мне на слово поверить!

8:48

Но посмотрите обязательно, я считаю что draft.js это самое крутое, что во фронтенде повилось за последний год, круче чем CSS Modules и пр.

8:48

Что понять чем это круто посмотрите примеры с меншнами и хэштегами в репозитории например.

8:51

Или вот этот набор плагинов github.com/draft-js-plugi…

8:51

Также про то чем плох обычный contentEditable есть замечательная статья от создателей Medium medium.com/medium-eng/why…

9:00

В ней создатели их редактора рассказывают почему им пришлось потратить почти год на создание своего решения, но решение не выкладывают.

9:02

А Facebook выложил свое решение. Причем не как готовый редактор, а как конструктор редакторов со всеми теми плюшками что в статье описаны.

9:04
@jsunderhood Надеюсь, скоро доберусь попробовать его на работе.
9:16

На всякий случай предупрежу, draft.js выложили опенсорс месяц назад и я сразу вижу пару штук котроых в нем сейчас не хватает, ...

9:32

... поэтому прежде чем начать использовать на своем проекте сначала прочитайте доки и поймите пдоходит ли оно вам.

9:33

Например таблицы в нем сейчас сделать сложно (но с теми правками что сейчас в пуллреквестах будет сильно проще).

9:34

Но для форм коментариев, постов в блог и других простых плоских текстов он уже сейчас очень хорошо подходит.

9:35

Мне самому близка эта тема после того как я пару лет назад участвовал в создании WYSIWIG'а для верски книг по всем типографским правилам.

10:27

Чтобы понять масштаб бедствия можно посмотреть вот это мое видео про параграфы vimeo.com/82527410

10:29

Так как кроме параграфов были еще страницы, картинки, сноски и прочее и это все надо было в реальном времени править, то было весело.

10:31

Редактор мы в итоге так и не сделали, причем во многом из-за проблем с contentEditable. А вот был бы у нас draft.js тогда...

10:31

Ладно, а может еще у кого есть кулстори про визвиги?

10:36

Так никто не пишет кулстори, ну ок. Буду сам вас развлекать.

12:34

Если вы вдруг решите писать визвиг для книжек, то предварительно прочитайте вот это вот: ozon.ru/context/detail…

12:34

Да-да, это то самый Кнут который пишет бумажные кирпичики про алгоритмы.

12:34

Так вот, когда Кнут был маленький, но уже много писал, ему очень не нравилось, что его докторские выглядят на как… гм, не очень хорошо.

12:35

В результате Кнут придумал Tex и параллельно большинство алгоритмов которые и теперь используются в верстке для разбивки абзацев и страниц.

12:35

Книжка как раз их описывает. Они правда про английский и для других языков их надо адаптировать и менять правила, но как основа хорошо.

12:35
@jsunderhood вот еще в тему medium.com/content-unedit… Мы его используем и в контакте с этими ребятами.
19:54

# Воскресенье 28 твитов

Новый день, а темы кончились. Буду вас ссылками спамить сегодня. Вы тоже присылайте ссылки на то что интересного видели в последнее время.

8:01

Ну и если кто-то хочет что-то обсудить про те темы, о котроый мы на этой неделе говорили, Марсиан или удаленную работу – пишите.

8:02

Если вы еще не, то обратите внимание на egghead.io Я себе нашел там кучу интересных курсов, а формат видео на 5 минут очень ок.

8:05

Как пример посмотрите курсы про Redux egghead.io/series/getting… Cylce.js egghead.io/series/cycle-j… и RX egghead.io/series/introdu…

8:07

Еще наш арт-директор очень любит Elm и обзывает фронтендеров земляными червяками за то что мы на него не переходим: elm-lang.org

8:08
@jsunderhood в скольких часовых поясах у вас марсиане живут?)

В десятке разных. От Бали до Нью Йорка. В футере сайта можно посмотреть карту кто где сейчас evilmartians.com twitter.com/kuzvac/status/…

8:11
@jsunderhood ого, там даже карта есть. Я не доходил до конца страницы, видимо.

Ага. Она еще и обновляется раз в несколько часов по данным из приложений для Мака или плагинов для Хрома. :) twitter.com/kuzvac/status/…

8:20

Хорошая коллекция строк для тестов: github.com/minimaxir/big-… чтобы убедиться, что ваш интерфейс не ломается в нестандартных ситуациях.

8:57
@jsunderhood, поддерживаю. Там замечательные видео по angular.
9:03

Дальше про курсы. Вот курс на Udacity про offline first, service workers и IndexedDB: udacity.com/course/offline…

9:23

Весь курс я пока не проходил, но вот это видео из него про цикл жизни service workers хорошее: youtube.com/watch?v=TF4AB7…

9:24

Если кто-то не хочет смотреть видео на egghead.io про реактивное программирование, то вот то же самое в виде текста: gist.github.com/staltz/868e7e9…

14:23

Реактивное программирование интересный концепт, хоть и выносящий мозг поначалу.

14:24

И раз мы начали про странное – Elm что я уже упоминал тоже хороший. Почитайте для затравки про обработку ошибок там: elm-lang.org/blog/compiler-…

14:32

Да, по этой неделе пможет показаться что я не люблю БЭМ. Это не правда, БЭМ крутой и его разработчиков я очень уважаю.

14:58

Проблемы же о которых я говорил не специфичны только для БЭМ – это проблемы вообще любых глобальных методологий и фреймворков.

14:58

Многое из того что я писал про БЭМ касается также Meteor'а или тех же Ruby on Rails, с которыми мне сейчас приходится много работать.

14:58

Про проблемы Метеора и планы по их преодолению есть хороший пост из двух частей. 1) discovermeteor.com/blog/the-state… и 2) discovermeteor.com/blog/the-state…

14:59

Но многое из того что там написано можно и для других похожих историй использовать.

14:59

И раз мы начали про Метеор – вот интересный проект полного воспроизведение его функциональности на Webpack/React/etc github.com/mattkrick/meat…

15:01
@jsunderhood и о том, что означает, что в языке нету ошибок в рантайме quanttype.net/posts/2016-03-…
15:06

У нас скоро полночь и я потихоньку закругляюсь. Я от этой недели получил много веселья и пользы. Надеюсь не я один!

18:36

Если кто-то хочет продолжить со мной общаться про компоненты, CSS- и HTML-в-JS, серверсайд-рендеринг и визвиги – я только за, пишите!

18:36

Вживую меня можно будет встретить 8 апреля в Екатеринбурге на dump-conf.ru . Я там один из организаторов секции по фронтенду.

18:36

Вот @harisov уже пообещал поймать меня в кулуарах и устроить "индивидуальный мастер-класс по БЕМу", вы тоже подходите!

18:36

Если серьезно, то очень надеюсь что мы вместе таки добъем демку БЭМа для github.com/iAdramelk/dump…

18:36

Если переживу ДАМП, то 22 апреля буду в Ульяновске на Стачке: nastachku.ru . Там я выступаю с докладом по теме CSS- и HTML-в-JS.

18:36

Пока! С вами на этой неделе был @iAdramelk

18:37

github.com

medium.com

other