There are a lot of online componentized articles, and I have learned from the online predecessors in the process of learning group construction. But most articles start with the minutiae at the bottom, giving the impression that the technology is “vast and deep” and daunting. The original intention of writing this article is from top to bottom, hoping that others can feel the feeling of “componentization is originally these several things” in the process of reading.

First, let’s take a look at the differences between componentized projects and traditional projects:

In the traditional program

We usually have a Libary module of commonLib and an application module of app. The logic of business is written in app and each function module is placed in different packages. This has the following major disadvantages:

1. No matter how well the subcontracting is done, with the expansion of the project, the project will gradually lose the sense of hierarchy, and it will be difficult for others to take over.

2. When we debug a small function, we need to rebuild the whole project every time we modify the code, which is very unreasonable (I wonder if the hot deployment of AS has solved this problem).

3. Conflicts and code coverage are easy to occur in version management

In the componentized project

In addition to commonLib and APP modules, we divide each business component module by function (eg: wechat can be divided into four modules, chat, Contract, find and mine). The former package is now the module, which increases the sense of hierarchy. Each functional module can be compiled separately, which speeds up compilation and provides support for unit module testing. Multiplayer developers are responsible for their own modules, directly avoiding versioning conflicts.

Now that we understand the main problem that componentization solves for us let’s see what we need to do, okay

In fact, there are only two problems to be solved in the end:

1. Set dependencies between modules and make business modules compile separately — this can be done by configuring Gradle
2. Page jump and communication between business modules — ARouter, open source of Ali, can be used to solve the problem
So let’s look at how do we do that
Let’s first look at inter-module dependencies
We can refer to the four modules of wechat (Chat, Contract, find and mine) for configuration

First of all, the basic structure of our project is as follows:

We need to build a total of 6 modules, in addition to the 4 functional modules, there is a basic common library and a startup application.

After the project is built, we need to configure a separate compiler switch for each module:

There is a problem with the configuration position of the switch. We add it to the gradle.properties file so that every time we change the value we can trigger a rebuild of Gradle so that we can compile the Module separately.

Now that our separate compiled switches are configured, let’s configure the dependencies between the six modules:

First, we borrowed Ali’s full ARouter library to facilitate interaction between modules, so I strongly recommend having a dependency on ARouter and CommonLib in every non-common library (including the main Application).

Secondly, for the four function module libraries, we need to install the switch of whether to compile separately configured before. We need to modify the following two places:

You can see that what we need to change is where I put the red box. When our switch is turned on, we compile it as a separate application and give it a unique applicationId, This allows us to control whether or not it is compiled as an application by itself using the switch we just configured in gradle.properties.

For our entry module–app module, we need to do the following configuration:

Figure 1-5 Gradle configuration for the main module

In addition to configuring basic ARouter and Commonlib dependencies, we also need to choose whether to rely on our function module according to the switch in app module gradle file, which corresponds to the configuration in each function module.

For other component modules, repeat the above steps to complete the construction of the component framework:

After completing the construction of the componentized framework, we will simply take a look at some of the features of the framework.

Let’s first look at how the modules jump from page to page.

Before we have been relying on ARouter detailed usage (see https://github.com/alibaba/ARouter), we want to use it to help us achieve a jump to the following steps:

As shown in Figure 2-1, we need to specify the target page, attach the parameters to be transmitted, and then call navigation() to jump. However, some people ask why the target page looks like a path, how is it defined?

  • Start by annotating the page with the @route annotation and defining a path to the page in the path variable
  • For the variables that are being sent in, we’ll just define a field with the same name as the @AutoWired variable, and Arouter will automatically assign to that field
  • Finally, we need to inject the page into ARouter (similar to ButterKnife) and let him do the work we need

This way, we have completed the jump from page to page, is it simpler and more reasonable than our traditional method?

Finally, let’s look at how components serve each other.

  • Here I want to Toast a person’s name by calling the sayHello method of the home component in the main Module
  • How can methods in home be called by other modules, including the main module and other component modules

Then inherit the interface defined in Commonlib in the home module and implement the signature method.

Here we also use Arouter’s @router annotation to provide routing for this service.

Finally, we can call this method in other modules using the @Autowired annotation

As you can see, we also use the @AutoWired annotation to initialize the baseService service and inject the page into Arouter to call the methods in the service. The dependency on the service is based on the interface, making it much more flexible!

The basic componentized framework is completed, I hope to see the friends can harvest! If there is wrong place also hope to correct!

The code cloud of the above project (welcome to participate in the improvement) : gitee.com/zsq519/ARou…

The article is not easy, if you like this article, or help you might as well like to forward attention oh. The article will be updated continuously. Absolutely dry!!