kovchiy

9 мая 2016, Москва, Россия

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

Добрый день, ребята. С вами побудет @kovchiy, один из дизайнеров поисковой выдачи Яндекса.

11:54

За неделю попробую рассказать, как примерно устроена наша работа, и где она пересекается с кодом.

11:55

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

12:19

И я рад, что все больше команд в компании, разрабатывающих интерфейсы, принимают это как санитарную норму.

12:20

Сэкономлю всем время и начну с доклада своего коллеги youtube.com/watch?v=ll2rae… — обожаю жанр информативных стендапов Антона.

12:28

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

12:37

Хотя перед тем, как набрасываться на бедных jquery и angular, наверное лучше объяснить разницу в работе дизайнера и продакшен-программиста

12:38

На вход к программисту поступает четкое ТЗ (и это хорошо), а с дизайнером, как правило, ДЕЛЯТСЯ БОЛЬЮ

12:41

Поэтому в самом начале много неизвестных — под каждую неизвестную дизайнер заводит сущность (в фотошопе или в коде), а позже отбрасывает

12:43

К слову о том, как мы учимся выбрасывать лишнее на этапе макетирования, есть ещё стендап: youtube.com/watch?v=jmdys-…

12:45

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

12:49

Делаем, к примеру, вариант саджеста: всё, что имеет к нему отношение, должно лежать папке suggest-2, а не разложенным по вью и контроллерам

12:53

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

12:58

Примерить все роли, если он (дизайнер) решил полноценный прототип собрать, на людях потестировать, самому в кармане поносить.

13:02

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

13:05

Как сказал Skullface в MGSV: «Язык – это идеология».

13:11
@NUM13RU Все так просто, что вы мне не поверите — попробуйте точь-в-точь переверстать промо-страницу apple или artlebedev. Многое поймете

Попросили выносить диалоги на поверхность. twitter.com/jsunderhood/st…

14:34

Так вот, начали мы с HTML + jquery. Я говорю HTML, потому что позже мы от него откажемся.

14:37

Если писать на jquery (или plain js), нужно быть очень талантливым, чтобы код месячной давности не хотелось забыть, как страшный сон.

14:38

Но какое-то время мы так жили, и оно в общем-то работало, пока итеративные правки интерфейса не превращали код в месиво.

14:39

Так мы пошли искать идеологические рамки. Довольно быстро нашли БЭМ, на соседнем этаже. И снова предаю слово Антону: youtube.com/watch?v=LznY9V…

14:40

Методолгия БЭМ с одной стороны предвосхитила CSS-модули, с другой — пошла против принятой системы взглядов: она превратила HTML в байткод

15:59

Многие тогда не понимали, как руками писать такие длинные классы: button__lable_type_icon. А руками ничего писать не надо, это делал робот

16:00

К примеру, так может выглядеть class-атрибут кнопки в моей верстке pic.twitter.com/toUBlJn6zs

16:01

Так, разработчики загнали нас в понятные рамки методологии, изолирующей сложность, и позволили отказаться от слоя абстракции — HTML.

16:02

Если HTML предлагает выражать семантику предметной области комбинацией тегов и классов, то БЭМ всё переносит в классы. Это фокусирует.

16:02

Дело оставалось за малым — убрать из поля зрения <div class="..."> и сосредоточиться на своей терминологии pic.twitter.com/Z64kqpBdBF

16:03

Говоря сухим языком, работа дизайнера интерфейсов заключается в проектировании и визуализации семантики предметной области.

16:06

(даже, если дизайнер сам об этом не подозревает)

16:07

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

16:09

А дальше у нас с разработчиками пути пока расходятся: те наоборот создают уровни абстракции, чтобы в команде работу поделить или ускорить

16:13

У них существует так называемый БЭМ-стек: сборщик, темплейтор и клиентская библиотека. А сервис добавит ещё слой: линтер и провайдеры данных

16:21

За каждым слоем следят выделенные ребята, у которых в поле зрения тоже только одна абстракция. Но не у дизайнера, которому надо всё и сразу

16:21

Кстати, как раз сейчас дизайнеры Яндекс.Поиска пытаются вклиниться в продакшен-процесс: чтобы сырые решения проверять на больших цифрах

16:27

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

16:29

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

16:33

Мы склеили model, view и controller в одну сущность — самодостаточная декларация компонента. Пример с саджестом: gist.github.com/kovchiy/834975…

16:47

В принципе, ничто нам не мешает в тот же файл писать CSS, но пока лениво парсер к этому писать.

16:55
@jsunderhood похоже на веб компонент. Какие есть мысли про веб компоненты и Polymer, кстати?

Редакцию спрашивают. Подходы действительно похожи — но ребята так долго собирались, что мы успели свое написать. twitter.com/platosha/statu…

17:07

@jsunderhood + нас частенько обвиняют в NIH-синдроме

17:10
@jsunderhood А горизонтальные и вертикальные — это какие?

Всё больше узкоспециализированных разработчиков, и всё больше сфер приходится затрагивать дизайнеру. twitter.com/iamakulov_/sta…

17:21
@jsunderhood строго говоря, ты не прав — нет никаких выделенных ребят на слой: все делают всё

Мне тут отец сказал, что я не прав twitter.com/veged/status/7…

19:53

На ночь расскажу про срез еще одной абстракции. Разработчики нас тоже не понимают в этом месте: отказ от JSON API компонента.

20:37

Как принято в polymer, react и пр.: грязный json — json компонента — дочерние компоненты — DOM. Мы убрали 2-й тип pic.twitter.com/HXPErzsxiA

20:38

У нас на входе и на выходе шаблона один и тот же XML. Но на выходе добавляются обертки, крестики, меняется порядок и пр. Старая школа XSLT.

20:38

Вот пример: как выглядит карточка «Афиша» в приложении изнутри. gist.github.com/kovchiy/616d2c… pic.twitter.com/IdkYfw3eqr

20:38

Строгое API при этом сохраняется, но мы не думаем над его семантикой, как над отдельным форматом данных.

20:39

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

@jsunderhood Есть мысли реализовать визуальный конструктор и вытащить в него компоненты? Что-то вроде github.com/sourcejs/lego

Нужно мнение ув. читателей о визуальных редакторах кода/верстки. Мне вот всегда было непонятно, кто ЦА. twitter.com/koloskof/statu…

8:25

@jsunderhood А чего визуального действительно не хватает мне — чтобы с интерфейсного элемента был переход на его код. КАК В ДЕЛФИ

8:27
@ki_zu @jsunderhood если я правильно понял, то есть github.com/lahmatiy/compo…, например

Вот оно, вот оно twitter.com/pomidore/statu…

8:57

Поговорим сегодня о реализации интерфейсных сеток и адаптивности. Тема среди веб-разработчиков модная, но не до конца раскрытая, по-моему.

13:08

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

13:09

В таких условиях собрать сетку просто: обычно, это 12-колонник, который делится на 2, 3, 4 — типичные лейауты pic.twitter.com/9N5ldPq9Lg

13:09

Но сегодня твой URL могут открыть на чем угодно. Интерфейс — жидкость, которую будут заливать во все эти сосуды: design.google.com/devices/

13:10

И я такой думаю: хорошо, буду оставлять то число колонок, которое уместится в ширину экрана. Но в реальности оно так не работает.

13:10

Чем мельче экран, тем рациональнее расходуешь место — особенно в Яндекс.Поиске. И единая конфигурация сетки на все экраны ложится плохо

13:12

Какое-то из устройств ты обязательно обидишь: либо ему конские поля, либо сверстаешь всё впритык к краям экрана pic.twitter.com/Jyyem0Nql7

13:12

Сначала думал делать отдельные сборки стилей под ширины экранов. Но по UA не всегда поймешь ширину клиента. А еще девайсы крутят. Не катит.

13:13

Да, сетка должна меняться в рантайме. И решение оказалось довольно простым и наглым gist.github.com/kovchiy/bb369d… pic.twitter.com/RHvQsplR0O

13:14

После какого-то порога ширины, сетка должна перестает меняться и просто центрируется.

13:14

Так наши прототипы избавились от абсолютных ширин — только колонки и пропорции для расчета высоты. Сейчас подход тестируется в продакшене

13:15

Последнее про сетки: оставалось придумать, как вычислить высоту блоков с пропорциями. Например, видеопревью 16:10 pic.twitter.com/rqiw3JuSt8

20:32

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

20:32

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

20:33

И тут @adrior (тот самый Антон) предложил другое простое и наглое решение: gist.github.com/kovchiy/0e3fbd…

20:33

# Среда 30 твитов

@jsunderhood ребята, у вас 'свой' браузер, чего же вы ждете?!

Доли 60% twitter.com/lalakalka/stat…

13:22

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

13:23

Я боюсь массовых истерий вокруг silver-bullet-техгологий. Волна хайпа подхватывает их создателей и уносит новых рок-звезд в закат.

13:23

С другой стороны, опасно накрываться куполом — превратишься в дотнетчика, чьи сайты работают только в WinXP с определенной версией ActiveX.

13:23

В 2009 я бредил идей стабильной XML-прослойки между грязными данными сервера и HTML-выводом.

13:23

Красиво и декларативно трансформировать XML в то время позволял XSLT. А XSLT меня заинтересовал своим функциональным подходом.

13:24

ФП в то время считалось тяжелыми наркотиками с синтаксисом матана. Но кто хоть раз писал на Haskell, превращался в адепта деклараций.

13:24

Так я попробовал и мне понравилось: immutable data, шаблоны функций — почему от нас всё это так долго скрывали? Привет, @yelbota

13:24

В то же время, в 2009 был тренд PHP/Java/Ruby ORM-фреймворков: данные из модели сразу отдавали браузеру.

13:25

Популярными были ролики, где из консоли создавали схему базы данных, а фреймворк для нее генерил классы и даже заготовку HTML-интерфейса

13:25

Так вот, меня в тусовке никто не понимал: зачем ещё какой-то протокол между данными сервера и интерфейсом клиента?

13:26

В то время, по-моему, и JS за технологию не считали, а над фронтендерами смеялись похлеще, чем над басс-гитаристами.

13:26

blog.shitov.ru/9C0A7660-64AB-… — А это, кстати, первое место, где меня поняли и думали так же. @andrewshitov, привет.

13:26

Там работа строилась по принципу: бэкенд делает XML-API и документирует на вики, а фроненд набирает в корзину нужные XML и строит интерфейс

13:26

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

13:27

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

13:27

Тогда же вышла серия статей, которая объяснила мне, как это организовать: artlebedev.ru/tools/technogr… — большое спасибо, @samilyak

13:27

Позже в Яндексе мне объяснили, что я изобретаю БЭМ. Там же наградили клиентским ДЕКЛАРАТИВНЫМ фреймворком i-bem. Привет, @dfilatov_

13:28

Да, еще хочу передать привет @veged и @harisov

13:29

Дима еще важную для меня статью написал о слабом связывании (я тонул в лапше, а читать книги о паттернах было лень): artlebedev.ru/tools/technogr…

13:29

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

13:29

Где-то в параллельной вселенной в Google зрел Polymer, а в Facebook — React. В них я вижу те же источники вдохновения.

13:30

И у них есть чему поучиться. В React мне понравился смешанный XML-JS-синтаксис. Правда, я так и не понял, зачем React'у HTML-абстракции.

13:30

Модный теперь паттерн Redux с деревом состояний, уверен, тоже пригодится в какой-нибудь задаче.

13:30

Однако помимо этих ребят есть и другие. Например, абстракции iOS-архитектуры тоже на многое мне раскрыли глаза. Привет, @greentinned

13:30

Так мы сперли из iOS паттерн StackNavigation / SwitchNavigation: gist.github.com/kovchiy/07e8f0… — не уверен, что вам интересно, но п. 4

13:31

А вообще, эта статья — кусок брошюрки начинающего дизайнера Яндекс.Поиска, которая пытается научить всему и сразу и под наши задачи.

13:31

Так что пусть цветут все цветы.

13:31
@jsunderhood если в функциональщину хлынут толпы js-программистов, то мы потеряем работу. По этому ТАЙНА.

Переживает twitter.com/yelbota/status…

13:37
@jsunderhood нормальные люди и сейчас смеются.

Перепись нормальных людей twitter.com/twenty/status/…

14:40

# Четверг 27 твитов

Астрологи объявили вечер инфраструктуры. Расскажу, как десять дизайнеров делают одну и ту же страничку. Каждый день.

17:26

На самом деле продуктов, которые ютятся на поисковой выдаче — десятки, и все борятся за ваше внимание. А еще есть реклама и дикий интернет

17:26

Не про яваскрипт, но про нашу работу вообще я однажды рассказывал на Лукэтми: lookatme.ru/mag/blogs/desi…

17:27

В статье есть пункт «We need to go deeper» — его я сегодня приоткрою. И там будет про яваскрипт, так что всё нормально.

17:27

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

17:27

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

17:27

Первый репозиторий выглядел примерно так: gist.github.com/kovchiy/0a0719…

17:27

Очень быстро всплыла проблема: одни дизайнеры работают с блоками, которые есть в проде, а другие — разрабатывают новые их версии.

17:27

«Ветки же есть!» — скажете вы. Но вот вам еще проблема: нам надо собирать интерфейс с блоками разных версий, разных «веток».

17:28

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

17:28

И тут самое время вспомнить мои твиты в понедельник о сути работы дизайнера: постоянный перебор вариантов.

17:28

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

17:28

Чтобы переключать версии блоков в рантайме, сборщик держал открытыми множество файлов, собирая билд для текущей страницы.

17:28

Число файлов в репозитории росло — полетели ошибки лимита открытых соединений. В общем, надо было что-то кардинально менять.

17:29

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

17:29

Я все время говорю мы, а на самом деле проблемы валивались на голову основного контрибутора — @artemshitov

17:29

Артем придумал и собрал систему, которая удерживает все необхоидмое модулями в памяти сервера и отдает персональные бандлы страницам.

17:30

Артем же предложил отказаться от semver в блоках, который просто не взлетел у дизайнеров, и называть версии датами: gist.github.com/kovchiy/053913…

17:30

Стали возможными: ректроспектива, проверка на актуальность и любая избирательная сборка. Пример: github.yandex-team.ru/gist/kovchiy/7…

17:30

Так наша игрушка превратилась в технологию и получила название — Depot. Ну и логотип, куда ж без него. pic.twitter.com/CYhjJh2iiT

17:30

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

17:31

Ну и пара скриншотов. pic.twitter.com/suKzpHZUJK

17:31

Ах да, чуть самое важное не забыл — веб-интерфейс Depot написан на React (решили поставить над собой эксперимент)

17:31

Ну и про инфраструктуру всё, наверное. Разве что у вас возникнут вопросы.

17:32
Стали возможными: ректроспектива, проверка на актуальность и любая избирательная сборка. Пример: github.yandex-team.ru/gist/kovchiy/7…

Простите, внутренняя ссылка прокралась. Вот нормальная gist.github.com/kovchiy/8e1364… twitter.com/jsunderhood/st…

18:05
И тут @adrior (тот самый Антон) предложил другое простое и наглое решение: gist.github.com/kovchiy/0e3fbd…

Тут я тоже твиттером ошибся. Итальянец отказывается продать свой ник Тохе @antonadrior twitter.com/jsunderhood/st…

18:24
Ах да, чуть самое важное не забыл — веб-интерфейс Depot написан на React (решили поставить над собой эксперимент)

Сижу теперь и думаю, все ли уловили самоиронию twitter.com/jsunderhood/st…

20:08

# Пятница 14 твитов

Я что-то сегодня без меча.

19:02

Мы тут ВЫПИВАЕМ, скажите тост? pic.twitter.com/ggQWHdAeXG

22:49

Вот Тоха. Передает вам привет. Обсудили реакт и бэм. Решили, похуй, лишь бы в прод. Переключились на кино pic.twitter.com/ID1jxRLBx1

22:51

Короче, я пока пьяный, буду постить NDA

22:55

На ваши вопросы

22:56

Ну и хули вы тупите?

22:57

Если коротко. Я не знаю , где после яндекса работать в России.

23:17

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

23:18

Все такие съебывают в меиру или рбк. И что дальше?

23:18

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

23:21

Ну ладно, вы упустили момент

23:33

К примеру Г-н Жашков. Ну ведь очень неодзначная личонсть. Представьте, что выделаете сайт Путину. Как оно?

23:39

Сначала я такой ээээ, а потом хмммм

23:40

Ладно. Вы какие-то мертвые. Мамка вас что ли спать уложила?

23:42

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

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

13:12

gist.github.com

other