Pull to refresh

Использование аннотаций COLT во front-end разработке

CodeOrchestra corporate blog Website development *JavaScript *
image

COLT/JS (Code Orchestra Livecoding Tool) является пре-процессором JavaScript. Это означает, что для достижения эффекта «живого кодирования», приложению требуется преобразовать исходный код на JavaScript специальным образом так, чтобы можно было делать «горячую-замену» реализации любой функции, как только пользователь изменил ее исходный код и сохранил. Мощь таких преобразований можно применять не только для задачи «живого кодирования», а так же и для других, более простых задач.

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

Аннотации COLT позволяют использовать специальные метки, в виде комментариев, которые подскажут пре-процессору COLT, где что добавить в ваш код на этапе livecoding сессии.

Livecodig сессия — это некий процесс, который начинается, когда пользователь нажимает «зеленую молнию» в COLT. Во время такой сессии COLT «наблюдает» за исходным кодом проекта и в случае его изменения, его преобразует, трансформирует и выкладывает в другую папку (output). Live-сессия так же предполагает открытие хотя бы одного приложения (HTML-страницы) проекта и общение между COLT и такой страницы (Live-connection) для доставки изменений в Run-time.

Аннотации имеют вид комментария, который начинается с символа "@", например /*@edit*/ или //@log. В зависимости от того какую форму комментария вы используете, одно-строчную или много-строчую, может измениться поведение аннотации.

Давайте пройдемся по аннотациям.

Inspectable Аннотации


Часто в процессе Livecoding-а на приходится «тюнить», настраивать значения аргументов и свойств. Иногда хочется иметь визуальный инструмент, форму редактирования таких свойств прямо в запущенном приложении. Добавить такие формы просто — слева от числовой или строковой константы добавьте комментарий /*@edit*/. Перейдите в окно страницы в режиме Live и нажмите комбинацию ctrl+I.

image

Подвигайте «ползунок» и найдите значение, которое вас максимально устраивает.

Использование Inspectable аннотации так же полезно, когда вам нужно подключить дизайнера — нужно «на тюннинг» отдать страницу другому. Так как COLT запускает приложение по сетевому адресу, вы можете добавить таких аннотаций в код и послать ссылку. При изменении значений свойств ваш код будет изменен.

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

Развивая эту мысль, мы добавили в аннотацию Inspectable дополнительные параметры.

name — вы можете назвать ваш параметр.

min — минимальное значение.

max — максимальное значение.

target — jquery код, который покажет с каким объектом вы работаете. Визуально это выглядит как «веревочка», которая тянется от формы к некому элементу страницы.

type (в разработке) — мы будем добавлять разные контролы для редактирования свойств.

enum (в разработке) — список значений.

group (в разработке) — возможность объединять формы в группы.

Для того чтобы добавить параметры в аннотацию вам нужно добавить круглые скобки —

/*@edit(name="",min=0,max=10)*/

Значения разделяются запятой, и имеют вид обычного JavaScript — присваивают значения переменным.

Так же стоит отметить, что аннотации имеют поведение Live, и как только в коде вы добавите/измените параметр аннотации, то форма ввода параметра изменится.

Аннотация @log


Очень простая, но крайне полезная аннотатция. Теперь вместо console.log() вам нужно лишь пометить выражения этой аннотаций.

Например, вам нужно вывести переменную b на консоль.

var b = 2;
var a = /*@log*/ b + 1; // -> 2

Если же вам нужно вывести все выражение, то @log нужно поставить с помощью комментария строки —

var b = 2;
var a = b + 1; //@log // -> 3

Аннотации для livecoding


Для обработки и управления событий жизненного цикла livecoding — обновление кода и файлов, вы можете пометить аннотациями функции JavaScript, и такие фунции будут выполнены при возникновении нужного события.

@live-update — обновление кода или файла
@code-update — обновление только кода
@asset-update — обновление любого файла png, jpg, gif и т.д.
@css-update — обновление стиля
@disable-livecoding — запретить livecoding для какой-то фукнции

Заключение


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

Если у вас есть идеи, какие еще аннотации можно добавить в JS с помощью COLT, или как развить функционал существующих — кидайте идеи в комментарии или в наш треккер.

Скачать COLT можно на сайте codeorchestra.com
Tags:
Hubs:
Total votes 12: ↑10 and ↓2 +8
Views 3.7K
Comments Comments 4

Information

Founded
Location
Сербия
Website
codeorchestra.com
Employees
2–10 employees
Registered