Знакомьтесь: «все и сразу», React Boilerplate от Maximilian Stoiber v3.6.0

[strannik_k]

Эх, лучше сделали бы уже хороший Boilerplate с Mobx или вообще Boilerplate без менеджера состояний. Пихаемый всюду Redux уже порядком надоел(

[m512781]

Сборка дает инструкции для удаления Redux. Пробуйте…

[BuccapuoH]

Хороший набор, но вот Enzyme я бы не включал, а заменил бы на react-testing-library. Поддержка Enzyme для React 16 так себе, да и в целом они сильно тормозят с новыми фичами.

[paratagas]

Хороший бойлерплэйт. Еще в нем очень радует работа с настройками Webpack. Можно задать общие для всех режимов работы, а также свои для каждого отдельного режима: dev, prod. Очень много npm-скриптов «из коробки»: сборка, линтинг, тестирование (+ покрытие в консоли и в html-формате), различные очистки и настройки. Для коммитов по умолчанию стоит режим предварительного линтинга. Информативная система логов сборки, показывающая, например, circular dependencies. Еще у проекта неплохая документация. Понятно, что можно все это собрать и по-отдельности, но тут оно уже есть и неплохо работает.

[AxisPod]

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

[m512781]

styled components — средство преодоления проблемы глобальности стилей. Нет проблемы — не используйте. В больших проектах, да если они еще находятся в постоянном развитии, глобальность стилей может приводить к таким неприятностям, как коллизии селекторов и нежелательное каскадирование. Человечество, столкнувшись с этим, выработало противоядия разной степени кардинальности — препроцессоры ( Sass, Less и др.), методологию BEM (Block Element Modifier), ну и CSS Modules, и styled components. Отделение логики, даже в случае styled components от отображения сохраняется, хоть и становится более (сильно) локальным.
Но какие-то глобальные стили тоже остаются. Конечно, не очень хорошо, что программисту приходится заниматься и версткой, и трудно определить, что оставить в глобальных стилях, а что перенести в компонент, но другого пока ничего не придумано.

[AxisPod]

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

[justboris]

А расскажите, к каким проблемам приводит?

Я сейчас к styled-components присматриваюсь, какие там подводные камни?

[m512781]

Здесь приведены интересные размышления на тему практического применения styled-components, о его достоинствах и недостатках

[justboris]

Недостатков там указано 4 штуки:

* Yet to be tested in the wild
* Built for React
* Super young
* Testing needs to be done via aria-labels or using classNames

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

Именно поэтому интересно, что думает AxisPod

[noodles]

Я заметил такие вещи:

1) конструкции из sass по типу «background-color: rgba(red, .5);» не работают (подозреваю многие другие «сахарные» sass-конструкции тоже)

2) плагин emmet для Sublime Text 3 не раскрывает сокращения, к примеру «w100» -> «width: 100px;» после нажатия Tab

3) Нет подсветки синтаксиса в Sublime Text 3

Но я конкретно тестил эти styled-components примерно год назад, и как не странно именно эти три пункта меня оттолкнули. Как сейчас обстоят дела с этим не знаю. Было бы здорово если б пофиксили.

[justboris]

1) Для таких ситуаций есть вспомогательная библиотека: https://github.com/styled-components/polished

2,3) это все же проблемы саблайма а не фреймворка. Активно развивающиеся редакторы (VSCode, Webstorm, например) таких проблем не имеют

[NookieGrey]

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

[m512781]

А в чем была «засада» с saga-ми, если не секрет?

[NookieGrey]

Я посмотрел и не стал даже заморачиваться с callback-ами.
Например как при подключении websocket в onmessage запустить yeld?

[chvv]

Тривиально посредством eventChannel github.com/redux-saga/redux-saga/tree/master/docs/api#eventchannelsubscribe-buffer-matcher
На который, в свою очередь, подписывается saga — обработчик.

[chvv]

Напротив, с удовольствием открыл для себя redux-saga. Необыкновенно удобно писать асинхронный код с обработкой результатов вызовов сервисов (реконнекты, маршрутизация сообщений и оркестровка процессов). C использованием saga это решается очень элегантно и минималистично. Learning curve, конечно, поначалу крутоват, но потом необычайно удобно.