Comments 84
Create React App — мой выбор! Долго перебирал-сравнивал. Важно, что самый необходимый набор и реализация скрыта. Обновления пройдут безболезненно.
В принципе, обновления Next.js будут примерно так же проходить, там довольно минималистичный API.
Если же вы пилите обычную аппу, в которой боту-индексатору дальше страницы логина не пробраться, а трудоемких вычислений для рендеринга не имеется, то изоморфик будет лишь создавать лишнюю головную боль, ни давая никаких реальных преимуществ.
В остальном согласен.
И вместо того, что вдохновенно кодить, я снова выбираю инструменты. :)
Спасибо. Публикация свалилась на мою воспаленную голову, как нельзя кстати. Сегодня начинаю пилить самый лучший проект.
Положил взгляд на Electrode. Вроде как всё по феншую. Смотрится несравнимо солиднее, чем Next.js Пока можно попробовать без сервера. Но само наличие сервера радует. Я хочу туда PostgreSQL прикрутить, уж очень камрад нахваливает. Не нашел на этот счет примеров. Конкретно — посредством pg-promise. Ещё не разобрался, но могу предположить, что обнаружу дополнительные бонусы от связки родных клиента и сервера.
Electrode позволяет импортировать CSS напрямую.
Смущают CSS-модули, можно ли от них отказаться без страданий?
Что предлагается для сайд-эффектов? redux-saga я тоже не хочу использовать. Мой выбор — thunk.
Вопросы озвучены. Цели поставлены. За работу!
Я лично везде использую promise middleware и thunk, хватает для всего. Saga рассматривал, но мне не понравился API, который как-то тяжеловат и словоблуден, а так же генераторы.
Про Postgres тут статья была Uber — причины перехода с Postgres на MySQL.
Я сидел три года на PostgreSQL давным давно. Это еще и вопрос ностальгии. Никакие доводы не помогут. :)
везде использую promise middleware
Вот это redux-promise-middleware?
Мне просто в свое время показалось дико неудобным, пришлось «смириться» с сагами, ибо rx-стримы как-то совсем перегружено смотрелись. Сейчас же после некоторого времени использования, саги не кажутся чем-то сверхъестественным.
С тестами никаких проблем, это же просто промисы, из них можно выстроить любую цепочку диспатчей, параллельных, последовательных, любых.
Собственно, идея саг в том, что вы в этих точках не вызываете какие-то функции с сайд эффектами, сервисы и т.п. напрямую, а описываете декларативно «что должно быть выполнено». Это называется декларативными эффектами, которые при прямом вызове генератора не выполняются, их выполняет redux-middleware тогда, когда считает нужным.
Так вот, описываются эти вызовы с помощью простеньких хелперов из пакета redux-saga. Вызов этого хелпера в yield возвращает просто json-описание, что и как должно быть выполнено. Соответственно, не трудно догадаться, что тестируется это все на ура обычным deepEqual. В отличие от тестирования прямых вызовов сайд-эффектов, когда вам нужно замокать все ваше окружение. Т.е. на уровне юнита, вы раскрываете тесту, что этот юнит использует и вызывает. Или даже хуже, что использует и вызывает тот или иной сервис, который использует этот юнит. Или еще хуже и глубже…
Можно кстати провести прямую аналогию с Elm, так как там все ровно то же. Вместо middleware там рантайм, а «вместо» декларативных эффектов — обычные ADT.
Резюмируя, дайте сагам еще один шанс =) Соглашусь, поначалу генераторы вызывают когнитивное отторжение, но только поначалу.
А по генераторам, ну… это генераторы, они везде одинаковые, пойдет любая статья. Тут главное уловить концепцию. Функция-генератор при прогоне через
.next
снаружи «приостанавливается» на каждом своем yield, чтобы через него сначала «выбросить» наружу какое-то значение «справа» от yield, а затем «принять» значение снаружи через .next
и отдать «налево». Т.е. у вас появляются новые точки входа вместо обычной схемы «передать аргументы на входе, получить значение на выходе». Функция-генератор может быть представлена в виде «процесса», как конечного, так и бесконечного, если внутри есть while (true)
. Именно на этих «процессах» и построены саги.По генераторам штудирую: раз, два.
Кстати, зачем в коде *, я такого раньше не видел:
var ids = {
*[Symbol.iterator]: function () {
var index = 0;
return {
next: function () {
return { value: 'id-' + index++, done: false };
}
};
}
};
По сагам что нашёл интересного: раз, два, три, четыре, пять.
Посмотрел на официальный пример и загрустил — как-то слишком многословно. Может есть какие-то улучшайзеры?
как-то слишком многословно.Ну так в лучших традициях redux :) Смотрите, тут опять та же история, возможно вам все эти запросы в саги выносить и не нужно. Возможно хватит и контейнера. Саги просто позволяют поднять обработку синхронизации этих запросов на уровень выше, чтобы ни ваши контейнеры, ни редьюсеры не пытались друг с другом как-то общаться, чтобы синхронизироваться. Сага — это хорошее место для длинных транзакций из нескольких запросов (например сходить по нескольким урлам) с возможностью легкой отмены или рейсов. У них там в доках хороший пример про авторизационный флоу — когда у вас может висеть запрос на login, а тут внезапно logout прилетел. Как бы это решалось в стандартном редаксе? ну скорей всего какими-нибудь флагами в сторе. А нужны ли они там? Не нужны, так вот саги позволяют заинкапсулировать такую логику на уровне выше, чем лежат редьюсеры. В них же можно до бесконечности спамить всевозможные экшены, читать из стора через готовые селекторы, которые уже используются в контейнерах, да много чего.
На сагах вы можете описывать не только такие процессы (они обычно watcher'ами зовутся) но и обычные сервисы, например для похода в api. И в этом сервисе вы можете за-put-ать (хм, интересное словечко получилось) экшен SESSION_EXPIRED, который обработается редьюсерами для очистки каких-нибудь sensitive-данных, а так же вотчером авторизации, который вызовет экшен редиректа на логин. И это все прекрасно тестируется без каких-либо моков.
Более того, что самое главное, экшены у вас остаются «тонкими», чистыми и декларативными, как и подобает CQRS+ES (подобию).
Про многословность я наверно преувеличил. Ниже пример практически построчного переноса сайд-эффекта из под redux-thunk на redux-saga. Посмотрите, пожалуйста, что тут можно улучшить?
const save = () => (dispatch, getState) => {
const clearPost = ({ searchHub, errors, isSubmitting, ...result }) => result
const state = getState()
const errors = {}
Object.keys(validators).forEach(key => {
const validate = validators[key]
const error = validate(state.postForm[key], state)
if (error) {
errors[key] = error
}
})
if (!isEmpty(errors)) {
dispatch(setErrors(errors))
dispatch(appActions.setMainError('Исправьте ошибки в форме'))
return
}
if (state.app.mainError) {
dispatch(appActions.setMainError())
}
dispatch(setSubmitting(true))
axios
.post('/post/', clearPost(state.postForm))
.then(response => {
const post = response.data
dispatch(postsActions.setPost(post))
dispatch(push(`/post/${post.id}/`))
})
.catch(error => {
dispatch(appActions.setMainError(error.toString()))
})
.then(() => {
dispatch(setSubmitting(false))
})
}
function* saveSaga(action) {
const clearPost = ({ searchHub, errors, isSubmitting, ...result }) => result
const state = yield select()
const errors = {}
Object.keys(validators).forEach(key => {
const validate = validators[key]
const error = validate(state.postForm[key], state)
if (error) {
errors[key] = error
}
})
if (!isEmpty(errors)) {
yield put(setErrors(errors))
yield put(appActions.setMainError('Исправьте ошибки в форме'))
return
}
if (state.app.mainError) {
yield put(appActions.setMainError())
}
yield put(setSubmitting(true))
try {
const response = yield call(axios.post, '/post/', clearPost(state.postForm))
const post = response.data
yield put(postsActions.setPost(post))
yield put(push(`/post/${post.id}/`))
} catch (error) {
yield put(appActions.setMainError(error.toString()))
} finally {
yield put(setSubmitting(false))
}
}
Второе — явно синхронная валидация формы, так как эта логика находится на уровне ниже, в форме. Ей там самое место, т.е. экшен, который ждет сага вообще не должен вызываться, если состояние формы не удовлетворяет условиям, которые, в общем-то, должна описывать сама форма.
Таким образом, можно избежать совершенно ненужных экшенов setErrors и setMainError. (хотя про последний не могу судить строго, так как не знаю деталей вашего приложения, может у вас ошибка как-то глобально выводится. В противном случае, эта логика прекрасно уживается в самой форме (на крайняк в контейнере).
Далее, не слишком здорово, что сага сначала что-то сетит в стейт, а потом этот результат читает. Идеологически, сага — автономный процесс, который выполняет какие-то операции основываясь на входных данных. Не спорю, возможны случаи, когда необходимо прочитать стейт где-то в середине, но их лучше избегать и пытаться синхронизироваться на уровне поимки нужных экшенов через race/take.
Далее, опытным путем, все, с кем я обсуждал redux (да и я сам), приходят к выводу что флаги из серии isSubmitting (экшен setSubmitting) удобнее держать в стейте контейнера, если на этот флаг в приложении не реагирует никто, кроме самого контейнера.
Далее, у вас в try лежит слишком много логики, а catch один. То есть, если у вас свалится не сам запрос через axios.post, а, например реакция на setPost или еще хуже push, вы поймаете не ту ошибку (нужно помнить, что реакции на эти экшены выполняются синхронно в текущем контексте) и потеряете предсказуемость работы вашего приложения. Fail fast, все дела. Так что в try я бы обернул только yield call, а в catch бы вышел из генератора через return. И finally тогда не нужен, эта логика пишется просто в тело генератора.
Можно и на русском тут спросить: https://gitter.im/vitaly-t/russian, или на StackOverflow где я всегда отвечаю.
Я автор pg-promise ;)
.eslintrc можно экстендить
из архетипа electrode-archetype-react-app-dev выдрал
.eslintrc-node (для сервера)
---
extends:
- "walmart/configurations/es6-node"
parserOptions:
# this is not in the Walmart default configuration, for fairly good reason:
# V8 (and thus Node) does not support ES6 import syntax. Server-side code
# is transpiled, but this is not reflected in tests.
sourceType: "module"
rules:
"strict": ["off", "global"]
"no-process-exit": ["off"]
"func-style": ["off"]
.eslintrc-react (для клиента)
---
extends:
- "walmart/configurations/es6-react"
globals:
window: false
document: false
ReactElement: false
rules:
"react/jsx-boolean-value": "off"
"react/jsx-closing-bracket-location": "off"
"react/no-string-refs": "off"
# disable invalid rules from walmart default configs:
"react/wrap-multilines": "off"
"react/jsx-wrap-multilines": "error"
И вообще термин фреймворк в отношении реакта неуместен.
Всё зависит от определения термина "фреймворк". Как минимум он фреймворк с точки зрения основного направления вызовов. Обычно мы один раз вызываем его как библиотеку, передавая наш код в качестве параметра, а дальше он сам постоянно вызывает наш код в моменты, когда считает нужным.
Как создается проект с помощью create-react-app?
create-react-app my-app
Читаем что написано в readme.md на github
It will create a directory called my-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
А тут написано что это утилита которая генерирует структуру проекта.
Как создается проект с помощью Yeoman?
yo шаблон-реакт-вебпак-и-все-что-необходимо
На выходе имеем так же организованную структуру проекта, где так же достаточно набрать npm start и все взлетит.
В чем отличия? Следуя вашей логике Yeoman это тоже фреймворк всех фреймворков.
Create React App самый простой для понимания в начале, но он вообще не дает никаких средств для модификации.
Всё же даёт. create-rect-app состоит по сути из двух частей: собственно утилита создания приложения и react-scripts. И во время создания, и позже можно изменить "коробочный" набор на любой сторонний или свой форк, включив всё что нужно и исключив ненужное, прежде всего в конфиги вебпака и бабеля. Если речь о разработке "на потоке", когда приложения создаются часто, но целевые конфиги одинаковы, то очень удобно, стандартизирует процессы разработки и инструментарий в команде.
А как же eject? :)
Чтобы создать общую структуру папок и конфигов, где уже почти всё что нужно настроено и только донастраивать.
Во всяком случае это удобнее, чем каждый раз писать все конфиги и скрипты с ноля или копипастить их из другого проекта.
Создаешь приложение с create-react-app, разрабатываешь его пока не уткнёшься в ограничения, а дальше решаешь или делать свою ветку скриптов, или использовать стороннюю (например есть готовые с поддержкой stage-0 и less/sass, постоянно синхронизирующиеся с оригиналом), или сделать eject.
Тот же кодогенератор по сути, набрасывающий основу проекта.
Зря вы наговариваете на Next.js, что там роутинг плохой.
Там же на серверной стороне можно юзать express https://github.com/zeit/next.js/blob/master/examples/custom-server-express/server.js
И с помощью него парсить такие пути /items/:id
и всё прекрасно.
Препроцессоры для CSS там тоже есть https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-postcss — подключайте PostCSS плагины, какие хотите
PostCSS плагины это все же не полная поддержка любых препроцессоров.
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
…
Plugins
…
Better CSS Readability
— precss contains plugins for Sass-like features, like variables, nesting, and mixins.
Есть возможность собирать «из коробки» электрон — кордову?
*электрод
Только зачем, когда есть React Native?
Но вопрос был по статье «Что взять за основу React приложения», чтобы собирать приложения также и для мобильников и для десктопа.
Один мальчик хотел написать мобильное приложение на Cordova. Потратил $130 долларов, и получил тормознутый прототип из трех функций через полгода. Показывать такое потенциальным инвесторам просто стыдно.
React Native — это лучшая основа React-приложения для мобилок.
Интересно, а на что конкретно полгода то ушло ?)
Поправка — килодолларов.
Create React App, прекрасен тем, что нет ничего лишнего — сел и поехал.
Когда в Create React App станет тесно, перенести в Electrode — никаких проблем, реализация окружения скрыта точно так же, как и в Create React App. Но добавятся: SSR, изоморфность, утилиты.
I18N — мне нравится такое.
GraphQL (Relay) попробовал, это кошмар. Redux — окончательный правильный выбор! :)
Остальное из моего набора: Redux-Form, Redux-Auth, Axios, Redux-Promise-Middleware, Redux-Thunk, Reselect, Redux-Act, Immutable-JS, Material-UI, React-Select.
Вы пытаетесь судить по фотокарточке, начните с малого.
Я тоже сначала пробовал взлететь со всем вот этим. Никак!
Вот это самая лучшая статья по React+Redux из тех, что я перелопатил.
Для старта и CRA, и Next.js, и Electrode, и <все, что угодно> — хороший выбор, но я бы все-таки рекомендовал инвестировать время, чтобы разобраться, как работают эти инструменты на низком уровне. После этого у вас не возникнет проблем ни с в выбором технологии обработки сайд-эффектов, ни с SSR, ни с менеджментом стейта, ни с настройкой HMR, ни с ручным развертыванием удобного инструмента для разработки компонентов а-ля react-storybook, ни с чем-либо еще.
Да, это требует времени, но, да, это того стоит.
Что взять за основу React приложения