HappyX в мире дикого фронтенда

Как обстоят дела у HappyX, а в среде фронтенд-разработки сейчас?

Я расскажу вам об этом в полной статье.

Вспоминая о Nim

HappyX — веб фреймворк, написанный на языке Nim. Благодаря возможностям языка мы можем компилировать наше приложение как в JS, так и в C. Таким образом HappyX поддерживает и frontend и backend, впрочем, я здесь для того, чтобы поведать новости разработки HappyX.

HappyX и функциональные компоненты

В одной из предыдущих статей, в которых рассказывалось о веб-фреймворках Karax и HappyX, я показал, что Karax использует функции для создания VDOM:

include karax / prelude  proc createDom(): VNode =   result = buildHtml(tdiv):     text "Hello, world!"  setRenderer createDom

В то же время я упомянул HappyX компоненты. Однако до последнего времени для создания даже самой простой кнопки приходилось терять в производительности. За занавесом банальная кнопка расширялась до нескольких десятков строчек кода. Так происходило из-за того, что компоненты предоставляли ООП возможности, в том числе использование методов и свойств, наследование и прочие довольно тяжелые и порой ненужные вещи. Давайте вспомним один из примеров из статьи про сравнение HappyX и Karax:

import happyx   component Button:   buttonText: string   html:     tButton:       {self.buttonText}       @click:         echo "Клик по кнопке!"   appRoutes "app":   "/":     Button("Нажми на меня")

В этом примере мы можем видеть свойство buttonText, а также его использование как текста для кнопки. Ниже, на последней строке находится использование компонента. Может показаться, что все довольно-таки просто и однозначно, но нет. Вот, какая функция одного только создания кнопки получается после компиляции в JS:

function initButton_536871130(uniqCompId_536871131, buttonText_536871132) {   function HEX3Aanonymous_536871156(self_536871157, ev_536871158) {}   function HEX3Aanonymous_536871159(self_536871160, ev_536871161) {}   function HEX3Aanonymous_536871162(self_536871163, ev_536871164) {}   function HEX3Aanonymous_536871165(self_536871166, ev_536871167) {}   function HEX3Aanonymous_536871168(self_536871169, ev_536871170) {}   function HEX3Aanonymous_536871171(self_536871172, ev_536871173) {}   function HEX3Aanonymous_536871174(self_536871175, ev_536871176) {}   var result_536871133 = null;   BeforeRet: {     var self_536871155 = {uniqCompId: nimCopy(null, uniqCompId_536871131, NTI33554449), buttonText: remember_536871134(buttonText_536871132), m_type: NTI536870994, isCreated: false, slot: null, slotData: null, created: null, exited: null, rendered: null, pageHide: null, pageShow: null, beforeUpdated: null, updated: null};     self_536871155.beforeUpdated = HEX3Aanonymous_536871156;     self_536871155.pageShow = HEX3Aanonymous_536871159;     self_536871155.pageHide = HEX3Aanonymous_536871162;     self_536871155.rendered = HEX3Aanonymous_536871165;     self_536871155.exited = HEX3Aanonymous_536871168;     self_536871155.created = HEX3Aanonymous_536871171;     self_536871155.updated = HEX3Aanonymous_536871174;     createdComponentsList_1946158656[0].push(self_536871155);;     result_536871133 = self_536871155;     break BeforeRet;   };   return result_536871133; }

И это еще без учета отрисовки и объявления самой кнопки! Именно тут и приходят на помощь функциональные компоненты:

import happyx   proc Button*(buttonText: string): TagRef =   buildHtml:     tButton:       {buttonText}       @click:         echo "Клик по кнопке!"   appRoutes "app":   "/":     Button("Нажми на меня") 

Как видите, поменялось только объявление компонента. Его использование никак не поменялось. И вот, что мы получили после компиляции:

function Button_536870914(buttonText_536870915) {   var result_536870916 = null;   var __el0_536871126 = initTag_1996489074([98,117,116,116,111,110], [initTag_1996489108(buttonText_536870915, true, [], false)], false);   __el0_536871126.addEventListener('click', (event) => {     Label1: {       var ev_536871127 = null;       ev_536871127 = event;       rawEcho([208,154,208,187,208,184,208,186,32,208,191,208,190,32,208,186,208,189,208,190,208,191,208,186,208,181,33]);     };   });   result_536870916 = initTag_1996489074([100,105,118], [__el0_536871126], true);   return result_536870916; }

И это все! Таким образом мы получили и прирост в производительности и уменьшение кода на выходе.

Из возможностей обычных компонентов функциональные компоненты сохранили аргументы и слоты. В примере ниже показано, как можно передавать HTML в слот функционального компонента, используя при этом аргументы:

import happyx   proc Button*(x: int, stmt: TagRef): TagRef =   buildHtml:     tButton:       stmt       tDiv:         "x is {x}"       @click:         echo "Клик по кнопке!"   appRoutes "app":   "/":     Button(100):       "Нажми на меня"

Будет интересно узнать, что вы думаете по поводу функциональных компонентов.

HappyX Native

HappyX также обзавелся собственной небольшой библиотекой для компиляции в натив (на десктопах используется браузер по умолчанию, на Android используется WebView, на iOS пока нет возможности компиляции).

Работает оно следующим образом — в корне проекта создается основной серверный файл, который служит для взаимодействия устройства и приложения. Выглядит он следующим образом:

import happyx_native  callback:   # HappyX Native helloWorld callback   proc helloWorld() =     echo "Hello from Nim"  nativeApp("/assets", resizeable = false, title = "hpx_tests")

Здесь мы регистрируем коллбек с именем helloWorld. Никаких аргументов он не принимает. После регистрации коллбеков мы запускаем сервер с помощью функции nativeApp.

Далее в папке /assets находится файл main.nim. Выглядит он следующим образом:

import happyx import assets/native  # working with happyx native  var x = remember 0  proc helloWorld() =   hpxNative.callNim("helloWorld")   x->inc()  appRoutes "app":   "/":     tDiv:       tH1:         "hpx_tests"       tDiv:         "x is {x}"       tButton:         "increase"         @click:           helloWorld()

Со стороны JS мы по нажатию кнопки отправляет событие на сервер, которые принимает и обрабатывает его. В нашем случае мы отправляем вызов helloWorld на сервер. На самом сервере при этом выводится "Hello from Nim".

При этом стоит упомянуть, что на стороне сервера можно напрямую обращаться к приложению и устройству, в котором запущен сервер. Например, при компиляции в Android мы можем отловить сервером событие из JS приложения, при котором мы сможем отобразить нативный Android диалог. Выглядит это следующим образом:

# Main native file import happyx_native  callback:   proc showDialog() =     when defined(export2android):       Log.d("create dialog")       runOnUiThread:         var dialog = AlertDialogBuilder.new(           appContext         ).setTitle(           cast[CharSequence](String.new("title"))         ).setMessage(           cast[CharSequence](String.new("text"))         ).setCancelable(           JVM_TRUE         ).show()         Log.d($dialog.toString())  nativeApp("/assets", resizeable = false, title = "android_tests")

И снова хочется узнать, что вы думаете об этом.

HappyX в проде

С недавних пор одна российская компания стала использовать HappyX в продакшене, через некоторое время выйдет статья об этом.