React, redux, middleware какой набор инструментов и библиотек лучше использовать?

Question

[vaskadogana]

Доброго времени суток, Господа фронт-энды)

Столкнулся с задачей сделать довольно сложное приложение на React. Уже пару недель читаю мануалы, но они предлагают довольно разные решения и кучу библиотек (у меня складывается впечатление, что сейчас каждый пишет свои библиотеки, например, видел пару примеров с использованием разных библиотек для ajax запроса и это не считая jqwerry и middleware) + сбивает с толку, то что пишут на разном синтаксисе "es2015" с разными библиотеками (которые на первый взгляд решают одни и те же задачи).

Чуть подустал гуглить, когда читаю документацию или уроки, там базовые вопросы опускаются (думаю опытным людям они кажутся очевидными и не заслуживающими внимания) или же мануал "делай как я", - тут так, - здесь вот так и в продакшн. А я не могу поймать причинно - следственную связь, например зачем подключили библиотеку для ajax запроса. Точнее мне интересна цепочка рассуждений, чтобы иметь больше свободы для маневра))

Собственно вопросы:

1. Производительность (сейчас собрал сборку gulp, browserify, babelify, babel + библиотеки redux и react)
Скомпилированный файл уже превысил 1Мб хотя я реализовал только форму авторизации)). Читал, что оптимизация ужимает примерно 200 Кб
Встречал упоминания о других сборщиках вебпак, бабел и т.п.
Они чем-то кардинально отличаются?
(довольно давно работаю с гулп, есть хорошая сборка под верстку, не увидел преимуществ в других компиляторах)
Они есть?

По АПИ с которым мне нужно работать, приложение должно находиться на нескольких страницах. Хранилище состояний (которое redux), будет помнить данные при переходе по страницам (при условии, что я буду делать его импорт для нужных мне компонентов) или его нужно записывать в localstorage?

2. Стили. Вроде как есть возможность писать стили прямо в jsx, однако мне не очень нравится этот вариант, так как привык использовать scss, а упоминаний про возможность компиляции препроцессоров из jsx не встречал, а примеры которые видел, кажутся неудобными
Как Вы поступаете? если прямо в jsx, то аргументируйте, пожалуйста.

3. Посоветуйте, пожалуйста, сборку и набор библиотек, под задачи которые мне предстоит решить:
(сейчас остановился на связке gulp react redux middleware, планирую стили по старинке выносить в отдельный файл)
1) авторизация и отслеживание сессии (если больше 10 минут неактивен, то сессия окончена)
2) взаимодействие с google API (построение маршрута для транспорта, создание для него же контрольных точек на карте)
3) Построение графиков
4) Работа с svg графикой
5) Работа с анимацией, часть планирую решить с помощью CSS (раньше всегда решал связкой jq и классов), Где-то видел в реакте есть свой набор функций для анимации и подозреваю, что там тоже нужно подключать библиотеки.
p.s. сегодня наткнулся на мануал использования webpack и gulp одновременно на одном проекте
оправдан ли такой симбиоз (webpack vs gulp) ?



Спасибо, за помощь

Answer 1

[Максим]

с использованием разных библиотек для ajax запроса и это не считая jqwerry и middleware

Про jquery, я так понимаю вы имеете ввиду $.ajax ? А вот про middleware... (может быть не до конца понимаете, что это такое?)

По вопросам:
1. Производительность
А как в вашей сборке жмется конечный файл?

сейчас собрал сборку gulp, browserify, babelify, babel + библиотеки redux и react

Не увидел здесь uglifyJS или что-нибудь подобное...

Многие собирают webpack'ом, (для продакшен версии используя флаг -p, который в свою очередь.. бинго! Запускает разные "сжималки" кода. Не буду вас путать, но по-моему там тоже uglifyjs)

2. Стили
Стили, это стили. Как вам нравится, так и пишите. Собирайте их хоть gulp'ом, хоть webpack'ом... Разницы нет.

3. Посоветуйте, пожалуйста, сборку и набор библиотек, под задачи которые мне предстоит решить:
К сожалению, могу только подсказать проверенную на проекте либу для построения графиков (не очень крутая и разных типов графиков не так много, но неплохо настраивается и можно быстро разобраться)

сегодня наткнулся на мануал использования webpack и gulp одновременно на одном проекте

Оправдан. Если вам удобно какие-то таски прогонять через gulp, почему нет? Если сможете все, что делаете gulp'ом сделать на webpacke, то используйте только его.

P.S. По поводу сборок. Брать чужую сборку обычно вредно (так как взяли, запустили, а коснись чего - неизвестно как это работает). Особенно, если сборка большая. Вот хороший пример большой и сложной "сборки". Чтобы понять как там все работает, потребуется порядком времени. А нужно ли будет вам все то, что автор туда накрутил? Поэтому, в качестве ознакомления, можно и посмотреть.

P.P.S. Даже минимальная create-react-app сборка имеет немало всего интересного "под капотом". Поэтому, я за то, чтобы к сборке подходили осознанно, и лучше своей - придумать сложно. Опять же, "своя" появляется далеко не сразу, поэтому просто начните делать приложение.

Answer 2

[ummahusla]

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