Как визуально оформить состояние в JavaScript

1656576638 kak vizualno oformit sostoyanie v javascript

от Шона Маккея

Дорожная карта для разработки приложений с автоматами состояний и диаграммами состояний

Aok0bLw6goCsqIi-E0awku8Os9f6qvl969AH
Фото от rawpixel на Unsplash

Почему управление состоянием кажется особенно сложным в JavaScript? Это присуща сложность современных программ или только инструменты? Как другие отрасли техники разрабатывают надежные и предполагаемые системы? Можно ли нарисовать систему и превратить ее в код, и наоборот?

Давайте исследуем изменение парадигмы в управлении состоянием в сторону визуального проектирования систем государственные машины & диаграммы состояния.

Понятие > Библиотеки

Управление государством у меня уже некоторое время. Я экспериментировал с разными библиотеками управления состоянием: Flux, Reflux, Redux, Dva, Vuex, Mobx, а также со своей собственной.

QgmolkLumTmVxfq7iqvnfE61r7hf4cElnIKG

Нет смысла спорить, какое решение 10x. State libs – это разные вкусы с одинаковыми ингредиентами. Они являются частью головоломки – они облегчают синхронизацию и подключение данных.

Решения, требующие нашего внимания, касаются более широкой картины:

Нам нужно стать лучше системы планирования и проектирования.

Сломать все вещи

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

Я предвижу проект, о котором вы думаете.

Ну… вы, наверное, не думаете о чем-то созданном для Интернета, где философия, кажется, состоит в том, чтобы «двигаться быстро и ломать вещи».

Судя по частоте обновлений, вы, наверное, тоже не думаете о мобильном.

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

Кажется, я знаю, о чем ты думаешь.

t8w6rHEwXZ-55I0XjfhIHQhs55ZDjuJV7Flj

Прав? ….Нет?

Вы можете даже не узнать это как Sony Walkman 1980-х годов.

В детстве я получил такой кассетный плеер от друга, который перешел на портативный проигрыватель компакт-дисков. Я понимаю, что некоторым младшим читателям упоминание об обоих этих устройствах может показаться незнакомым — подумайте о Walkman как об iPhone, но с большими кнопками и большим разрушительным потенциалом. Моя главная миссия: сломать это.

Я бы попробовал все комбинации кнопок, чтобы увидеть, что может произойти:

  • Попытайтесь вынуть, когда лента перематывается вперед.
  • Удерживайте быструю перемотку вперед и назад одновременно

Как бы я ни пытался, Sony Walkman держался лучше, чем большинство веб-сайтов сегодня.

Инженерные интерфейсы

Электроника, например Walkman, выдержала испытания пользователями, не имея возможности скрыть или выключить элементы пользовательского интерфейса. Любую кнопку можно было нажать в любой момент, все могло произойти. И все же казалось несокрушимый.

Это побудило меня задуматься:

Возможно, электроника предлагает лучшую парадигму, как мы можем создавать интерфейсы в Интернете.

Чему мы можем научиться с древний процесс проектирования электроники? Как нам лучше инженер приложений? Марти, нам нужно вернуться в будущее!

Электроника и Интернет

Может ли электроника научить нас лучшему способу создания программ в обозревателе?

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

Как веб разработчикам, у нас все хорошо. Обожаю. Действительно хорошо. Нашли ошибку? Разверните обновление на своем сервере в течение часа.

Другие отрасли техники не так уж прощающие. Проблема с оборудованием часто приводит к тому, что устройство попадает в корзину. Разработчики встроенных устройств должны быть осторожны, чтобы убедиться, что обновление микропрограммы не разрядит аккумулятор и не приведет к сбою всех имеющихся устройств.

Веб-разработчики должны роскошь быть безрассудными.

Не говоря уже о том, что разработчики приложений редко сталкивались с теми же ограничениями ресурсов, что и создатели электронных устройств. Когда в последний раз было ваше основное внимание производительность и использование памяти, а не просто заставить эту чертову вещь работать? Порог 60 кадров в секунду – это низкая полоса. Но планка растет, поскольку мы начинаем создавать все более сложные приложения для работы на менее мощных мобильных устройствах и устройствах IoT. Мы примыкаем к инженерной проблеме, с которой инженеры низкого уровня сталкивались десятилетиями.

Ограничения порождают креативность. Ограничения приводят к лучшему дизайну.

Чтобы увидеть, как применение ограничений может привести к лучшему дизайну, нам нужно вернуться к основным основам управления состоянием.

Старые/Новые Основы государственного управления

Направление разговоров в веб-сообществе, как правило, склоняется к пакетам NPM, а не к основным принципам информатики.

Инженеры не спрашивают «какая библиотека лучше? сколько они спрашивают «как нам создать лучшую систему»?

Мы можем начать с некоторых основных принципов хорошего дизайна:

  • различать неопределенные данные и конечный государствах
  • ограничить возможные переходы из одного состояния в другое
  • дизайн визуально

Я проработаю это вместе со своим собственным путем и 8 следующими реализациями.

1. Состояние !== Данные

В программных системах разница между государство и данные размыт. Они оба живут в памяти, и потому относятся к ним одинаково.

в React, государство и данные имеют одинаковое название и механизмы:

  • получение: this.state
  • хранение: this.state = {}
  • обновление: this.setState(nextState)

В электронике меньше путаницы по отличию между ними государство и данные.

государство представляет собой конечное количество режимов, в которых может находиться система – часто определяются самой схемой. Для нашего Walkman подумайте «Воспроизводится», «Остановлено», «Удалено». Как и «режим» или «конфигурация», состояние подвергается счету.

данные, с другой стороны, хранится в памяти с почти нескончаемым набором возможных настроек. Для нашего Walkman вспомните воспроизводимую композицию «Песня 2». Данные, как и музыка могут иметь безграничные возможности.

Что бы это ни было DataLoader компонент ниже, состояние может генерировать только ограниченный набор просмотров: «загрузка», «загружен» или «ошибка».

1qn8vO-gCRq04nCZLSuPHRXBb7O8csOWr7bc

Разделение состояния и данных может привести к меньшей неразберихе и позволяет нам создавать программы на основе конечные автоматы.

2. Состояние конечное

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

В конечном автомате состояния определяются очевидно. Переходы есть набор возможных события вы можете инициировать перемещение между состояниями.

GzMSdQyOzGH82UmnnebDYD4gjx56cInsCWww

Например, инициирование перехода с событием STOP переведет состояние на Остановлено.

В React мы могли бы определить базовый Walkman как минимум два состояния: «Остановлено» или «Воспроизводится».

w9GtPNNc0Qkk7-BLfkNclkArMmbkLlEX0niP

Просмотрите этот CodeSandbox.

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

3. Управляйте сложностью в государственных автоматах

Давайте посмотрим, что происходит, когда мы начинаем добавлять два новых состояния в пример конечного автомата: «Перемотка назад» и «Быстрая перемотка».

eRuPPcRGv7MOZrJ0Jch9H0HUERUksz8iwSQb

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

Мы должны беспокоиться о неконтролируемые переходы между государствами

Может быть, вы поймали. Мы представили ошибку выше. Найдите минутку и посмотрите, сможете ли вы найти, что пошло не так.

4. Охранные переходы

Кажется, что кассета вся запутана, поскольку мы позволили пользователям прыгать между ними. rewinding и fastForwarding не останавливая ленту между ними.

Как решение мы можем добавить охранники к нашим государственным переходам. Охрана – это условия, которые должны быть исполнены, чтобы произошел переход. В качестве примера мы можем убедиться, что события FASTFORWARD , REWIND & PLAY может запускаться только тогда, когда состояние «Остановлено».

-KBLie7LReY9irWrdfGqQrgeDVQUmPTZ12um

Неожиданные изменения состояния произойдут, если мы не переосмыслим способ планирования и проектирования нашего управления состоянием.

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

TNd2gmZ6olbEgYRznbzFd-ULawTF-Px6ceFG

Вероятность комбинации необработанных состояний умножается по мере добавления дополнительных состояний. Это не масштабируемое решение. Каждое дополнительное состояние приводит к проверке всех защитников перехода.

Начинает казаться, что правительство управляет вами.

Проблема с управлением охранниками связана с тем, как представляется состояние: «Остановлено», «Воспроизводится», «Перематывается».

Идеальная структура данных для состояния – это не строчка или объект.

Но тогда что же это такое?

5. Состояние – это график

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

OzKS67LoGJGc4l8Iux99Zp-8mKS9Z7OLEyES

Это не новая новость – электронные инженеры десятилетиями использовали диаграммы состояния для описания сложных систем.

Давайте рассмотрим пример в Интернете. Функции шагов AWS предоставляют визуальный интерфейс для отображения графика рабочего процесса. Каждый узел управляет лямбда-функцией – удаленной функцией, которая называется в облаке – при этом выход каждой функции запускает вход следующей.

w7YWq3WEbXndpgpj8N0aihnKvIlsA26CVD8m
Функции шага AWS

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

Инженер может заметить, как много общего имеют шаговые функции Блок-схемы ПЛК (программного логического контроллера). Дизайнер может заметить, как много у них общего рабочий процесс диаграммы. Разве то, как мы проектируем состояние, не должно иметь больше общего с планом программы?

6. Эшафот на графах состояния

Графики состояния становятся основой для программы.

В качестве примера график состояния нашего Walkman может создать более понятное и доступное представление.

2zAjA1aOXrHbugxcUeQN3WNJjz0W64g5AkNP
График состояния Walkman

Не углубляясь в код, касающийся охранников, мы можем сказать, что не должно быть возможности перейти от «перемотки» к любому другому состоянию, кроме «остановлено». Вместо того чтобы излагать все переходы, которые ваш интерфейс не должен делать, вы выкладывайте, что он может делать. Развитие переходит от обороны снизу вверх подход к кодированию a сверху вниз подход к проектированию. Только это изменение составляет 10 раз.

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

К сожалению, графики состояния могут являться бомбой замедленного действия.

Плотно связанные графики не масштабируются. Подумайте, что произойдет, если мы добавим еще 4 штата к графику выше. Читабельность уменьшается, а повторение увеличивается, а запутанные стрелки, направленные по всем направлениям, соревнуются за пространство. Это спагетификация графа состояния известен как a государственный взрыв.

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

7. Освойте диаграммы состояния

Впервые я узнал диаграммы состояний из презентации Луки Маттеиса о том, как моделировать поведение приложений Redux с помощью диаграмм состояний на Vancouver React Meetup. На следующий день на работе я рассмотрел эту «новую» парадигму государственного управления, но обнаружил, что многие мои коллеги-инженеры уже знакомы с этой концепцией. Я работаю в компании, базирующейся на IOT, вместе со многими разработчиками оборудования и встроенных программ. Берем на работу;)

Концепция диаграммы состояния восходит к 1987 году, когда математик Дэвид Харел опубликовал статью о визуальном описании сложных систем, например, приведенный ниже пример кварцевых часов.

f-quhmLt3aFmT5fJzios3yvARyEjubamkyV6

Диаграммы состояний интуитивно понятны, и их легко овладеть, если вы поймете язык.

zSumkSO2cqGP-rYYmCoLmvfpErtW6GDCVxRz

Диаграммы состояний представляют ряд новых типов состояний:

  • начальное состояние — начальное состояние, обозначенное точкой со стрелкой.
  • вложенные состояния — государства, имеющие доступ к переходам своего отца.
  • параллельные государства — два состояния без прикосновения, изображенные пунктирными линиями.
  • историческое состояние — состояние, что помнит и может вернуться к своему предыдущему значению.
oOZGxYZfej-hZFJR1ABU3NAF4YJAnW-EyyuY

Кроме того, диаграммы состояния могут охватывать, как и когда переходы & действия срабатывают:

  • перехода — функция, запускающая изменение состояния на основе именуемого событие. «Остановлено» → переход (‘Воспроизведение’) → «Воспроизведение»
  • охрана — условие, которое должно быть выполнено, чтобы произошел переход. Например, воспроизведение не может быть запущено, если нет ленты, или если лента находится на конце. «Остановлено» → переход (‘Воспроизвести’) [hasTape] → «Игра». В определенном порядке возможно несколько переходов.
  • действия— триггеры, возникающие на основе изменения состояния. Например, запуск ленты для начала воспроизведения, когда состояние переходит в воспроизведение. Действия могут происходить «onEntry» и/или «onExit».

Переписка примера Walkman в качестве диаграммы состояния удаляет избыточность, найденную в графе состояний. Обратите внимание, что больше не нужно повторять события STOP. Диаграммы состояния масштабируются – несложно добавить дополнительные параллельные состояния, такие как «Запись» и «Громкость».

dG-3oXwGlHH8n-mGMvCh8oKUBtVUd7mRiXD0

Диаграммы состояния – это больше, чем просто концепция визуально описание приложений.

Диаграммы состояний могут генерировать автоматы состояний, лежащие в основе программы.

Вы можете конвертировать визуальные элементы в код и обратно. Просмотрите логику программы в виде диаграммы или нарисуйте ее.

8. Инструменты диаграмм состояния

Диаграммы состояния предлагают настоящее многообещающее будущее проектирование системы – и не только на бумаге. Хотя инструменты существовали для других языков программирования, JavaScript только сейчас начинает показывать бум инструментов диаграмм состояний.

Разработчики C и Java имеют инструменты, доступные для кодирования с диаграммами состояний и рядом. В качестве примера Yakindu Statechart Tools объединяет миры визуального дизайна и кода. Недавно я узнал, что Yakindu также включает в себя генератор кода Typescript.

-zcZ55mMe5L0lysnKeFPXJlGaa7SPR2cIbqz

Тот же инструмент наконец становится доступным и для JavaScript.

Sketch Systems предоставляет способ проектирования систем в расценке, который затем можно использовать для прототипирования JavaScript. Хотя Sketch Systems пока не поддерживает действия или охранникия считаю его очень полезным для создания прототипов и тестирования диаграмм состояния.

YUfyjSO1Fkv-eO2LH6Nf15i--zzzPnY9adkF
https://bit.ly/2lZhqOB

Sketch Systems позволяет экспортировать ваши диаграммы в XState, библиотеку JavaScript на основе диаграмм состояния с ее визуализацией и инструментом прототипирования состояния, которое можно нажимать.

CorF8tAeQ5g4qd3c4F1TkTflhcuUspsI6mi3
https://bit.ly/2uJydt9

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

Вывод

Сложность подкралась к нам в сообществе JavaScript. Я не думаю, что мы были к этому готовы. Я признаю, что мне понадобилось много времени, чтобы стать хорошим планирование приложений. Я бы нарисовал дерево компонентов и некоторую форму состояния. Посмотрите, как прототипы переходят в производство. Но как я мог бы хорошо планировать программы без формализованного визуального языка для разработки диаграмм состояний?

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

Мы можем учиться у инженеров, которые положили начало и разработали десятилетиями старые решения для создания сложных — но предполагаемых — систем. Мы можем использовать инструменты и библиотеки в качестве экосистемы для поддержки визуального дизайна логики программы. И мы это сделаем, потому что JavaScript требует всего этого.

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *