В прошлой статье я сравнивал HappyX и Karax, показывая их декларативный подход к разработке с помощью Nim. В этой статье я подробнее расскажу о разработке одностраничных приложений с помощью HappyX с использованием императивного подхода к разработке. Так как в прошлой статье сравнивался лишь сам код, я начну с того, как установить HappyX. Для начала необходимо поставить сам Nim, если он у вас стоит — отлично. Следующий шаг — установка HappyX с помощью пакетного менеджера nimble. Ставим последнюю версию: Отлично, можно проверить установленную версию с помощью При желании можно поставить любую другую версию, например для установки версии 3.5.2 нужно ввести команду nimble install happyx@3.5.2 Теперь можно переходить к созданию проекта. Для этого достаточно перейти в нужную вам директорию и ввести следующую команду. --kind HPX — выбор типа проекта, в данном случае мы выбрали одностраничное приложение с поддержкой .hpx файлов. --name project — выбор имени для проекта. --use-tailwind — для одностраничного приложения мы также можем включить поддержку Tailwind CSS 3. В созданном проекте можно наблюдать файл src/main.hpx (в исходный код добавлены комментарии): Также в файле src/components/HelloWorld.hpx можем видеть следующее: Помимо .hpx файлов в папке src находятся index.html и router.json. В первом нет ничего интересного кроме подключения скомпилированного js файла, а вот со вторым разберемся подробнее: В файле router.json описаны маршруты вашего приложения, здесь вы можете изменять маршруты, задавать точки входа компонентов а также задавать параметры к маршрутам (query либо path). Для того, чтобы запустить проект, достаточно находиться в папке с проектом (cd project). Теперь вы сможете наблюдать все изменения файлов в реальном времени. Попробуем изменить src/main.hpx следующим образом и сохранить файл: В <template></template> можем наблюдать применение директив h-if и h-else, некие аналоги v-if и v-else из Vue.js. В <script></script> находится объявление метода showTitle, который возвращает true. Как можно видеть - отображается лишь "Добро пожаловать!". Это происходит потому, что метод showTitle() всегда возвращает true. Попробуем изменить скрипт: Здесь мы добавили импорт стандартной библиотеки Nim — random, далее единожды вызываем функцию randomize(), теперь метод showTitle будет возвращать случайное значение. Попробуйте перезагрузить страницу несколько раз. Каждый раз надпись меняется! Теперь попробуем реализовать собственный компонент, который будем использовать в src/main.hpx. Пусть этот компонент будет обычным счетчиком. Создадим файл src/components/Counter.hpx и запишем в него следующее: В этом компоненте мы используем новую директиву — h-onclick. С помощью нее мы можем обращаться к методам либо писать какой‑то короткий Nim код. Теперь обновим файл src/main.hpx, чтобы использовать в нем наш счетчик: Как вы видите - достаточно лишь использовать тег <Counter></Counter>, чтобы использовать наш компонент. Также мы можем передать в него начальное значение счетчика: Ниже можно видеть результат, который у нас получился: Добавим также верхний и нижний порог счетчика: Здесь мы добавили два пропса: ceil и floor, чтобы задать верхний и нижний порог соответственно. В начале методов мы добавили проверку, которая остановит функцию в случае достижения нижнего или верхнего порога. Посмотрим, как это выглядит в src/main.hpx: Тут мы добавили передачу порогов с указанием :nim, с помощью которого тип автоматически распознается. Теперь перейдем к маршрутизации, и, возвращаясь к src/router.json сразу добавим новый маршрут, по которому будет доступен только компонент с нашим счетчиком, при это мы сможем передавать ему значения. Теперь попробуем зайти на http://localhost:5000/#/counter/10: Попробуйте поиграться с адресной строкой — значение меняется. Теперь добавим маршрут, в котором можно регулировать порог счетчика: Таким образом можно настраивать маршруты любой сложности и взаимодействовать с ними. В примерах выше уже были использованы директивы h-if и h-else, однако кроме них также есть ряд директив. h-if, h-elif, h-else служат для условного рендеринга: директива h-for служит для цикличного рендеринга: Помимо h-for для цикличного рендеринга может использоваться h-while: Также существуют директивы для обработки событий. Они начинаются с h-on, например h-onclick - обрабатывает нажатие мыши на элемент (click event); h-onmouseover - срабатывает при наведении мыши на элемент (mouseover event); h-onwheel - срабатывает при прокрутке колесика мыши (wheel event). В каждом обработчике событий можно отправлять Event. Императивный подход к разработке в HappyX все еще находится в разработке, однако уже предоставляет некоторый функционал, в том числе маршрутизацию, директивы для отрисовки элементов, компонентный подход а также обработку событий. При этом Nim используется как основной язык для разработки. Прошлая статья о сравнении HappyX и Karax. GitHub репозиторий. Официальный сайт с документацией, написанный на HappyX.  Разработчик