Innovative high-performance mobile UI Framework-canvas UI Framework

The inability to acquire in the WebView is "experience enhancement" and "basic ability", but now there are basically mature solutions. However, the late UI and Layout performance is currently lacking in WEB technology. Therefore, both Titanium and React Native are the starting points for solving performance as an exploration.

A watershed with slow and fast performance

The slow and fast standard is based on the theory that each second is greater than or equal to 60 fps (frames per second), and why it is a few fps, which is not much described.

According to this theory, all operations in "each frame" must be completed at 16ms.

Reasons for slow UI performance in WebView

• WebView single-threading model;
• Dom/css typesetting complex, the rendering needs a lot of computation;
• Animation is also a very important factor to consider.

Say two more animations.

The earliest animations were made with Settimeout/setinterval. The time of Settimeout/setinterval's processing callback is around 16ms.

So, it can be imagined that the normal use of these two functions are already more than MS, and then add reflow/repaint/compositing or skip frame is the norm.

Fortunately, the standard and browser vendors have earlier supported the animated interface RAF (Requestanimationframe function) to handle animation frame callbacks. Solves the problem that the above Settimeout/setinterval Animation insufficiency.

Reasons for poor DOM performance

The browser performs several steps:

Restyle/reflow/repaint Trigger conditions:

After you know the above information, consider the following conditions:

• Compose JavaScript logic, complex DOM and style, and finish rendering;
• HTTP request to download multimedia;
• Thread in a line;
• Mobile on the ARM architecture;

The above operation can be completed in 16ms per frame, think it is a tmd"magic" thing. So a variety of wonderful flower optimization appeared.

WebView High Performance component classification

Several methods of known high-performance components:

General Method:

The principle of this type is to reduce the number of restyle/reflow/repaint triggers by the use of artificial or normative means:

• The generic component optimizes the DOM structure and even reduces the complexity of reflow and DOM with virtual DOM.
• Optimize CSS to use less or skip the repaint phase. Using the method of compiling to identify part of CSS, transform left/top transformation into transform;

Skipping the layout and paint stages is the use of the Layer composite technique, the "opacity" and "transform" properties of the CSS to animate.

Only in the CSS and DOM structure to pick out some of the performance optimization of space, defect optimization space is limited, this optimization technique is usually placed in the final tuning of the use of the punch, can not be used as a conventional means.

Advanced method

The principle is to use native capabilities as much as possible and even convert JavaScript into native App code.

• Using JavaScript to set up the native component, the enhancements and high-performance components are handed to native for processing, as the "light components" previously mentioned in FEX do. This principle is similar to the PC era of ActiveX;
• The WebView function can be implemented with native.
• Use the native Activity's render thread to share the browser rendering pressure (Webviewcorethread is the WebView thread).
• The most dirty thing is to handle the hierarchical management of the UI on native. There is a need for the background thread to always detect Scroll/resize/ui change when the UI boundary has overlapping and overlay issues.
• JavaScript is translated into Java/oc code. Like React Native/titanium, JavaScript is translated into Native code, especially on UI components. (Interested classmates can decompile React Native written by Facebook Group)
• Example: Use React to map the virtual Web UI to Native View and translate the code logic into Native.

New Method-canvas UI

This is also the point to say, "develop the game" thinking to do UI component exploration, I call it the Canvas UI framework.

Canvas UI Framework

The idea of using the game to do the UI, the earliest I have this thought is 2014 years.

Why use Canvas?

A canvas is a H5 canvas element, a DOM element. The script controls the logic to add text and images to the canvas, and the browser only needs to be drawn once to form a picture.

• Using only one Canvas DOM element, reducing the number of DOM and rendering complexity, can turn the original CPU-intensive into GPU operations. The vast majority of Canvas is accelerated rendering with hardware GPU.
• The ALU (computational unit) of the GPU is much more than the CPU, while the control operation (logic) can be done in the CPU with JavaScript, and even CPU-intensive operations can be handled with webworker multithreading, thus achieving the ability to fully utilize hardware resources.
• The canvas canvas has a similar API for both JavaScript & H5 and native. So:
• Local debugging can be done in the browser.
• The worst scenario can be run in the browser with the Canvas UI.
• Further, you can improve performance by reflecting the browser canvas interface to the native canvas.

It is worth mentioning that Tencent's X5 kernel has built the Egret (Egret game engine and COCOS2DX), so the time line is stretched to see that the WebView canvas will be more powerful.

In 2014 years, many people have seen the default placed into the COCOS2DX engine browser, with WebView play "fishing talent" very smooth.

As a result, Canvas UI components are still quite feasible.

Solution Solutions

Using the game idea to solve the problem of DOM paint, the industry has long been an experiment. The first experiment was Zynga doing Angry Birds game manufacturers, 2010 wrote the demo scroller:

• Https://github.com/zynga/scroller

Designing and developing a Canvas-based UI framework system, because the system is relatively complex, need to take over the entire process of browser construction:

Verify the effect in the practice environment, to the original page of the DOM as a canvas, plus some tuning and comparison, the workload is relatively large, (including Zynga just to achieve a simple demo only)

It was put on hold for the moment.

When I recently turned to GitHub and the news, I was pleasantly surprised to find that someone was doing the same thing, and finally found a demo that Flipboard students wrote:

https://flipboard.com/@flipboard/flipboard-picks-8a1uu7ngz

The demo is complex enough to animate enough and dazzle. is to use canvas to build the entire UI.

After the test:

• So complex demo in MI4 and configure the above performance is very good, the smoothness of infinite close to native, more ideal.
• Compared to G+ 's Android app, g+ 's app "cards" more than the demo provided by Flipboard in animation.
• The animation fluency on  Note has been lost on IPhone 6, which is great.

According to Moore's law, it is expected that the standard CPU and GPU configurations for next year's Note will become mainstream.

Now it is still slower to use the canvas UI framework for the MI4 of the following machines. The 2015 H5 Development App, for many companies is only Plan B, big companies and even Plan B are not. So, if you must be in pure H5 on the animation, or wait.

Layout system CSS Layout

Back to the Canvas Component framework, back to the picture I drew above:

The UI component is based on "text" and "image". But the framework, in addition to the UI component itself, requires layout, and CSS works only on the layout of the browser itself and cannot be applied to the canvas canvas.

To give developers a good, well-typeset solution, develop a framework that uses JavaScript to implement CSS-like layout subsets.

Otherwise, the UI component is meaningless without layout on the canvas.

The cost of this layout framework (simple implementation) is not theoretically significant, and the big thing is that the future of adding new Feature and combining it with the browser itself is different and requires a complete unit test. Just recently, Facebook has also open source a solution that uses JavaScript to write a subset of CSS layout, implementing:

• Padding
• Width
• Margin
• Border
• Flex
• Position (Relative/absolute)

Wait, Feature.

GitHub Address: Https://github.com/facebook/css-layout

These CSS layout subsets basically meet our early development expectations.

Development framework

With Css-layout and the UI management layer, the UI component framework of the canvas can be implemented clearly. So, the rest of it is:

• The choice of application development framework, such as: Select REACT/MVC Framework.
• Simulates the DOM hierarchy, which is layer management.

And, to my great delight, Flipboard was built in February, based on the React framework. Https://github.com/Flipboard/react-canvas

Based on Css-layout + React integration.

The Canvas UI framework is insufficient and risky

It looks like the Canvas frame is so cool, but with a lot of flaws.

• The requirements for developers are high. JavaScript is required to implement some basic layout and layer management of the browser.
• Third-party users have high learning costs. It's not like using a traditional "tag" to implement the UI's output in the browser.
• Whether the developer is buying it or not, there is a "big" challenge to the framework's ease of development.
• Propose new requirements for development quality. Because all the UI components and interactions are in canvas canvas, the cost of debugging is relatively high, which requires a more complete Logging and debugging scheme.
• User availability is affected. For example: * Voice does not recognize text in Canvas. * Unable to select and copy the text in the canvas like WebView.

Summarize

The Canvas UI framework acts as a vista technology. Https://github.com/Flipboard/react-canvas just over a week, has nearly 4K of star. It's really great.

Instead of looking at the FB open source react native, it is better to study react-canvas well.

Innovative high-performance mobile UI Framework-canvas UI Framework