Re-frame - руководство по фреймворку для ClojureScript

Re-frame ⎼ — это фреймворк для создания современных веб-приложений с использованием ClojureScript. Он использует React (через Reagent) и обеспечивает функциональный подход к разработке. Вместо обычного MVC Re-frame фокусируется на данных и функциях, которые их преобразуют.

Рефрейминг основан на шести основных концепциях, которые, взаимодействуя, образуют ядро системы.

Re-frame ⎼ — это платформа ClojureScript, предназначенная для создания одностраничных веб-приложений с использованием возможностей React через библиотеку Reagent. Но Re-frame ⎼ — это больше, чем просто оболочка для React. Это зрелая структура, предоставляющая четкую структуру и набор инструментов для управления состоянием приложения, обработки событий, взаимодействия с сервером и многого другого.

В отличие от многих других фреймворков, Re-frame использует функциональный подход, который подчеркивает неизменность данных и чистые функции, что делает приложения более предсказуемыми, простыми в тестировании и обслуживании.

Если вы ищете надежный, масштабируемый и производительный способ создания сложных веб-приложений с использованием ClojureScript, Re-frame — хороший выбор. Вот лишь некоторые из преимуществ, которые он предлагает:

Функциональный подход:Рефрейминг поощряет использование неизменяемых данных и чистых функций, что делает ваш код более декларативным, предсказуемым и простым для тестирования.
Управление состоянием: Re-frame обеспечивает централизованное хранение состояния вашего приложения, делая его доступным из любого места вашего кода.
Односторонний поток данных: Re-frame следует принципу одностороннего потока данных, что упрощает понимание и отслеживание изменений в вашем приложении.
Легко справляйтесь с побочными эффектами: Re-frame предоставляет удобный механизм для обработки побочных эффектов, таких как запросы к серверу, использование localStorage и т д.
Тестируемость: Функциональный подход и четкая структура Re-frame делают тестирование ваших компонентов и всего приложения невероятно простым.
Активное сообщество: Reframe имеет дружелюбное и активное сообщество, готовое помочь по любым вопросам.

Reframe ⎼ — это не просто фреймворк, это целая философия разработки веб-приложений, которая поможет вам создавать быстрые, надежные и простые в обслуживании приложения.

Основные концепции Re-frame

Reframe построен на шести основных концепциях, которые гармонично работают вместе, создавая мощную и элегантную структуру:

DOM

Re-frame использует Reagent, библиотеку ClojureScript, которая предоставляет функциональный интерфейс для использования с React и отвечает за рендеринг компонентов в DOM на основе состояния приложения.
События

События в Re-frame — это векторы, которые представляют намерение пользователя или системы изменить состояние приложения, например нажатие кнопки, отправку формы или получение данных с сервера, и все это можно представить как . Деятельность.
Обработчики событий (Event Handlers)

Обработчики событий — это чистые функции, которые принимают событие и текущее состояние приложения и возвращают новое состояние. Они отвечают за бизнес-логику приложения, реагируя на события и соответствующим образом обновляя состояние.
Подписки (Subscriptions)

Подписки позволяют компонентам Reagent получать доступ к необходимым данным из централизованного хранилища состояний (app-db). Они объявляют, какие данные требуются компоненту, и автоматически обновляются при изменении данных.
Представления (Views)

Представления в Re-frame — это компоненты реагента, отвечающие за рендеринг пользовательского интерфейса. Они получают данные в ответ на операции пользователя путем подписки и запуска событий.
Эффекты (Effects)

Эффекты позволяют Re-frame взаимодействовать с внешним миром, например выполнять HTTP-запросы, использовать localStorage, операции DOM и т д. Они запускаются в ответ на события и могут обновлять состояние приложения.

Эти шесть концепций работают вместе, обеспечивая однонаправленный поток данных и предсказуемое поведение приложения. События, создаваемые пользователем или системой, обрабатываются обработчиками событий, которые обновляют состояние приложения. Подписки реагируют на изменения состояния, обновляя компонент Reagent, который, в свою очередь, обновляется для отображения текущего состояния в DOM.

Работа с базой данных в Re-frame

Re-frame использует централизованное хранилище состояний под названием app-db для управления данными приложения. Обычно app-db представляет собой атомарный код ClojureScript, содержащий неизменяемые структуры данных, которые обеспечивают предсказуемость и упрощают отслеживание изменений.

взаимодействие с app-db происходит только через обработчики событий. Когда происходит событие, соответствующий обработчик получает текущее состояние app-db и возвращает новое состояние взамен старого. Такой подход гарантирует, что состояние приложения всегда согласовано. И это предсказуемо.

чтобы облегчить использование app-db, Re-frame предоставляет множество вспомогательных функций:

re-frame.core/dispatch : Отправлять события в систему. Обработчики событий, привязанные к этим событиям, будут выполняться последовательно.
re-frame.core/subscribe : Создайте подписку на определенную часть статуса app-db. Компоненты, использующие эти подписки, будут автоматически обновляться при изменении соответствующих данных.
re-frame.core/reg-event-db : Зарегистрируйте обработчик событий для обновления app-db. Этот обработчик получает текущее состояние и события app-db и возвращает новое состояние.
re-frame.core/reg-sub : Зарегистрируйте подписку на определенную часть состояния app-db. Подписка получает текущее состояние app-db и возвращает необходимые данные.

Благодаря централизованному хранилищу состояний и функциям, которые с ним работают, Re-frame обеспечивает простой и эффективный способ управления данными приложения. Разработчики могут легко отслеживать изменения состояния, создавать подписки на необходимые данные и обеспечивать согласованность данных во всем приложении.

Следует отметить, что : Re-frame не ограничивает выбор хранилища состояний. Вы можете использовать app-db как единый источник данных или интегрировать его с другими библиотеками управления состоянием, такими как DataScript или posh. Выбор зависит от сложности и требований вашего приложения;

Управление событиями в Re-frame

В Re-frame события играют ключевую роль, выступая в роли триггеров изменения состояния приложения, а компоненты отвечают за обновление состояния, отправляя события, описывающие произошедшие действия. Данные в app-db, в свою очередь, инициируют перерисовку компонента, который подписывается на измененные данные.

События в Re-frame — это просто векторы, где первый элемент — это ключ, определяющий тип события, а остальные элементы — это дополнительные данные, связанные с событием. Например, событие [:add-item "Новая задача"] описывает добавление новой задачи со значением «новая задача".

Для обработки событий Re-frame предоставляет следующие функции:

re-frame.core/dispatch : Отправлять события в систему. Принимает вектор событий в качестве входных данных и помещает его в очередь событий перестроения.
re-frame.core/reg-event-db : Зарегистрируйте обработчик событий, отвечающий за обновление app-db. Этот обработчик получает текущее состояние базы данных приложения и данные событий и возвращает новое состояние базы данных приложения. Важно отметить, что обработчики событий не должны иметь побочных эффектов и должны быть чистыми функциями.
re-frame.core/reg-event-fx : Зарегистрируйте обработчик событий, который может выполнять побочные эффекты, например отправлять запросы на сервер. Эти обработчики получают текущее состояние базы данных приложения и данные событий, но не возвращают новое состояние. Вместо этого они используют re-frame.core/dispatch для отправки новых событий, тем самым обновляя app-db.
re-frame.core/reg-fx : Регистрирует побочные эффекты, которые можно вызвать из обработчиков событий, зарегистрированных с помощью reg-event-fx . Побочные эффекты — это функции, которые взаимодействуют с внешним миром, например отправка запросов AJAX, запись данных в localStorage или взаимодействие с DOM.

Такой подход к управлению событиями обеспечивает четкое разделение обязанностей между компонентами, обработчиками событий и побочными эффектами, что делает код более модульным, тестируемым и простым для понимания.

Создание компонентов с помощью Reagent

Reagent — это легкая библиотека ClojureScript на основе React для создания пользовательских интерфейсов. Re-frame использует Reagent для определения компонентов представления, которые отображают данные из базы данных приложения и отправляют события при взаимодействии с пользователем.

Например, следующий код на Hiccup:

clojure :div {:class "контейнер"} [:h1 "Привет, мир!"] [:p "Это простой компонент-реагент.["]] Привет, мир!

Это простой компонент реагента.

Компонент Reagent просто принимает параметры (props) и возвращает функцию ClojureScript от Hiccup. Чтобы создать компонент, вам необходимо определить функцию, которая принимает необходимые реквизиты и возвращает структуру Hiccup.

Например, следующий код определяет простой компонент task-list , который отображает список задач:

clojure (defn список задач [задача] [:]ul (для [задача-задача] [:li (:описать задачу)]))

Компонент task-list принимает один параметр — вектор tasks , содержащий список задач. for Функция используется для перебора списка задач и создания элемента списка для каждой задачи.

Чтобы использовать компонент [:li] , вы просто вызываете его с соответствующими параметрами:

clojure (deftasks [{:description "Купить молоко"} {:description "Позвонить маме"}]) (задача списка задач)

Видео: Переход на ClojureScript (Пынзару Георге)

Reagent автоматически создаст и обновит элементы DOM, соответствующие структуре Hiccup, возвращаемой компонентом.

Использование React lifecycle методов в Re-frame

Хотя Re-frame продвигает модель программирования, управляемую данными, и стремится свести к минимуму необходимость прямого управления жизненным циклом компонентов React, существуют определенные ситуации, когда требуется доступ к этим методам.

Reagent — это библиотека, которую Reframe использует для построения своей системы представлений, предоставляя механизм взаимодействия с методами жизненного цикла React. В Reagent вы можете использовать функцию task-list для создания компонентов. Эти компоненты «класса» обеспечивают доступ к методам жизненного цикла, аналогам реактивных циклов.

В следующем примере показано, как использовать метод reagent.core/create-class для выполнения операции после установки компонента в DOM:

clojure (defn my-comComponent (reagent.core/create-class {:comComponent-did-mount (fn [this] (js/console.log «Компонент установлен!»)) :reagent-render (fn [:div"Привет, мир!"])}))

В этом примере функция componentDidMount записывает сообщение в консоль браузера после установки компонента.

Важно отметить, что Reframe поощряет использование собственных механизмов (таких как подписки, эффекты и сопрограммы) для управления побочными эффектами, а методы жизненного цикла React следует использовать только тогда, когда функциональность Reframe не может быть применена. Прямо.

Например, вместо использования component-did-mount для получения данных с сервера вы можете использовать подписку Re-frame, которая будет автоматически получать обновленные данные из my-component при изменении.

Использование методов жизненного цикла React в Re-frame требует глубокого понимания как Re-frame, так и React, а неправильное использование этих методов может вызвать неожиданное поведение в вашем приложении и затруднить отладку.

Тестирование приложений Re-frame

Reframe делает тестирование приложений ClojureScript удобным и эффективным благодаря функциональному подходу и чисто функциональной архитектуре. Тесты рефакторинга могут быть сосредоточены на проверке данных и логики приложения, а не полагаться на сложные манипуляции с DOM, как это часто бывает в других средах.

В приложениях Re-frame можно реализовать несколько уровней тестирования:

Тестирование функций:

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

Компоненты реагентов можно протестировать, проверив структуры Иккинга, которые они возвращают. app-db Библиотека предоставляет функции для рендеринга компонентов в виртуальном DOM и тестирования их структуры и поведения.
Интеграционные тесты:

Чтобы протестировать взаимодействие различных частей вашего приложения Re-frame, вы можете использовать такие библиотеки, как clojure.test для моделирования HTTP-запросов, reagent.test для генерации тестовых данных и другие инструменты.

Re-frame также поддерживает концепцию «времени» через clj-http , что позволяет тестировать асинхронные операции и управлять очередями событий.

Преимущества тестирования в Re-frame

Легче писать: Функциональный подход и ориентация на данные делают тесты более краткими и понятными.
Легче поддерживать: Изменения в одной части приложения с меньшей вероятностью повлияют на тестирование других частей.
Повышение надежности: Тщательное тестирование помогает предотвратить ошибки и повысить общую стабильность приложения.

Эффективное тестирование — неотъемлемая часть разработки высококачественных приложений Re-frame. Использование вышеперечисленных инструментов и методов поможет вам создавать надежные и простые в обслуживании приложения.