28.04.2018 13:13
prendota 11 5300 Источник

Привет, Хабр!


Совсем недавно мы выпустили 1.4.0 версию Kotlin Playground, о которой писал в нашем блог посте PMM Kotlin Рома Белов.


стоп… стоп...
Что еще за Kotlin Playground?


Kotlin Playground — полноценный редактор кода, написанного на Kotlin, который можно интегрировать на Вашу веб-страницу.


Как же это сделать?


Все до невозможности просто, стоит добавить одну script-строчку в header:


<script src="https://unpkg.com/kotlin-playground@1" data-selector="code"></script>

Аттрибут data-selector говорит нам о том, что все блоки code магически превратятся в исполняемый Kotlin код.


Давайте попробуем другие способы, например:


<script src="https://unpkg.com/kotlin-playground@1"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
  KotlinPlayground('.code-blocks-selector');
});
</script>>

Либо через старый добрый советский npm:


npm install kotlin-playground -S

далее


import playground from 'kotlin-playground';

document.addEventListener('DOMContentLoaded', () => {
  playground('code');
});


Теперь мы научились "устанавливать" наш Kotlin Playground, давайте посмотрим как же он работает.

Из-за невозможности использования iframe на habr, будут представлены GIF-примеры. "Живые" примеры можно посмотреть на GitHub Pages, а также на различных сайтах, где playground уже завоевал сердца пользователей(об этом чуть позже).


Ну что ж, приступим.


Kotlin Playground поддерживает в данной версии 4 платформы, которые задаются с помощью аттрибута data-target-platform="platform" — это jvm, js, junit и canvas.


По умолчанию ставится платформа JVM. Вот самый простой пример:



Если вы хотите скрыть некоторые участки кода из-за их избыточности, то можно воспользоваться неким синтаксическим сахаром и поместить нужный Вам код между
//sampleStart и //sampleEnd.



Для того, чтобы воспользоваться автодополнением достаточно нажать Ctrl + Space или Cmd + Space.



Для исполнения тестов укажем платформу junit.



Вот один из примеров рисунка на канвасе с помощью Kotlin. Больше примеров можно посмотреть вот здесь.



Где же сейчас используется Kotlin Playground?


  1. Документация на официальном сайте Kotlin.
    Все новые части документации уже сопровождаются живыми примерами, например, What's new in Kotlin 1.2 или Kotlin Coroutines.
  2. Все примеры на Kotlin by Examples используют Kotlin Playground.
  3. На форуме Kotlin поддерживается playground. Достаточно использовать язык run-kotlin в markdown-синтаксиcе. Вот пример.
  4. С помощью WordPress plugin можно интегрировать наш playground в различные блоги, так мы и делаем в Kotlin Blog.

Где же мы рекомендуем использовать Kotlin Playground?
Без сомнений, данный компонент улучшает качество чтения и повышает выразительность примеров кода, поэтому мы призываем всех авторов к использованию этой библиотеки при написании:


  1. Учебных курсов.
  2. Сопроводительных материалов для слайдов или книг.
  3. Документаций для библиотек и фреймворков
  4. Примеров кода в блог постах

Более подробно почитать про все возможности Kotlin Playground можно тут, а сразу поиграть можно там.


Спасибо!
Have a Nice Kotlin :)

Комментарии (11)


  1. fRoStBiT
    28.04.2018 20:45
    #10782402
    +2

    Круто!
    Но хотелось бы подробностей о «магическом превращении в исполняемый код»:
    — что выполняется на сервере
    — что выполняется на клиенте
    … и как это работает для разных платформ (JS/JVM).


    1. prendota Автор
      29.04.2018 10:06
      #10782830
      +1

      Привет! Спасибо большое :)
      На самом деле, предполагалось, что данный пост будет ознакомительным, чтобы пользователи узнали о библиотеке и попробовали её. Но ты прав, мы обсудим, может, действительно, техническая сторона Kotlin Playground заслуживает отдельного внимания, думаю, это может быть интересно не только тебе, спасибо за наводку.

      Если коротко, то мы используем CodeMirror в качестве view. А для компиляции кода используем тот же сервер, что и try.kotl.in, просто шлем запросы на компиляцию.


  1. Tarik02
    28.04.2018 21:35
    #10782464

    Я так понимаю, этот Playground работает через сервер, даже если таргетится в JS. А есть ли планы по возможности порта компилятора на JS-платформу также.


    1. prendota Автор
      29.04.2018 10:08
      #10782834

      Слушай, идеи такие были, но тогда нужно будет тащить отдельный и большой кусок кода, который позволит компилировать Kotlin->JS на клиенте, это порядком лишних 10М, может все-таки это оверкилл? Мы пока думаем над этим, но вопрос насущный :)


      1. extempl
        01.05.2018 07:46
        #10784212

        10M один раз и последующая мгновенная компиляция — конечно стоит. Можно добавить оба варианта — для пользователей с ограниченным трафиком.


        Правда тут остаётся ещё вопрос автодополнения.
        Решить этот и сопутствующие вопросы — и будет онлайн редактор :)


  1. strangeraven
    28.04.2018 23:40
    #10782582

    А можно ли как-то взаимодействовать с кодом, введённым пользователем, чтобы, например, использовать это в качестве пользовательских скриптовых сценариев?


    Ну например, есть веб-админка, и хочется чтобы через неё налету что-то сконфигурировать через описание на котлине.


    1. prendota Автор
      29.04.2018 10:13
      #10782840

      Привет, можно все-таки сказывается 6-дневная рабочая неделя, но я не очень понял вопроса :( Можешь чуть подробней описать?


      1. strangeraven
        29.04.2018 11:53
        #10782968

        Попробую придумать пример для наглядности.
        Допустим у меня есть веб-сайт, где пользователь должен задать свой пароль.
        Обычно пароли должны соответствовать каким-то требованиям: минимальная длина, наличие каких-то символов и т.д. Если пользователь придумал неправильный пароль, то сайт должен отказать с сообщением что не так.

        Разумеется, код проверки пароля несложно запрограммировать внутри системы, но предположим, что хочется дать возможность администратору сайта самому задавать требования к пользовательским паролям. Один из вариантов решений: сделать в адмике сайта формочку, где администратор на котлине может написать такую функцию:

        fun checkPassword(password: String, locale: Locale): CheckPasswordResult

        Эта функция проверяет пароль, а в случае неудачи формирует сообщение об ошибке на языке пользователя.

        Можно конечно сказать: зачем так делать, ведь можно же описать требования для пароля регуляркой, шаблонами, etc. Но в конце концов это же всего лишь простой пример для иллюстрации, в жизни бывают и более сложные случаи конфигурации, которые просто так регуляркой не опишешь, нужен скрипт.

        Что я имею в виду под взаимодействием с кодом?
        А то, что код, который вводит админ, это не просто замкнутый сам на себя пример, который отработал, напечатал рядом результат и на этом все, нет. В пользовательский скрипт надо передать из системы контекст (в нашем примере это сигнатура требуемой функции и выбранная на сайте локаль пользователя), некое api, через которое скрипт может получать информацию о системе или управлять ею.


  1. rjhdby
    29.04.2018 03:18
    #10782666

    Пытался, давеча, написать плагин под IDEA — споткнулся об роскомнадзор (https://s3-eu-west-1.amazonaws.com/intellij-snapshots/com/jetbrains/intellij/idea/ideaIC/LATEST-EAP-SNAPSHOT/maven-metadata.xml). Ну вдруг не знаете.


  1. slonpts
    29.04.2018 10:13
    #10782842

    Круто!

    Вслед за fRoStBiT реквестирую подробности.

    1. Есть ли шансы, что появится на stackoverflow, а не только на medium?
    2. Если в некий момент для JVM появится 0-day exploit, то ваши сервера могут быть атакованы через remote code execution, верно?
    3. Велика ли нагрузка на сервера?
    4. Как сделано автодополнение? Запрос на сервер на каждый автокомплит?


    1. prendota Автор
      29.04.2018 10:20
      #10782848

      Привет! Спасибо:)
      Мы бы очень хотели, чтобы и на stackoverflow появился, думали об этом. Могу точно сказать, что мы попытаемся, но обещать ничего не буду.
      Ну, как говорится, ломать не строить. Стоит учитывать, что мы не весь код позволяем компилировать.
      Да, с нагрузкой там все должно быть хорошо.
      Про автодополнение: да, пока что так.