dmtrKovalenko

6 апреля 2020, Lviv, Ukraine

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

Карантин карантином, а jsunderhood по расписанию.
Меня зовут Дима Коваленко (@dmtrKovalenko), я работаю фулл-тайм… twitter.com/i/web/status/1…

7:04

Да, я создаю мемы на непонятных сайтах и не удаляю их подпись. И не стыжусь этого!

7:06

Сегодня будем говорить про надежность наших тестов. И в связи с этим хочу спросить:

А вас вообще устраивают ваши… twitter.com/i/web/status/1…

7:28
Сегодня будем говорить про надежность наших тестов. И в связи с этим хочу спросить:

А вас вообще устраивают ваши… twitter.com/i/web/status/1…

Собственно, что и требовалось доказать. Результаты опроса абсолютно совпадают с моей картиной мира, поэтому встреча… twitter.com/i/web/status/1…

Сегодня будем говорить про надежность наших тестов. И в связи с этим хочу спросить:

А вас вообще устраивают ваши… twitter.com/i/web/status/1…

11:26

Для начала давайте разберемся, что же такое та самая надежность в контексте тестирования? Ваша система на 100% защищена тестами, если:

11:27

  • Вы можете внести любое изменение в бизнес логику и ваши тесты упадут.
    Или по-другому: изменения в бизнес-логике… twitter.com/i/web/status/1…
  • 11:28

  • Вы можете произвести ЛЮБОЙ рефакторинг и хотя бы не переписывать тесты заново, а в идеале вообще не менять тесты… twitter.com/i/web/status/1…
  • 11:31

    3. Вы можете обновить любую зависимость в вашей системе, даже на мажорную версию, и если тесты прошли – быть уверены что система работает.

    11:32

  • Ваши тесты не падают на каждый чих, так что красный билд превращается в белый шум (привет jest -u на каждом комм… twitter.com/i/web/status/1…
  • 11:35

    Возможно, звучит как что-то невозможное. Если бы можно было легко писать такие тесты, то а каких багах и тестировщи… twitter.com/i/web/status/1…

    11:38

    И первое, самое очевидное – это недостаточное покрытие приложения тестами. Даже внимание уделять этому не буду.

    >… twitter.com/i/web/status/1…

    11:42

    Итак продолжаем. Поговорим за use case coverage: автоматически высчитать его невозможно, потому что 1 строкой кода… twitter.com/i/web/status/1…

    14:53

    Именно по причине отсутствия метрики тут можно полагаться только на сознательность разработчика, который не поленил… twitter.com/i/web/status/1…

    14:55

    Но и code coverage выбрасывать не стоит. Просто важно понимать что написать 100% coverage можно с абсолютно отврати… twitter.com/i/web/status/1…

    14:57

    Собственно дальше о том что гробит надежность.

    И первое что приходит на ум — неправильное и слишком частое исполь… twitter.com/i/web/status/1…

    15:02

    В принципе использование юнит-тестов ведет к проблемам надежности. Чем выше мы взбираемся по пирамиде, тем более на… twitter.com/i/web/status/1…

    15:06

    Моки в тестах это вообще довольно опасная вещь, потому что мы сознательно вырезаем кусок кода нашего приложения в т… twitter.com/i/web/status/1…

    15:07

    И вообще! Хватит мокать функции только потому что они находится в другом файле или потому что это внешняя зависимос… twitter.com/i/web/status/1…

    15:08

    Вот собственно классическая проблема юнит-тестов и overmocking-а.

    С таким тестом мы не можем ни изменить название… twitter.com/i/web/status/1…

    15:12
    @jsunderhood После того как мы в @neoscms стали писать E2E тесты, уверенность в системе сильно повысилась. Я смело… twitter.com/i/web/status/1…
    15:13

    Собственно, а что мы вообще проверяем в этом тесте?
    То, что наш код дергает `fetch` и возвращает промис? Зачем нам… twitter.com/i/web/status/1…

    15:16

    !! Вообще эту проблему можно описать одной фразой – “Тестирование реализации”.

    Тесты должны проверять не то как н… twitter.com/i/web/status/1…

    15:17

    Для всех – будет отдельный тред про пирамиду тестирования. Затравочка:
    1) Кто вам сказал что e2e тесты сломать про… twitter.com/i/web/status/1…

    16:30

    Продолжаем эппопею.
    Не только моки делают тесты ненадежными. Зачастую просто лень разработчиков, которым лень писа… twitter.com/i/web/status/1…

    17:19

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

    И с… twitter.com/i/web/status/1…

    17:20

    Все наши тесты состоят из 3 частей: Preparation, action & assertion.
    И если можете взять любой тест на компонент,… twitter.com/i/web/status/1…

    17:21

    Вот собственно пример такого теста, который абсолютно никак не дергает ни React-specific ручки, ни там названия css… twitter.com/i/web/status/1…

    17:22

    А вот пример не очень хорошего теста:

    1) Завязываемся на названии компонента Day
    2) Почему-то дергаем именно 10 де… twitter.com/i/web/status/1…

    17:36

    И последний пример:

    Недавно смотрел доклад про рефакторинг. Ссылки не будет, бо вы меня загрызете 🙃
    И дело зашло… twitter.com/i/web/status/1…

    17:51
    @jsunderhood Расскажи, пожалуйста, что думаешь о фразе "Не мокай, что не твое" или как она в оригинале звучит "Don'… twitter.com/i/web/status/1…

    Очень разумно. Когда это наш код – у нас есть хотя бы толика контроля над его изменениями.

    Но когда у тебя есть к… twitter.com/i/web/status/1…

    @jsunderhood Расскажи, пожалуйста, что думаешь о фразе "Не мокай, что не твое" или как она в оригинале звучит "Don'… twitter.com/i/web/status/1…

    18:00

    Причина банальная. Все тесты были завязаны на классах нашего компонента и в итоге при попытке заизолировать стили в… twitter.com/i/web/status/1…

    18:10

    И действительно – стало лучше. Вот только никто не подумал о том, что избавляясь от одних деталей реализации (назва… twitter.com/i/web/status/1…

    18:13

    Автор сам говорил о том, что проект изначально был написан на jquery.
    Тогда никто не мог подумать о том что кому-т… twitter.com/i/web/status/1…

    18:19

    Приближаемся к выводу.
    Тесты, даже банальные юнит тесты имеют свои подводные камни, свои "бед" и "бест" практики.… twitter.com/i/web/status/1…

    18:30

    Итак вывод:
    Если вы уважаете себя и ваш продукт, хотите чтобы он цвел и пах (и например уволить тестировщиков), а в… twitter.com/i/web/status/1…

    18:41
    @jsunderhood Чем плохо всё переписывать с нуля через 5 лет?

    Кстати очень интересный вопрос. Казалось бы, у бизнеса деньги есть – поделится :)

    Но во-первых из-за некачественн… twitter.com/i/web/status/1…

    @jsunderhood Чем плохо всё переписывать с нуля через 5 лет?

    19:04

    Ночное обсуждение!
    Что думаете по-поводу кризиса в IT? Пронесет или нет?

    Вот лично мне очень ссыкотно что скоро… twitter.com/i/web/status/1…

    19:52
    @jsunderhood @xanf_ua Для меня идеал тестов компонента - это что-то типа сторибук:

    Вот если бы помержили мой ПР в cypress (github.com/cypress-io/cyp…) - то это стало бы супер легко.

    Тестирование ком… twitter.com/i/web/status/1…

    @jsunderhood @xanf_ua Для меня идеал тестов компонента - это что-то типа сторибук:

    21:03

    # Вторник 24 твита

    @jsunderhood @davert Потому что иначе тесты слишком много знают про компоненты "под низом". Сегодня иконка это font… twitter.com/i/web/status/1…

    Хороший вопрос. Как писать тесты на UI в условиях постоянных изменений в UI?

    @jsunderhood @davert Потому что иначе тесты слишком много знают про компоненты "под низом". Сегодня иконка это font… twitter.com/i/web/status/1…

    5:39

    Вот как это выглядит: percy.io/mui-org/materi…

    Делается полный снэпшот дома, запускается в разных браузерах и попик… twitter.com/i/web/status/1…

    5:42

    Есть много сервисов, я юзаю percy.io потому что там есть 5000 халявных снэпшотов в месяц.

    Этого хв… twitter.com/i/web/status/1…

    5:44

    Интересный факт: JS фронтендеры – единственные, кто додумались тестировать UI без собственно UI

    (Да, сегодня буде… twitter.com/i/web/status/1…

    5:47

    Прошу заметить! Я не занимаюсь рекламой перси)

    Мне лично, вообще до лампочки что вы будете использовать – главное… twitter.com/i/web/status/1…

    7:57

    JSDom. Абсолютно банальный пример – пройдет тест или нет? pic.twitter.com/YokSVOdkZq

    9:22

    У меня интеллекта не хватило, чтобы в codesandbox-e замокать window.alert :)

    Поэтому пришлось немного переписать… twitter.com/i/web/status/1…

    10:01

    Как заметил @asaenko, такой тест действительно не пройдет!
    По простой причине – браузер делает проверку на то что… twitter.com/i/web/status/1…

    10:04

    И самое забавное, если вы возьмете Карму и будете запускать тесты в браузере – они опять пройдут!

    Потому что посу… twitter.com/i/web/status/1…

    10:07

    Существует огромное количество ограничений в браузере, которые ограничивают интерактивность елемента, вот неполный… twitter.com/i/web/status/1…

    10:21

    Еще например есть проблема c обработкой фокусов (codesandbox.io/s/eager-dust-z…)

    Долгое время вообще document.activeElem… twitter.com/i/web/status/1…

    10:30

    Основная проблема не в том, что это так работает.

    Основная проблема – это то, что никто об этом не говорит, тоест… twitter.com/i/web/status/1…

    10:32

    Настоящих нативных ивентов можно добится только с помощью реальных e2e тестов (webdriver, puppeteer).

    Потому что… twitter.com/i/web/status/1…

    10:44

    Да, кстати Cypress ближе к вот таким тестам (которые просто запускаются в браузере с симуляцией ивентов), чем к webdriver-ам

    10:46
    @lionskape @jsunderhood @davert @xanf_ua Без мокирования зависимостей. shallow - это фактически автомоки.

    Этот твит заслуживает внимания:

    shallow тесты действительно это моки на моках
    К примеру в React – shallow тесты п… twitter.com/i/web/status/1…

    @lionskape @jsunderhood @davert @xanf_ua Без мокирования зависимостей. shallow - это фактически автомоки.

    12:40

    А вы трекаете ререндеры вашего SPA? Оптимизируете компоненты? А вот @Facebook с новым дизайном – нет

    P.S. Я конеч… twitter.com/i/web/status/1…

    13:14

    Спрашивается, чего я заладил за эту надежность? Разве все так плохо?

    18:22

    И конечно же там не было ни 1 теста!
    К счастью этот проект похоже был каким-то прототипом. И разрабатывался в како… twitter.com/i/web/status/1…

    18:25

    Просто в такие моменты отчетливо понимаешь НАСКОЛЬКО ВАЖНА может быть надежность наших тестов.

    Для нас баг/дефект… twitter.com/i/web/status/1…

    18:27

    Я конечно головой ручаюсь за наши компоненты :)
    Всем бы такие stable компоненты, как у нас unstable.

    Но все же,… twitter.com/i/web/status/1…

    18:29

    Как часто вы проверяете что вы устанавливаете из помойки (или по-русски npm)?

    Как часто вы смотрите код который н… twitter.com/i/web/status/1…

    18:32

    Понятно, что хочется взять самое крутое, самое новое, что-то попробовать.
    Что уж говорить, есть люди которые в про… twitter.com/i/web/status/1…

    18:37

    Ну и продолжаем наши ночно-кризисные обсуждения!

    А что вы предпринимаете для того чтобы не потерять работу, или д… twitter.com/i/web/status/1…

    20:03

    (очень сомневаюсь что мне это как-то поможет, но а вдруг XD)

    20:03

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

    Я тут потихоньку срусь с людьми в тредах (кстати присоединяйтесь). И у меня возникает ощущение что многие не до кон… twitter.com/i/web/status/1…

    7:54

    Рефа́кторинг (англ. refactoring), или перепроектирование кода, переработка кода, равносильное преобразование алгори… twitter.com/i/web/status/1…

    7:54

    То есть к примеру, я работая в Cypress частично был задействован в переписывании системы с Rest Api на Graphql.

    И… twitter.com/i/web/status/1…

    7:56

    И это было ужасно! Но не так ужасно, как могло быть :)

    Потому что у нас была хренова гора cypress тестов, которые… twitter.com/i/web/status/1…

    7:58

    Но все же сами (вспоминаем тред понедельника) assertion и action части остались точно такими же.

    Это позволило КР… twitter.com/i/web/status/1…

    8:01

    Вывод этого треда:

    Переписали всю системы с нуля, но исходный интерфейс остался тот же = рефакторинг.

    Поменяли ar… twitter.com/i/web/status/1…

    8:04

    Да, и кстати я не говорю переписывать все assert-ы на проверку html. Это зачастую действительно не нужно и не удобн… twitter.com/i/web/status/1…

    8:08

    Хотя гораздо более правильно отталкиваться от текста который видит пользователь. В том числе и пользователь с огран… twitter.com/i/web/status/1…

    8:11

    А если вы переживаете по-поводу бандл-сайза ил по-поводу того, что ваше приложение легче будет проскраппить, то за… twitter.com/i/web/status/1…

    8:14
    @jsunderhood Не всем сайтам нужен a11y

    Уууух, го похоливарим!
    Раз такое дело, не всем сайтам нужен хороший интерфейс, не всем сайтам нужна надежность, не… twitter.com/i/web/status/1…

    @jsunderhood Не всем сайтам нужен a11y

    8:22

    Проблема в том, что когда 'жареный петух клюнул' – это уже поздно. Значит что все сломалось и срочно нужно чинить.… twitter.com/i/web/status/1…

    8:32

    И кто в этом виноват? PM который не завел тикет a11y? Заказчик который этого не предусмотрел? Или программист котор… twitter.com/i/web/status/1…

    8:33

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

    Я с недавнего времени стараюсь и… twitter.com/i/web/status/1…

    13:41

    Наибольшие проблемы возникают с интеграционными. Вот например в яндексе считают что selenium тесты которые ходят и… twitter.com/i/web/status/1…

    13:44

    Интеграцио́нное тести́рование (англ. Integration testing, иногда называется англ. Integration and Testing, аббревиа… twitter.com/i/web/status/1…

    13:45

    А юнит тесты — процесс в программировании, позволяющий проверить на корректность отдельные модули исходного кода п… twitter.com/i/web/status/1…

    13:46

    И вот тут уже возникает коллизия. Юнит тесты могут тестировать группу модулей (> наборы из одного или более програм… twitter.com/i/web/status/1…

    13:47

    Тоже самое происходит и с e2e. Ведь по-сути все наше приложение это тоже группа модулей. Соответственно любой e2e т… twitter.com/i/web/status/1…

    13:49

    Пример! Мы пишем библиотеку которая наверх вываливает функции.

    Например date-fns (кстати вообще не понимаю почему… twitter.com/i/web/status/1…

    13:54

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

    Тоже сам… twitter.com/i/web/status/1…

    13:57

    У каждого продукта (или каждой команды) есть своя зона ответственности.

    Например для меня в material-ui это будут… twitter.com/i/web/status/1…

    14:00

    И внутри каждой зоны ответственности мы можем писать 3 вида тестов: black box, grey box и white box.

    То есть когд… twitter.com/i/web/status/1…

    14:02

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

    Он вам посмеется… twitter.com/i/web/status/1…

    14:09

    И поэтому "UI тесты" со временем стали синонимом e2e или функционального тестирования.

    Опять же, потому что изоли… twitter.com/i/web/status/1…

    14:11

    И да, компонентный подход в js реализовали очень круто. Вот например я думаю SwiftUI очень вдохновлялся именно совр… twitter.com/i/web/status/1…

    14:14

    Ой, я ж забыл написать самое важное!

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

    14:26

    Время пришло! Тот самый тред о том, почему пирамида это пережиток прошлого.

    Вот только важно: Под юнит тестами ту… twitter.com/i/web/status/1…

    16:32

    Немного истории. Пирамида начинает свое начало примерно в 2008 году.

    Вот пруф benhutchison.wordpress.com/2008/03/20/aut…

    16:35

    И если вы ознакомитесь со статейчками о том почему же все таки именно так необходимо писать тесты. Например от Март… twitter.com/i/web/status/1…

    16:37

    1) Действительно писать юнит тесты проще?

    Ха-ха-ха, не смешите мои тапочки. Если мы говорим про тот тест, где у в… twitter.com/i/web/status/1…

    16:41

    Современные e2e раннеры для фронтенда типа cypress от вас требуют просто запустить ваше приложение. И все, больше н… twitter.com/i/web/status/1…

    16:43

    Помимо всего прочего, юнит тесты от вас требуют определенной инфраструктуры.
    Типо DI, которые разработчики начинаю… twitter.com/i/web/status/1…

    16:46

    2) Юнит тесты бегают быстрее

    Ну как бы хрен поспоришь. Вот только вспоминаем 2008 – никакого докера, из CI только… twitter.com/i/web/status/1…

    16:51

    В cypress у нас было 2000 cypress тестов. C покрытием >95%. И эти тесты бежали 2 минуты на 15 машинах в параллели.… twitter.com/i/web/status/1…

    16:54

    Окей, но что же там по поводу фокусности тестов. Я абсолютно не отрицаю необходимости покрытия бизнес логики отдель… twitter.com/i/web/status/1…

    16:58

    Я сегодня уже делал твит про зоны ответственности.
    Итак вашу бизнес логику вы должны изолировать от UI.

    И не для… twitter.com/i/web/status/1…

    17:00

    И соответственно на уровне бизнес логики вы пишите тесты.
    Вы пишите опять e2e тесты, как бы представляя что ваша б… twitter.com/i/web/status/1…

    17:02

    Тоже самое с переиспользуемыми компоненты.

    Какие-нибудь части UI (кнопка, таблица), которые в теории могут быть в… twitter.com/i/web/status/1…

    17:05

    Да тесты будут пересекаться. И это нормально, на 1 уровне вы проверяете работоспособность БЛ.

    На другом проверяет… twitter.com/i/web/status/1…

    17:09

    Но возникает интересный вопрос: А сколько собственно чистой бизнес-логики вы пишите?

    Я очень сомневаюсь что у вас… twitter.com/i/web/status/1…

    17:12

    Так на кой ляд нам писать юнит-тесты, если 80% нашего кода – это чистого рода интеграции.

    (спорное утверждение со… twitter.com/i/web/status/1…

    17:14

    Если вы думаете что e2e тесты, которые запускаются в браузере ненадежные – вас возможно покусали xpath-ы.

    Это ужа… twitter.com/i/web/status/1…

    17:20

    И это реально бред, потому что любое изменение структуры дома, даже которое не влияет на внешний UI приводит к поло… twitter.com/i/web/status/1…

    17:23

    И кстати это касается и бекенда. Вообще представить не могу как писать бек без полноценного тестирования API.

    Но э… twitter.com/i/web/status/1…

    17:24

    Вообще я уже задолбался тут писюкать.

    Вывод из этого такой: выше забираться по пирамиде вообще не сложно. Но доба… twitter.com/i/web/status/1…

    17:25
    @jsunderhood Проблема тестов на сайпрес,
    1) что с усложнением приложения они начинают дольше ранится.
    2) нельзя соб… twitter.com/i/web/status/1…

    Знаете, Cypress – это как демократия.

    Худший из тест раннеров. Но лучше человечество пока не придумало.

    @jsunderhood Проблема тестов на сайпрес,
    1) что с усложнением приложения они начинают дольше ранится.
    2) нельзя соб… twitter.com/i/web/status/1…

    18:14

    О и кстати, коверейдж собирать уже давно можно :)

    18:15

    Вот еще немного в продолжении надежности, а потом я спать. Скрин из статьи про пирамиду тестирования за 2008 год.… twitter.com/i/web/status/1…

    19:46

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

    TDD. Используете ли вы реально на практике TDD?

    5:51
    @jsunderhood это как геи — ты точно знаешь, что они есть, но ни с одним не знаком. так же и тдд

    А лучше и не скажешь :)

    Вот я например, латентный ТДД-шер. И не потому что я там такой крутой программист, а искл… twitter.com/i/web/status/1…

    @jsunderhood это как геи — ты точно знаешь, что они есть, но ни с одним не знаком. так же и тдд

    8:08

    Лучше всего это можно проиллюстрировать на примере бека. Представьте ситуацию:

    1) Ваня получает тикет на создание… twitter.com/i/web/status/1…

    8:11

    4) Впадает в истерику потому что его авторизационный токен экспайрится каждые 10 минут (например)
    5) Доделывает кон… twitter.com/i/web/status/1…

    8:13

    И собственно проблема в чем:
    Его тесты делают абсолютно тоже самое, что Ваня делал в 3 пункте попутно страдая.
    Он… twitter.com/i/web/status/1…

    8:16

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

    8:17

    Мне кажется, что в ТДД главное это не факт написания тестов до кода. Можно написать и после кода, главное что вы св… twitter.com/i/web/status/1…

    8:20
    !! Вообще эту проблему можно описать одной фразой – “Тестирование реализации”.

    Тесты должны проверять не то как н… twitter.com/i/web/status/1…

    И в таком случае у вас просто не получится писать плохие тесты. Потому что вашей задачей станет проверить что код Р… twitter.com/i/web/status/1…

    !! Вообще эту проблему можно описать одной фразой – “Тестирование реализации”.

    Тесты должны проверять не то как н… twitter.com/i/web/status/1…

    8:24

    И кстати, мои ненавистные white-box тесты очень сложно писать именно с помощью TDD.

    Так как white-box тесты много… twitter.com/i/web/status/1…

    8:26

    Кстати еще многие переживают по поводу отладки. Мол как я буду отлаживать приложение, если проверяю его с помощью т… twitter.com/i/web/status/1…

    8:30

    А как вы боретесь с гигантскими PR-ами?

    Это моя извечная проблема. Каждый раз обещаю себе что буду дробить больши… twitter.com/i/web/status/1…

    10:41

    А на сегодняшний вечер я вам предлагаю увеселительный тред про всякие странные штуки в имплементации Cypress-а.

    Я… twitter.com/i/web/status/1…

    17:13

    Итак, приступаем!
    Для начала разберемся как Cypress работает. Очевидно что есть iframe, туда загружается ваше прил… twitter.com/i/web/status/1…

    18:20

    Но! Попробуйте сделать iframe с урлой facebook.com и потом из javascript-a лазить туда и получать доступ… twitter.com/i/web/status/1…

    18:22

    Да. Сайпресс это вообще по-сути одна большая война с веб-секьюрити C:

    Чтобы обойти это ограничение сайпресс прокс… twitter.com/i/web/status/1…

    18:28

    Да, и из этого следует одно из ограничений сайпресса: нельзя менять домен на лету.

    И теперь вы понимаете почему.… twitter.com/i/web/status/1…

    18:29

    Но все будет окей, если origin-ы совпадают :) То-есть если все ваши проекты находятся на одном origin-e (*.google.c… twitter.com/i/web/status/1…

    18:32

    А на самом деле у сайпресса 2 айфрейма. Во-втором загружается собранный код вашей спеки.

    Именно поэтому если внут… twitter.com/i/web/status/1…

    18:36

    Зачем так сделано? Я сам толком не знаю – не задавался вопросом :)

    Скорее всего чтобы изнутри тестов нельзя было… twitter.com/i/web/status/1…

    18:37

    А еще многих интересует как работает тот самый тайм-тревелинг. На самом деле самым топорным из всех возможных спосо… twitter.com/i/web/status/1…

    18:41

    А потом когда вы кликаете на команду этот снэпшот собирается обратно в дерево дома.

    И тут возникает еще 1 большая… twitter.com/i/web/status/1…

    18:43

    И соответственно этой памяти есть лимит. Чем больше у вас будет тестов (а соответственно команд) – тем быстрее у ва… twitter.com/i/web/status/1…

    18:46

    Дело в том, что даже если у вас эксепшн не вылетает вы все равно от этого будете страдать. Чем больше оперативки жр… twitter.com/i/web/status/1…

    18:48

    Кстати в сайпрессе у нас были спеки по 900 строк кода.

    В этот момент я понял что создатели инструмента не обязаны… twitter.com/i/web/status/1…

    18:50

    Еще например в сайпрессе мне одновременно нравится и не нравится его API. Дело в том, что оно действительно выразит… twitter.com/i/web/status/1…

    19:02

    Сайпресс использует собственный враппер над bluebird промисами. Если кто знаком с ФП – то работает это примерно по… twitter.com/i/web/status/1…

    19:04

    И возникает вот такие магические конструкции как cy.then.
    Я честно сам не до конца понимаю как эта байда работает.… twitter.com/i/web/status/1…

    19:07

    А еще очень важно понимать все технические ограничения сайпресса, обусловленные тем что он исполняется из javascrip… twitter.com/i/web/status/1…

    19:12

    Я конечно понимаю, что после этого треда в Cypress опять мне уже не вернутся 🤓

    Моя идея не разубедить вас использо… twitter.com/i/web/status/1…

    19:14

    О и еще маленькая штука. Вы знали что fetch и xml http request – это АБСЛЮТНО разные вещи в браузере и хендлятся аб… twitter.com/i/web/status/1…

    19:19

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

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

    8:30

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

    12:33

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

    При чем хочу уто… twitter.com/i/web/status/1…

    12:34

    По сути дизайн система это набор правил для построения вашего уникального дизайна. Эти правила обычно собираются в… twitter.com/i/web/status/1…

    12:36

    Кстати очень хочу заметить что то что делаем мы в @MaterialUI – это всего лишь реализация этой дизайн системы.

    Точ… twitter.com/i/web/status/1…

    12:38

    Отвлекся. Возвращаемся к правилам –> хорошим примером правила дизайн системы является:

    В материал дизайне все разм… twitter.com/i/web/status/1…

    12:42

    И вот в самописной дизайн системе гораздо проще создавать и заставлять итоговые продукты следовать этим правилам.… twitter.com/i/web/status/1…

    12:46

    Теперь по проблемам. И основная проблема самописной имплементации дизайн системы (собственно как и всего самописног… twitter.com/i/web/status/1…

    12:50

    Но неочевидная вещь заключается в том что вы 100% недооцените необходимое время на создание.
    Просто потому что созд… twitter.com/i/web/status/1…

    12:52

    Например - тришейкинг. Вы должны понимать что такое esm/cjs модули, как билдить библиотеку компонентов, освоить как… twitter.com/i/web/status/1…

    12:54

    Помимо этого вам нужно будет сделать UMD билд, потому что кто-то захочет использовать дизайн систему через CDN, сде… twitter.com/i/web/status/1…

    12:56

    Дальше идет accessibility, которое должно внедряться на уровне именно компонентов. А это тянет за собой такие вещи… twitter.com/i/web/status/1…

    13:00

    И еще кучи всего того, что уже есть в UI kit-ax.
    И понятное дело, что сразу всего этого не сделать.

    Помимо этого… twitter.com/i/web/status/1…

    13:04

    Основная проблема заключается в том что каждый новый проект будет приходить со своей хотелкой и вы должны будете ег… twitter.com/i/web/status/1…

    13:05

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

    Технически это когда вы создаете отдельны… twitter.com/i/web/status/1…

    15:42

    Плюсами такого подхода будут все минусы создания с нуля. Но мы говорим о проблемах:

    15:44

  • Вы ни в коем случае не должны расширять или переопределять готовое АПИ. То есть если в ките есть только 3 вариан… twitter.com/i/web/status/1…
  • 15:47

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

    А во-вторых е… twitter.com/i/web/status/1…

    15:49

    Немного объясню что имею ввиду под расширением API: попытка изменить уже готовое поведение к примеру кнопки.

    Вме… twitter.com/i/web/status/1…

    15:51

    Помимо этого вы должны быть готовы к тому что за глобальный оверрайд стилей вы поплатитесь дополнительным бандл-сай… twitter.com/i/web/status/1…

    15:53
    @jsunderhood Было бы здорово, если расскажешь как вы работаете с breaking changes при такой кастомизируемости компо… twitter.com/i/web/status/1…

  • Готовьтесь к проблемам с апдейтами twitter.com/blvdmitry/stat…
  • 15:57

    Ну вот собственно и все что мне пришло на ум :)

    И кстати мы как раз этот вопрос постараемся порешать в 5 версии m… twitter.com/i/web/status/1…

    15:59

    Это API пока в обсуждении, но мы хотим сделать что-то наподобии Angular Material CDK, только для всех компонентов.… twitter.com/i/web/status/1…

    16:00

    В идеале было бы отдавать на каждый компонент:

    16:03

    Такой подход, как по мне, был бы идеален для построения абсолютно любой дизайн системы за вменяемое количество врем… twitter.com/i/web/status/1…

    16:06
    I glad to announce documentation for Hegel (a new static type checker). We have come a long way, but the path ahead… twitter.com/i/web/status/1…

    Hegel вот-вот уже будет готов✌️как говорится can't wait

    > P.S. А я напоминаю что мы на этой неделе еще вернемся к… twitter.com/i/web/status/1…

    I glad to announce documentation for Hegel (a new static type checker). We have come a long way, but the path ahead… twitter.com/i/web/status/1…

    18:22

    И предлагаю продолжить коронакризисное обсуждение.

    По результатам 2 прошлых обсуждений стало понятно что все ужас… twitter.com/i/web/status/1…

    18:27

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

    18:31
    @jsunderhood А подскажешь как эту ценность увеличить? Просто учить новые технологии? Я вот вроде учу, но по факту в… twitter.com/i/web/status/1…

    Вот кстати еще интересный вопрос на обсуждение.

    > Лично мое мнение: хоть все технологии выучить или знать любую т… twitter.com/i/web/status/1…

    @jsunderhood А подскажешь как эту ценность увеличить? Просто учить новые технологии? Я вот вроде учу, но по факту в… twitter.com/i/web/status/1…

    18:40

    Абстрактный пример:

    Ваня пришел и сказал дяде бизнесмену "Смотри, вот тут надо подшаманить и клиент пойдет"
    – Ва… twitter.com/i/web/status/1…

    18:45
    @jsunderhood Не раз наблюдала картиру, когда человек не может объяснить какую пользу он нанес организации.
    Например… twitter.com/i/web/status/1…

    twitter.com/Travieso_nasty…

    Вот кстати спасибо @Travieso_nastya. Помимо реальной ценности вы должны уметь доказать что… twitter.com/i/web/status/1…

    @jsunderhood Не раз наблюдала картиру, когда человек не может объяснить какую пользу он нанес организации.
    Например… twitter.com/i/web/status/1…

    18:48

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

    Сегодня речь зайдет за типизированный javascript.

    Я надеюсь не нужно объяснять почему flow и typescript – это не… twitter.com/i/web/status/1…

    7:38

    Окей, так уж и быть накидаю тайпскрипту.

    P.S. У меня вообще какая-то дурацкая привычка обсирать то, чем я пользуюсь :)

    9:11

    Ну во-первых typescript себя не позиционирует как СТРОГОСТЬ. Это скорее такой баланс между типизацией и продуктивно… twitter.com/i/web/status/1…

    9:16

    Во-вторых огромное количество конструкций не требует реального доказательства, например is pic.twitter.com/TgxpvpO5P3

    9:29

    При чем , что если убрать функцию check он понимает что у переменной не может быть состояния number pic.twitter.com/bPc4AU4NhN

    9:31
    @jsunderhood так ну все приличные люди банят `any` и `!` на уровне линтера

    иначе же весь смысл теряется

    Вот поступил комментарий что все нормальные люди банят any twitter.com/t1tvs/status/1…. А вы знаете что происходит внут… twitter.com/i/web/status/1…

    @jsunderhood так ну все приличные люди банят `any` и `!` на уровне линтера

    иначе же весь смысл теряется

    9:32

    Или например generic-и, ну это если честно вообще боль. Описание дженериков в тайпскрипте це боль.

    А все потому ч… twitter.com/i/web/status/1…

    9:42

    Ну либо потом к тебе заходит ПР github.com/cypress-io/cyp… pic.twitter.com/sapmUIOGhQ

    9:44
    Really love writing complex typescript generics. Because other devs looking at your code like at the black magic 🙄

    twitter.com/dmtrKovalenko/…

    Как-то запостил такую фигню и меня закидали помидорами, но это реально так – вот такую бай… twitter.com/i/web/status/1…

    Really love writing complex typescript generics. Because other devs looking at your code like at the black magic 🙄

    9:47

    А еще можно накидать за структурную типизацию. То есть любые объекты с совпадающей структурой будут равнозначными.… twitter.com/i/web/status/1…

    9:58

    Но это может быть пофикшено вот этим ПР-ом github.com/microsoft/Type…

    10:00

    Ну или вот, потеря типов на тюплах на абсолютно любых взаимодействиях с массивом pic.twitter.com/dm1sm9FAup

    10:08

    Короче еще куча всего, тайпскрипт это скорее штука для ускорения разработки, чем для действительно строгих проверок… twitter.com/i/web/status/1…

    10:13

    Где же найти ту самую СТРОГУЮ типизацию в мире js? Ну пока @rage_monk не закончит свой Hegel, то пока только в язык… twitter.com/i/web/status/1…

    12:16

    И как у любого ДРУГОГО языка отличного от js у него есть огромная проблема – вам крайне сложно будет найти людей ко… twitter.com/i/web/status/1…

    12:18

    Ризон является диалектом функционального языка OCaml и компилируется через специальную тулзу (bucklescript) в javas… twitter.com/i/web/status/1…

    12:20

    Ризон как и окамл является языком семейства ML. А значит там есть тот самый вывод типов по Хиндли-Милнеру (вот боль… twitter.com/i/web/status/1…

    12:24

    Тут ризон знает, что оператор + работает только с числами, а соответственно он может точно вывести типы аргументов.… twitter.com/i/web/status/1…

    12:29

    Да, и тут в принципе нет аналога any.

    Поэтому reasonml имеет всегда 100% корректное покрытие типами вашего прилож… twitter.com/i/web/status/1…

    12:37

    Похоливарилили сегодня за вывод типов из рантайма, aka IO. Запросы на сервер, чтение из файла, ну там то что мы не… twitter.com/i/web/status/1…

    12:43

    Да, вот такую байду вам нужно написать чтобы спарсить ответ пришедший с сервера. И да я понимаю насколько это ужасн… twitter.com/i/web/status/1…

    12:45

    Следующее. Ризон функциональный язык, то есть у него есть готовая поддержка на уровне языка для композиции функций.… twitter.com/i/web/status/1…

    12:53
    @jsunderhood А как он работает с коллекциями? Например в подобном кейсе какое будет его поведение:

    const a = []… twitter.com/i/web/status/1…

    twitter.com/i_kabirov/stat…

    Про коллекции. Ризон предостовляет возможность использовать js-овские массивы, но не приве… twitter.com/i/web/status/1…

    @jsunderhood А как он работает с коллекциями? Например в подобном кейсе какое будет его поведение:

    const a = []… twitter.com/i/web/status/1…

    12:57

    Еще одна фишка которая мне нравится именно в отдельных языках – это ограничения. JS сам по себе ужасно динамический… twitter.com/i/web/status/1…

    13:01

    Это конечно иногда бывает крайне удобно, но зачастую приводит к таким странностям и в принципе отсутствием возможно… twitter.com/i/web/status/1…

    13:02

    Ну и основная плюха ризона это их варианты и паттерн-матчинг. Собственно это имплементация алгебраических типов дан… twitter.com/i/web/status/1…

    13:08

    И это действительно так, потому что первая версия реакта была написана на языке StandardML, и потом уже переписана… twitter.com/i/web/status/1…

    13:11

    И эта штука кстати отлично работает с константами, списками и массивами pic.twitter.com/Xx7M5oQsl4

    13:15

    Объекты типизируются с помощью самых обычных деклараций типов, единственное что явно указывать типы не обязательно,… twitter.com/i/web/status/1…

    13:20

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

    Короче ReasonML – имеет очень мощный вывод типов на о… twitter.com/i/web/status/1…

    13:24

    Ох и самое важное забыл! Это же полноценный язык, поэтому он может билдится в нативный код как и окамл.

    В том чис… twitter.com/i/web/status/1…

    13:29

    Почитал я свой тред про ризон и понял шо то туфта.

    Поэтому вдохновившись @_bravit хочу сделать онлайн трансляцию:… twitter.com/i/web/status/1…

    16:12

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

    @ArturasLapinsk @goodhoopoe @while_infinite @jsunderhood Да бля , на хуй как попало , зато мне сцуко не надо писать… twitter.com/i/web/status/1…

    Прошу прощения за такие репосты, но этот твит сделал мое утро! Побольше бы таких ответов, которые действительно под… twitter.com/i/web/status/1…

    @ArturasLapinsk @goodhoopoe @while_infinite @jsunderhood Да бля , на хуй как попало , зато мне сцуко не надо писать… twitter.com/i/web/status/1…

    8:20

    Короче я заболел. Да это стремно 😱.
    Сегодня тредов не будет, а взамен предлагаю вам просто обсуждение некоторых, н… twitter.com/i/web/status/1…

    9:14

    Первый вопрос на холиварное обсуждение: Вы за конвейерную разработку или против?

    То есть нужен ли отдельный бекенд… twitter.com/i/web/status/1…

    9:14
    @_jin_nin_ @ArturasLapinsk @goodhoopoe @while_infinite @jsunderhood Так это время твоей проверки а не языка ! Пиши… twitter.com/i/web/status/1…

    Этот человек не перестает меня радовать! Прямо предвосхищение обсуждения которое я хотел устроить.

    Почему вы прод… twitter.com/i/web/status/1…

    @_jin_nin_ @ArturasLapinsk @goodhoopoe @while_infinite @jsunderhood Так это время твоей проверки а не языка ! Пиши… twitter.com/i/web/status/1…

    11:49

    И чисто опрос для меня. Скажите используете ли вы русскую документацию если доступен перевод? Или вас бесит и вы пе… twitter.com/i/web/status/1…

    11:53

    Кстати это заблуждение что переведенная документация 100% устаревшая. Устаревание – это топ 1 проблема переводов, к… twitter.com/i/web/status/1…

    14:10

    Кстати если есть желание поконтрибьютить в опен сорс не напрягаясь – приглашаю помочь нам с переводом!… twitter.com/i/web/status/1…

    14:10

    Я тронут количество лайков 😳😳 стриму быть!

    Встречайте анонс трансляции "ReasonML для javascript-еров и гусей" – с… twitter.com/i/web/status/1…

    17:57

    Ну что котики, моя неделя подошла к концу! Не знаю как вам, а мне понравилось. Надеюсь я смог хоть чутка затронуть… twitter.com/i/web/status/1…

    18:31

    other