Architecture design based on dynamic routing on mobile terminals

I haven't written an article for a long time. First, I've been too busy with the project recently and have no time to write. Second, I don't have time to learn new things. I want to write something but I don't know where to start. It's boring to just write about how to use this API and how to use that new technology. Technical knowledge explanation without project experience summary always feels a bit pale.

I've been working on hybrid App development recently. From the ionic framework at the beginning to the mui framework later, I have a deeper understanding of hybrid development. If I want to write something about it, it's nothing more than how to use this instruction, how to use that template, how to perform two-way data binding, etc., but there are already a lot of information on the Internet. When I'm not too busy, I think I will summarize the experience of using these frameworks. But I won't talk about this today. Let's talk about how to use the dynamic routing mechanism in native apps (iOS and Android) to build the entire app framework.

Routing mechanism is quite common in web development, but it is rarely heard in app development. At present, some large companies use component-based development (such as Taobao Mobile, Ctrip, Mogujie, etc.), which has a lot in common with what we are talking about, but they are more complicated, and there are many component-based development and routing mechanisms on the Internet, but none of them can provide complete code examples, which makes people confused. So I simply borrowed their ideas, added a little personal understanding, and came up with a simple and practical feasibility demo. We mainly introduce the following three aspects:

1 What is dynamic routing

2 What problems can it solve for us?

3 How to implement in the project

What is dynamic routing?

There is no such concept in native development. We use Angular's routing mechanism to explain this concept. The so-called routing is a set of path jump mechanisms. A path mapping file is defined in advance through the configuration file. When jumping, the specific page is found according to the key. Of course, Angular will do some caching, page stack management and other operations. Its general definition is as follows

 angular.module( 'app' ,[])
           .config( '$routeProvider' , function ($routeProvider) {
 $routeProvider
                   . when ( '/' ,{
                       templateUrl: 'view/home.html' ,
                       controller: 'homeCtrl'  
 }
 )
                   . when ( '/' ,{
                       templateUrl: 'view/home.html' ,
                       controller: 'homeCtrl'  
 }
 )
                   . when ( '/' ,{
                       templateUrl: 'view/home.html' ,
                       controller: 'homeCtrl'  
 }
 )
                   .ontherwise({
                       redirective: '/'  
 })
 })

The config function is a configuration function.

$routeProvider is a service like this. when: represents accessing the template in templateUrl when you access the root directory "/". controller is known to us, which is the controller we match, that is, the controller applied to the template in the root directory.

Otherwise, when you access the wrong path, it cannot be found. *** Jump to this default page.

To this end, we can summarize several characteristics:

1 A mapping configuration file

2 Path error handling mechanism

This is the basic meaning of routing. Let's see what problems it can solve in native development using this approach.

What problems can it solve for us?

First, let's compare our previous structural model with the project structure after adding the routing mechanism. To implement the routing mechanism, we need not only a mapping file, but also a routing management mechanism. Then, with the routing mechanism, our project architecture will be different from the original one, as shown below:

[[182219]]

The calling relationship between the original businesses.png

Page call relationship after adding routing.png

Next, let's take a look at the page jump method we usually use:

iOS

 [self presentViewController:controller animated:YES completion:nil];
 [self.navigationController pushViewController:controller animated:YES];

Android

 Intent intent = new Intent(this, A.class); startActivity(intent); startActivityForResult(Intent intent, Int requestCode)

Let's look at its shortcomings:

(1) The class of the page to be jumped to must be introduced in the current page. This results in a high degree of coupling between the pages.

(2) If a major bug is encountered, the problem cannot be fixed in time and needs to be resolved after an update is released.

(3) For push messages, if the entry does not have the relevant page introduction processing, it cannot jump to the specified page.

Can we solve these problems by introducing routing mechanism?

Imagine if we use a configuration file to map the page jump relationship, and use the reflection mechanism to cancel the introduction of the header file, can we solve the above disadvantages? For example, if there is a bug in our online application, causing the app to crash as soon as a certain page is opened, can we update the routing configuration file to map it to another page: an error prompt file, or an online H5 page that can achieve the same function. In this way, the native app also has a certain dynamic update capability. In fact, there are many benefits. For example, if there are too many project functions, it will take a long time to develop natively, but the leader is eager to go online, then can we first develop a web version of the module, map the app route to this web page, let the user use it first, and wait until we have completed the native development, and then change the mapping file. The H5 route is still used for the unupgraded ones, and the native route is used for the upgraded ones. If we want to abandon the H5 page, then we can route to an upgraded page as a whole.

Let's summarize what problems the routing mechanism can solve for us:

1 Avoid introducing header files, which greatly reduces the dependencies between pages (dynamically generate page instances through reflection).

2 A major bug occurred online, providing us with an entry point for timely repair

3 Switching between web pages and native apps is more convenient and freer.

4 You can jump to any page. For example, for the push we often use, to open the specified page, how did we do it before? Various startup judgments, now, we only need to assign a routing path to the message sent, open the message, and we can jump to the page we specify.

Wait, other benefits can be discovered by yourself.

How to implement it in the project

Having said so many conceptual issues, let's use code to implement our ideas. Let's take the IOS platform as an example:

Let's take a look at the demo structure first

iOS demo structure diagram.png

Description: WXRouter routing management file

demo route usage example

urlMap.plist routing configuration file

We will mainly explain several files in WXRouter, as well as the ViewController file and the urlmap.plist file. For the others, please download the sample demo. I will give the demo address at the end of the article.

 #import
 #import
 @interface WXRouter : NSObject
 +(id)sharedInstance;
 -(UIViewController *)getViewController:(NSString *)stringVCName;
 -(UIViewController *)getViewController:(NSString *)stringVCName withParam:(NSDictionary *)paramdic;
 @ end   
 
 #import "WXRouter.h"  
 #import "webView.h"  
 #import "RouterError.h"  
 #import "PlistReadUtil.h"  
 #define SuppressPerformSelectorLeakWarning(Stuff) \
 do {
 _Pragma( "clang diagnostic push" ) \
 _Pragma( "clang diagnostic ignored \"-Warc-performSelector-leaks\"" ) \
 Stuff; \
 _Pragma( "clang diagnostic pop" ) \
 }
 while (0)
 @implementation WXRouter
 +(id)sharedInstance {
 static dispatch_once_t onceToken;
 static WXRouter * router;
    dispatch_once(&onceToken,^{
        router = [[WXRouter alloc] init];
 });
 return router;
 }
 -(UIViewController *)controller:(UIViewController *)controller withParam:(NSDictionary *)paramdic andVcname:(NSString *)vcName {
 SEL selector = NSSelectorFromString(@ "iniViewControllerParam:" );
 if(![controller respondsToSelector: selector]){ //If the initialization parameter method is not defined, return directly, there is no need to set the parameter method below
 NSLog(@ "target class:%@undefined:%@method" ,controller,@ "iniViewControllerParam:" );
 return controller;
 }
 if(paramdic == nil) {
 //If the parameter is empty, URLKEY will identify the unique path of the page
        paramdic = [[NSMutableDictionary alloc] init];
        [paramdic setValue: vcName forKey:@ "URLKEY" ];
 SuppressPerformSelectorLeakWarning([controller performSelector: selector withObject:paramdic]);
 }
 else {
 [paramdic setValue: vcName forKey:@ "URLKEY" ];
 }
 SuppressPerformSelectorLeakWarning([controller performSelector:selector withObject:paramdic]);
 return controller;
 }
 -(UIViewController *)getViewController:(NSString *)stringVCName {
 NSString *viewControllerName = [PlistReadUtil plistValueForKey: stringVCName];
 Class class = NSClassFromString(viewControllerName);
    UIViewController *controller = [[class alloc] init];
 if(controller == nil){ //You can jump to an error prompt page here
 NSLog(@ "This class is not defined: %@" , viewControllerName);
 return nil;
 }
 return controller;
 }
 -(UIViewController *)getViewController:(NSString *)stringVCName withParam:(NSDictionary *)paramdic {
 UIViewController *controller = [self getViewController: stringVCName];
 if(controller != nil){
        controller = [self controller: controller withParam:paramdic andVcname:stringVCName];
 }
 else {
 //Exception handling can jump to the specified error page
        controller = [[RouterError sharedInstance] getErrorController];
 }
 return controller;
 }
 @ end  

Description: The reflection mechanism is used to obtain the viewcontroller instance according to the passed string. Two methods are implemented, one does not require the input of parameters, and the other requires the input of parameters. When jumping to the second page, the second method with parameters is used. The value passed is encapsulated through NSDictionary. The page after jumping is implemented

-(void)iniViewControllerParam:(NSDictionary *)dic method to get the passed parameters.

 #import
 @interface PlistReadUtil : NSObject
 @property(nonatomic,strong) NSMutableDictionary *plistdata;
 +(id)sharedInstanceWithFileName:(NSString *)plistfileName;
 +(NSString *)plistValueForKey:(NSString *) key ;
 @ end   
 
 #import "PlistReadUtil.h"  
 @implementation PlistReadUtil
 +(id)sharedInstanceWithFileName:(NSString *)plistfileName {
 static dispatch_once_t onceToken;
 static PlistReadUtil * plistUtil;
    dispatch_once(&onceToken,^{
        plistUtil = [[PlistReadUtil alloc] init];
        NSString *plistPath = [[NSBundle mainBundle] pathForResource: plistfileName ofType:@ "plist" ];
    plistUtil.plistdata = [[NSMutableDictionary alloc] initWithContentsOfFile: plistPath];
 });
 return plistUtil;
 }
 +(NSString *)plistValueForKey:(NSString *) key {
 PlistReadUtil *plist = [PlistReadUtil sharedInstanceWithFileName: @ "urlMap" ];
 return [plist.plistdata objectForKey: key ];
 }
 @ end  

Description: Routing configuration file reading tool class, I read here is plist file, I can also read here json, or access the network to obtain the routing configuration file on the background server, this can add different reading methods according to our business needs.

 #import <Foundation/Foundation.h>
 #import <UIKit/UIKit.h>
 @interface RouterError : NSObject
 +(id)sharedInstance;
 -(UIViewController *)getErrorController;
 @ end   
 
 #import "RouterError.h"  
 #import "WXRouter.h"  
 @implementation RouterError
 +(id)sharedInstance {
 static dispatch_once_t onceToken;
 static RouterError * routerError;
    dispatch_once(&onceToken,^{
        routerError = [[RouterError alloc] init];
 });
 return routerError;
 }
 #pragma mark Custom error page This page must be found, otherwise it will enter an infinite loop
 -(UIViewController *)getErrorController {
 NSDictionary *diction = [[NSMutableDictionary alloc] init];
    [diction setValue: @ "https://themeforest.net/item/octopus-error-template/2562783" forKey:@ "url" ];
 UIViewController *errorController = [[WXRouter sharedInstance] getViewController: @ "MSG003" withParam:diction];
 return errorController;
 }
 @ end  

Note: If the corresponding path is not read when reading the configuration file, or the corresponding class is not defined, we can handle it here. What I handle here is that if an error occurs, a webview page will be returned. We can write a unified error handling webview page in the project. In fact, each page adds a parameter by default [paramdic setValue:vcName forKey:@"URLKEY"]; This is the URLKEY. This key indicates the key of each jump action in the configuration file. This key is unique. We can use different URLKEYs and then use a unified backend interface to determine the jump to different error handling H5 pages.

 #import "ViewController.h"  
 #import "view2.h"  
 #import "WXRouter.h"  
 #import "PlistReadUtil.h"  
 @interface ViewController ()
 @ end  
 @implementation ViewController
 -(void)viewDidLoad {
 [super viewDidLoad];
    UILabel *label = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 100, 50)];
    lable.textColor = [UIColor blueColor];
    lable.text =@ "hello word" ;
    [self. view addSubview: label];
    UIButton *button = [[UIButton alloc] initWithFrame: CGRectMake(0, 50, 200, 50)];
    [button setTitle: @ "Visit view1" forState:UIControlStateNormal];
    [button setTitleColor: [UIColor blackColor] forState:UIControlStateNormal];
 button.tag = 1;
    [button addTarget: self action :@selector(back:) forControlEvents:UIControlEventTouchUpInside];
    [self. view addSubview: button];
    UIButton *button2 = [[UIButton alloc] initWithFrame: CGRectMake(0, 110, 200, 50)];
    [button2 setTitle: @ "Visit view3" forState:UIControlStateNormal];
    [button2 setTitleColor: [UIColor blackColor] forState:UIControlStateNormal];
 button2.tag = 2;
    [button2 addTarget: self action :@selector(back:) forControlEvents:UIControlEventTouchUpInside];
    [self. view addSubview: button2];
    UIButton *butto3 = [[UIButton alloc] initWithFrame: CGRectMake(0, 170, 200, 50)];
    [butto3 setTitle: @ "Access webview" forState:UIControlStateNormal];
    [butto3 setTitleColor: [UIColor blackColor] forState:UIControlStateNormal];
 butto3.tag = 3;
    [butto3 addTarget: self action :@selector(back:) forControlEvents:UIControlEventTouchUpInside];
    [self. view addSubview: butto3];
    UIButton *button4 = [[UIButton alloc] initWithFrame: CGRectMake(0, 230, 200, 50)];
 [button4 setTitle: @ "Visit the page defined by wei" forState:UIControlStateNormal];
    [button4 setTitleColor: [UIColor blackColor] forState:UIControlStateNormal];
 button4.tag = 4;
    [button4 addTarget: self action :@selector(back:) forControlEvents:UIControlEventTouchUpInside];
    [self. view addSubview: button4];
 }
 -(void)back:(UIButton *)btn {
 switch (btn.tag) {
 case 1: {
            NSMutableDictionary *dic = [[NSMutableDictionary alloc] init];
 [dic setValue:@ "nihao shijie" forKey:@ "title" ];
    UIViewController *controller = [[WXRouter sharedInstance] getViewController: @ "MSG001" withParam:dic];
    [self presentViewController: controller animated:YES completion:nil];
 }
 break;
 case 2: {
    NSMutableDictionary *dic = [[NSMutableDictionary alloc] init];
 [dic setValue:@ "nihao shijie" forKey:@ "title" ];
    UIViewController *controller = [[WXRouter sharedInstance] getViewController: @ "MSG002" withParam:dic];
    [self presentViewController: controller animated:YES completion:nil];
 }
 break;
 case 3: {
    NSMutableDictionary *dic = [[NSMutableDictionary alloc] init];
            [dic setValue: @ "https://www.baidu.com" forKey:@ "url" ];
    UIViewController *controller = [[WXRouter sharedInstance] getViewController: @ "MSG003" withParam:dic];
    [self presentViewController: controller animated:YES completion:nil];
 }
 break;
 case 4: {
    UIViewController *controller = [[WXRouter sharedInstance] getViewController: @ "MSG005" withParam:nil];
    [self presentViewController: controller animated:YES completion:nil];
 }
 default :
 break;
 }
 }
 -(void)didReceiveMemoryWarning {
 [super didReceiveMemoryWarning];
 // Dispose of   any resources that can be recreated.
 }
 @ end  

Note: This is a usage example. In order to obtain the maximum flexibility, I did not encapsulate the jump action presentViewcontroller, pushViewController, and parameter assembly in the route management class. I have seen many routing libraries written by great writers, some of which also use the url schema method. Similar to the path method of xml:id/123/name/xu, but I personally feel that it is a bit troublesome to pass image objects or nested class objects between interfaces. Because I am afraid of trouble, I will write a simple one first.

 #import "view3.h"  
 @interface view3 ()
 @ end  
 @implementation view3
 - (void)viewDidLoad {
 [super viewDidLoad];
    UILabel *label = [[UILabel alloc] initWithFrame: CGRectMake(0, 0, 100, 50)];
    lable.textColor = [UIColor blueColor];
 label.text =@ "I am view3" ;
    [self. view addSubview: label];
    UIButton *button = [[UIButton alloc] initWithFrame: CGRectMake(200, 200, 200, 200)];
    [button setTitle: @ "back" forState:UIControlStateNormal];
    [button setTitleColor: [UIColor blackColor] forState:UIControlStateNormal];
    [button addTarget: self action :@selector(back) forControlEvents:UIControlEventTouchUpInside];
    [self. view addSubview: button];
 }
 -(void) back {
    [self dismissViewControllerAnimated: YES completion:nil];
 }
 -(void)iniViewControllerParam:(NSDictionary *)dic {
    self.title = [dic objectForKey: @ "title" ];
 }

Note: This is the page to jump to. We can get the parameters passed from the previous interface through the iniViewControllerParam:(NSDictionary *)dic method.

urlMap.plist

Note: Routing configuration files are in the form of key:value. Each jump action in the page will correspond to a unique key. If two pages jump to the same page, different keys will correspond to the same value. I feel it is a bit redundant. If there is a better optimization, I will update the article. How can we play with the configuration files here? Since I have described this part in detail in Android, I will not repeat it here. It’s just that the configuration of Android is a bit tricky. The package name needs to be added before the class, which is not as convenient and flexible as iOS. So far, I have finished the iOS example.

Summary: The code is simple, just a simple realization of my own ideas, there are still many places worth pondering, the key is the architecture idea, through the intermediate routing according to the issued routing configuration file to dynamically jump to the page, solve some problems encountered in native development, different projects have different business logic, this idea has any defects, or can not solve any problems, let's discuss and share. If you build a framework based on this idea, it should be very convenient for future component development. 😊

Demo address

android: https://github.com/lerpo/WXAndroidRouter.git

iOS: https://github.com/lerpo/WXiOSRouter.git