Знакомимся с Cruzo. Часть 2. Обзор шаблонизатора внутри которого виртуальная машина

Вот важная новость с фронта ИИ: 900k 12 минут назад Знакомимся с Cruzo. Обзор шаблонизатора внутри которого виртуальная машина Средний 5 мин 280 JavaScript * Angular * ReactJS * TypeScript * Обзор Cruzo — минималистичный UI-фреймворк без лишней сложности Знакомимся с Cruzo. RxBucket – контейнер состояний и конфигураций компонентов на фронтеЯ продолжаю серию обзорных статей о js-фреймворке Cruzo.

Я работаю над этим фреймворком последние 6 лет, много идей отпало, осталось только что реально нужно в работе. Здесь я расскажу вам о сердце фреймворка – шаблонизаторе. Для его реализации была написана стековая виртуальная машина.

Технические детали

Какая еще виртуальная машина внутри js спросите вы? Это VM — но не «виртуальный процессор» вроде JVM или WebAssembly, а интерпретатор байткода, написанный на JavaScript. Немного о разметке шаблонов в CruzoРазметка шаблонов Cruzo это – расширенный HTML, а синтаксис выражений подмножество JavaScript, но с некоторыми оговорками (::rx, once::).

label }} ping: {{root. count$::rx}} Вдобавок к этому, если мы говорим про компонент Cruzo (AbstractComponent), там шаблон – это функция, это не просто статичный файл. export class MyComponent extends AbstractComponent { ...

getHTML() { return ` Clicks: {{ root. count::rx }} `; } ... }Шаблон в виде функции может быть полезен, если появилась необходимость динамически менять шаблон в зависимости от параметров компонента.

Отраслевые последствия

Например, можно собрать разметку на ходу — без условий внутри самого HTML:export class MyComponent extends AbstractComponent { ... getHTML() { let extHTML = ``; if (this. myParam) { extHTML = ; } return `${extHTML} ping: {{root.

count$::rx}} `; } }Как создается шаблон в CruzoПуть создания шаблона в Cruzo начинается не с “ручного” парсинга, парсинг HTML-разметки выполняет сам браузерexport abstract class AbstractComponent{ ... protected initTemplate() { const html = this. getHTML(); if (html) { this.

innerHTML = html; this. template = new Template({ node: this. node, self: () => this, selector: this.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.