Находки в опенсорсе: “LaranaJS – Рендерим фронтенд в картинку! 🌚 LaranaJS

LaranaJS – Рендерим фронтенд в картинку! 🌚

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