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

    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
    CodeOrchestra
    24,32
    Компания
    Поделиться публикацией

    Комментарии 4

      0
      Смущает количество комментариев к вашим статьям на Хабре. Мне вот очень интересно попробовать COLT, но я ни шагу за пределы IDEA, поэтому пока жду плагин =)
        0
        Комментариев мало, потому что тема новая, я полагаю.
        Но мы благодарны за любой фидбэк, даже негативный. Он крайне полезен.
        Сейчас идет адаптация продукта под реальные нужды и хуже всего когда мы просто не знаем где ошиблись и как где улучшить.

        По поводу IDEA — прямо сейчас пилим. У нас там очень крутая штука намечается Live Debug. Мы без дебагера сможем показывать значения переменных из рантайм. Плюс сможем автокомплитить динамические свойства и т.д из реальных объектов. Очень перспективно.
        То что приложение запущено постоянно и можно каждую фунцию «пощупать» из IDE дают новые перспективы к расширению функциональности редакторов.
        0
        О! А это интересно. Напишите еще о сфере применения в рамках практических задач — вашего плагина. Глядишь и куплю подписку
          0
          Обязательно напишем. Осталось доделать плагин. Плагин к IDEA, Sublime или аннотации?

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое