Demystifying the JS development framework in the Hongmeng system

Author | justjavac

Source | justjavac

Hongmeng is finally released, and the developers are finally "boiling".

The source code is hosted on Code Cloud, a well-known open source platform in China, https://gitee.com/openharmony

I also downloaded the source code for the first time, studied for one night, wrote a hello world program by the way, and handily provided 2 PRs to Hongmeng Document.

Of course, I am most interested in Hongmeng's JS framework ace_lite_jsfwk. From the name, it can be seen that this is a very lightweight framework. The official introduction says it is "lightweight JS core development framework".

When I read the source code, I found that it is indeed light. The core code has only 5 js files, which is about 300-400 lines of code. (No unit test)

  • runtime-core\src\core\index.js

  • runtime-core\src\observer\observer.js

  • runtime-core\src\observer\subject.js

  • runtime-core\src\observer\utils.js

  • runtime-core\src\profiler\index.js

As you can see from the name, these codes implement an observer pattern. In other words, it implements a very lightweight MVVM pattern. A responsive system is realized by using attribute hijacking technology similar to vue2.

This should be one of the "three self-realizations" of the current training class. (Implement Promise myself, implement vue myself, implement react myself)

An Observer stack is defined in utils to store observers. The subject defines the observer. When we observe an object, that is, the operation of hijacking the properties of the object, and also includes some array functions, such as push, pop, etc. This file should have the most code, 160 lines. The observer's code is even simpler, fifty or sixty lines.

When we are developing, we use Toolkit to compile and package the HML, CSS and JS files written by the developer into a JS Bundle, and then parse and run the JS Bundle into a C++ native UI View component for rendering.

"By supporting third-party developers to use declarative APIs for application development, and data-driven view changes, a large number of view operations are avoided, which greatly reduces the difficulty of application development and improves developer development experience." It's basically a small program-style development experience.

In the src\core\base\framework_min_js.h file, this compiled js is compiled into the runtime. The compiled js file is less than 3K, which is really lightweight.

js runtime does not use V8, nor does it use jscore. Instead, JerryScript was chosen. JerryScript is an ultra-lightweight JavaScript engine for the Internet of Things.

It can execute ECMAScript 5.1 source code on devices with less than 64 KB of memory. This is why it is said in the document that the Hongmeng JS framework supports ECMAScript 5.1.

On the whole, this js framework uses about 96% of C/C++ code and 1.8% of JS code. The components written in the htm file will be compiled into native components.

And app_style_manager.cpp and seven or eight files at the same level are used to parse the css and finally generate the native layout.

Although there are several weex packages in the SDK, the shadow of react has also been found. But there is no yoga related content in the C/C++ code (not found in the global search).

The packages in the SDK are only used as loader, probably for parsing htm components when webpack is packaged. Compile the htm template into js code.

Overall, it was better than I expected.


更多精彩推荐
☞谷歌软件工程师薪资百万,大厂薪资有多高?
☞CSDN 创始人蒋涛:选择长沙作“大本营”,打造开发者中心城市
☞杜甫在线演唱《奇迹再现》、兵马俑真人还原……用AI技术打破次元壁的大谷来参加腾讯全球数字生态大会啦!
☞开放源码,华为鸿蒙HarmonyOS 2.0来了
☞20张图,带你搞懂高并发中的线程与线程池!
☞跨链,该怎么跨?
点分享点点赞点在看

Guess you like

Origin blog.csdn.net/csdnnews/article/details/108570945