Pull to refresh

Comments 8

Статья выглядит неполной без указания, как вы решили проблему с тем, что составные компоненты используют внутри себя некастомизированные версии. А без решения этой проблемы весь подход выглядит нежизнеспособным.
Спасибо! Эта проблема решена, но кажется, я действительно зря опустил подробности.
На втором шаге в файле AntAliases.ts создаются алиасы на обертки для относительных импортов, которые используются внутри составных компонентов.
Позже постараюсь дополнить статью этой информацией.
UI-библиотеки предоставляют разработчикам возможность использовать готовые типовые компоненты, зачастую уже покрытые тестами и поддерживающие основные сценарии использования.

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


На мой взгляд готовые UI-библиотеки хорошо использовать на проектах где нет дизайн-отдела, или где он не нужен (всякие админки и т.д.).
Если же принято решение использовать какую-то UI-библиотеку, то смысл её кастомизировать? Добавить боли и стоимость к разработке? (Ладно ещё цветовую палитру свою хотеть, но кастомизировать логику...)
Почему бы административно не запретить дизайнерам кастомизацию? Пусть прорабатывают компоновку макетов, пользовательские сценарии и тексты, но при этом используя стандартные(!) компоненты выбранной библиотеки. По идее легче станет всем..)
Конечно это легче, а еще легче договориться использовать только системные компоненты :)

Я думаю тут стоит исходить из удобства для пользователей. На мой взгляд не повод отказываться от кастомизации и выходить за рамки, если это полезно для достижения каких-то целей и затраченные усилия того стоят.
В нашем случае кастомизация компонентов боли ни у кого не вызывает (насколько я знаю). И это точно легче и дешевле чем писать свои компоненты с нуля и делать велосипеды для проблем и кейсов, которые уже тысячи раз были решены в других библиотеках.

Подскажите, как специалист.
Несколько я понимаю в случае styled components никакого кэширования на уровне браузера нет, также вместо распараллеливания загрузки css — js все грузится в одном большом js файле. Ну и применение стилей непосредственно к каждому html элементу это дольше чем применить класс ко многим.
В styled components это сейчас как то решается?

Несколько я понимаю в случае styled components никакого кэширования на уровне браузера нет, также вместо распараллеливания загрузки css — js все грузится в одном большом js файле.

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

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

В нашем основном проекте раньше так и делалось, поскольку нет нужды в индексации и поддержке медленных устройств. Но удалось сильно уменьшить время загрузки за счет разбивки бандла на чанки. Наш бандл разбивается на нод модули, общедоступные куски кода, и отдельные куски по страницам. За счет небольшой кастомизации роутера так же сделали, чтобы каждая страница импортировалась асинхронно. Таким образом вместо всего кода и стилей на старте подгружается только процентов 20%, остальное догружается по мере перехода по страницам. И многие из этих кусков остаются неизменными при дальнейшей разработке и сохраняются в кеше.

Вот хорошая статья, где объясняется как просто настроить чанкинг в вебпаке medium.com/dailyjs/webpack-4-splitchunks-plugin-d9fbbe091fd0

Ну и применение стилей непосредственно к каждому html элементу это дольше чем применить класс ко многим.

Так styled-components не применяет стили отдельно к каждому элементу. Она динамически создает обычные классы. Возможно на огромных проектах производительность будет проседать, по сравнению с классическим css, но проблема должна решаться разбивкой на чанки.

Ребят, а зачем вы кастомизировали ant? У вас же есть своя дизайн система paradigm.mail.ru?

В том и суть, что это дизайн система, а не библиотека компонентов для React :)
Sign up to leave a comment.