Jetons un coup d'œil à la pile technologique de l'interface graphique JavaScript Hongmeng

<p>

<p>Recommandations d'apprentissage associées : Tutoriel vidéo javascript

<p>Comme nous le savons tous, le nouveau open source "Hongmeng 2.0" utilise JavaScript comme langage IoT Framework pour le développement d'applications. Cela signifie que JavaScript est redevenu un sujet brûlant au niveau des informations diffusées après le décollage de SpaceX. Ce serait dommage de n'utiliser le Yin Yang Qi que pour une si bonne opportunité. En tant que science populaire, cet article n'utilisera pas une loupe pour découvrir les failles du code afin de trouver des défauts, mais espère expliquer en termes simples en quoi consiste l'interface graphique qu'il prend en charge. Tant que vous avez une compréhension générale des bases de l’informatique, il ne devrait y avoir aucun obstacle à la lecture de cet article.

<p>Nous savons déjà que sur "Hongmeng 2.0", les développeurs n'ont besoin que d'écrire une logique métier JavaScript sous la forme de composants Vue pour la restituer dans une interface utilisateur sur du matériel embarqué tel que des montres intelligentes. Quels modules de base doivent être impliqués dans ce processus ? Lesquels de ces modules sont auto-développés et lesquels utilisent des projets open source prêts à l'emploi ? Il est divisé en trois couches abstraites de haut en bas pour introduire :

• Couche de framework JS, qui peut être comprise comme un framework JavaScript de style Vue grandement simplifié
• Moteur JS et couche d'exécution, peut être compris comme un environnement d'exécution de style WebKit grandement simplifié
• Couche de rendu graphique, peut être compris comme un Skia- bibliothèque de dessins graphiques de style

<p>Ces trois couches d'abstraction forment une pile technologique GUI pour le matériel embarqué. Contrairement à de nombreuses opinions publiques qui crient "insondable/insondable", je pense personnellement qu'au moins pour la partie GUI, tout développeur de première ligne en Chine qui a été exposé aux solutions hybrides cross-end actuelles ou au développement d'un runtime JS peut facilement commencer à partir du code source. Faisons une interprétation et une analyse couche par couche.

JS Framework Layer

<p>Du point de vue de haut niveau, si vous souhaitez utiliser "Hongmeng 2.0" pour restituer un texte dynamique, il vous suffit d'écrire le HML suivant (de type XML) code de format :

<!-- hello.hml --><text onclick="boil">{{hello}}</text>复制代码

<p> Ensuite, écrivez du JavaScript comme ceci dans le répertoire de même niveau :

// hello.jsexport default {  data: {    hello: 'PPT'
  },
  boil() {    this.hello = '核武器';
  }
}复制代码

<p> De cette façon, tant que l'on clique sur le texte, la méthode boil sera appelée, tournant PPT dans 核武器.

<p>Que se passe-t-il derrière tout ça ? Les étudiants qui connaissent Vue 2.0 devraient immédiatement penser aux choses suivantes :

• Un mécanisme de prétraitement pour XML est nécessaire pour le convertir en une structure de fonctions imbriquées dans JS. De cette façon, il vous suffit d'effectuer une simple évaluation au moment de l'exécution et vous pouvez utiliser JS pour générer une interface utilisateur conforme à la structure XML.
• nécessite un mécanisme d'événement pour que le rappel correspondant puisse être exécuté lorsque l'événement onclick est déclenché.
• nécessite un mécanisme de détournement de données afin que le rappel correspondant puisse être exécuté lors de l'attribution d'une valeur à this.hello.
• Doit pouvoir mettre à jour les contrôles des objets de l'interface utilisateur dans les rappels.

<p>Comment ces choses sont-elles réalisées ? Pour faire simple, cela ressemble à ceci :

• Le prétraitement XML s'appuie sur le package open source NPM prêt à l'emploi pour convertir les attributs onclick en XML en champs d'attributs de Objets JS.
• L'enregistrement et le déclenchement des événements sont implémentés directement en C++. Les propriétés de l'objet JS onclick obtenues à l'étape précédente seront vérifiées et enregistrées en C++, ce qui équivaut à ce que tous les composants soient natifs.
• Le mécanisme de détournement de données est implémenté en JS et est un ViewModel basé sur Object.defineProperty (quelques centaines de lignes). Les
• Les mises à jour du contrôle de l'interface utilisateur seront implémentées en appelant des méthodes natives C++ dans le rappel JS automatiquement exécuté par le ViewModel. Cette partie est entièrement réalisée de manière implicite et n'expose pas l'API standardisée de style document.createElement.

<p>Étant donné qu'un grand nombre de fonctionnalités des frameworks JS courants ont été directement implémentées en C++, l'ensemble de la pile technologique GUI est implémentée en utilisant du JavaScript pur (voir principalement ace_lite_jsfwk sous le référentiel core/index.js, observer.js et subject.js), ce qui équivaut à avoir et avoir uniquement cette fonction :

<p>Un ViewModel qui peut être regardé.

<p>Quant à la complexité de mise en œuvre et à la qualité du framework JS pur, objectivement parlant, s'il s'agit d'un travail amateur personnel, il peut être utilisé comme un bon bonus lors de l'entretien de recrutement de l'école.

Moteur JS et couche d'exécution

<p>Après avoir compris la couche framework JS, on peut soit penser que "Hongmeng 2.0" a choisi de personnaliser en profondeur la Vue hautement simplifiée en C++, soit on peut penser que Il implémente étroitement un cadre frontal de support autour d'un DOM hautement simplifié (et privé). Par conséquent, si nous voulons continuer à explorer les principes de cette interface graphique, nous devons entrer dans sa partie C++ et comprendre l'implémentation de son moteur JS et de sa couche d'exécution.

<p>Quelles sont les différences et les connexions entre le moteur JS et le runtime ? Les moteurs JS doivent généralement uniquement se conformer à la spécification ECMA-262, qui ne définit aucune API de plate-forme ayant des « effets secondaires ». De setTimeout à document.getElementById à console.log à fs.readFile, ces fonctions qui peuvent effectuer de véritables opérations d'E/S nécessitent toutes un environnement d'exécution consistant à "coller ensemble l'API du moteur et l'API de la plate-forme". Le principe du runtime lui-même n'est pas compliqué. Par exemple, dans mon article personnel "Du moteur JS au runtime JS", vous pouvez voir comment créer vous-même un runtime à l'aide du moteur QuickJS prêt à l'emploi.

<p>Alors, comment le runtime JS est-il construit dans « Hongmeng 2.0 » ? Il y a plusieurs points clés :

• Le moteur JS a choisi JerryScript, un moteur JS embarqué développé par Samsung.
• Chaque composant de balise XML sous la forme de <text> et <p> correspond à une classe de composant C++ liée à JerryScript, comme TextComponent et pComponent, etc.
• En plus des objets natifs de l'interface utilisateur, il existe également une série de modules intégrés préfixés par @system dans JS, qui fournissent des fonctionnalités de plate-forme telles que Routeur / Audio / Fichier disponibles dans JS (voir ohos_module_config.h ).

<p>Ce qui mérite particulièrement d'être mentionné ici, c'est le routeur. Il est très différent du principe de mise en œuvre du routage de plate-forme Web courante telle que vue-router. Il est spécialement personnalisé en profondeur dans le runtime (voir router_module.cpp, js_router.cpp et js_page_state_machine.cpp). Pour faire simple, ce « routage » est implémenté comme ceci :

• Appelez la router.replace méthode native de changement de page en JS et entrez C++.
• En C++, chargez la nouvelle page JS en fonction du chemin URI de la nouvelle page (tel que pages/detail), créez une nouvelle instance de machine d'état de page et passez-la à l'état Init.
• Dans le processus Init de la nouvelle machine à états, appelez le moteur JS pour évaluer le code JS de la nouvelle page et obtenir le ViewModel de la nouvelle page.
• Ajoutez les paramètres de route au ViewModel et détruisez l'ancienne machine d'état et les objets JS qu'elle contient.

<p>Nous pouvons donc constater que ce qu'on appelle ici la « route de commutation » est en fait plus proche de la « page d'actualisation » d'un navigateur Web. Pouvons-nous donc penser que les capacités de ce runtime JS peuvent déjà comparer le noyau du navigateur au niveau WebKit ?

<p>Bien sûr, c’est encore loin d’être le cas. Comparé à WebKit, il ne prend pas en charge l'analyse du HTML et du CSS (les deux seront analysés et convertis en JS avec le même effet d'exécution pendant la phase de développement), et il n'a pas non plus le défi de charger, d'analyser et d'exécuter de manière dynamique et continue des ressources dans le navigateur (petit Le programme n'est rien de plus que quelques fichiers JS statiques locaux). Quant à la composition, la mise en page et le rendu, il existe naturellement une grande lacune, qui sera évoquée dans la dernière section.

<p>De plus, je pense que de nombreux étudiants seront curieux de connaître le moteur JerryScript. Cette section se termine en partageant quelques informations personnelles sur cette question.

<p>Le moteur JerryScript est un interpréteur JS spécialement implémenté pour le matériel embarqué et prend uniquement en charge la norme ES5.1. Dans QuickJS Benchmark, vous pouvez voir leurs résultats de comparaison de performances :

<p>Vous pouvez voir qu'en termes de performances, JerryScript est nettement plus faible dans les moteurs sans JIT Pour QuickJS et Hermès. Si on le compare au V8 avec JIT activé, il sera même deux ordres de grandeur plus lent. Il s'agit donc d'un moteur très spécifique pour les appareils bas de gamme. Si vous avez besoin de prendre en charge des bibliothèques de base standard dans les projets frontaux de taille moyenne et grande tels que React et Vue (ou même leurs compartiments familiaux correspondants), vous en aurez peut-être toujours besoin. d'utiliser un moteur plus puissant.

<p> Concernant l'utilisation de JerryScript, le fondateur de RT-Thread @midnightbear est sans aucun doute celui qui possède une grande expérience en matière d'application dans le même scénario. La montre intelligente qu'ils ont développée en coopération avec un fabricant national de premier rang a utilisé JerryScript pour implémenter le. UI Le produit actuel est disponible maintenant. Il est sur le point d'être lancé. Certains retours de leur équipe sur l'utilisation de JerryScript sont également cohérents avec l'évaluation ci-dessus. En résumé, ils sont les suivants :

• JerryScript 在体积和内存占用上，相比 QuickJS 有更好的表现。
• JerryScript 的稳定性弱于 QuickJS，有一些难以绕过的问题。
• JerryScript 面对稍大（1M 以上）的 JS 代码库，就有些力不从心了。

<p>那么师出名门的 QuickJS 和 Facebook 的 Hermes，是否就是无 JIT 式 JS 引擎的下一代标杆了吗？倒也未必如此。这方面可以参考个人的知乎回答：随着 TypeScript 继续普及，会不会出现直接跑 TypeScript 的运行时？这里提到的微软为教育项目 MakeCode 研发的 Static TypeScript，就相当有潜力成为下一代的高性能 JS 系语言环境。通过限定 TypeScript 的静态强类型子集并为其搭建工具链，STS 可以做到无需 JIT 也能接近 V8 的性能水平，同时内存占用比 V8 少两个数量级。这使得 STS 不光能用于开发普通 app 这类 IO 密集的应用，还能顺利在嵌入式硬件上开发小游戏这类更偏计算密集（需逐帧更新渲染）的应用，在工程能力上是一项很大的突破。

<p>所以说，当「鸿蒙 2.0」还需要熟练开发者勉强搭建出环境跑通 Hello World 时，微软已经让上百万小朋友都能用 TypeScript 在网页里给教学用的掌上游戏机写小游戏入门编程了。这里没什么唱反调的意思，只希望提醒一下我们在为国产「里程碑」欢呼时，也要清醒地看到业界前沿的动向，仅此而已。

图形绘制层

<p>理解 JS 运行时之后，还剩最后一个问题，即 JS 运行时中的各种 Component 对象，是如何被绘制为手表等设备上的像素的呢？

<p>这就涉及「鸿蒙 2.0」中的另一个 graphic_lite 仓库了。可以认为，这里才是真正执行实际绘制的 GUI。像之前的 TextComponent 等原生组件，都会对应到这里的某种图形库 View。它以一种相当经典的方式，在 C++ 层实现并提供了「Canvas 风格的立即模式 GUI」和「DOM 风格的保留模式 GUI」两套 API 体系（对于立即模式和保留模式 GUI 的区别与联系，可参见个人这篇 IMGUI 科普回答）。概括说来，这个图形子系统的要点大致如下：

• 图形库提供了 UIView 这个 C++ 控件基类，其中有一系列形如 OnClick / OnLongPress / OnDrag 的虚函数。基本每种 JS 中可用的原生 Component 类，都对应于一种 UIView 的子类。
• 除了各种定制化 View 之外，它还开放了一系列形如 DrawLine / DrawCurve / DrawText 等命令式的绘制方法。
• 这个图形库具备名为 GFX 的 GPU 加速模块，但它目前似乎只有象征性的 FillArea 矩形单色填充能力。

<p>在基础 UI 控件方面，不难找到一些值得一提的自研模块特性：

• 支持了简易的 RecycleView 长列表。
• 支持了简易的 Flex 布局。
• 支持了内部的 Invalidate 脏标记更新机制。

<p>至于 2D UI 渲染中的几项关键能力，则基本可分为路径、位图和文字三类。这个图形库在这几个方面都有涉及，最后简单介绍一下。

<p>首先对于位图，这个图形库依赖了 libpng 和 libjpeg 做图像解码，然后即可使用内存中的 bitmap 图像做绘制。

<p>然后对于路径，这个图形库自己实现了各种 CPU 中的像素绘制方法，典型的例子就是这个贝塞尔曲线的绘制源码：

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;
    }
}复制代码

<p>基于高中的数学知识，我们不难明白这种曲线是如何绘制出来的：取足够多的点（也就是那个默认 1000 的 INTERPOLATION_RANGE）作为插值输入，逐点计算出曲线表达式的 XY 坐标，然后直接修改像素位置所在的 framebuffer 内存即可。这种教科书式的实现是最经典的，不过如果要拿它对标 Skia 里的黑魔法，还是不要勉为其难了吧。

<p>最后对于文字的绘制，会涉及一些字体解析、定位、RTL和折行等方面的处理。这部分实际上也是组合使用了一些业界通用的开源基础库来实现的。比如对于「牢」这个字，就可以找到图形库的这么几个开源依赖，它们各自扮演不同的角色：

• harfbuzz - 用来告诉调用者，应该把「牢」的 glyph 字形放在哪里。
• freetype - 从宋体、黑体等字体文件中解码出「牢」的 glyph 字形，将其光栅化为像素。
• icu - 处理 Unicode 中许多奇葩的特殊情况，这块个人不了解，略过。

<p>到这里，我们就可以理出一个非常概括性的渲染流程了：

• Exécutez du code comme this.hello = 'PPT' en JS pour déclencher le suivi des dépendances.
• Le rappel de suivi des dépendances JS déclenche les fonctions natives pour mettre à jour l'état du composant C++.
• Le composant met à jour l'état de sa sous-classe UIView liée, déclenchant les mises à jour de la bibliothèque graphique.
• La bibliothèque graphique met à jour l'état des pixels en mémoire et termine le dessin.

<p>Voici mon interprétation personnelle de la pile technologique GUI de "Hongmeng 2.0". En raison du temps limité, je n'ai pas approfondi davantage, et les critiques et corrections (civilisées) sont les bienvenues.

Résumé

<p>Déclaration spéciale : cet examen subjectif concerne uniquement le cadre GUI actuel de "Hongmeng 2.0", veuillez ne pas le mal interpréter à volonté.

<p>Quant aux points forts de "Hongmeng 2.0" dans la partie GUI, je peux personnellement penser à ceux-ci :

• Il est pragmatique (mais complètement différent du PPT introduction à l'époque) code.
• Ce n'est pas un shell WebView, la mise en page et le dessin sont réalisés par vous-même.
• Vous n’avez pas besoin d’avoir des connaissances en informatique au-delà du niveau du premier cycle pour lire et comprendre facilement.

<p>En ce qui concerne les lacunes ou problèmes évidents (pas seulement quelques lignes de code laides), il semble qu'il existe actuellement les éléments suivants :

• Couche de framework JS
  • Aucune capacité de communication inter-composants de base (telle que props/emit, etc.)
  • Aucune capacité de base de composant personnalisé
  • Aucune Capacités de gestion d'état autres que le suivi des dépendances de base
• Moteur JS et couche d'exécution
  • La prise en charge standard est trop faible pour exécuter des frontaux de nouvelle génération qui nécessitent un proxy tel que Vue 3.0 Le framework
  • a de faibles performances et est difficile à prendre en charge les applications JS de moyenne et grande taille
  • Il n'y a pas d'API de modèle objet de style DOM ouvert, ce qui n'est pas propice à lisser les différences dans les couches supérieures
• Couche de rendu graphique
  • Aucune accélération GPU substantielle disponible
  • Aucune capacité de rendu avancée telle que en SVG et texte enrichi
  • Canvas Complete Faible degré, manque de pile d'état et de nombreuses API

<p>Il semble qu'il y ait de nombreux défauts, mais accuseriez-vous la voiture de ne pas avoir de moteur à réaction ? Pour des scénarios de complexité différente, il existe naturellement différentes conceptions d’architecture optimales. À l'heure actuelle, il semble que cette conception soit en effet très adaptée au matériel embarqué et aux scénarios simples de « petits programmes ». Mais si nous l'examinons selon les exigences dites « multiplateformes distribuées à scénario complet », la complexité de cette architecture est totalement incomparable avec les navigateurs Web modernes ou les interfaces graphiques iOS et Android. Si vous souhaitez l'implémenter sur un téléphone mobile, vous devrez presque certainement ajouter un grand nombre de modules complexes et subir une évolution et une refonte architecturales substantielles.

<p>Bien sûr, les constructeurs automobiles ne diront pas qu’ils construisent des avions, n’est-ce pas ?

<p>Bref, il s'agit bien d'une assiette de Mapo Tofu maison, mais ce n'est pas le banquet Mandchou-Han comme certains le disent.

<p>Enfin, un commentaire subjectif personnel :

<p>Tout d'abord, cette pile technologique GUI a atteint le niveau grand public qui peut être obtenu lors de l'assemblage et de l'emprunt de produits open source. Cependant, en termes de performances et d'expressivité, il existe encore un écart générationnel d'un ordre de grandeur entre ses modules de base et les solutions de pointe industrie-université-recherche telles que Microsoft MakeCode.

<p>Deuxièmement, n'y pensez pas comme Rocket Science, qui nécessite des calculs de précision par un grand nombre d'experts - je ne rabaisse pas la recherche et le développement indépendants, mais j'espère sincèrement que tout le monde pourra comprendre, "Je peux aussi réellement participer à cette affaire ! " Le système d'exploitation et l'interface graphique ne sont pas si mystérieux. Il existe de nombreux produits open source nationaux matures disponibles pour l'apprentissage, l'utilisation et la contribution (d'ailleurs, RT-Thread, qui est très facile à expérimenter et est également fabriqué en Chine, est recommandé aux premiers utilisateurs). Après tout, ce n’est que si vous comprenez vraiment à quoi ressemble techniquement un produit qu’il sera moins susceptible d’être manipulé par des personnes ayant des arrière-pensées, n’est-ce pas ?

<p>Enfin, pour tous les développeurs front-end qui connaissent JavaScript, Pourquoi vous moquez-vous encore de Hongmeng d'une manière étrange ? Hongmeng est le code de richesse de JavaScript en Chine ! JavaScript est adopté par une « arme nationale » comme Hongmeng, qui peut considérablement améliorer la confiance routière, la confiance théorique, la confiance culturelle et la confiance technologique du front-end. Tant que nous combinons l'épissage et l'auto-recherche de cette manière, nous pouvons acquérir une grande réputation à travers le pays d'un seul coup. Cette route est vraiment fascinante (chuchotante)

<p>Nous devons nous unir et promouvoir et faire connaître vigoureusement. Le statut de JavaScript en tant qu'outil de dissuasion nucléaire dans la compétition entre les grandes puissances devrait atteindre un niveau où tant que vous dites que vous pouvez écrire du JavaScript, tout le monde vous respectera - tant que vous êtes un programmeur front-end, vous pouvez faire la queue quand acheter un billet, céder votre place en prenant un bus et obtenir une chambre Vous pouvez faire l'amour gratuitement... les bons moments arrivent !

<p>Envie de devenir un pilier du pays ? Écrivons JavaScript !

<p>Plus de mots, je vais travailler dur pour rajeunir le pays !

<p>Si vous souhaitez en savoir plus sur la programmation, faites attention à la rubrique Formation php !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!