Автор оригинала: FreeCodeCamp Community Member.
Шон Маккей
Дорожная карта для разработки приложений с государственными машинами и статухартами
Почему государственное управление кажется особенно сложно в JavaScript? Это присущая сложность современных приложений, или только инструменты? Как другие области инженерии разработают надежные и предсказуемые системы? Можно ли нарисовать систему и преобразовать его в код и наоборот?
Давайте исследуем переход парадигмы в государственном управлении в направлении визуально проектирования систем с Государственные машины & statecharts Отказ
Концепции> Libs.
ГОСУДАРСТВЕННОЕ УПРАВЛЕНИЕ БЫЛО У меня в голове на некоторое время. Я экспериментировал с различными библиотеками государственного управления: Flux, Realux, Redux, DVA, Vuex, Mobx, а также Мой собственный Отказ
Там нет смысла, который утверждает, что это решение 10x. Государственные LIBS – это разные ароматы с теми же ингредиентами. Они являются частью головоломки – они облегчают синхронизацию и подключать данные.
Решения, которые требуют нашего сосредоточиться в следующем концерн на большей картинке:
Нам нужно поправляться в Системы планирования и проектирования Отказ
Разбить все вещи
Подумайте о пользовательском интерфейсе, который вы бы рассмотрели Элегантный Отказ Что-то построенное для выдержания заграждения случайных взаимодействий пользователей – вы знаете, вид непредсказуемости, возникающий, когда пользователь толкает кнопку более раз, чем ожидалось, взаимодействует с входами в неожиданном порядке или иным образом приводит к тому, что вы подвергаете сомнению свою веру в человечество. Настоящая жизнь трудна на системах.
Я предскажу проект, о котором вы думаете.
Хорошо… Вы, вероятно, не думаете о том, что что-то построенное для Интернета, где философия кажется «двигаться быстро и сломать вещи».
Судя по частоте обновлений, вы, вероятно, не думаете о мобильном телефоне.
Вы, вероятно, даже не думаете о чем-то построенном недавно. Мы не обязательно, кажется, поправляются на создание надежных продуктов.
Я думаю, что знаю, о чем ты думаешь …
Я прав? ….Нет?
Вы можете даже не признать это как Sony Walkman 1980-х годов.
Будучи ребенком, я получил кассетный плеер, как это от друга, который обновил до портативного CD-плеер. Я понимаю, что некоторые младшие читатели могут найти упоминание об обоих этих устройствах, незнакомых – подумайте о Walkman в качестве iPhone, но с большей кнопкой и большим деструктивным потенциалом. Моя основная миссия: сломай ее.
Я бы попробовал все комбинации кнопок, чтобы увидеть, что может случиться:
- Попробуйте извлечь, когда лента была быстрой переадресацией
- Держать быстро вперед и перемотать в то же время
Попробуйте, как я мог, Sony Walkman провел лучше, чем большинство сайтов сегодня.
Инженерные интерфейсы
Электроника, как Walkman, выдержал первоснабжение пользовательского тестирования без какой-либо емкости, чтобы скрыть или отключить элементы пользовательского интерфейса. Любая кнопка может быть нажата в любое время, что все может произойти. И все же это казалось неразрушимый Отказ
Это привело меня к удивлению:
Возможно, электроника предлагает лучшую парадигму для того, как мы можем создавать интерфейсы в Интернете.
Что мы можем узнать из древние Процесс дизайна электроники? Как мы можем лучше инженер Приложения? Марти, нам нужно вернуться в будущее!
Электроника и Интернет
Может ли электроника научит нам лучший способ создавать приложения в браузере?
Подумайте о том, что Компоненты Произвел один из самых значительных сдвигов в веб-разработке за последние пять лет. Возможно, есть другие концепции, которые мы можем одолжить в электротехнике?
Как веб-разработчики, у нас было это хорошо. Нравиться. Действительно хорошо. Нашел ошибку? Разверните обновление на свой сервер в течение часа.
Другие области техники не так прощают. Проблема в оборудовании часто приводит к устройству, идущей в мусорное ведро. Встроенные разработчики должны быть осторожны, чтобы обеспечить обновление прошивки не стеснут батарею или разбиванию всех существующих устройств.
У веб-разработчиков роскошь быть безрассудным.
Не говоря уже о том, что разработчики приложений редко сталкиваются с тем же ограничениями ресурсов, что и создатели электронных устройств. Когда в последний раз ваш основной фокус был Производительность и использование памяти вместо того, чтобы просто сделать чертовски работать? Порог 60 кадров в секунду – низкий бар. Но бар поднимается, когда мы начинаем строить все более сложные приложения для бега на менее мощных мобильных устройствах и IOT-устройств. Мы граничаем по инженерной проблеме, что инженеры низкоуровневые испытали на протяжении десятилетий.
Ограничения породы творчества Отказ Ограничения приводят к лучшему дизайну.
Чтобы увидеть, как охватывающие ограничения могут привести к лучшему дизайну, нам нужно будет возвращаться к основным основным основным основаниям.
Ye старые/новые основные основы управления
Направление разговоров в веб-сообществе имеет тенденцию склоняться к пакетам NPM, а не фундаментальными принципами информатики.
Инженеры не спрашивают: «Какая библиотека лучше? столько, сколько они спрашивают: «Как мы создаем лучшую систему»?
Мы можем начать с некоторых основных принципов хорошего дизайна:
- различать неопределенный данные и конечный состояния
- ограничить возможные переходы из одного состояния в другое
- Дизайн визуально
Я буду работать через них вместе с моим собственным путем и 8 реализаций, которые последовали.
1. Состояние
В программных системах разница между Государство и данные размыто Они оба живут в памяти, и поэтому лечат одинаково.
В реакции, Государство и данные Поделитесь тем же именем и механизмам:
- Получение:
это - Хранение:
this.state = {} - Обновление:
this.setState (NextState)
В электронике над различием меньше путаницы между Государство и данные Отказ
Государство Представляет собой конечное число режимов, которые система может быть включена, часто определяется самой схемой. Для нашего Walkman думайте «играть», «остановился», «изгнан». Как «режим» или «конфигурация», состояние исчисляется.
Данные, С другой стороны, хранятся в памяти с почти бесконечным набором возможных настроек. Для нашего Walkman подумайте о треке, которая играет, «песня 2». Данные, как музыка, могут иметь бесконечные возможности.
Независимо от этого DataLoader Приведенное ниже компонент, состояние может генерировать только ограниченный набор просмотров: «Загрузка», «загружено» или «Ошибка».
Разделительное состояние и данные могут привести к меньшему путанице и позволяет нам построить приложения на основе Конечные государственные машины .
2. Состояние конечно
Разработчики электроники давно известны, что предсказуемый интерфейс является одним из ограниченного и контролируемого количества состояний. Без контролируемого количества состояний системы становятся трудными для отладки и невозможны тщательно тестировать.
На конечном состоянии состояния явно определены состояния. Переходы набор возможных События Вы можете вызвать движение между состояниями.
В качестве примера, вызвав переход с событием «Стоп», будет перемещать состояние для «остановленного».
В реакции мы могли бы определить базовый Walkman, как имея как минимум два состояния: «Остановился» или «играть».
Проверьте это CodeSandbox Отказ
В конечной состоянии система всегда в одной из возможных конфигураций. Взгляд не имеет возможности быть чем-то, кроме «играть» или «прекращено». Тестирование Оба могут дать нам уверенность в системе работает так, как она должна.
3. Управлять сложностью в штатных машинах
Давайте посмотрим, что произойдет, когда мы начнем добавлять два новых состояния на пример состояния: «Перемотание» и «FastForwarding».
Когда государства эквивалентны, они обманчиво легко добавить. Каждое состояние похоже на его модуль, который может быть разработан и протестирован в изоляции. Но будьте осторожны, государственные переходы не всегда должны быть возможными.
Мы должны беспокоиться о неконтролируемые переходы между государствами.
Может быть, вы поймали это. Мы представили ошибку выше. Найдите минуту и посмотрите, можете ли вы обнаружить, что пошло не так.
4. Охранные переходы
Кажется, кассета все запутана, как мы позволили пользователям прыгать между перемотание и FastForwarding без остановки ленты между ними.
Как решение, мы можем добавить охранники к нашим государственным переходам. Охранники – это условия, которые должны быть выполнены, чтобы произойти переход. В качестве примера мы можем гарантировать, что события FastForward , Перемотка И Играть Может только срабатывать, когда состояние «остановлено».
Неожиданные государственные переходы обязаны, если мы не пересмотрим, как мы планируем и разработали наше государственное управление.
Как мы добавляем дополнительные состояния, такие как выбрасывается Мы должны подумать, через какую государственные переходы могут быть допущены и при каких условиях. С Walkman вы можете извлечь ленту, нажав Stop, пока лента находится в режиме остановки. Чтобы добавить эту функцию, мы должны добавить еще более охранников и определить, какие переходы возможны.
Вероятность Необработанные государственные комбинации Добавлены умножки как дополнительные состояния. Это не масштабируемое решение. Каждое дополнительное состояние приводит к проверке всех переходных охранников.
Он начинает чувствовать себя больше похоже на состояние, управляет вами.
Проблема с управляющими охранниками связана с дорогими состояния: «Остановился», «играя», «перемотание».
Идеальная структура данных для состояния не является строкой или объектом.
Но тогда что это?
5. Штат – график
Идеальная структура данных для представления состояния часто является графиком. Графики государства, широко известны как Государственные диаграммы , предоставьте интуитивно понятный способ разработки, визуализации и управления переходами состояния на каждом узле.
Это не новые новости – электронные инженеры используют диаграммы состояния для описания сложных систем на протяжении десятилетий.
Давайте посмотрим на пример в Интернете. Функции AWS STAP обеспечивают визуальный интерфейс для графики рабочего процесса приложения. Каждый узел контролирует лямбда – удаленную функцию, вызываемую в облаке – с выходом каждой функции, запускающей вход следующего.
В приведенном выше примере, понятно, как действия пользователя перемещаются через каждый шаг, включая возможные ошибки и как их обрабатывать. Добавление дополнительных шагов не приводит к тому, что экспоненциальное увеличение сложности.
Инженер может отметить, сколько шаговых функций общего с ПЛК (Программный логический контроллер) Блок-диаграммы Отказ Дизайнер может заметить, сколько у них общего с рабочий процесс Диаграммы. Не должен так, как мы проектировали государство, более распространенные с тем, как мы планируем приложения?
6. Леса на государственных графах
Графики состояния становятся лесами для вашего приложения.
В качестве примера государственный график нашего Walkman может вызвать более визуально понятно и доступное представление.
Без отличия в коде в отношении охранников, мы можем сказать, что нет возможности прыгать от «перемотки» в любое другое состояние, но «прекращено». Вместо того, чтобы очистить все переходы, ваш интерфейс не должен делать, вы выкладываете то, что он может сделать. Разработка сдвиги от оборона снизу вверх Кодирующий подход к сверху вниз Проектирование подхода. Этот сдвиг один – 10x.
Графики состояния более интуитивно понятны, более доступны для отладки и более способны поглощать изменения в требованиях. Наряду с государственными машинами изменения в каждом состоянии могут быть изолированы из их соседних состояний. Не говоря уже о том, что большая часть сложной переходной «охраны» логики может быть включена в визуально понятном формате.
К сожалению, государственные графики могут быть типинговой временной бомбой.
Плотно связанные графики не масштабируются. Подумайте о том, что произойдет, если мы добавили еще 4 состояния на график выше. Читабельность уменьшается, и повторение увеличивается, с запутанными стрелками, указывающими во всех направлениях, конкурирующих за пространство. Это спагетификация из государственного графа известен как Государственный взрыв Отказ
К счастью, есть способ уменьшить визуальную сложность проектирования сложных государственных графов с использованием формализованного способа описания систем: давайте исследовать statecharts Отказ
7. Мастер Statecharts.
Я впервые узнал о статехартах от Презентация Luca Matteis о том, как моделировать поведение приложений Redux, используя statecharts У Vancouver React Meetup. На следующий день на работе я поднял эту «новую» парадигму для государственного управления, только чтобы найти многие из моих инженерных коллег, уже знакомы с концепцией. Я работаю на IOT на базе компании рядом с множеством аппаратных и встроенных разработчиков. Мы нанимаем 😉
Концепция statechart датируется 1987 годами, когда математик Давид Харел опубликовал бумага По визуально описывающим сложные системы, такие как ниже пример кварцевых часов.
Statecharts как интуитивно понятны и легко освоить, как только вы понимаете язык.
Statecharts внедряет множество новых типов государства:
- Первоначальное состояние – начальное состояние отмечено точкой со стрелкой.
- Вложенные состояния – Государства, которые имеют доступ к переходам их родителя.
- Параллельные состояния – Два несадоксных состояния, представленные пунктирными линиями.
- Государство истории – состояние, которое вспоминает и может вернуться к своему предыдущему значению.
Кроме того, statecharts может охватывать как и когда Переходы & Действия срабатывают:
- Переход – Функция, которая вызывает изменение состояния на основе именованного событие Отказ ” Остановился «→ Переход (« Play ») →« Игра »
- охрана – состояние, которое должно быть выполнено для произошедшего перехода. Например, «PLAY» не может быть вызвана, если лента не присутствует, или лента на ее конце. «Остановился» → Переход («PLAY») [Hastape] → «Игра». Несколько переходов могут быть возможными, учитывая заказ.
- Действие – триггеры, которые происходят, основанные на изменении государства. Например, вызвав ленту, чтобы начать играть, когда состояние входит в «Игра». Действия могут возникнуть «нанесение] и/или`onexit`.
Переписывая пример Walkman в качестве Statechart удаляет избыточность, найденную в государственном графике. Обратите внимание, как больше нет необходимости повторения с «Стоп». StateCharts масштабируемым – не сложно добавлять дополнительные параллельные состояния, такие как «запись» и «громкость».
Statecharts – это больше, чем просто концепция для Визуально описание приложений.
StateCharts может генерировать штатные машины, которые в целом приложение.
Вы можете конвертировать Visuals в код и наоборот. Просмотрите логику приложения как диаграмму или нарисуйте ее.
8. Statechart инструменты
Statecharts предлагает многообещающее будущее для искренне Проектирование Системы – а не только на бумаге. Хотя инструменты были вокруг для других языков программирования, JavaScript только начинает показывать бум в statechart allook.
У разработчиков C & Java есть оснащение для кодирования и наряду с stestecharts. В качестве примера Yakindu statechart Инструменты Приносит вместе миры визуального дизайна и кода. Я недавно узнал Якинду также включает в себя Генератор Tymdercript Code .
Тот же инструмент, наконец, становится доступным для JavaScript.
Эскиз системы Обеспечивает способ проектирования систем в размерах, которые затем могут быть использованы для прототипа в JavaScript. В то время как эскиз системы еще не поддерживают Действия или гвардии Я нашел это очень полезным для прототипирования и тестирования государственных графиков.
Эскизные системы позволяют экспортировать свои диаграммы на Xstate , библиотека JavaScript на основе Statechart с его визуализацией и кликабельным состоянием прототипирования инструмента.
Представьте себе более продвинутую инструменты в вашем редакторе. Представьте себе свой рабочий процесс, когда вы переключаетесь между дизайном и вручную вручную вручную логику приложения. Стоит для работы, нам придется вставлять в качестве сообщества, чтобы продвинуть инструментальную, библиотеку и плагин редактора, который мы хотим улучшить поддержку, используя statecharts.
Заключение
Сложность поднялась на нас в сообществе JavaScript. Я не думаю, что мы были готовы к этому. Я признаю, что мне потребовалось много времени, чтобы хорошо добраться до планирование Приложения. Я бы набросал компонент дерево и некоторую форму состояния. Смотрите прототипы итерации, итерации. Но как я мог бы быть любезным в планировании приложений без формального визуального языка для проектирования диаграмм состояния?
Долгое время я признаюсь, что я подошел к государственному управлению больше похоже на мистическое искусство. Я не знал, что из других областей компьютерных наук было известно из других областей информатики с длительной историей строительных и управляющих сложных системах. Я вырос, чтобы понять, что есть ценность в поисках прошлого, а также смотреть в сторону на полях машиностроения вокруг нас.
Мы можем научиться у инженеров, которые впервые и разработанные десятилетиями решениями для создания сложных – но предсказуемых – систем. Мы можем строить инструменты и библиотеки как экосистему для поддержки визуального дизайна логики приложения. И мы сделаем это, потому что JavaScript требуется все это.
Будущее проектирования приложений в JavaScript выглядит ярче, чем когда-либо. В этой статье все были очень высоким уровнем и, вероятно, оставили больше вопросов, чем ответов. В Часть 2 Я хотел бы выглядеть более подробно на шаблонах для использования statecharts с компонентами.
Оригинал: “https://www.freecodecamp.org/news/how-to-visually-design-state-in-javascript-3a6a1aadab2b/”