LaranaJS – Рендерим фронтенд в картинку! 🌚
LaranaJS – это большой эксперимент по поиску альтернативных способов рисовать графические интерфейсы. Если большинство других фреймворков полагаются на такие устаревшие технологии как HTML и CSS и вендорлочат себя на браузеры, то Larana делает всё иначе.
Вот как устроены сетевые взаимодействия в LaranaJS.
Браузер запрашивает страницу
На этом этапе происходят создание сессии, резолв роута и инициализация страницы. В то же время разные подсистемы (рендерер, менеджер сессий, роутер и т. д.) генерируют клиентский код — он минимальный – просто canvas и немного работы с сетью по вебсокетам:
Клиент открывает соединение
При полной загрузке страницы создаётся подключение по веб-сокетам и начинается обмен сообщениями:
- Сервер отрисовывает UI в виде изображения (png) и отправляет его на клиент.
- Клиент принимает изображение и вставляет его в canvas.
Все дальнейшие взаимодействия происходят в виде обмена событиями – действия пользователя отправляются клиентом, команды и изображения отправляются сервером.
Такая архитектура позволяет сократить размер клиента до
Несмотря на новизну подхода, сама разработка интерфейсов остаётся привычной. Например, вот код страницы с типичным каунтером:
Большинство задач можно решить с помощью готовых компонентов. Но если есть необходимость сделать что-то необычное, то есть прямой доступ к созданию команд для рендеринга в компоненте
Специально для этого поста я подготовил новогоднее демо:
- Репозиторий: https://github.com/laranatech/snowflakes-demo
- Потыкать: https://snowflakes.larana.tech
Подсистемы
Выше я упоминал подсистемы вроде рендерера и менеджера сессий. Они уже вшиты в фреймворк и можно использовать готовые. Можно написать и собстенные, а потом просто добавить их в приложение:
В ближайших релизах планируется именно развитие подсистем, чтобы сделать фреймворк максимально гибким. Например, сейчас ограничен список событий, которые отслеживаются на клиенте.
Больше подобного авангарда в канале @laranatech!
Автор: @e_kucheriavyi
LaranaJS – это большой эксперимент по поиску альтернативных способов рисовать графические интерфейсы. Если большинство других фреймворков полагаются на такие устаревшие технологии как HTML и CSS и вендорлочат себя на браузеры, то Larana делает всё иначе.
Вот как устроены сетевые взаимодействия в LaranaJS.
Браузер запрашивает страницу
На этом этапе происходят создание сессии, резолв роута и инициализация страницы. В то же время разные подсистемы (рендерер, менеджер сессий, роутер и т. д.) генерируют клиентский код — он минимальный – просто canvas и немного работы с сетью по вебсокетам:
<html>
<!--Minimal head-->
<body>
<canvas id="canvas"></canvas>
<script>
// Network code
</script>
</body>
</html>
Клиент открывает соединение
При полной загрузке страницы создаётся подключение по веб-сокетам и начинается обмен сообщениями:
- Сервер отрисовывает UI в виде изображения (png) и отправляет его на клиент.
- Клиент принимает изображение и вставляет его в canvas.
Все дальнейшие взаимодействия происходят в виде обмена событиями – действия пользователя отправляются клиентом, команды и изображения отправляются сервером.
// event
{
"event": "mousemove",
"x": 0,
"y": 0,
}
// response
{
"image": "", // изображение в base64
"x": 0, // координаты для вставки изображения
"y": 0,
"w": 0,
"h": 0,
}
Такая архитектура позволяет сократить размер клиента до
6KB #js и запускаться в любом браузере c 2009 года. При этом есть возможность написать собственное клиентское приложение и запускать его хоть на esp32 с подключённым дисплеем.Несмотря на новизну подхода, сама разработка интерфейсов остаётся привычной. Например, вот код страницы с типичным каунтером:
class HomePage extends Page {
title() {
return 'Hello, World!'
}
init() {
const { initState } = this.useState()
initState({ counter: 0 })
}
root() {
return layout({
style: 'row',
children: [
button({ text: '+', onClick: () => this.increment() }),
text({ model: 'counter' }),
button({ text: '-', onClick: () => this.decrement() }),
],
})
}
}
Большинство задач можно решить с помощью готовых компонентов. Но если есть необходимость сделать что-то необычное, то есть прямой доступ к созданию команд для рендеринга в компоненте
figure. Например, рисовать сложные фигуры вроде снежинок:
root() {
return figure({
template: (fig, queue) => {
line({
borderColor: '#aaaaff',
borderWidth: 2,
points: [
point({ x: x - halfRadius, y: y - halfRadius }),
point({ x: x + halfRadius, y: y + halfRadius }),
point({ x: x + halfRadius, y: y - halfRadius, moveTo: true }),
point({ x: x - halfRadius, y: y + halfRadius }),
point({ x: x + halfRadius, y, moveTo: true }),
point({ x: x - halfRadius, y }),
point({ x, y: y - halfRadius, moveTo: true }),
point({ x, y: y + halfRadius }),
],
}).to(queue)
},
})
}
Специально для этого поста я подготовил новогоднее демо:
- Репозиторий: https://github.com/laranatech/snowflakes-demo
- Потыкать: https://snowflakes.larana.tech
Подсистемы
Выше я упоминал подсистемы вроде рендерера и менеджера сессий. Они уже вшиты в фреймворк и можно использовать готовые. Можно написать и собстенные, а потом просто добавить их в приложение:
const app = new LaranaApp({
config,
renderer: new ClientRenderer({}),
sessionManager: new MemorySessionManager({}),
router: new DefaultRouter({ routes }),
})
app.run()
В ближайших релизах планируется именно развитие подсистем, чтобы сделать фреймворк максимально гибким. Например, сейчас ограничен список событий, которые отслеживаются на клиенте.
Больше подобного авангарда в канале @laranatech!
Автор: @e_kucheriavyi
GitHub
GitHub - laranatech/snowflakes-demo
Contribute to laranatech/snowflakes-demo development by creating an account on GitHub.
3❤52💩32🤔23🔥8🤯8👍5🤡3👏2🤩2