- PVSM.RU - https://www.pvsm.ru -
React мы в Voximplant любим и ценим. Вовсе не из-за хайпа (полторы тысячи твитов о новом SDK просто потому, что это React Native) а потому, что фреймворк действительно удобный. Простое дробление интерфейса на маленькие изолированные кусочки – это то, чего так не хватало и Jade/Pug, и Web Components, и даже Angular. Под катом адаптированный перевод статьи, в которой разработчики JetRuby Agency делятся впечатлениями о React: что использовали, что не использовали и что еще только планируют использовать.
Почти год прошел, как мы начали применять ReactJS и переваривать море сопутствующих технологий. И мы здесь, чтобы поделиться с вами своим опытом.
Недавно мы закончили проект, который использовал рендеринг на стороне клиента и API сервер на Rails. Общее впечатление – глубоко положительное.
Что нам понравилось:
Естественно, в этом новом прекрасном мире не все так прекрасно. С рядом проблем мы все же столкнулись:
Несколько технических решений, которые нам кажутся правильными и которые мы хотим рекомендовать:
Что мы хотим попробовать в следующем приложении:
Использовать Babel
Babel уже официально используется React для работы с JSX. Но, даже если вы не используете JSX, Babel все равно является великолепным инструментом для фронтенд разработки. Кто не хочет пользоваться всеми этими крутыми возможностями ES6 и ES7, не дожидаясь их поддержки в браузерах.
Изоморфные приложения
Прямо сейчас это тренд. Если еще не слышали о таком подходе, вот хороший обзор [4] от команды Airbnb. Идея состоит в том, чтобы отрендерить HTML страницу на сервере, передать ее на клиент (с кешированием и CDN) чтобы она мгновенно отобразилась в браузере, а затем, когда загрузиться JavaScript, ReactJS «подцепится» к уже отрендеренной странице и приложение «оживет».
Использовать Functional Reactive Programming (FRP) для координации (как диспатчер Flux)
Есть несколько хороших библиотек для использования FRP в JavaScript (RxJS, Bacon, Kefir). Основная идея в том, чтобы представить переменные как последовательность их изменений, и комбинировать эти изменения с помощью таких функций как map, filter, reduce и функций высшего порядка (функция, которая принимает другую функцию в качестве аргумента). Для пользовательского интерфейса такой подход дает возможность преобразовать последовательность эвентов в поток эвентов и манипулировать такими потоками как объектами.
Один стор для управления состоянием
Дает всего одно, но огромное преимущество. Так как в компонентах React нет локального состояния, то можно рассматривать UI как одну чистую функцию (термин из функционального программирования) которая получает одно состояние на вход в виде аргумента и возвращает пользовательский интерфейс (точнее, его React-представление), соответствующий этому состоянию. На практике такой подход дает возможность отладки в реальном времени, undo и redo, time travel. Здесь можно посмотреть, как это все сделано:
Такой подход выводит тестирование и отладку веб приложений на принципиально новый уровень. Больше не нужны скриншоты и длинный список «шагов воспроизведения». Если вы встретили баг – просто скопируйте текущее состояние приложения и отдайте его разработчикам.
Иммутабельные структуры данных
В ряде случаев их использование позволяет написать более быстрый код. В котором, к тому же, будет меньше багов из-за отсутствия мутабельных объектов и значений. Несмотря на то, что Baobab не предлагает иммутабельных структур данных (только персистентные), он не рекомендует напрямую изменять дерево данных, а предлагает использовать для этого функции API.
Автор изображения (перед катом) – Stefpet [8], Сreative Commons 2.0 [9].
Автор: Voximplant
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/programmirovanie/177143
Ссылки в тексте:
[1] вот эта: http://blog.500tech.com/is-reactjs-fast/
[2] этот: https://github.com/quri/react-bootstrap-datetimepicker
[3] здесь: http://jetruby.com/expertise/pros-and-cons-of-bootstrap-themes/
[4] вот хороший обзор: http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
[5] debug.elm-lang.org/edit/Stamps.elm: http://debug.elm-lang.org/edit/Stamps.elm
[6] www.youtube.com/watch?v=5yHFTN-_mOo: https://www.youtube.com/watch?v=5yHFTN-_mOo
[7] детальное описание: http://blog.circleci.com/local-state-global-concerns/
[8] Stefpet: https://flic.kr/p/ABEZKT
[9] Сreative Commons 2.0: https://creativecommons.org/licenses/by-sa/2.0/
[10] Источник: https://habrahabr.ru/post/308118/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.