Всегда писал на jQuery. Но вот недавно сделал хелло ворлд на AngularJS, Angular2, React.js, Vue.js. И честно говоря не нашел в них ничего супер крутого. Скажите, пожалуйста, лучше с реальным примером — где jQuery проигрывает ReactJS. Желательно в связке с asp.net mvc/api
Ответ
В реакте другой подход к рендерингу интерфейса. Как любят говорить, интерфейс становится функцией от состояния. Вот это и есть круто. Накручивать реакт на мвц-модель на фронтенде я бы не стал (хотя долго пытался сделать это в связке с mobx). Одним днём, разбираясь с react-apollo (graphql клиент) мне открылось оно - react composition. В этот день, после более года работы с реактом, я, как мне кажется, действительно понял, что такое реакт.
Реакт позволяет абстрагироваться от DOM и в этом большой плюс. Тестировать значительно проще.
Важно понять, что мы входим (русское сообщество ещё, судя по всему, входит, а мировое уже вошло) в эпоху компонентного веба. jquery в него не вписывается. Не зря гугл пропагандирует свои WebComponents. На данный момент это, кажется, ещё более экспериментальная вещь. Тем не менее, однозначно можно сказать, что компонентам быть, а дёрганию дома селекторами не быть.
Реакт становится многократно лучше со следующими технологиями (без них, я бы сказал, бессмысленно его трогать):
0) (от xFloooo) react-loadable упрощает асинхронную подгрузку кода (code-splitting)
1) es6/typescript/flow. Лично я бы порекомендовал Typescript, т.к. библиотека типов значительно больше. Некоторые из них, к сожалению, не всегда оправдываю ожидания полностью, но в целом всё работает довольно хорошо. Наверное, не в strict режиме, дабы не играть в игру "убедим тайпскрипт, что наш код правильно написан).
Использование типизированного языка многократно облегчает задачу дебага реакт-компонентов, в ситуациях когда пропсы перебрасываются от одного компонента к другому, что может повторятся несколько раз подряд. тайпскрипт или флоу сразу же подскажут, какие пропсы поступают в неверном типе. Причём этот типа может быть не только простым скалярным, но и сложным интерфейсом.
2) storybook - чтобы работать над презентационными компонентами в вакууме (а не пытаться их сразу встроить в сайт). Это виртуальное полотно, где мы можем разместить компонент, над которым работаем и смотреть как он себя ведёт и программировать его. И подключать в проект, когда компонент написан, а не в процессе написания.
3) redux/mobx. рекомендую редакс, в основном из-за большой экосистемы и прозрачности работы. typescript-fsa - полностью типизированные экшны!
4) react-router и react-redux-router - практически безальтернативное решение маршрутизации в приложении
4) recompose и паттерны hoc/react-composition/render props
5) styled-components + polished или, возможно, css-in-js типа aphrodite
6) jest для тестирования (вы же пишете тесты?)
7) Для redux-а существует большое количество библиотек, из них я бы хотел выделить
redux-form для форм
redux-fractal / redux-ui для локального стейта контейнеров (можно с лёгкостью использовать копии одного и того же стора (стейт/экшены/редьюсеры) для нескольких контейнеров.
Ну и в довесок:
react-semantic-ui для прототипирования интерфейсов (а может и для продакшна, если настроить dead code elimination). Конечно же, это не единственная библиотека подобного характера, есть ещё antd, react-material-uiи дюжина других. Тот же бутстрап
react-sortable-hoc для быстрого dnd в рамках одного списка
classnames - швейцарский нож для соединения многих имён css классов в одну строку, когда присутствует сложная логика
Что вспомню - допишу
Комментариев нет:
Отправить комментарий