Используйте Model-View-ViewModel, чтобы сделать код чище во Flutter из Dart Streams

1656600491 ispolzujte model view viewmodel chtoby sdelat kod chishhe vo flutter iz dart

от QuickBird Studios

1*9spr-LhRLN2uWPcPqnvvZA

Распространенная проблема при разработке программ является то, что вы получаете слишком сложные классы. Эти классы содержат логику просмотра и бизнес-логику. Оба настолько переплетены, что невозможно проверить их самостоятельно. Читабельность кода страдает и будущие изменения кода трудно реализовать.

Поскольку у Flutter почти нет ограничений для вашей архитектуры, столкнуться с этой проблемой достаточно легко. Некоторые разработчики записывают весь свой код в Widget, пока не осознают, какой беспорядок они создали. Повторное использование кода в других проектах кажется невозможным, и, наконец, вы пишете большую часть своего кода дважды. Model-View-ViewModel (MVVM) пытается решить это, разделяя бизнес-логику и детали просмотра.

В этой статье мы покажем вам, как может выглядеть MVVM из Flutter. Мы создадим функциональную реактивную ViewModel с помощью Dart’s Stream API.

1*yXqTw6EdqmA1pewkAFvHGQ

Модель-Вид-Модель просмотра

Прежде чем мы рассмотрим любой код, мы должны получить базовое понимание MVVM. Если вы знакомы с MVVM, можно пропустить эту часть.

Основная цель MVVM – переместить как можно большую часть состояния и логики из View в отдельную сущность. Это название, данное этой сущности, является ViewModel. ViewModel также содержит бизнес-логику. Он служит посредником между Взглядом и Моделью.

1*A87nt_oqnajSSejzJHGY5w
MVVM: Model-View-ViewModel

ViewModel имеет в основном две ответственности:

  • он реагирует на ввод пользователя (например, изменяя модель, инициируя сетевые запросы или маршрутизируя на разные экраны)
  • он предлагает исходные данные, на которые View может подписаться

Представление не содержит никакой бизнес-логики. Это обязанности представления:

  • он реагирует на новые исходные состояния ViewModel и воспроизводит их соответственно (например, показывая строку в текстовом поле)
  • он сообщает ViewModel о вводе новых пользователей (например, нажатие кнопок, изменении текста, касании экрана)

В отличие от популярных подходов MVC, Fragment/Activity/UIViewController или Widget не содержат бизнес-логики в MVVM. Это скромный вид, отображающий исходные состояния ViewModel. ViewModel делает не знать Вид (отличие от форм MVP и MVC). Он предлагает исходные состояния, которые наблюдает View:

1*vO41CcfdKftvklRsFt4sWQ
Интерфейс ввода-вывода ViewModel

MVVM в Flutter

В Flutter виджет представляет представление MVVM. Бизнес логика находится в отдельном классе ViewModel. ViewModel полностью не зависит от платформы. Он не содержит зависимости от Flutter и может быть легко использован повторно, например, в веб-проекте.

Это одна из самых больших полномочий MVVM. Мы можем создать мобильное приложение и веб-сайт, которые имеют одинаковую ViewModel. Вам не нужно дважды изобретать и писать логику.

Пример: виджет подписки на электронную почту

Давайте рассмотрим пример. Мы введем форму регистрации на рассылку с текстовым полем электронной почты и кнопкой отправки. Кнопка выключена, и пользователь видит ошибку, если электронное письмо недействительно:

0*_90H8ZlAkMucYABz

Уродливый способ

Без определенной архитектуры бизнес-логика и текущее состояние являются частью виджета. Это может выглядеть примерно так:

Проблема состоит в том, что логика просмотра, состояние просмотра и бизнес-логика перемешаны. Это приводит к нескольким проблемам:

  1. Трудно провести модульный тест
  2. Другие проекты Dart не могут повторно использовать бизнес-логику, поскольку она переплетается с логикой просмотра, что зависит от Flutter.
  3. Этот стиль очень скоро запутается, и вы получите огромные виджетые классы.

Давайте посмотрим, как мы можем улучшить это…

Решения по MVVM

Как пояснялось выше, ViewModel имеет входные и выходные параметры. Мы добавим ‘введение‘ или ‘выходпрефикс ‘ для наглядности.

Все входы есть Sinks. Представление может использовать их для вставки данных в ViewModel. Все выходы есть Streams. Представление может слушать изменения, подписавшись на Streams. Интерфейс нашей ViewModel выглядит так:

Мы используем a StreamController как вход Sink. Это StreamControllerдает поток, который мы можем использовать внутри для обработки этих событий ввода.

Привязка представления к ViewModel

Итак, как мы предоставляем входящие данные и обрабатываем исходные события? Чтобы ввести входные значения ViewModel, мы вставляем их в ViewModel Sinks. Мы привяжем виджет к ViewModel. В этом случае мы вставляем текст TextField всякий раз, когда он меняется.

Вы слушаете исходные данные ViewModel, подписавшись на Output-Потоки.

Flutter предоставляет действительно крутой виджет под названием StreamBuilder который будет обновляться каждый раз, когда a Поток придает новое значение. Мы не звоним setState когда-то снова!
The StreamBuilder builder метод дает вам снимок всякий раз, когда он строится. Этот снимок содержит информацию о потоке, его данных и ошибках. Если наш поток не выдает никакого значения, snapshot.data будет нулевым. Поэтому будьте осторожны.

БЫСТРЫЙ СОВЕТ: Попытайтесь помочь компилятору Dart во время работы с потоками. Добавьте все необходимые общие типы, чтобы избежать ошибок при выполнении.

Здесь вы можете увидеть всю картину:

Как видите, единственная ответственность View – это воспроизведение исходных данных и предоставление входных данных ViewModel. Поэтому наш виджет очень тонок и легко читается.

Вывод

Мы начинали с MVVM в родном мире и думали, будет ли он работать с Flutter. Испытав его, мы можем сказать: MVVM также отлично подходит для Flutter.

Нам нравится, как хорошо логика View отделена от бизнес-логики. Нам нравится, как легко модули ViewModels можно тестировать. И нам нравится, как Dart ViewModels можно совместно использовать с другими платформами, использующими Dart.

Stream-API требуется некоторое время, чтобы привыкнуть к нему, но затем он чувствует себя очень гладким. Для более сложных задач мы использовали RxDart. Это добавляет функциональность к стандартному Stream-API.

Если вы просто взломаете небольшую программу, то обычный подход «положите все в один класс» может быть проще. Однако если вы планируете создать большее приложение, архитектурой для вас может быть MVVM.

Первоначально опубликовано на quickbirdstudios.com 12 июня 2018 года.

Добавить комментарий

Ваш адрес email не будет опубликован.