preface
This front-end early chat was shared by Liu Fang (Song Xiaocai), Jim(Didi), Ziyang (Zheng Caiyun), Shenghuai (Alibaba), Baoge (DCloud), JJ(JD) and Pin (Tmall Genie)
As the Internet business forms more and more diversified, the front-end form is also more and more rich. For example, RN, Flutter, UNI-app, Taro, Ionic, etc., are available on the mobile terminal and electron is available on the desktop.
The front background
VUE.js
Is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects. On the other hand, when combined with modern toolchains and various supporting libraries, Vue is perfectly capable of providing drivers for complex, single-page applications.
react
React is a JavaScript library for building user interfaces.
RN(React Native)
RN is designed in the same way as React. It uses a declarative build mechanism to build a rich user interface for Android and IOS development.
Electron
Electron is GitHub’s cross-platform desktop application development tool that lets you develop desktop applications using web technologies.
Web development
Web1.0 – static interface, no data interaction
Web2.0 – dynamic interface, data interaction, jquery
Web3.0 -MVVM for data programming
Web4.0 – a set of code, multi – terminal operation
MVVM
MVVM is short for Model-view-ViewModel, the pattern used by all three front-end Web frameworks.
Chameleon
Didi’s own cross-end framework aims to unify the CROSS-end environment of MVVM.
Of all the cross-end solutions, which one do I choose?
If the browser is so cross-terminal, why not just use the browser instead of using this cross-terminal solution? With so many cross-end solutions available today, how do you choose? Such a question is no doubt in the hearts of small partners around. Browsers do cross end, and we know the popularity of PWA technology, which allows you to install web applications directly on your desktop, mobile, etc. For example, if you open the Angular documentation page, you’ll see a plus sign at the far right of the address bar, which tells you to “install” the page on the browser as an application. But browsers have been criticized for their performance. The browser performance on mobile phones is not powerful enough, and if one consumes a lot of power and delays the user experience is not good, I am afraid that users will also abandon the software.
Currently available cross-end frameworks include the RN, WEEX, Flutter, and Ionic. Flutter is a cross-platform framework promoted by Google and uses Dart, a somewhat unpopular language that you probably wouldn’t learn if you weren’t at Google.
The disadvantages of the WebView
WebView rendering pipeline is not optimal! When a WebView renders a web page, it renders HTML first, then CSS, and then javascript. But with all the use of frameworks today, we rely more on javascript and HTML as an entry point. Second, there is a lot of mutually compatible layout logic in WebView, and too many algorithms that are compatible with old layouts are not efficient. WebView rendering uses an asynchronous rasterization architecture, which is particularly memory hungry.
Flutter
Flutter uses Dart, and the Release version is AOT, which is non-dynamic. And packages are nowhere near NPM’s 100K+. But Dart has high performance and is comparable to native.
Kraken(base on flutter)
Kraken is a dynamic framework based on Flutter developed by the front-end architecture team of Amoy Technology Department, which can directly dock with the front-end ecosystem. And has a mature debugging scheme, can be real-time JS endpoint debugging. Supports features such as sourceMap and hot overloading.
In the browser, rasterization is done asynchronously, and when inertial scrolling occurs, a white screen will appear, which is always an unavoidable problem for WebView. With the efficient synchronous rasterization implementation of Flutter, Kraken can scroll long lists quickly without whitening the screen.
Karken with Cloud
The cloud is the future. For example, the current cloud services, cloud functions, as well as the major game companies in the cloud exploration, all show that the future of the world is in the cloud.
Kraken has also made architectural designs for cloud rendering. The application is separated into client and server, and WebSocket and WebRTC are used for communication. Simply render it on the server and send it to the client as a video stream. The client captures the user’s actions and transmits them to the server. If the network reaches a high enough level, the new architecture of the future can be used smoothly. This is different from modern browser rendering. Browser rendering still relies heavily on the client’s performance, whereas cloud rendering sends video streams to the client and the performance cost is minimal.
Cloud integration is the new trend of future rendering technology. Kraken not only brings users a new rendering engine, but also a controllable kernel and more thorough customization. You can write your OWN UI in a custom rendering engine to improve the user experience.
Mini program with uni-app
Uni-app is a cross-platform application front-end framework developed using vue. js. It supports various small application platforms and can be sent to APP, H5, etc. It can be described as a set of code, multi-terminal operation.
How is that done
Uni-app cross-ends are achieved mainly through compiler and runtime coordination. The compiler parses the code and converts the uni-APP specification code into the target platform code. At runtime, the life cycle functions and event functions of applets are forwarded to the VUE layer through uni-App Runtime and then executed in VUE.
Components: Different platforms have their own different properties, so uni-App replaces them with its own special syntax, which is then compiled into object code. If it is platform-specific code, it is implemented by conditional compilation at compile time. If the attribute is not supported by the target platform, it will not take effect at runtime, thus ensuring that no error will be reported even if it is not supported.
Applets and H5 differences
Applets are native, but H5 components are rendered in WebView. So when dealing with these specific problems, you need to do special processing through the framework. In the figure below, for example, a box represents a native component.
AIoT
Across the scene
The cross-end of the Internet of Things is different from the cross-end of the above. The first end has mobile phone, audio, TV, mobile phone, watch, car, etc. The system has IOS, Android, Linux, RTOS, etc., while the technology stack has RN, H5 applet, Cube applet, etc. The DSL used for RTOS development is a small program, but C++ is used for rendering.
Across the characteristics
The Internet of things involves many terminals, screens and technology stacks, and is still constantly introducing new devices, so it needs a longer time line to see the hot spots of technology. How do I continuously upgrade a cross-end solution?
-
Vertically disassemble applications from functional modules
After disassembly, each module can adopt a different cross-end solution, mainly considering how to maintain the source code
Components: Components can be split into layout components and functional components, for example
Layout components: View, Text
Functional components: Image, Video, Input, Canvas, Map
Across the template
The current mainstream templates fall into two categories
-
Instruction template
A template that defines a set of instructions on a string /XML basis to implement limited logical capabilities, such as Vue
-
JS language hybrid template
The use of special character segmentation in strings and XML, mixed with JS languages, gives templates full expressiveness, such as JSX.
conclusion
There is no best plan, only the most suitable plan, not blindly follow the community selection, need to be considered from the project.
Finally, a front-line early chat AD
Front-end Early chat conference goal to become useful, understand, copy the technology conference, planned to be held in 2020 >= 15, jointly held by front-end early chat and nuggets, front-end early chat conference schedule dynamic, video recording /PPT/ lecture notes download, please pay attention to the “front-end early chat” public account follow up.
The 11th front end job-hopping new strategy will be held on June 27th, please click to register, the poster and lecturer schedule are as follows:
After reading the
If you think the article is good, please give me a thumbs up. The mobile end is at the bottom and the PC end is at the left of the article. Than heart 💖 💖.