Анализ стека технологии Hongmeng JavaScript GUI

JavaScript внешний фреймворк
Анализ стека технологии Hongmeng JavaScript GUI

Как мы все знаем, «Hongmeng 2.0» с открытым исходным кодом использует JavaScript в качестве языка фреймворка для разработки приложений IoT. Это знаменует последующееSpaceX поднимается в небоПосле этого JavaScript снова попал в горячую точку новостной сети. Жаль, что такая хорошая возможность используется только для инь и ян. Как научно-популярная статья, эта статья не будет использовать увеличительное стекло, чтобы найти слоты в коде для поиска ошибок, но надеется простым способом объяснить, что такое графический интерфейс, который она поддерживает. Если у вас есть общее представление об основах работы с компьютером, у вас не должно возникнуть препятствий для чтения этой статьи.

Мы уже знаем, что в «Hongmeng 2.0» разработчикам нужно только написать бизнес-логику JavaScript в виде компонентов Vue, которые могут отображаться как интерфейс пользовательского интерфейса на встроенном оборудовании, таком как умные часы. Какие основные модули необходимо задействовать в этом процессе? Какие из этих модулей разработаны самостоятельно, а какие используют существующие проекты с открытым исходным кодом? Здесь он разделен на три абстрактных слоя сверху вниз, чтобы представить:

  • Слой JS-фреймворка, который можно понимать как сильно упрощенный JavaScript-фреймворк в стиле Vue.
  • JS-движок и уровень выполнения, который можно понимать как значительно упрощенную среду выполнения в стиле WebKit.
  • слой рендеринга графики, которую можно понимать как значительно упрощенную библиотеку графического рисования в стиле Skia.

Эти три уровня абстракции составляют набор стека технологий графического пользовательского интерфейса для встраиваемого оборудования. В отличие от многих общественных мнений, кричащих «неизвестно / непостижимо», я лично считаю, что, по крайней мере, для части графического интерфейса, все отечественные разработчики первой линии, которые столкнулись с текущими основными гибридными кросс-конечными решениями или исследованиями и разработками среды выполнения JS, могут легко получить исходный код из исходного кода.Постарайтесь понять его. Ниже приводится пошаговая интерпретация и анализ этого.

Слой JS-фреймворка

С точки зрения верхнего уровня, чтобы отобразить фрагмент динамического текста с помощью «Hongmeng 2.0», вам нужно всего лишь написать следующий код формата HML (XML-подобный):

<!-- hello.hml -->
<text onclick="boil">{{hello}}</text>

Затем напишите JavaScript в том же каталоге следующим образом:

// hello.js
export default {
  data: {
    hello: 'PPT'
  },
  boil() {
    this.hello = '核武器';
  }
}

Это будет вызываться всякий раз, когда текст нажимаетсяboilметод, пустьPPTстать核武器.

Что за этим стоит? Студенты, знакомые с Vue 2.0, должны сразу же подумать о следующих вещах:

  • Для преобразования XML в структуру вложенных функций в JS требуется механизм предварительной обработки. Таким образом, вы можете использовать JS для создания пользовательского интерфейса, который соответствует структуре XML, выполняя простую оценку во время выполнения.
  • Требуется механизм событий, чтобы триггерonclickСоответствующий обратный вызов может быть выполнен при возникновении события.
  • Требуется механизм захвата данных, чтобыthis.helloСоответствующий обратный вызов может быть выполнен при присвоении значения.
  • Необходимо иметь возможность обновлять элементы управления объектами пользовательского интерфейса в обратных вызовах.

Как эти вещи выполняются? Вкратце это выглядит примерно так:

  • Предварительная обработка XMLИспользование готовых пакетов NPM с открытым исходным кодом для преобразования XML вonclickСвойства преобразуются в поля свойств объектов JS.
  • Регистрация и запуск событийОба реализованы непосредственно на C++. Объект JS, полученный на предыдущем шагеonclickСвойства проверяются и регистрируются в C++, как если бы все компоненты были нативными.
  • Механизм захвата данныхРеализован на JS, основан наObject.defineProperty(сотни строк) ViewModel.
  • Обновления элементов управления пользовательского интерфейса, который будет вызывать реализацию собственного метода C++ в обратном вызове JS, автоматически выполняемом ViewModel. Эта часть делается полностью неявно, не открытоdocument.createElementстандартизированный API.

Поскольку большое количество возможностей распространенных фреймворков JS напрямую реализовано в C++, то, что реализовано в чистом JavaScript во всем стеке технологий графического интерфейса (в основном см.ace_lite_jsfwkпод складcore/index.js,observer.jsиsubject.js), что эквивалентно наличию одной и только одной функции:

ViewModel, которую можно наблюдать.

Что касается сложности реализации и качества чистого JS-фреймворка, то объективно, если это личная самодеятельность, то это можно расценивать как хороший бонус на собеседовании при приеме в школу.

JS-движок и уровень выполнения

После понимания уровня фреймворка JS мы можем либо подумать, что «Hongmeng 2.0» выбирает глубокую настройку сильно упрощенного Vue в C++, либо что он реализует поддерживающую интерфейсную инфраструктуру, тесно связанную с сильно упрощенным (и закрытым) DOM. Поэтому, чтобы продолжить изучение принципов этого графического интерфейса, мы должны войти в его часть C++, чтобы понять реализацию его JS-движка и уровня выполнения.

В чем разница и связь между движком JS и средой выполнения? Двигатели JS обычно должны соответствовать только спецификации ECMA-262, которая не определяет никаких API-интерфейсов платформы с «побочными эффектами». отsetTimeoutприбытьdocument.getElementByIdприбытьconsole.logсноваfs.readFile, эти функции, которые могут выполнять фактические операции ввода-вывода, должны быть выполнены "Склеить API движка и API платформы вместе" предоставляется во время выполнения. Сам принцип выполнения не сложен.Например в моей личной статье "От движка JS к среде выполнения JS, можно посмотреть как использовать готовыеQuickJSEngine, создайте среду выполнения самостоятельно.

Итак, в «Hongmeng 2.0», как построена среда выполнения JS? Есть несколько ключевых моментов:

  • Выбран JS-движокJerryScript, встроенный движок JS, разработанный Samsung.
  • каждый в виде<text>и<div>Компоненты XML-тегов каждого из них соответствуют классу компонентов C++, привязанному к JerryScript, напримерTextComponentиDivComponentЖдать.
  • В дополнение к нативным объектам пользовательского интерфейса в JS также есть ряд объектов, которые начинаются с@systemвстроенные модули с префиксом, которые предоставляют возможности платформы, такие как Router/Audio/File, доступные в JS (см.ohos_module_config.h).

Особого внимания здесь заслуживает маршрутизатор. Он сильно отличается от принципа реализации обычной маршрутизации веб-платформы, такой как vue-router, которая специально настраивается во время выполнения (см.router_module.cpp,js_router.cppиjs_page_state_machine.cpp). Вкратце, эта «маршрутизация» реализована так:

  • Вызов страницы переключения в JSrouter.replaceСобственный метод в C++.
  • В С++ на основе нового пути URI страницы (например,pages/detail) загрузите новую страницу JS, создайте новый экземпляр конечного автомата страницы и переключите его в состояние Init.
  • В процессе Init нового конечного автомата вызовите механизм JS, чтобы оценить код JS новой страницы и получить ViewModel новой страницы.
  • Добавить параметры маршрута во ViewModel, уничтожить старый конечный автомат и JS-объекты на нем.

Таким образом, мы можем обнаружить, что так называемый «маршрут переключения» здесь на самом деле ближе к «странице обновления» веб-браузера. Можем ли мы считать, что возможности этой среды выполнения JS уже могут соответствовать ядру браузера уровня WebKit?

Конечно, до этого еще далеко. По сравнению с WebKit, он не поддерживает синтаксический анализ HTML и CSS (оба будут анализироваться и конвертироваться в JS с эквивалентным эффектом выполнения на этапе разработки), а также не требует постоянной динамической загрузки, синтаксического анализа и выполнения ресурсов в браузере. (маленькая программа представляет собой не что иное, как несколько локальных статических JS-файлов). Что касается верстки и рендеринга, то здесь, естественно, есть большой пробел, о котором будет сказано в последнем разделе.

Кроме того, я полагаю, что многим студентам будет интересно узнать о движке JerryScript. Этот раздел завершается некоторой личной информацией по этому поводу.

Движок JerryScript — это интерпретатор JS, специально реализованный для встраиваемого оборудования и поддерживающий только стандарт ES5.1. существуетQuickJS Benchmark, вы можете увидеть результаты сравнения их производительности:

Видно, что по производительности JerryScript значительно слабее QuickJS и Hermes на движке без JIT. Если сравнивать с V8 с включенным JIT, то он будет даже на два порядка медленнее. Таким образом, это очень низкоуровневый движок для конкретных устройств.Если вам нужно поддерживать базовые библиотеки (или даже их соответствующие семейные корзины), которые являются стандартными в средних и крупных интерфейсных проектах, таких как React и Vue, вам возможно, все же придется использовать более мощный двигатель.

Для использования JerryScript те, у кого большой опыт работы с приложениями в той же сцене, должны бытьRT-Threadоснователь@midnightbear, смарт-часы, которые они разработали в сотрудничестве с отечественным производителем первого уровня, используют JerryScript для реализации пользовательского интерфейса, и продукт будет запущен в ближайшее время. Некоторые отзывы их команды об использовании JerryScript также соответствуют приведенной выше оценке, которая резюмируется следующим образом:

  • JerryScript имеет лучшую производительность, чем QuickJS, с точки зрения объема и использования памяти.
  • Стабильность JerryScript слабее, чем у QuickJS, и есть некоторые проблемы, которые сложно обойти.
  • JerryScript немного бессилен перед лицом немного большей (более 1M) базы кода JS.

Так являются ли знаменитый QuickJS и Hermes от Facebook тестом следующего поколения для JS-движков без JIT? Не обязательно так. В связи с этим вы можете обратиться к ответу о личных знаниях:Поскольку TypeScript продолжает набирать популярность, будет ли среда выполнения, которая непосредственно запускает TypeScript?Static TypeScript, разработанный Microsoft для упомянутого здесь образовательного проекта MakeCode, потенциально может стать высокопроизводительной языковой средой JS следующего поколения. Ограничивая и создавая цепочку инструментов для статически строго типизированного подмножества TypeScript, STS может приблизиться к уровням производительности V8 без JIT, используя при этом на два порядка меньше памяти, чем V8. Это позволяет использовать STS не только для разработки приложений с интенсивным вводом-выводом, таких как обычные приложения, но и для разработки приложений с более интенсивными вычислениями (требуется покадровый рендеринг), таких как небольшие игры на встроенном оборудовании.Большой прорыв.

Поэтому, когда «Hongmeng 2.0» все еще нуждается в квалифицированных разработчиках для создания среды для запуска Hello World, Microsoft позволила миллионам детей использовать TypeScript для написания небольших игр для обучения портативных игровых консолей на веб-странице. ** Здесь нет скептиков, я просто хочу напомнить нам, что, когда мы болеем за отечественную «веху», мы также должны ясно видеть тенденцию передового фронта отрасли, вот и все.

Графический слой рисования

После понимания среды выполнения JS остается последний вопрос: как различные объекты Component в среде выполнения JS отображаются в виде пикселей на таких устройствах, как часы?

Это связано с другим в «Hongmeng 2.0».graphic_liteсклад. Можно считать, что это графический интерфейс, который фактически выполняет фактическое рисование. как раньшеTextComponentДругие собственные компоненты будут соответствовать какой-либо графической библиотеке. Посмотреть здесь. Он реализует и предоставляет две системы API: «графический интерфейс с непосредственным режимом в стиле холста» и «графический интерфейс с сохраненным режимом в стиле DOM» довольно классическим способом на уровне C++ (о разнице и связи между графическим интерфейсом с непосредственным режимом и сохраненным режимом см. личныйIMGUI научно-популярный ответ). Таким образом, суть этой графической подсистемы примерно такова:

  • Графическая библиотека предоставляетUIViewЭтот базовый класс управления C++, который имеет рядOnClick / OnLongPress / OnDragвиртуальная функция. В основном каждый собственный класс Component, доступный в JS, соответствует подклассу UIView.
  • В дополнение к различным индивидуальным представлениям, он также открывает серию форм, таких какDrawLine / DrawCurve / DrawTextРавно-императивный метод рисования.
  • В этой графической библиотеке есть модуль с ускорением на GPU под названием GFX, но в настоящее время он, похоже, имеет только токен.FillAreaВозможность монохромной заливки прямоугольника.

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

  • Простая поддержка длинного списка RecycleView.
  • Поддерживается простая раскладка Flex.
  • Поддерживает внутренний механизм обновления грязных токенов Invalidate.

Что касается нескольких ключевых возможностей рендеринга 2D UI, то их можно разделить на три категории: путь, растровое изображение и текст. Эта графическая библиотека занимается этими аспектами, и, наконец, краткое введение.

Прежде всего, для растровых изображений эта графическая библиотека опирается наlibpngиlibjpegВыполните декодирование изображения, и тогда вы сможете использовать растровое изображение в памяти для рисования.

Затем для пути графическая библиотека реализует различные методы рисования пикселей в самом ЦП Типичным примером является исходный код рисования этой кривой Безье:

void DrawCurve::DrawCubicBezier(const Point& start, const Point& control1, const Point& control2, const Point& end,
    const Rect& mask, int16_t width, const ColorType& color, OpacityType opacity)
{
    if (width == 0 || opacity == OPA_TRANSPARENT) {
        return;
    }

    Point prePoint = start;
    for (int16_t t = 1; t <= INTERPOLATION_RANGE; t++) {
        Point point;
        point.x = Interpolation::GetBezierInterpolation(t, start.x, control1.x, control2.x, end.x);
        point.y = Interpolation::GetBezierInterpolation(t, start.y, control1.y, control2.y, end.y);
        if (prePoint.x == point.x && prePoint.y == point.y) {
            continue;
        }

        DrawLine::Draw(prePoint, point, mask, width, color, opacity);
        prePoint = point;
    }
}

Основываясь на математических знаниях средней школы, нам нетрудно понять, как рисуется такая кривая: набрать достаточное количество точек (то есть по умолчанию 1000)INTERPOLATION_RANGE) в качестве входных данных для интерполяции, вычислить координаты XY выражения кривой точка за точкой, а затем напрямую изменить память кадрового буфера, где находится позиция пикселя. Эта реализация в стиле учебника является наиболее классической, но если вы хотите использовать ее для оценки черной магии в Skia, не будьте слишком строги к себе.

Наконец, для рисования текста потребуется некоторая обработка разбора шрифта, позиционирования, RTL и переноса строк. Эта часть фактически реализована с использованием некоторых распространенных в отрасли базовых библиотек с открытым исходным кодом. Например, для слова «тюрьма» вы можете найти несколько открытых зависимостей графической библиотеки, каждая из которых играет свою роль:

  • harfbuzz- Используется, чтобы сообщить вызывающему абоненту, где поставить глифы «тюрьмы».
  • freetype- Декодируйте глифы «jay» из файлов шрифтов, таких как Arial, Hei и т. д., и растрируйте их в пиксели.
  • icu- Обращайтесь со многими странными особыми случаями в Unicode, этот лично не понятен, пропустите его.

На этом этапе мы можем разобраться с очень общим процессом рендеринга:

  • Выполнить в JSthis.hello = 'PPT'например код, запускающий отслеживание зависимостей.
  • Обратный вызов отслеживания зависимостей JS запускает собственную функцию для обновления состояния компонента C++ Component.
  • Компонент обновляет состояние связанного с ним подкласса UIView, вызывая обновление графической библиотеки.
  • Графическая библиотека обновляет состояние пикселей в памяти для завершения рисования.

Это моя личная интерпретация стека технологий графического интерфейса «Hongmeng 2.0». Время ограничено дальше не копал, приветствую (цивилизованную) критику и исправления.

Суммировать

Специальное заявление: Эта часть субъективных комментариев относится только к текущей части графического интерфейса «Hongmeng 2.0», пожалуйста, не искажайте ее по своему желанию.

Что касается основных моментов «Hongmeng 2.0» в части графического интерфейса, я могу вспомнить следующее:

  • Там действительно есть прагматичный (но совершенно не похожий на PPT-презентацию года) код.
  • Это не оболочка WebView, верстка и отрисовка делаются сами собой.
  • Понимание прочитанного также возможно без необходимости компьютерных знаний за пределами уровня бакалавриата.

Что касается очевидных (а не просто каких-то уродливых строчек кода) отсутствующих или проблемных, похоже, что они следующие:

  • Слой JS-фреймворка
    • Нет базовых возможностей межкомпонентного взаимодействия (таких как props/emit и т.д.)
    • Нет базовых возможностей пользовательских компонентов
    • Нет возможностей управления состоянием, кроме базового отслеживания зависимостей.
  • JS-движок и уровень выполнения
    • Стандартная поддержка слишком мала для запуска интерфейсных фреймворков следующего поколения, таких как Vue 3.0, для которых требуется прокси.
    • Уровень производительности слабый, и сложно поддерживать средние и большие JS-приложения.
    • Отсутствует открытый API объектной модели в стиле DOM, который не способствует сглаживанию различий на верхнем уровне.
  • слой рендеринга графики
    • Реальное ускорение графического процессора недоступно
    • Нет расширенных возможностей рендеринга, таких как SVG и форматированный текст.
    • Canvas имеет низкую степень завершенности, в нем отсутствует стек состояний и множество API.

Недостатков вроде бы много, но стали бы вы ругать машину за то, что у нее нет реактивного двигателя? Для сценариев разной сложности, естественно, существуют разные оптимальные архитектурные решения. В настоящее время этот дизайн действительно подходит для встроенного оборудования и простых сценариев «небольших программ». Но если посмотреть на это по так называемым требованиям «распределенной полносценовой кроссплатформенности», то сложность этой архитектуры совершенно несопоставима по сравнению с современными веб-браузерами или графическими интерфейсами iOS и Android.Если вы хотите реализовать его на мобильном телефоне, вам почти наверняка потребуется добавить большое количество сложных модулей и провести существенную архитектурную эволюцию и редизайн..

Конечно, автопроизводители не стали бы говорить, что они построили самолеты, не так ли?

Короче говоря, это действительно тарелка мапо-тофу, приготовленная своими руками, но это не полноценный маньчжурский и ханьский банкет у некоторых людей.

Наконец, личный субъективный комментарий:

Во-первых, стек технологий GUI достиг массового уровня, который можно получить при сборке и заимствовании продуктов с открытым исходным кодом. Однако с точки зрения верхнего предела производительности и выразительности все еще существует разрыв между поколениями между его основными модулями и передовой комбинацией передовых решений отрасли, университета, исследований и промышленности, таких как Microsoft MakeCode.

Во-вторых, не надо расценивать это как Ракетостроение, требующее точных расчетов большого количества специалистов — не для того, чтобы принижать независимые исследования и разработки, а чтобы искренне надеяться, что все смогут понять»,Я тоже могу в этом поучаствовать!«Операционная система и графический интерфейс не так уж загадочны, и есть много отечественных зрелых продуктов с открытым исходным кодом, доступных для изучения, использования и внесения вклада (кстати, рекомендуется, чтобы их было легко испытать, а также они производились внутри страны).RT-Threadв качестве введения для первых последователей). Ведь только если вы действительно понимаете, что такое продукт технически, людям со скрытыми мотивами будет непросто задавать ритм, верно?

Наконец, всем фронтенд-разработчикам, знакомым с JavaScript, почему вы все еще смеетесь над Хунмэном? Hongmeng — код богатства JavaScript в Китае! ** Принятие Hongmeng JavaScript, такого как «самое важное оружие страны», может значительно повысить уверенность на дороге, теоретическую уверенность, культурную уверенность и уверенность в стеке технологий. Пока вы сочетаете сплайсинг и самопознание в этой форме, вы можете одним махом завоевать высокую репутацию по всей стране.Эта дорога действительно увлекательна (шепотом)

Мы должны объединиться, активно продвигать и пропагандировать ядерный сдерживающий статус JavaScript в соревновании великих держав и стремиться подняться на такую ​​высоту, где все будут уважать вас, пока вы говорите, что умеете писать на JavaScript — пока вы являетесь прикрытием. -Конец программиста, купить Билеты, можно встать в очередь, можно уступить свое место для поездки, а можно открыть комнату бесплатно... Хорошие времена наступили!

Хотите быть опорой страны? Приходите писать JavaScript!

Нечего сказать, я буду усердно работать!

Категории