fullstack-development / react-redux-starter-kit

Modular starter kit for React+Redux+React Router projects.

react-redux-starter-kit

Modular starter kit for React+Redux+React Router projects.

• NPM scripts
• Features
• Тестирование
• Документация

NPM scripts

To start locally

• npm run dev for development environment in watch mode
• npm run prod for production environment in watch mode

To build locally (see build folder)

• npm run build:dev for development environment without watch mode
• npm run build:prod for production environment without watch mode

To start bundle analyzer

• npm run analyze:dev for development environment
• npm run analyze:prod for production environment

To start isomorphic server

• npm run server:dev for development environment in watch mode
• npm run server:prod for production environment without watch mode

To start yeoman generator create-feature

• npm run yeoman

Features

• Typescript 2.x
• React 16.x
• React-router 4.x
• Redux
• Redux-saga for side-effects
• SCSS
• React-JSS
• BEM methodology
• Webpack 4.x
• Tests (Jest, sinon, enzyme)
• Test coverage
• Hot reload
• Yeoman blocks generator tasks (features, modules, ... )
• Code splitting (async chunks loading)
• Isomorphic
• Material-UI

Тестирование

Тесты используют фреймворк Jest

Запуск

• npm test или npm t - разовый прогон тестов
• npm run test:watch - запуск тестов в watch-режиме
• npm run test:debug - запуск с возможностью подключения для отладки ( Chrome / VSCode / Webstorm ).
• npm run test:coverage - запуск с генерацией карты покрытия кода. Результаты можно открыть в браузере <projectDir>/coverage/lcov-report/index.html.

Snapshot Testing

import React from 'react';
import { shallow } from 'enzyme';
import GenericDateInput from './../GenericDateInput';

it('renders correctly', () => {
  const component = shallow(<GenericDateInput />)

  expect(component.debug()).toMatchSnapshot();
});

После первого запуска теста создается эталонный снепшот, который будет помещен в папку __snapshots__ рядом с файлом теста. Его нужно проверить на корректность. После изменений в верстке компонента в терминале будут отображены изменения произошедшие в компоненте, и если эти изменения ожидаемы, то нужно зафиксировать новые снепшоты, для этого достаточно в терминале нажать клавишу "u" (при условии что тесты запущены в watch-режиме). ВНИМАНИЕ!!! Будут перезаписаны все снепшоты, не совпадающие с эталонными!

Чтобы обновить снепшот для конкретного теста можно воспользоваться it.only(name, fn, timeout) или describe.only(name, fn), если мы хотим обновить снепшоты для группы тестов.

При возникновении ошибок при тестировании в watch моде:

Для MacOS (Error: watch EMFILE): Удалить watchman, глобально установленный через npm или yarn, если таковой был, и установить повторно через brew.

Для Linux (Error ENOSPC): воспользоваться данной командой:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

ссылка на issue

react-redux-starter-kit's Issues

Ресерч на тему интеграции лайтхаус тестов в стартер кит

Пофиксить скрипты server:prod

Вываливает в консоль ошибку, нужно добавить переменную окружения TS_NODE_FILES

Подумать над прелоадером при загрузке реп

Create mvp versions for projects

• remove all unnecessary

• add wrappers over basic MUI elements (inputs, buttons, selectors, icons, etc.)

• connect the redux-form and set up basic fields (inputs, selectors, checkboxes, radio)

• connect favicon (works in both normal and isomorphic mode)

• configure the i18n service

• set up a theme

• set up routing

• add demo with base components and i18n

Перевести на новый [email protected]

[Demo] рефакторинг адаптивности

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

.block {
  width: 100%;

  @include breakpoint-up(sm) {
    width: 10rem;
  }

  @include breakpoint-up(md) {
    width: 14rem;
  }
}

Create jss cascade styles intro

• расписать общие принципы написания стилей в jss

• как писать и использовать модификаторы или как писать стили от пропсов (хелпер styledBy)

• как и где использовать compose

• испольлзование вложенных селекторов

• best practice компании по использованию jss

Подключить circular-dependency-plugin

Обновить конфиг для тестов

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

выпилить react-geosuggest

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

Выпилить этот пакет (заменить например react-autosuggest) и проверить работоспособность проекта развернув его с нуля.

Перенести из master в mvp-base WIP

1. выпилить postcss-easy-import из вебпак конфига
2. в assets/index.html
3. обновление ts-loader до 5.3.3
4. хелпер makeFormFieldNames, если решим его остаивить

Эта конструкция на новом проекте привела к зависанию build-скриптов.

react-redux-starter-kit/webpack/common.ts

Lines 30 to 35 in b469792

	threadLoader.warmup(workerPool, [
	'babel-loader',
	'ts-loader',
	'postcss-loader',
	'sass-loader',
	]);

решили проблему так:

isWatchMode && threadLoader.warmup(workerPool, [
  'babel-loader',
  'ts-loader',
  'postcss-loader',
  'sass-loader',
]);

Выпилить @types/_helpers

Есть куда более полное, хорошо поддерживаемое собрание утилит https://github.com/pirix-gh/ts-toolbelt. Предлагаю отказаться от своих и использовать это решение

Обновить английскую документацию

Есть некоторые наработки по английской доке по архитектуре. Чтобы они не пропадали, апдейтну всю английскую доку.

Заменить decko на core-decorators

У core-decorators намного больше декораторов и он поддерживает tree-shaking.
@Znack @in19farkt @chmnkh @NikitaRzm Что думаете?

Отрефакторить FeatureConnector и ContainersProvider

Таску делать сначала в mvp-base, после мержить в master

Мысли по поводу того как это должно выглядеть:

У нас в файле FeatureConnector есть хелпер getAsyncContainer (его нужно вынести в отдельный файл), он позволяет из функции loader достать асинхронный контейнер, по сути это HOC, при отрисовке возвращенного им компонента загрузится фичу, фича подключится к стору и отрисуется требуемый контейнер фичи.

Предложение номер раз: фича помимо лоадера может сразу подготовить набор асинхронных контейнеров с помощью хелпера getAsyncContainer, которые мы сможем забирать и отрисовывать не заморачиваясь с оборачиванием. Сами асинхронные контейнеры, возвращаемые хелпером getAsyncContainer, нужно доработать, чтобы они могли принимать пропсы fallback и preloader, думаю не надо объяснять для чего))

FeatureConnector и экспорт лоадеров из асинхронных фич нужно оставить, на случай если где-то потребуются не только контейнеры, но и экшен-креэйторы или селекторы из асинхронной фичи. Редкий кейс, но всё же может понадобиться.

Предложение номер два: ContainersProvider не должен заниматься загрузкой и подключением фич, он должен тупо отдавать нужные контейнеры, которые ранее туда забиндили. И если асинхронные фичи начнут отдавать асинхронные контейнеры, то мы можем сразу их использовать в контейнер провайдере. Сейчас же есть ограничение по использованию контейнер провайдера, он может только с асинхронными фичами, подмешать туда синхронные фичи думаю будет затруднительно, да и ни к чему. Таким образом мы уберем дублирование логики по загрузке фичи и сможем использовать ContainersProvaider независимо от типа фичи.

Изучить альтернативы Material-UI

Наткнулся сейчас на материаловский юикит от гугла (вроде). Нужно поресерчить возможно ли это затащить в продакшен, насколько этот кит крут, плюсы-минусы, кастомизируемость, accessibility, разнообразие компонент, апи, поддержка typescript, сравнение с подключенным сейчас material-ui.

сайт - https://material.io/develop/web/
репа - https://github.com/material-components/material-components-web

Добавить --resolveJsonModule и вывести версию из package.json

в ForkTsCheckerWebpackPlugin нужно добавить

reportFiles: [
  '**',
  '!**/*.json',
],

[mvp-base] настроить HMR для JSS и i18n

делать после #50

Оптимизировать импорты из рамды

• запретить импорт всей рамды из 'ramda' (tslint).
• импорт вида 'ramda/func' перенаправлять в 'ramda/es/func' (tsconfig + webpack config)
• возможно настроить обработку файлов рамды бабелем, для возможности сборки проекта в es5 (webpack config)

Попробовать выпилить node-sass и провести замеры

Есть инфа что node-sass дико тупой. Нужно попробовать собрать нужный нам функционал на чистом PostCSS. Обязательно нужно провести замеры на скорость сборки с node-sass и без него.

Demo app: tests

Написать тесты

Добавить главную для demo-страницы

Надо, чтобы пришедший на демо страницу пользователь, не офигевал от того, куда он попал и зачем это все :)

Для этого нужно отдельную страницу по корневому урлу сделать с навигацией на все остальные страницы (включая редактирование профиля) и написать понятные лаконичные тексты. Текст согласовать лучше с Юлей, показав ей это ишью :)

Проблемы с некоторыми либами

Возможно тут я сейчас не прав и вы меня поправите, либо поправим эти моменты)

1. doiuse, тут мне кажется нужно настройки для браузеров и игнорирования определенных свойств нужно вынести в отдельный файлик, я с ходу не разобрался сразу как заигнорить определенное свойство)
2. Почему убрали inline-svg? Тут я может чуток отстал, но у ребят спрашивал, вроде все им пользуются. Есть другой способ вставки svg в дом?
3. postcssReporter - как то странно, он то подсвечивает ошибки, то нет, например ставлю свойство resize:none, когда делал он не показывал на что именно ругается ошибка была только такая:
   

Но на момент написания появилось сообщение

может я просмотрел, но Дима Юдин и Саша Петухов тоже смотрели)

Починить react-async-bootstrapper

Сейчас одновременное использование react-async-bootstrapper и реакт хуков может приводить к ошибке "Invariant Violation: Hooks can only be called inside the body of a function component".

Возможно будет достаточно обновить react-async-bootstrapper.

Как воспроизвести ошибку: внутри core/App/ClientApp добавляем хук useState.

Проработка переводов

Я изучил i18next. Удовлетворяет всем архитектурным предпочтениям и предлагает большой в перспективе функционал (типа locize для удаленного перевода).

Что нужно:

• подцепить и настроить само ядро i18n (есть в экзампла react-i18next);
• выдать апи для использования в сагах;
• выдать апи для использования во вьюхе (react-i18next);
• описать тестовый бекенд (пусть будет пока локальным файлом) для хранения переводов (https://www.i18next.com/how-to/add-or-load-translations)
• показать корректную работу смены языка (где-то должна быть кнопочка на демостраницах в хедере например)
• ассайнить на меня мерж )

Привести readme в порядок.

Предлагаю создать версии на английском и русском языках

Подумать как из routeTree можно генерить sitemap.xml

Не понятно как понять какие именно урлы должны попадать в сайтмап.

1. дерево раутов может содержать параметры. Если параметр полностью динамический, например, айди продукта, то такую страницу не нужно помещать в сайтмап. Если параметр может принимать ограниченный набор значений, например, размер - small | medium | large, то такой набор раутов можно поместить в сайтмап.
2. Не все узлы дерева могут отрисовывать какую-то адекватную страницу, некоторые узлы могут просто группировать несколько страниц.

Первое что пришло в голову, это на этапе описания дерева, как-то маркировать узлы до которых нужно простроить урлы и поместить эти урлы в сайтмап. И похоже что эту логику нужно реализовывать в build-route-tree

Починить изоморфную сбоку для продашена

текстовый инпут languages в настройках

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

Css modules

В свете последних событий по поводу cssinjs есть пропозал опционального перехода на css-modules - опционально - потому что не на всех размерах проектов есть смысл изолировать стили.

Предлагается юзать изолированные css-modules в связке с типизацией через https://github.com/olegstepura/typed-css-modules-loader.

Предлагаю тему на ресерч - сложность реализации, использования и профиты по сравнению с обычным глобальным css.

P.s. типизация css-module возникает только когда применяется сама изоляция через css-modules.

Навести порядок в структуре проекта

Нужно:

• навести порядок в файлах инициализации приложения
• максимально отделить базу/ядро проекта, от накручиваемого поверх функционала (фичи, сервисы, модули, типы и хелперы конкретной бизнес модели).
• определить откуда и в каком формате ядро забирает функционал, чтобы инициализировать/запустить приложение
• определить что можно брать из ядра (базовые элементы UI, типы, хелперы, и т.п.)

Это позволит нам написать небольшой скрипт очищающий проект от всякого шлака, чтобы можно было быстро стартовать проекты и не поддерживать 2 ветки (опыт с mvp-base показал что это гиблая затея).

@Znack @NikitaRzm хотел бы услышать ваше мнение/предложения.

не показываются выбранные фильтры

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

Переименовать параметр в поиске реп

жалуются, что неочевидно
Repository language => Programming language
иша чтобы не забыть

Localization tests

Отключить линтеры в debug-режиме

Неудобно дебажить ssr, потому что tslint ошибки влияют на сборку и мешают ей дособраться и тебе надо сначала их справить, а затем пересобрать, что занимает много времени

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

Fix stylelint errors

Список реп (дизайн)

Насколько уместно будет тут карточки зафигарить наподобие материаловских? Сейчас у меня немного смешивается информация, можно у Юли спросить еще на предмет этого и на предмет line-height в тексте )

[mvp-base] перевести сервис i18n на использование React Context API

Протестировать изоморфность

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

Прикрутить дупликат чекер

https://www.npmjs.com/package/duplicate-package-checker-webpack-plugin

показывать общее количество найденных итемов

когда в поиске найдено несколько страниц репозиториев или пользователей не показывается сколько их всего найдено. желательно бы под инпутов выводить число :)

Эта конструкция на новом проекте привела к зависанию build-скриптов.

react-redux-starter-kit/webpack/common.ts

Lines 30 to 35 in b469792

	threadLoader.warmup(workerPool, [
	'babel-loader',
	'ts-loader',
	'postcss-loader',
	'sass-loader',
	]);

решили проблему так:

isWatchMode && threadLoader.warmup(workerPool, [
  'babel-loader',
  'ts-loader',
  'postcss-loader',
  'sass-loader',
]);

Удалить jss

Мы вроде решили, что уходим от jss? Но тут он везде остался, предлагаю выпилить)
@Znack @in19farkt @chmnkh @NikitaRzm Что думаете?

Подумать над смещением интерфейса на форме поиска при валидации

Когда валидация не проходит и вывалиавется еррор, кнопки съезжают вниз

Мигрировать на eslint

Прикрутить prettier

Сразу настроить нормально приттиер, чтобы ручками не форматировать и чтобы кодстайл консистентный был

Create a demonstration application in the master

Изменить запись урла до скриптов и стилей в Html.tsx

нужно сделать так

<script defer src={`/${filePath}`} charSet="UTF-8" key={index} />

Обновить fork-ts-checker-webpack-plugin

Нужно обновить fork-ts-checker-webpack-plugin до последней версии и выставить в tsconfig опцию "incremental": true. Это значительно ускорит проверку типов во время пересборки проекта.