- PVSM.RU - https://www.pvsm.ru -

Выбираем состав изоморфных React-приложений на следующие 12 месяцев

Друзья, уже шесть часов вечера, последний понедельник августа, а это значит — последняя неделя лета. Давайте подведём итог и немного пофантазируем?

Сейчас формируем некий Isomorphic React App бойлерплейт на следующие 12 месяцев, с которым можно быстро стартовать новые проекты. Пока видим такой набор:

1. React 15.
2. На сервере — Node.js и Express.
3. CSS modules и isomorphic-style-loader [1] для автоматической генерации Critical CSS при Server-side Rendering. Или всё-таки JSS [2]?
4. Redux [3] для взаимодействия внутри приложения. Или всё-таки Relay [4]?
5. Модульное тестирование через AVA [5] и Enzyme [6]. Или всё-таки Jest [7] с его автоматической генераций mock-объекта Browser?
6. UI-тестирование через Nightwatch.js [8] + Browserstack [9].
7. Переводы через react-intl [10] и react-intl-translations-manager [11].
8. Автоматическое определение языка на сервере через пакет accept-language [12].
9. Автоматическое определение геопозиции через пакеты maxmind [13] и ipaddr.js [14].
10. Изоморфный логгер на базе node-bunyan [15].
11. react-document-title [16] для динамического переключения заголовка вкладки.
12. isomorphic-fetch [17] для отправки HTTP-запросов (“AJAX”).
13. webpack 1.x [18] для сборки. Или всё-таки webpack 2 [19]?
14. webpack-dev-server [20] и webpack/hot/dev-server для Hot Module Reload.
15. Long-term Caching статических ресурсов (например: /assets/logo-8cdab5da.png).
16. parallel-webpack [21] для ускорения сборки JavaScript bundle для каждого языка перевода (например: 5 разделов и 10 языков = это уже 50 JavaScript bundles).
17. webpack DllPlugin [22] для оптимизации размера JavaScript bundle.
18. react-router-redux [23] в качестве роутера.
19. ESLint [24] и eslint-config-airbnb [25] с небольшим изменением — не использовать точку с запятой.

Какие пункты можно изменить? Какие добавить? Что можно сделать лучше? Поделитесь своим мнением в комментариях.

В ближайшие дни список может измениться. Да, что там, я обещаю — он изменится, поэтому следите за обновлениями на GitHub [26].

Автор: DenisIzmaylov

Источник [27]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/181205

Ссылки в тексте:

[1] isomorphic-style-loader: https://github.com/kriasoft/isomorphic-style-loader

[2] JSS: https://github.com/cssinjs/jss

[3] Redux: http://redux.js.org/

[4] Relay: https://facebook.github.io/relay/

[5] AVA: https://github.com/avajs/ava

[6] Enzyme: http://airbnb.io/enzyme/

[7] Jest: https://facebook.github.io/jest/

[8] Nightwatch.js: http://nightwatchjs.org/

[9] Browserstack: https://www.browserstack.com/start

[10] react-intl: https://github.com/yahoo/react-intl

[11] react-intl-translations-manager: https://github.com/GertjanReynaert/react-intl-translations-manager

[12] accept-language: https://www.npmjs.com/package/accept-language

[13] maxmind: https://www.npmjs.com/package/maxmind

[14] ipaddr.js: https://www.npmjs.com/package/ipaddr.js

[15] node-bunyan: https://github.com/trentm/node-bunyan

[16] react-document-title: https://github.com/gaearon/react-document-title

[17] isomorphic-fetch: https://github.com/matthew-andrews/isomorphic-fetch

[18] webpack 1.x: http://webpack.github.io/docs/what-is-webpack.html

[19] webpack 2: https://webpack.github.io/docs/roadmap.html

[20] webpack-dev-server: https://webpack.github.io/docs/webpack-dev-server.html

[21] parallel-webpack: https://www.npmjs.com/package/parallel-webpack

[22] webpack DllPlugin: https://robertknight.github.io/posts/webpack-dll-plugins/

[23] react-router-redux: https://github.com/reactjs/react-router-redux

[24] ESLint: http://eslint.org/

[25] eslint-config-airbnb: https://github.com/airbnb/javascript

[26] GitHub: https://github.com/StartupMakers/react-fullstack

[27] Источник: https://habrahabr.ru/post/308782/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best