# Понедельник 38 твитов
Карантин карантином, а jsunderhood по расписанию.
Меня зовут Дима Коваленко (@dmtrKovalenko), я работаю фулл-тайм… twitter.com/i/web/status/1…
Да, я создаю мемы на непонятных сайтах и не удаляю их подпись. И не стыжусь этого!
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…
3. Вы можете обновить любую зависимость в вашей системе, даже на мажорную версию, и если тесты прошли – быть уверены что система работает.
11:32Возможно, звучит как что-то невозможное. Если бы можно было легко писать такие тесты, то а каких багах и тестировщи… 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…
!! Вообще эту проблему можно описать одной фразой – “Тестирование реализации”.
Тесты должны проверять не то как н… twitter.com/i/web/status/1…
15:17Для всех – будет отдельный тред про пирамиду тестирования. Затравочка:
1) Кто вам сказал что e2e тесты сломать про… twitter.com/i/web/status/1…
Продолжаем эппопею.
Не только моки делают тесты ненадежными. Зачастую просто лень разработчиков, которым лень писа… twitter.com/i/web/status/1…
К примеру тесты на компоненты можно сделать практически независимыми от фреймворка. Звучит странно, согласен.
И с… twitter.com/i/web/status/1…
17:20Все наши тесты состоят из 3 частей: Preparation, action & assertion.
И если можете взять любой тест на компонент,… twitter.com/i/web/status/1…
Вот собственно пример такого теста, который абсолютно никак не дергает ни React-specific ручки, ни там названия css… twitter.com/i/web/status/1…
17:22А вот пример не очень хорошего теста:
1) Завязываемся на названии компонента Day
2) Почему-то дергаем именно 10 де… twitter.com/i/web/status/1…
И последний пример:
Недавно смотрел доклад про рефакторинг. Ссылки не будет, бо вы меня загрызете 🙃
И дело зашло… twitter.com/i/web/status/1…
@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…
Приближаемся к выводу.
Тесты, даже банальные юнит тесты имеют свои подводные камни, свои "бед" и "бест" практики.… twitter.com/i/web/status/1…
Итак вывод:
Если вы уважаете себя и ваш продукт, хотите чтобы он цвел и пах (и например уволить тестировщиков), а в… twitter.com/i/web/status/1…
@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?
- Не стоит вообще КОДОМ пытаться про… twitter.com/i/web/status/1…
@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:57JSDom. Абсолютно банальный пример – пройдет тест или нет? 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…
И самое забавное, если вы возьмете Карму и будете запускать тесты в браузере – они опять пройдут!
Потому что посу… 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…
Просто в такие моменты отчетливо понимаешь НАСКОЛЬКО ВАЖНА может быть надежность наших тестов.
Для нас баг/дефект… 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…
Ну и продолжаем наши ночно-кризисные обсуждения!
А что вы предпринимаете для того чтобы не потерять работу, или д… 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источник: ru.wikipedia.org/wiki/%D0%A0%D0…
7:55То есть к примеру, я работая в 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:371) Действительно писать юнит тесты проще?
Ха-ха-ха, не смешите мои тапочки. Если мы говорим про тот тест, где у в… 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…
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…
Тоже самое с переиспользуемыми компоненты.
Какие-нибудь части 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 Проблема тестов на сайпрес,
18:14
1) что с усложнением приложения они начинают дольше ранится.
2) нельзя соб… twitter.com/i/web/status/1…
О и кстати, коверейдж собирать уже давно можно :)
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:114) Впадает в истерику потому что его авторизационный токен экспайрится каждые 10 минут (например)
5) Доделывает кон… twitter.com/i/web/status/1…
И собственно проблема в чем:
Его тесты делают абсолютно тоже самое, что Ваня делал в 3 пункте попутно страдая.
Он… twitter.com/i/web/status/1…
Так не было бы логично избавится от мануальной проверки, и проверить свой контроллер сразу с помощью тестов?
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…
Но! Попробуйте сделать 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…
А еще очень важно понимать все технические ограничения сайпресса, обусловленные тем что он исполняется из 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…
Например - тришейкинг. Вы должны понимать что такое 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Во-первых возникает диссонанс между готовой документацией и тем как ведет себя ваша дизайн система.
А во-вторых е… 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…
Ну вот собственно и все что мне пришло на ум :)
И кстати мы как раз этот вопрос постараемся порешать в 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:06I 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…
@jsunderhood Не раз наблюдала картиру, когда человек не может объяснить какую пользу он нанес организации.
Например… twitter.com/i/web/status/1…
Вот кстати спасибо @Travieso_nastya. Помимо реальной ценности вы должны уметь доказать что… twitter.com/i/web/status/1…
@jsunderhood Не раз наблюдала картиру, когда человек не может объяснить какую пользу он нанес организации.
18:48
Например… twitter.com/i/web/status/1…
# Суббота 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:44Really love writing complex typescript generics. Because other devs looking at your code like at the black magic 🙄
Как-то запостил такую фигню и меня закидали помидорами, но это реально так – вот такую бай… 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…
Про коллекции. Ризон предостовляет возможность использовать 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…
Первый вопрос на холиварное обсуждение: Вы за конвейерную разработку или против?
То есть нужен ли отдельный бекенд… 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
- https://github.com/cypress-io/cypress/pull/5923
- https://github.com/cypress-io/cypress/pull/4950/files
- https://github.com/microsoft/TypeScript/pull/33038
- https://percy.io/mui-org/material-ui-pickers/builds/4794761
- http://percy.io/
- https://codesandbox.io/s/eager-dust-z0tgv?file=/src/App.spec.js
- https://material-ui.com/
- https://material-ui.com/components/autocomplete/#useautocomplete
- https://material-ui-pickers.dev/
- https://ru.wikipedia.org/wiki/%D0%A0%D0%B5%D1%84%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B8%D0%BD%D0%B3
- https://www.npmjs.com/package/babel-plugin-react-remove-properties
- https://benhutchison.wordpress.com/2008/03/20/automated-testing-2-the-test-pyramid/
- https://docs.cypress.io/guides/tooling/code-coverage.html
- http://facebook.com/
- http://booking.com/
- https://gcanti.github.io/io-ts/
- https://www.youtube.com/watch?v=Isny1XtQu3M
- https://rustwasm.github.io/book/
- https://reasonml.github.io/reason-react/docs/en/simple