Как читатели этого блога уже знают, я работаю над средой потокового программирования NoFlo для JavaScript. В последнее время усилия по разработке получили значительную поддержку как от проекта SmarcoS, финансируемого ЕС, так и от работы с клиентами, и поэтому вопрос пользовательского интерфейса проектирования потоков стал еще более актуальным.
В двух словах, потоковое программирование (FBP) — это парадигма, в которой программы создаются из компонентов, имеющих набор определенных входных и выходных портов. Эти порты затем соединяются вместе для создания графика, который определяет логику и поток данных.
Где мы находимся сейчас
На данный момент существует два пользовательских интерфейса, которые можно использовать для визуального определения графиков NoFlo. DrawFBP — это настольное приложение, которое может определять графы программ на основе потоков как для NoFlo, так и для потоков Java и C #.
Это наиболее функционально полный пользовательский интерфейс FBP, но он несколько ограничен возможностями Java для работы с несколькими рабочими столами и невозможностью анализировать информацию, доступную через интерфейс загрузки компонентов NoFlo . В любом случае, это отличное место, чтобы начать изучение разработки NoFlo визуально:
Я работал над пользовательским веб-интерфейсом, специально созданным для NoFlo, под названием noflo-ui . Здесь входные порты находятся слева, а выходные порты — справа. Коробки изображают ArrayPorts:
Интерфейс noflo-ui выигрывает от возможности напрямую общаться с самим NoFlo и получать все метаданные о компонентах и их портах. Текущая итерация была построена с использованием библиотеки jsPlumb и работает также на устройствах с сенсорным экраном. Представьте себе программирование ваших графиков NoFlo на планшете!
Визуализация письменных потоков
В то время как пользовательский интерфейс отсутствует, типичный способ визуализировать NoFlo графики используется на .fbp языке домена специфичный . При этом график, показанный на скриншотах выше, будет записан как:
# Read a file
'package.json' -> IN Read(ReadFile)
# Split the file contents by newlines
Read() OUT -> IN Split(SplitStr)
# Count the packets
Split() OUT -> IN Count(Counter)
# Send the total count to display
Count() COUNT -> IN Display(Output)
# Display also file read errors
Read() ERROR -> IN Display()
Инструмент noflo-graphviz может быть использован для генерации визуальных графов из этого синтаксиса:
В то время как в реальном мире вы, вероятно, захотите визуально редактировать графики, по крайней мере, инструмент graphviz может быть полезен для автоматического создания документации для больших программ на основе потоков.
Потенциальное сотрудничество
Потоковое программирование не является новой идеей, и есть много других доступных реализаций, от языков программирования, таких как Go, до чисто браузерных сред. Библиотека потоков данных предназначена для предоставления общего веб-инструментария для управления потоками в любой среде FBP:
Когда библиотека созревает немного больше, она, вероятно, станет основой для интерфейса редактирования графиков NoFlo.
вдохновение
Ключевая часть создания пользовательского интерфейса для NoFlo должна состоять в том, чтобы сделать основанные на потоке программы более легкими в создании и понимании. Как описано в замечательном выступлении Брета Виктора «Приглашение на принцип» , инструменты разработки могут сделать намного больше, чтобы сделать понятным весь поток программного обеспечения и различные опции и настройки:
Инструменты на основе потокового программирования могут здесь сильно помочь, так как основная логика программы в любом случае изображается в виде визуального графика.
С помощью NoFlo мы даже можем подключить пользовательский интерфейс к уже запущенному программному обеспечению, что позволяет пользователям видеть, что происходит, и вносить изменения во время работы приложения. Подумайте о мнемосхемах на атомных электростанциях, где операторы могут постоянно видеть состояние каждой части процесса.
Внешняя идентичность
Мы создаем что-то новое и захватывающее с NoFlo здесь, и визуальная идентификация также должна отражать это. Не нужно следить за темным внешним видом традиционных IDE!
Рассмотрим эту строчку от Трона: Legacy :
Сетки. Цифровая граница. Я пытался изобразить скопления информации, когда они двигались через компьютер. Как они выглядели? Суд? Мотоциклы? Были ли трассы как автострады? Я продолжал мечтать о мире, который, как я думал, я никогда не увижу. И вот однажды …
Конечно, есть что-то вроде потокового программирования. И именно поэтому текущий пользовательский интерфейс NoFlo имеет отчетливый вид, похожий на Tron .
Другой подход был бы более органичным из того, как Алан Кей описал объектно-ориентированное программирование :
Я думал, что объекты похожи на биологические клетки и / или отдельные компьютеры в сети, способные общаться только с сообщениями.
Сотовая диаграмма потока в документации Spree API также выглядит круто:
Предшествующий уровень техники
Yahoo! Pipes — это то, что большинство людей поднимают, когда я описываю потоковое программирование. У них довольно приятный веб-интерфейс:
Apple Quartz Composer — очень приятная реализация той же концепции, но для настольных компьютеров:
Если бы Apple сделала для iPad версию, удобную для использования пальцами, мы были бы достаточно близки к тому интерфейсу, который необходим NoFlo.
Большая картинка
Проблема большинства существующих потоковых редакторов заключается в том, что они слишком детализированы, что затрудняет расшифровку больших графиков. Конечно, перемещение фрагментов графа в подграфы и использование их в качестве компонентов помогает, но все же сложная программа может быть путаницей в виде перекрещивающихся линий.
К счастью, есть область информационного дизайна, которая уже занялась этой проблемой: транзитные карты .
Если рассматривать транспортную систему большого города как потоковую программу, она состоит из огромного количества узлов и соединений. И все же людям легко понять, как обойти. Достаточно взглянуть на эту часть карты берлинского метро:
Различные тарифные зоны даже очень хорошо соответствуют идее подграфов в FBP .
Здесь есть несколько ключевых моментов:
- Не зацикливайтесь на деталях. У вас есть узлы и связи между ними. Зачем показывать имена портов на этом уровне?
- Используйте цвет. Различные потоки в вашей программе могут быть изображены как их собственные «линии метро»
- Узлы, которые связаны только с одним потоком (например, фильтры и преобразователи), могут быть минимизированы, и больше внимания уделяется узлам, где различные потоки пересекаются
NoFlo 0.3.1 позволит аннотировать соединения в потоке с произвольными «именами маршрутов», которые затем можно назначать цветам для целей визуализации.
Уже существуют некоторые исследования и инструменты для автоматической генерации карт метро . Может быть, некоторые из них можно было бы изменить, чтобы дать интерфейсу NoFlo «птичий глаз» для ваших программ, основанных на потоке?
Движение вперед
Итак, как сделать этот пользовательский интерфейс? Как уже упоминалось, я сейчас создаю программное обеспечение с NoFlo ежедневно, и поэтому, безусловно, необходимо улучшить инструменты. И не только для меня, но и для всех остальных, интересующихся потоковым программированием . На последних сессиях по планированию проекта я уделил этому некоторое время, и поэтому я надеюсь, что мы сможем найти что-то с более-менее работающим пользовательским интерфейсом еще зимой.
Есть много вещей, чтобы рассмотреть:
- Редактирование графиков на настольных компьютерах и планшетах
- Совместное редактирование между несколькими пользователями, возможно, через ShareJS
- Рефакторинг: перемещение частей графа в его собственный подграф или «раздувание» подграфа обратно в основной граф
- Просмотр доступных компонентов и графиков
- Просмотр совместимых типов портов при установлении соединения
- Написание новых компонентов и изменение существующих, возможно, с помощью CodeMirror
- Запуск графика NoFlo и просмотр пакетов, проходящих через разные части
Все это, очевидно, займет много времени, но мы должны увидеть, как далеко мы продвинемся с первой итерацией. Наличие редактора, который люди находят более удобным, чем написание графиков вручную, должно быть первой целью.
Если вы заинтересованы в этом, пожалуйста, следуйте noflo-ui и репозиториям потока данных . Flow-программирования на основе списка рассылки также является отличным местом , чтобы обсудить свои идеи.