- Учим ДРАКОН по примерам
- Удачный день
- Выход на улицу
- Покупка щенка
- Сесть на поезд
- Пьяная езда в Греции
- Качалка ДО ТЕХ ПОР
- Качалка ПОКА ЕЩЁ
- Качалка в цикле ДЛЯ
- Алгоритм Луна
- Регистрация пользователя
- Перерыв на обед
- Вход через Фейсбук
- Программирование на языке ДРАКОН
- ДРАКОН и JavaScript
- Почему ДРАКОН такой классный
- Текст не оптимален для представления алгоритмов
- Блок-схемы помогают легко проследить поток исполнения
- Блок-схемам не хватает порядка
- ДРАКОН — это графическое структурное программирование
- Преимущества языка ДРАКОН
- Уникальные возможности
- Силуэт
- Царская дорога (happy path)
- Свобода от drag-and-drop
- Лёгкость редактирования
Учим ДРАКОН по примерам
Диаграммы с этой страницы находятся в онлайн-редакторе здесь.
Удачный день
Вот элементарная ДРАКОН-схема. Она показывает простой алгоритм, в котором всего 3 шага:
Название диаграммы находится в самом начале (Удачный день). Начало расположено вверху диаграммы.
В каждом из прямоугольников содержится приказ.
Стрелки не нужны, потому что следующая икона — всегда внизу.
Выход на улицу
Вот алгоритм посложнее. Прямоугольники — это приказы, как и раньше. Сплюснутый ромб содержит вопрос. Диаграмма описывает два случая использования (use case): с дождём и без дождя.
Use case 1: выход на улицу без дождя
Use case 2: выход на улицу под дождём
В языке ДРАКОН не все ответы на вопрос одинаково приятные. Хороший ответ идёт вниз. Плохой ответ идёт вправо.
Use case 2 не такой удачный, как use case 1. Поэтому путь, описывающий use case 2, обходит диаграмму по правой стороне.
Главная вертикаль называется шампуром. Шампур показывает царскую дорогу (happy path).
Покупка щенка
Рассмотрим ещё один пример правила чем правее, тем хуже.
Царская дорога (happy path) — это наиболее успешный сценарий. Он идёт по шампуру. На этой картинке «успех» выражается в покупке щенка.
Иногда слова «хороший» и «плохой» не применимы. В таких случаях шампур должен показывать наиболее вероятный путь через алгоритм.
Сесть на поезд
Когда на диаграмме несколько вертикалей, их нужно отсортировать слева-направо. Наилучший путь должен идти по шампуру. Наихудший — по правому краю. Остальные пути проходят через середину.
Опять-таки, чем правее, тем хуже.
На диаграмме внизу в качесве одного из шагов требуется припарковать автомобиль. Есть три возможности:
- Бесплатная стоянка свободна. Паркуемся бесплатно! Это идеальный сценарий. Он идёт по шампуру.
- Бесплатная стоянка занята, но есть места на платной парковке. Это хуже, но жить можно.
- Свободных мест вокруг станции нет. Это хуже всего. Придётся долго идти пешком. Самое ужасное происходит в правой части диаграммы.
Обратите внимание, что сходные действия расположены на одной горизонтали. Этим показывается их связь. Этот визуальный приём называется общая судьба.
Пьяная езда в Греции
Далеко не на все вопросы можно ответить «да» или «нет». Когда есть несколько вариантов ответа, следует применять икону «Выбор».
В целях повышения читаемости, отсортируйте ответы слева-направо по какому-либо признаку. Например, от малого к большому, от низкого к высокому или от лучшего к худшему.
Качалка ДО ТЕХ ПОР
Для обычного соединения икон стрелки не требуются, достаточно простых линий. Стрелки в ДРАКОНе имеют специальное назначение. Стрелка, которая ведёт вверх, означает цикл.
Мы поднимаем вес, а потом отдыхаем. Повторяем, до тех пор пока не устали.
Важно: мы поднимаем вес хотя бы один раз.
Качалка ПОКА ЕЩЁ
Этот цикл похож на предыдущий. Отличие заключается в том, что мы проверяем условие выхода из цикла до того, как начать.
На данной диаграмме мы даже не начинаем упражнение с весом, если слишком устали после разминки.
Качалка в цикле ДЛЯ
Структура, напоминающая гамбургер, на этой диаграмме — цикл ДЛЯ.
Действия внутри гамбургера повторяются несколько раз. Текст в иконе цикл ДЛЯ имеет обычно следующий вид:
- ДЛЯ каждого человека в комнате
- Или: ДЛЯ каждого числа в последовательности
- Или: Повторить действие Н раз
На данной диаграмме мы повторяем упражнение 10 раз. При этом мы выйдем из цикла, как только устанем. Так что может получиться, что мы сделаем не 10 повторений, а меньше.
Алгоритм Луна
Хватит с нас игрушечных диаграмм. Рассмотрим реальный алгоритм.
Алгоритм Луна применяется для проверки номеров всех банковских карт в мире.
Вот текстовое представление алгоритма.
- Цифры проверяемой последовательности нумеруются справа налево.
- Цифры, оказавшиеся на нечётных местах, остаются без изменений.
- Цифры, стоящие на чётных местах, умножаются на 2.
- Если в результате такого умножения возникает число больше 9, оно заменяется суммой цифр получившегося произведения — однозначным числом, то есть цифрой.
- Все полученные в результате преобразования цифры складываются. Если сумма кратна 10, то исходные данные верны.
Текст может занимать меньше места, чем диаграмма. Но ДРАКОН борется за ясность, а не за компактность. ДРАКОН не прячет сложность. Он не заставляет читателя распаковывать в голове скрытые структуры. Вся сложность показывается в явном виде.
Каждая икона на ДРАКОН-схеме содержит только одну мысль.
Регистрация пользователя
Если и есть такое слово, которое делает ДРАКОН особенным, то это силуэт.
Диаграммы, рассмотренные ранее, — так называемые примитивы. Примитивы подходят для простых случаев. Но реальные проблемы не всегда просты.
Силуэт — это уникальная особенность ДРАКОНа, предназначенная для отображения сложных проблем. Силуэт разбивает проблему на логические части.
Этот видеоролик объясняет, что такое силуэт.
Диаграмма ниже содержит реальную спецификацию для регистрации пользователей в DrakonHub.
Перерыв на обед
Этот силуэт — особенный. В нём есть ветка, которая выполняется несколько раз. Ветка «Перекуси» повторяется, до тех пор пока мы голодны.
Повторение, которое осуществляется при помощи веток силуэта, называется силуэтным циклом.
Вход через Фейсбук
А вот ещё один алгоритм из реальной жизни. Он описывает вход на сайт при помощи аутентификации Фейсбуком.
На многих вебсайтах имеется кнопка «Вход через Фейсбук». Пользователи используют свой Фейсбук-логин, вместо того чтобы придумывать новый пароль для каждого сайта.
Это просто с точки зрения пользователя, но реализация этой простоты требует некоторых хитростей. Данная диаграмма показывает взаимодействие между браузером, сервером веб-приложения и сервером Фейсбука.
Программирование на языке ДРАКОН
ДРАКОН — это графический алгоритмический язык, созданный в космической отрасли. Первоначально аэрокосмические инженеры создавали ДРАКОН, чтобы иметь дело с безумной сложностью систем управления космическими аппаратами. Авторы языка ДРАКОН тщательно спроектировали язык таким образом, чтобы снизить когнитивные усилия при работе с алгоритмами. Каждое правило и каждая функциональная возможность ДРАКОНа помогает людям быстрее понимать программы.
Drakon.Tech принёс язык ДРАКОН с небес на землю, позволяя разработчикам применять эту космическую технологию для веб-приложений.
ДРАКОН и JavaScript
Процесс разработки в Drakon.Tech включает следующие шаги:
- Разработчик рисует Дракон-схемы в Drakon.Tech IDE.
- Генератор кода создаёт JavaScript-функцию для каждой Дракон-схемы (Рис. 1). Drakon.Tech помещает эти функции в JS-файл, который можно выполнить в браузере или Node.js.
Рисунок 1. JavaScript-функция, сгенерированная из Дракон-схемы
Разработчик задаёт логику алгоритма при помощи графических конструкций языка ДРАКОН. Затем разработчик помещает короткие кусочки кода на языке JavaScript в квадратики на диаграмме. При этом нет необходимости в ключевых словах if, else, for и while, потому что ДРАКОН позаботится о ветвлении и циклах.
Почему ДРАКОН такой классный
ДРАКОН кардинально меняет то, как человек воспринимает программы. Это прорыв в представлении алгоритмов. С одной стороны, ДРАКОН показывает логику алгоритма ясным и понятным способом. С другой — ДРАКОН даёт порядок и единообразие.
Текст не оптимален для представления алгоритмов
Структурное программирование, основанное на тексте, задаёт поток исполнения при помощи блоков текста с разным отступом. Текст с отступами подчёркивает древоподобную сущность программы, но при этом возникает необходимость раз за разом решать одну и ту же мысленную задачу. Какая строка следующая?
Современные редакторы кода пытаются облегчить решение этой проблемы при помощи вертикальных линий, которые соединяют начало и конец блока. Хотя вертикальная линия действительно помогает найти начало блока, всё равно приходится делать эту раздражающую работу — находить следующую строку (Рис. 2).
Рисунок 2. Определить, что после betterFoo() идёт bar() — задача нетривиальная.
Блок-схемы помогают легко проследить поток исполнения
Блок-схемы избавляют нас от ненужной работы по поиску следующего шага. На блок-схеме можно найти следующую икону, если просто следовать соединительным линиям (Рис. 3). Более того, читатель может проследить все пути через алгоритм при помощи пальца или мыши. Такой уровень интуитивности недостижим при чисто текстовом программировании.
Рисунок 3. На Дракон-схеме очевидно, что после betterFoo() идёт именно bar().
Блок-схемам не хватает порядка
Несмотря на достоинства визуального программирования, мало кто программирует блок-схемами. Разработчики предпочитают текстовые языки программирования, основанные на отступах.
Главная причина этого — структурное программирование даёт структуру. Традиционные блок-схемы, напротив, не имеют средств для поддержания порядка и поэтому являются графическим аналогом ужасного оператора goto. Слишком легко превратить блок-схему в нечитаемый клубок стрелок и прямоугольников.
ДРАКОН — это графическое структурное программирование
ДРАКОН вводит правила и соглашения, благодаря которым получаются ясные и единообразные диаграммы. Эти правила делают ДРАКОН графическим аналогом стуктурного программирования.
ДРАКОН так же превосходит блок-схемы, как структурное программирование превосходит goto.
Figure 4. ДРАКОН и традиционные блок-схемы
Преимущества языка ДРАКОН
Вот несколько примеров тщательно продуманных правил ДРАКОНа:
- Пересечения линий запрещены. Только это правило в отдельности устраняет половину проблем с блок-схемами.
- Разрешены только прямые вертикальные и горизонтальные линии. Прямые линии под прямыми углами приводят диграммы к единообразному виду, благодаря которому в диаграммах легко ориентироваться.
- Начало диаграммы всегда находится в левом верхнем углу. Читатель всегда знает, откуда начать.
- Время течёт вниз; ветвление идёт вправо. Читатель всегда знает, где следующая икона.
- Применяются обычные линии вместо стрелок.
Эти и другие правила улучшают читаемость диаграмм путём устранения зрительного шума.
Другое преимущество этих правил — единообразие. Пути по диаграмме идут так, как читатель этого ожидает. Например, следующая икона всегда находится под текущей, что убирает необходимость сканировать окружающее пространство, чтобы найти следующий шаг.
Ветвление всегда идёт вправо, и никогда — влево. Такая предсказуемость позволяет увидеть алгоритм сразу, без предварительного изучения структуры диаграммы.
Уникальные возможности
В добавок к улучшенной читаемости, в языке ДРАКОН имеются уникальные возможности, такие как силуэт, а также представление царской дороги через алгоритм (happy path).
Силуэт
Силуэт — это тип диаграммы, который разбивает большой алгоритм на малые логические части (Рис. 5). Силуэт предлагает удобный способ разделить сложную функцию на несколько подфункций, и при этом не создавать отдельные функции. Силуэт следует знаменитой стратегии «разделяй и властвуй» без того, чтобы тратить силы на передачу параметров в функции и получение возвращаемых значений.
Царская дорога (happy path)
Царская дорога на Дракон-схеме идёт по вертикальной линии в левой части диаграммы. Правая сторона диаграммы, в свою очередь, имеет дело с нежелательными ситуациями и ошибками. Это соглашение называется «чем правее, тем хуже».
Если читателю интересна только базовая информация об алгоритме, изучать всю диаграмму не нужно. Достаточно бросить взгляд на её левую часть.
Рисунок 6. Царская дорога в языке ДРАКОН
Свобода от drag-and-drop
Процесс редактированя в Drakon.Tech не использует drag-and-drop. Щелчки мышью заменяют эргономически изматывающие операции по тасканию объектов мышью. Вместо того, чтобы вручную рисовать диаграмму, достаточно щёлкнуть по выделенным точкам на холсте, чтобы дать указания редактору. Диаграмму рисует не человек, а редактор.
Вот почему на создание диаграммы в Drakon.Tech уходит так мало времени.
Лёгкость редактирования
Программирование — это непрерывный процесс улучшения кода, и поэтому традиционные среды разработки, основанные на тексте, предлагают богатые возможности редактирования. Разработчик может перемещать блоки кода при помощи операции копировать-вставить, а также нажимать кнопки «Отменить» и «Повторить». Никакой визуальный редактор не обеспечивает гибкость и лёгкость работы, сравнимую с текстовыми средами разработки. Никакой, кроме Drakon.Tech.
Инструмент выделения нескольких элементов в Drakon.Tech гарантирует, что только логически завершённые части диаграммы можно выделить, скопировать и вставить.
Всё это вместе позволяет редактировать алгоритмы в Drakon.Tech даже быстрее, чем модифицировать код в традиционном текстовом редакторе.