MockView

MockView has been around for a long time, although readWhy Mocking Matters”But not well understood. As the development experience continues to accumulate, as well as inFlutter_hybird_webview cross-process rendering practice,Module migration across processesThe development process of theMockHave a further understanding, here to share the understanding of this dish chicken.

introduce

. MovkView in com. Android. Layoutlib bridge, package, and inherited from FrameLayout, prohibited to add other child view at the same time, the internal code is as follows:

public class MockView extends FrameLayout { private final TextView mView; / / /... @override public void addView(View child) {if (child == mView) {if (child == mView) { super.addView(child); } } @Override public void addView(View child, int index) { if (child == mView) { super.addView(child, index); } } @Override public void addView(View child, int width, int height) { if (child == mView) { super.addView(child, width, height); } } @Override public void addView(View child, ViewGroup.LayoutParams params) { if (child == mView) { super.addView(child, params); } } @Override public void addView(View child, int index, ViewGroup.LayoutParams params) { if (child == mView) { super.addView(child, index, params); }}}Copy the code

There are few places that use this class in Android, such as WebView and Surface View, etc. Their prominent feature is cross-SDK and cross-process. Here, I would like to talk about my personal understanding with Webview.

Personal understanding of Mock programming thinking: WebView

Early versions of the webview inherited from AbsoluteLayout (see the webview | Android Developers), in the latest Android version (27 or 28) to inherit from MockView.

I think there are roughly the following reasons for webView inheritance changes:

  1. AbsoluteLayoutOut of date.

  2. With the development of app, there are more complex requirements for the presentation of WebView, as can be seen from the notes of AbsoluteLayout.

/ *... Absolute layouts are less flexible and harder to maintain than other types of layouts without absolute positioning. Relatively poor flexibility and manipulation in layout. */ public class AbsoluteLayout extends ViewGroup { ... }Copy the code

  1. For more complex testing and co-development requirements, see the big guy’s article and the current scale of apps.

  2. Webview renderer starts with Android (26) and works in a separate process, further sandboxed.

    Starting in Oreo (API 26) WebView has a single out-of-process renderer 
    (we sometimes refer to this as "multiprocess mode"). This is enabled
    for high-memory devices (low-memory devices still use an in-process renderer 
    as before).

    The out-of-process renderer is enabled by a new Android API (`android:externalService`),
    to create sandboxed processes which run in the *embedding app's context* rather than 
    the WebView provider's context.
Copy the code

Chromium has it in it, but Android-Chromium probably didn’t support it on early devices due to lack of resources (I guess).

Based on the above points, I believe that the reason for such changes is that modules need to be further modeled based on their characteristics (which is also an external constraint) once they reach a certain complexity and characteristics.

Mock on 'View' to indicate its identity in 'UI' system by disallowing 'addChild()' to indicate rendering independence and external constraints by overall modeling to satisfy cross-domain/co-development tuning and testing problems.Copy the code

The practice of Mock programming thinking

Here I describe the practice in Flutter_hybird_webView and daily development.

Flutter_hybird_webview Channel Mock

During the cross-process migration of Android modules in the WebView plug-in of Flutter, you need to analyze how the modules communicate and Mock the communication points (or their communication interface model). This ensures minimal migration effort while ensuring backward compatibility because of compliance with the original communication model (closed to modification, open to extension).

The original communication mode of the WebView plugin in Flutter is as follows:

The communication mode after migration is roughly as follows:

In this way, the entire migration process is analogous to a horizontal shift.

Application in daily development

In daily development, there are pages that are extremely complex, such as a shopping cart, which might contain:

  • Various route jump logic
  • Complex interaction logic
  • Complex data display logic
  • Caching, data packet passing, and so on

Under the MVVM architecture, the accumulation of the above functions and the constant iteration can lead to a very bloated VM. As a result, the VM was split down to a level where the code structure was clear and the finer control resulted in higher performance. At the same time, you can further Mock the data model based on UI/business logic, which not only further optimize the code structure, improve the development self-test efficiency, but also smooth out the impact of changes in data entities or logic on the INTERNAL structure of the VM during iteration.

The above is my superficial view of Mock and practice in the development process. Please point out any shortcomings or mistakes. Thank you for reading.

Other articles

Android source code – WebView pull up soft keyboard process analysis

What does the Native layer do when Flutter launches on Android?

Flutter version of imitation. Parallax effect of Zhihu list

Flutter — Realize progressive card switching for NetEase Cloud Music

Flutter imitates flush list of self-selected stocks