Концепция программирования "Flow-based programming" становится все популярней среди программистов. Она основана на принципе построения программы из "процессов", обменивающихся между собой "сообщениями" и выполняющих определенную функцию над входящими данными. Эти процессы можно объединять в "цепочки" и делать из них компоненты, работу которых удобно отслеживать и изменять в случае необходимости. Таким образом мы можем разделить "ход" выполнения программы от ее внутренней логики, что может быть удобнее чем объектно-ориентированный подход.
Проект Noflojs реализует эту возможность для языка JavaScript, как на клиентской стороне (в браузере), так и на серверной (Nodejs).
Концепция визуального программирования очень заманчива для любого уважающего свой труд программиста. Лично я вижу основной плюс в том что меньше устают глаза, но есть и минусы, ведь некоторые алгоритмы можно написать гораздо быстрее или просто скопировать наработанный кусок кода. Хотя в концепции "Текучего программирования" (Flow-based programming, далее FBP) мы можем и даже должны создавать отдельные блоки, не как части каких либо объектов, а как независимые компоненты с тем кодом который хотим использовать в дальнешей несколько раз. Что, как я думаю, весьма заманчиво.
Сам по себе "фреймворк" Noflo является открытым программым обеспечением и его можно свободно скачать с Github-а:
"NoFlo - Visual Control Flows for JavaScript is free software developed by Henri Bergius and backed via Kickstarter."
Создатель Henri Bergius ссылается на работы J. Paul Morrison, который разработал реализацию FBP еще в 1970 году.
Помимо реализации концепции FBP Noflo содержит множество компонентов и библиотек (более 280), к примеру для работы с key-value базой данных Redis. Созданная внутри "фреймворка" программа представляет из себя специальный файл-инструкцию (.fbp) с описанием связей компонентов и их параметры, для чего также можно использовать JSON. Это программа выполняется специальной вируальной машиной построенной на Nodejs на серверной стороне и JavaScript движком в браузере.
NoFlo один из успешных программных стартапов, который прошел сборы на Kickstarter и собрал более 100.000$, что согласитесь весьма большая сумма. Эту сумму они тратят на создание специального визуального редактора на основе концепции Noflo - Flowhub, где они уже реализовали возможность разработки для браузера и Nodejs, и хотят реализовать возможность разработки для моблильных платформ на Java и Objective-C.
Я уже более двух лет успешно и с большим удовольствием программирую на Nodejs в связке Expressjs + q + MongoDB. За это время у меня наработалось несколько шаблонных кусков кода, которые я таскаю из проекта в проект и давно уже думаю выделить их в отдельные компоненты. Новая возможность писать код для сервера в виде "диаграмм" показалась мне очень интересной и я решил попробовать. Начал с простого тестировая технологии, как раз с помощью визуального редактора Flowhub. Для него я создал небольшое интерактивное :) приложение, которое рисует круг в месте где мы дотронулись мышкой или коснулись пальцем.
Хочется сказать, что это еще далеко не финальная версия инструмента Flowhub, но тем не менее она работает, хотя с небольшими глюками. Начну по порядку, и расскажу как я пришел к этому результату.
Первое что я начал делать это попробовал создать какой нибудь HTML объект и задать ему стиль. Сделать это можно двумя способами. Первый это через настройки графа:
Где в поле "Preview content" можно вписать обычный HTML-CSS код, который после сохранения добавится в панель предпросмотра. Здесь же можно задавать CSS-классы для дальнейшего их назначения уже средствами-процессами Noflo.
Второй вариант создать HTML объект это использовать "процессы":
1. Создаем div элемент с помощью процесса CreateElement
2. Теперь нужно добавить наш элемент на сцену, в тело документа. Для этого нужно достать body с помощью GetElement с параметром "selector: body".
3. Можно напрямую соединить div и body, связав их через связь body-out-element и div-in-container. Или можно создать "ноду" AppendElement и совместить их как на gif-ке выше.
4. Чтобы наш элемент был виден на экране нужно задать ему размер и какой нибудь цвет. Сделать это можно через задания аттрибута стиля элемента, и для этого есть отдельный компонент - SetAttribute.
Вот так быстро, просто, а главное наглядно можно создавать различные элементы.
В списке Noflo компонентов-процессов есть наверное все самое необходимое для создания веб-сервиса и даже больше (IndexedDB даже есть), меня удивило наличие CCV ('Finds faces from a canvas or img element.'). Все они логически разделены и чтобы найти нужный надо только правильно сформулировать запрос на его поиск, и даже если вы не найдете то что вам необходимо, то вы всегда можете написать свой собственный, но об этом в другой раз.
Далее, чтобы нам доделать это небольшое приложение, нужно создать объект на котором будет рисоваться наш круг - это "холст" (canvas). Конечно можно было бы создать отдельный div застилизовать его под круг и каким-нибудь образом изменять значение его положения, это тоже интересно, но я хочу сделать это через "холст".
Таким же образом как и с div-ом мы создади наш canvas, которому добавляем заранее созданный класс а также аттрибут высоты, который получем из "тела" документа:
Теперь мы можем приступить к интерактивной части. Создадим два обработчика события на щелчок мыши для тестирования, и на "прикосновение": ListenMouse и ListenTouch. Разбор событий этих двух действий оказывается не тривиальной, но решаемой задачей. Я покажу как это делать только для Touch события. ListenTouch обладает интересными параментами - он имеет выходные события на начало и конец "касания" и передает напрямую координаты перемещения. Эти координаты перемещения можно сразу собирать в специальный объект "точку" - MakePoint (1), которую затем уже использовать для задания координат круга на "холсте". А вот с собитиями не так все просто, данные о начале качания нужно еще "разобрать" из выходящего объекта события (2). Для точного понимая того как выглядит тот или параметр всегда можно его вывести в консоль и посмотреть, сделать это можно с помощью Output.
Первое что мы вынимаем из объекта события TouchEvent это массив с касаниями - touches (3). Затем, ввиду особенностей работы JavaScript мы можем обращаться к массивам как к объектам, таким же образом вынимаем первый элемент массива (4) - отдельное нажатие (Touch) и разбираем его на координаты - clientX, clientY, из которых формируем объект "точка" (5). Нажатие мыши обрабатывается похожим способом, там из объекта MouseEvent нужно вынуть параметры x и y.
А теперь мы можем начать отрисовку круга на нашем "холсте". Сделал я это аналогично примерам которые идут в Flowhub на главной странице профиля, посмотрел, разобрался и просто сделал также. Здесь можно сказать только про специальный компонет Kick, который как бы "подталкивает" выполнение определенного действия, его я использовал для запуска регенерации цвет:
Вот такой опыт работы с визуальным Flow-base programming. Надеюсь и вы узнали, что то новое для себя. Эта концепция очень мне интересно и хотелось бы видеть ее реализации на других языках, таких как C# и AS3.0.
Желаю вам успеха и прятного время провождения. : )
Я уже более двух лет успешно и с большим удовольствием программирую на Nodejs в связке Expressjs + q + MongoDB. За это время у меня наработалось несколько шаблонных кусков кода, которые я таскаю из проекта в проект и давно уже думаю выделить их в отдельные компоненты. Новая возможность писать код для сервера в виде "диаграмм" показалась мне очень интересной и я решил попробовать. Начал с простого тестировая технологии, как раз с помощью визуального редактора Flowhub. Для него я создал небольшое интерактивное :) приложение, которое рисует круг в месте где мы дотронулись мышкой или коснулись пальцем.
Хочется сказать, что это еще далеко не финальная версия инструмента Flowhub, но тем не менее она работает, хотя с небольшими глюками. Начну по порядку, и расскажу как я пришел к этому результату.
Первое что я начал делать это попробовал создать какой нибудь HTML объект и задать ему стиль. Сделать это можно двумя способами. Первый это через настройки графа:
Где в поле "Preview content" можно вписать обычный HTML-CSS код, который после сохранения добавится в панель предпросмотра. Здесь же можно задавать CSS-классы для дальнейшего их назначения уже средствами-процессами Noflo.
Второй вариант создать HTML объект это использовать "процессы":
2. Теперь нужно добавить наш элемент на сцену, в тело документа. Для этого нужно достать body с помощью GetElement с параметром "selector: body".
3. Можно напрямую соединить div и body, связав их через связь body-out-element и div-in-container. Или можно создать "ноду" AppendElement и совместить их как на gif-ке выше.
4. Чтобы наш элемент был виден на экране нужно задать ему размер и какой нибудь цвет. Сделать это можно через задания аттрибута стиля элемента, и для этого есть отдельный компонент - SetAttribute.
Вот так быстро, просто, а главное наглядно можно создавать различные элементы.
В списке Noflo компонентов-процессов есть наверное все самое необходимое для создания веб-сервиса и даже больше (IndexedDB даже есть), меня удивило наличие CCV ('Finds faces from a canvas or img element.'). Все они логически разделены и чтобы найти нужный надо только правильно сформулировать запрос на его поиск, и даже если вы не найдете то что вам необходимо, то вы всегда можете написать свой собственный, но об этом в другой раз.
Далее, чтобы нам доделать это небольшое приложение, нужно создать объект на котором будет рисоваться наш круг - это "холст" (canvas). Конечно можно было бы создать отдельный div застилизовать его под круг и каким-нибудь образом изменять значение его положения, это тоже интересно, но я хочу сделать это через "холст".
Таким же образом как и с div-ом мы создади наш canvas, которому добавляем заранее созданный класс а также аттрибут высоты, который получем из "тела" документа:
Теперь мы можем приступить к интерактивной части. Создадим два обработчика события на щелчок мыши для тестирования, и на "прикосновение": ListenMouse и ListenTouch. Разбор событий этих двух действий оказывается не тривиальной, но решаемой задачей. Я покажу как это делать только для Touch события. ListenTouch обладает интересными параментами - он имеет выходные события на начало и конец "касания" и передает напрямую координаты перемещения. Эти координаты перемещения можно сразу собирать в специальный объект "точку" - MakePoint (1), которую затем уже использовать для задания координат круга на "холсте". А вот с собитиями не так все просто, данные о начале качания нужно еще "разобрать" из выходящего объекта события (2). Для точного понимая того как выглядит тот или параметр всегда можно его вывести в консоль и посмотреть, сделать это можно с помощью Output.
Первое что мы вынимаем из объекта события TouchEvent это массив с касаниями - touches (3). Затем, ввиду особенностей работы JavaScript мы можем обращаться к массивам как к объектам, таким же образом вынимаем первый элемент массива (4) - отдельное нажатие (Touch) и разбираем его на координаты - clientX, clientY, из которых формируем объект "точка" (5). Нажатие мыши обрабатывается похожим способом, там из объекта MouseEvent нужно вынуть параметры x и y.
А теперь мы можем начать отрисовку круга на нашем "холсте". Сделал я это аналогично примерам которые идут в Flowhub на главной странице профиля, посмотрел, разобрался и просто сделал также. Здесь можно сказать только про специальный компонет Kick, который как бы "подталкивает" выполнение определенного действия, его я использовал для запуска регенерации цвет:
Вот такой опыт работы с визуальным Flow-base programming. Надеюсь и вы узнали, что то новое для себя. Эта концепция очень мне интересно и хотелось бы видеть ее реализации на других языках, таких как C# и AS3.0.
Желаю вам успеха и прятного время провождения. : )
Комментариев нет:
Отправить комментарий