[Перевод] Kweb — Облегченный веб-фреймворк Kotlin для backend-разработчиков
KWeb — это библиотека для создания многофункциональных интерактивных веб-приложений на чистом Kotlin, которая делает практически незаметным для программиста различие между веб-браузером и сервером.
Но зачем нужен еще один веб-фреймворк?
Создание полнофункциональных веб- приложений обычно требует навигации по ужасной экосистеме Javascript, выбора между огромным множеством инструментов, транспиляторов, минификаторов, специалистов по сопровождению состояния и т.д., Большинство из которых устареют через 6 месяцев. Затем вы сталкиваетесь с взаимодействием между клиентом и сервером, что представляет собой совершенно другой мир боли.
KWeb исправляет это.
Современные веб-сайты состоят как минимум из двух тесно связанных компонентов, один из которых работает в браузере, а другой — на сервере. Они часто написаны на разных языках программирования и должны связываться друг с другом через HTTP-соединение.
Цель Kweb — устранить это разделение сервера и браузера, чтобы архитектура вашего веб-приложения определялась решаемой проблемой, а не ограничениями современных инструментов.
KWeb рассматривает веб-браузер как довольно тупого робота, сохраняя большую часть интеллекта на стороне сервера, передавая инструкции клиенту через веб-сокет и получая ответы от клиента. Инструкции для сервера представляют собой простые фрагменты кода JavaScript, которые браузер немедленно выполняет, возвращая результат на сервер, если он запрашивается.
В этом отношении он чем-то похож на Vaadin, хотя, в отличие от Vaadin, он не включает в себя большую библиотеку виджетов, и его намного проще интегрировать в проект.
В Apache Wicket также есть аналогичный механизм, хотя Wicket в основном ориентирован на прозрачное синхронизацию состояния сервера и клиента, что в значительной степени мотивировано желанием иметь изящный переход на HTML в случае, если браузер не поддерживает JavaScript. Сегодня это требование гораздо менее актуально, чем десять лет назад.
KWeb использует преимущества новых функциональных возможностей сопрограмм в грядущем Kotlin 1.1 для обработки асинхронного ожидания ответов от клиента способом, который почти прозрачен для пользователя KWeb, без привязки потоков.
Kweb — это автономная библиотека Kotlin, которую можно легко добавить в новые или существующие проекты. Когда Kweb получает HTTP-запрос, он отвечает начальной HTML-страницей и некоторым кодом JavaScript, который подключается обратно к веб-серверу через WebSocket. Затем страница ожидает и слушает инструкции от сервера, одновременно уведомляя сервер о соответствующих событиях браузера.
Распространенное беспокойство по поводу этого подхода заключается в том, что пользовательский интерфейс может казаться вялым, если он управляется сервером. Kweb решает эту проблему, предварительно загружая в браузер инструкции, которые должны выполняться немедленно при событиях браузера без обращения к серверу.
Kweb построен на превосходной платформе Ktor , которая обрабатывает транспорт HTTP, HTTPS и WebSocket. Вам не нужно знать Ktor, чтобы использовать Kweb, но если у вас уже есть приложение Ktor, вы можете встроить Kweb как функцию .
Kweb также включает простой DSL для управления DOM браузера и плагины, позволяющие использовать популярные JavaScript-фреймворки, такие как JQuery и Material Design Light. Также на удивление легко добавить собственный плагин для любимой библиотеки или инструмента.
Особенности Kweb
Делает барьер между веб-сервером и веб-браузером практически невидимым для программиста.
Минимизирует «болтовню» между сервером и браузером и накладные расходы на рендеринг браузера.
Поддерживает интеграцию с некоторыми мощными библиотеками JavaScript, такими как Semantic, которая представляет собой платформу пользовательского интерфейса, предназначенную для создания тем.
Позволяет напрямую связывать элементы DOM в браузере с состоянием на сервере и автоматически обновлять их с помощью шаблонов наблюдателя и сопоставителя данных.
Легко интегрируется с Shoebox, библиотекой Kotlin для постоянного хранения данных, которая поддерживает представления и шаблон наблюдателя.
Легко добавить в существующий проект.
Мгновенно обновляет веб-браузер в ответ на изменения кода.
Библиотека Kweb распространяется через JitPack, новый репозиторий пакетов для проектов JVM и Android.
Позволяет проблеме определять вашу архитектуру, а не разделение сервера / браузера
Сквозной Котлин ( Почему Котлин? )
Поддерживайте синхронизацию веб-страницы с вашими внутренними данными в реальном времени, Kweb сделает все за вас.
Рендеринг HTML на стороне сервера с регидратацией
Эффективная предварительная загрузка инструкций, позволяющая избежать ненужного взаимодействия с сервером
Очень легкий, Kweb содержит менее 5000 строк кода.
Что вам понадобится
Предполагается некоторое знакомство с Kotlin , а также знакомство с Gradle. Вы также должны иметь некоторое представление о HTML.
Добавление Kweb в ваш проект
Добавьте их в свои репозитории и зависимости в файлы build.gradle или build.gradle.kt .
*Замените LATEST_VERSION последней версией Kweb, которую вы можете найти на https://jitpack.io/#kwebio/kweb-core .
Groovy DSL
repositories {
maven { url 'https://jitpack.io' }
jcenter()
}
dependencies {
implementation 'com.github.kwebio:kweb-core:LATEST_VERSION'
// This (or another SLF4J binding) is required for Kweb to log errors
implementation group: 'org.slf4j', name: 'slf4j-simple', version: '1.7.30'
}Gradle (Kotlin)
repositories {
maven("[https://jitpack.io](https://jitpack.io)")
jcenter()
}dependencies {
implementation("com.github.kwebio:kweb-core:LATEST_VERSION")
// This (or another SLF4J binding) is required for Kweb to log errors
implementation("org.slf4j:slf4j-simple:1.7.30")
}
Hello World!
Создайте новый файл Kotlin и введите следующее:
import kweb.*
fun main() {
Kweb(port = 16097) {
doc.body {
h1().text("Hello World!")
}
}
}
Запустите его, а затем посетите http://localhost:16097/ в своем веб-браузере, чтобы увидеть традиционное приветствие, переводящееся в следующий HTML код:
Hello World!
Этот простой пример уже показывает некоторые важные особенности Kweb:
- Установить и запустить веб-сайт очень просто, не нужно возиться с сервлетами или сторонними веб-серверами.
- Ваш код Kweb будет примерно отражать структуру генерируемого HTML-кода.
Привет, мир²
Один из способов представить Kweb — это предметно-ориентированный язык (DSL) для создания и управления DOM в удаленном веб-браузере, а также прослушивания и обработки событий DOM.
Важно отметить, что этот DSL также может делать все, что может делать Kotlin, включая такие функции, как циклы, функции, сопрограммы и классы.
Вот простой пример использования обычного цикла for в Kotlin :
import kweb.*
fun main() {
Kweb(port = 16097) {
doc.body {
ul {
for (x in 1..5) {
li().text("Hello World $x!")
}
}
}
}
}
Выводит…
- Hello World 1!
- Hello World 2!
- Hello World 3!
- Hello World 4!
- Hello World 5!
Вы можете использовать функции для разбития на модули и повторного использования кода:
fun main() {
Kweb(port = 16097) {
doc.body {
ul {
for (x in 1..5) {
createMessage(x)
}
}
}
}
}
private fun ElementCreator.createMessage(x: Int) {
li().text("Hello World $x!")
}
Создание элементов и фрагментов DOM
Давайте создадим
import kweb.*
fun main() {
Kweb(port = 16097) {
doc.body {
button().text("Click Me!")
}
}
}
Атрибуты элемента
Если вы назначите элемент кнопки значению val, вы также можете изменить его атрибуты:
val button = button()
button.text("Click Me!")
button.classes("bigbutton")
button.setAttributeRaw("autofocus", JsonPrimitive(true))
Атрибуты также могут быть указаны на карте при создании элемента:
button(mapOf("class" to "bigbutton", "autofocus" to true)).text("Click Me!")
Или удалите его:
button.delete()
Добавление дочерних элементов к существующему элементу
Синтаксис DSL позволяет очень легко создавать элементы и их дочерние элементы вместе:
ul {
li().text("One")
li().text("Two")
}
В качестве альтернативы мы можем использовать новую функцию {} в элементах для добавления дочерних элементов к уже существующему элементу:
val unorderedList : ULElement = ul()
unorderedList.new {
li().text("One")
li().text("Two")
}
Чтение из DOM
Kweb также может читать из DOM, в данном случае значение элемента :
import kweb.*
import kotlinx.coroutines.GlobalScope
import kotlinx.coroutines.future.await
import kotlinx.coroutines.launch
fun main() {
Kweb(port = 2395) {
doc.body {
val input: InputElement = input()
input.on.submit {
GlobalScope.launch {
val value = input.getValue().await()
println("Value: $value")
}
}
}
}
}
Обратите внимание, что input.getValue () возвращает CompletableFuture
Примечание
Мы обсуждаем еще лучший способ чтения значений в разделе Observer Pattern & State .
Поддерживаемые HTML-теги
Kweb поддерживает значительный набор тегов HTML, таких как button () , p () , a () , table () и т. Д. Вы можете найти более полный список в prelude.kt (прокрутите вниз до раздела » Функции »). Это обеспечивает хороший статически типизированный HTML DSL, полностью интегрированный с языком Kotlin.
Если тег не имеет явной поддержки в Kweb, это не проблема. Например, вот как вы можете использовать печально известный и ныне устаревший тег
doc.body {
val blink = element("blink").text("I am annoying!")
}
Дальнейшее чтение
Класс Element предоставляет множество других полезных способов взаимодействия с элементами DOM.
Прослушивание событий
Вы можете прикрепить обработчики событий к элементам DOM:
doc.body {
val label = h1()
label.text("Click Me")
label.on.click {
label.text("Clicked!")
}
}
Поддерживаются большинство, если не все типы событий JavaScript, и вы можете читать данные события, например, какая клавиша была нажата:
doc.body {
val input = input(type = text)
input.on.keypress { keypressEvent ->
println("Key Pressed: ${keypressEvent.key}")
}
}
Немедленные события
Поскольку код, отвечающий на события, выполняется на сервере, может возникнуть небольшая задержка между действием, вызывающим событие, и любыми изменениями в DOM, вызванными обработчиком событий. Это была обычная жалоба на предыдущие серверные веб-фреймворки, такие как Vaadin, что препятствовало их внедрению.
К счастью, у Kweb есть решение:
doc.body {
val label = h1()
label.text("Click Me")
label.onImmediate.click {
label.text("Clicked!")
}
}
Это идентично первому примеру прослушивателя событий, за исключением того, что on было заменено на onImmediate .
Kweb выполняет этот обработчик событий при рендеринге страницы и записывает изменения, которые он вносит в DOM. Затем он «предварительно загружает» эти инструкции в браузер, чтобы они выполнялись немедленно, когда событие происходит, без какого-либо обратного обращения к серверу.
Внимание! Из-за этого механизма предварительной загрузки обработчик событий для onImmediate должен ограничиваться простыми модификациями DOM. Kweb включает некоторые средства защиты от этого во время выполнения, но они не могут выявить все проблемы, поэтому используйте их с осторожностью.
Комбинированные обработчики событий
Распространенным шаблоном является использование обоих типов обработчиков событий в элементе DOM. Непосредственный обработчик может отключить нажатую кнопку или временно отобразить некоторую форму счетчика. Затем обычный обработчик сделает то, что ему нужно на сервере, а затем, возможно, снова включит кнопку и удалит счетчик.
Обзор
Kweb использует шаблон наблюдателя для управления состоянием.
Приложение Kweb можно рассматривать как функцию сопоставления между состоянием на сервере и DOM в веб-браузере конечного пользователя. Как только это сопоставление определено, просто измените это состояние, и изменение автоматически распространится на браузер.
Строительные блоки
KWeb класс содержит один типизированный объект, который может меняться с течением времени. Например:
val counter = KVar(0)
Здесь мы создаем счетчик типа KVar
Мы также можем прочитать и изменить значение KVar:
println("Counter value ${counter.value}")
counter.value = 1
println("Counter value ${counter.value}")
counter.value++
println("Counter value ${counter.value}")
Выведет:
Counter value 0
Counter value 1
Counter value 2
KVars поддерживают мощную семантику сопоставления для создания новых KVars:
val counterDoubled = counter.map { it * 2 }
counter.value = 5
println("counter: ${counter.value}, doubled: ${counterDoubled.value}")
counter.value = 6
println("counter: ${counter.value}, doubled: ${counterDoubled.value}")
Выведет:
counter: 5, doubled: 10
counter: 6, doubled: 12
Обратите внимание, что counterDoubled обновляется автоматически.
Примечание
KVars следует использовать только для хранения значений, которые сами по себе являются неизменяемыми, таких как Int, String или класс данных Kotlin с неизменяемыми параметрами.
KWeb и DOM
Вы можете использовать KVar (или KVal) для установки текста элемента DOM:
val name = KVar("John")
li().text(name)
Приятная часть состоит в том, что при изменении значения имени текст элемента DOM обновляется автоматически. Это может помочь думать об этом как о способе «развернуть» KVar.
Многие другие функции в Elements поддерживают KVars аналогичным образом, включая innerHtml () и setAttribute () .
Привязка KVar к значению входного элемента
Для элементов вы можете установить значение KVar, которое будет соединять их в двух направлениях.
Любые изменения в KVar будут отражаться в браузере в реальном времени, и точно так же любые изменения в браузере, сделанные пользователем, будут немедленно отражены в KVar, например:
Kweb(port = 2395) {
doc.body {
p().text("What is your name?")
val clickMe = input(type = text)
val nameKVar = KVar("Peter Pan")
clickMe.value = nameKVar
p().text(nameKVar.map { n -> "Hi $n!" })
}
}
Это также будет работать для элементов