On December 20, Tencent launched Hippy, an open source cross-end framework. In Tencent, Hippy has been running for 3 years. A total of 18 online businesses across BG are using Hippy, with average daily PV of over 100 million, and a complete ecosystem has been established. Compared to other cross-end frameworks, Hippy is more friendly to front-end developers: it follows W3C standards, complies with web development rules, uses JavaScript as the development language, and supports React and Vue, two mainstream front-end frameworks.
The state of the industry: Most cross-end frameworks are not front-end developer friendly
“Cross – end” is a popular word in front – end field. The popularity of “cross-terminal” is rooted in the fact that traditional web development is too limited by browser capabilities. In particular, the different implementations, offline capabilities and performance defects of various browsers make it difficult for App to meet the needs of user experience. In essence, the cross-end framework provides terminal capabilities for business development in a form. While using all terminal capabilities without limit, business development can only write one set of code as far as possible, which can meet performance requirements and reduce development costs.
But looking at cross-end development frameworks across the community, there are still two major problems:
-
Cross-end framework is difficult for front-end developers, if they do not have mobile terminal development ability, it is difficult to get started;
-
Platforms vary so much that you have to write a lot of platform-specific code for different platforms using different interfaces for the same function.
The reason for the above problems is that most of the cross-end frameworks in the industry are led by terminal developers, not from the perspective of front-end developers, so they are not friendly to front-end developers.
Tencent’s cross-end solution Hippy: Front-end developers are easier to use
Hippy cross-end framework is a cross-end solution launched by the QQ browser department for front-end developers. For the existing problems in the industry, Hippy adheres to W3C standards and complies with various rules of web development. From the perspective of front-end developers, Hippy uses Javascript as the development language and supports React and Vue, two mainstream front-end frameworks. For front-end developers, Hippy is easier to pick up and has a smoother learning curve.
Hippy implements engine pass-through architecture similar to Flutter (Fabric architecture in React Native). Modules developed by C++ are directly inserted into the JS engine to run, bypking the communication codec overhead of the front-end terminal and effectively improving the communication performance of JS front-end code and terminal. On top of that, Hippy is implementing high-performance self-painting to provide stronger performance and a better user experience.
The syntax of Hippy-React is similar to that of React Native to some extent. In addition, the official hippy-React-Web component library is provided to easily generate web pages.
|
|
|
The karaoke
react + hippy-react + hippy-react-web
The components, parameters and interfaces of Hippy-Vue fully comply with browser standards, and the front-end development can complete cross-end interface drawing with browser tags and common CSS selectors. Its advantages are as follows:
-
Front-end development a basic understanding of the limitations of Hippy-Vue development can be overhand cross-end development;
-
Can reuse the vast majority of the Web side of the ecosystem;
-
Web pages can be generated directly without a Web relay library.
In fact, hippy-VUE is really just a rendering layer on the terminal of the vUE on the browser, and in theory most of the VUE ecology on the web can be directly transferred.
|
|
|
King camp
vue + hippy-vue
Hippy has a complete ecosystem inside Tencent, including GCanvas, Lottie, SVG, etc., with corresponding component packages, and Hippy business component library, high-performance graphics library, exception reporting (supporting Sentry) developed by Tencent, which will be gradually opened to the outside world in the future.
Hippy Github address: github.com/Tencent/Hip…
Welcome to “Yunjia Community”, Hippy’s practical and principle analysis series of articles will be online in succession.
