Kotlin Playground

Привет!

Совсем недавно мы выпустили 1.4.0 версию Kotlin Playground, о которой писал в нашем блог посте ^[1] 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 ^[2], а также на различных сайтах, где playground уже завоевал сердца пользователей(об этом чуть позже).

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Александр

Источник ^[12]