Team collaboration and MVVM architecture design in iOS

I wrote this article today to serve as a starting point for discussion and exchange of ideas with you all, so that we can learn from each other. If there are any deficiencies in this blog, I hope you can criticize and correct me. The content of this article follows the style of previous blogs, which is mainly practical, with occasional nonsense (haha~ I’m not working hard and I’m starting to blog again~).

Due to my limited project experience and limited understanding of architectural design, my personal understanding of MVVM is mainly based on the MVC Web framework I used before. When I was in school, I used the ThinkPHP framework and the SSH framework, both of which are MVC architectural models. Today, MVVM and traditional MVC are extremely similar, and they can be said to be brothers, or family members.

Speaking of architecture design and team collaboration, this is quite important for App development. Even as a professional brick mover, the premise is where do you put the bricks after moving them? Not only Code has a framework, but other things also have frameworks, such as bridges and so on. I won't go into details here. A good engineering framework can not only improve the efficiency of team collaboration, but also reduce the redundancy and coupling of code. Reasonable division of labor and system architecture design are indispensable.

As for team collaboration, it is not enough to just have version control tools such as SVN or Git. As for how to use SVN in iOS development, please refer to the previous blog (iOS Development Version Control (SVN)). A team can work efficiently. I think communication is the most important thing. Everyone in the team is relatively friendly, and there are no obstacles in communication (but there are always a few people in some teams who don't get along). Communication is the most important thing in a team. As for how to use SVN, that's not a problem!

Okay, today I will use a demo I wrote to talk about the architectural design and team collaboration in iOS development. That’s all for today, let’s get into today’s topic.

In order to write today's blog, I spent some time to build a project. The backend interface of this project was tested using the Sina Weibo API. The GitHub sharing link will be posted later in this article. OK~ To put it in a more high-sounding way, everyone has their own opinions, so let's exchange ideas and learn together.

1. A little MVVM

I won't go into details about what MVC is, and what MVVM is. You can find a lot of information by searching on Baidu, so I'll just briefly mention it here. The following demo uses the MVVM architecture pattern.

The Model layer is indispensable. We need something to act as a DTO (Data Transfer Object). Of course, a dictionary is also possible. Programming requires flexibility. The Model layer is a relatively thin layer. If you have learned Java, you should be familiar with JavaBean.

The ViewModel layer is the glue between the View and Model layers. It is an excellent place to place user input validation logic, view display logic, network request initiation and other various codes. To put it simply, it is to separate the business logic and page logic of the original ViewController layer and put it in the ViewModel layer.

The View layer is the ViewController layer. Its task is to obtain data from the ViewModel layer and then display it.

The above is just a brief introduction to MVVM. If you want to understand and apply it well, you still need to practice it.

2. Discussion on whether to use StoryBoard in the project

I often see on the Internet that it is not recommended to use StoryBoard or Xib, and it is recommended to write it in pure code. I personally think that this view is contrary to the original intention of Apple to design StoryBoard. In the projects I have done, StoryBoard is the main one, and Xib is supplemented, and then each StoryBoard is integrated with code.

Let me give you an example of the benefits of using Storyboard. If you use Storyboard to add constraints to controls, it takes only a few seconds. However, adding constraints with code is disgusting. If you write it with pure code, you will spend a lot of time writing UI, and the technical content is relatively low. I personally think it is unnecessary. In teamwork, the partners responsible for UI development only need to have no one responsible for a Storyboard, and each develop their own. When submitting with SVN, just remove the check mark below (as shown below), and there will be no problem using Storyboard. Then integrate with code. If you add new resource files to your project, you need to submit the Project Setting file together with it when submitting with XCode's built-in SVN.

3. Practical MVVM (Group created with Xcode is a virtual folder. For ease of maintenance, it is recommended to create a physical folder and then introduce it manually)

1. Let's experience the MVVM architecture pattern through an example. The following is the first-level directory of the project. The interaction between each layer is implemented in the form of Block.

Project Catalog Description:

Request: The class that stores network requests in the folder. The specific implementation is given below.

Config: is the configuration file of the project

Resource: It is the resource file of the project, including image resources and Storyboard file resources.

Tools is: tool file class, which stores tool classes, such as data regular matching, etc.

Vender: stores third-party libraries

Model: I won’t say much about this

ViewController: stores ViewController class resource files, that is, the View layer

ViewModel: stores various business logic and network requests

2. Detailed explanation of Request: Request is responsible for network requests, as follows:

NetRequestClass is the code for storing network requests. This project uses AF. Because this project is just a Demo, it only encapsulates the monitoring network status, GET request, and POST request methods. According to actual needs, it can also encapsulate upload and download methods.

The code in NetRequestClass.h is as follows:

 //  
 // NetRequestClass.h  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/6.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 # import   @interface NetRequestClass : NSObject 
  
 #pragma monitor network linkability
 + (BOOL) netWorkReachabilityWithURLString:(NSString *) strUrl; 
  
 #pragma POST request
 + ( void ) NetRequestPOSTWithRequestURL: (NSString *) requestURLString
                        WithParameter: (NSDictionary *) parameter
                 WithReturnValeuBlock: (ReturnValueBlock) block
                   WithErrorCodeBlock: (ErrorCodeBlock) errorBlock
                     WithFailureBlock: (FailureBlock) failureBlock; 
  
 #pragma GET request
 + ( void ) NetRequestGETWithRequestURL: (NSString *) requestURLString
                        WithParameter: (NSDictionary *) parameter
                WithReturnValeuBlock: (ReturnValueBlock) block
                  WithErrorCodeBlock: (ErrorCodeBlock) errorBlock
                    WithFailureBlock: (FailureBlock) failureBlock; 
  
 @end  

The code in NetRequestClass.m is as follows:

 //  
 // NetRequestClass.m  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/6.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 # import   "NetRequestClass.h"   
  
 @interface NetRequestClass () 
  
 @end   
  
  
 @implementation NetRequestClass
 #pragma monitor network linkability
 + (BOOL) netWorkReachabilityWithURLString:(NSString *) strUrl
 {
    __block BOOL netState = NO; 
      
    NSURL *baseURL = [NSURL URLWithString:strUrl]; 
      
    AFHTTPRequestOperationManager *manager = [[AFHTTPRequestOperationManager alloc] initWithBaseURL:baseURL]; 
      
    NSOperationQueue *operationQueue = manager.operationQueue; 
      
    [manager.reachabilityManager setReachabilityStatusChangeBlock:^(AFNetworkReachabilityStatus status) {
 switch (status) {
 case AFNetworkReachabilityStatusReachableViaWWAN:
 case AFNetworkReachabilityStatusReachableViaWiFi:
                [operationQueue setSuspended:NO];
                netState = YES;
 break ;
 case AFNetworkReachabilityStatusNotReachable:
                netState = NO;
 default :
                [operationQueue setSuspended:YES];
 break ;
 }
 }]; 
      
    [manager.reachabilityManager startMonitoring]; 
      
 return netState;
 } 
  
  
 /****************************************
 Make a judgment here if there is an errorCode in the dic
 Call errorBlock(dic)
 If there is no errorCode, call block(dic
 ******************************/   
  
 #pragma --mark GET request method
 + ( void ) NetRequestGETWithRequestURL: (NSString *) requestURLString
                       WithParameter: (NSDictionary *) parameter
                WithReturnValeuBlock: (ReturnValueBlock) block
                  WithErrorCodeBlock: (ErrorCodeBlock) errorBlock
                    WithFailureBlock: (FailureBlock) failureBlock
 {
    AFHTTPRequestOperationManager *manager = [[AFHTTPRequestOperationManager alloc] init]; 
      
    AFHTTPRequestOperation *op = [manager GET:requestURLString parameters:parameter success:^(AFHTTPRequestOperation *operation, id responseObject) {
        NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:responseObject options:NSJSONReadingAllowFragments error:nil];
 DDLog(@ "%@" , dic); 
          
 block(dic); 
          
    } failure:^(AFHTTPRequestOperation *operation, NSError *error) {
 failureBlock();
 }]; 
      
    op.responseSerializer = [AFHTTPResponseSerializer serializer]; 
      
 [op start]; 
      
 } 
  
 #pragma --mark POST request method 
  
 + ( void ) NetRequestPOSTWithRequestURL: (NSString *) requestURLString
                        WithParameter: (NSDictionary *) parameter
                 WithReturnValeuBlock: (ReturnValueBlock) block
                   WithErrorCodeBlock: (ErrorCodeBlock) errorBlock
                     WithFailureBlock: (FailureBlock) failureBlock
 {
    AFHTTPRequestOperationManager *manager = [[AFHTTPRequestOperationManager alloc] init]; 
      
    AFHTTPRequestOperation *op = [manager POST:requestURLString parameters:parameter success:^(AFHTTPRequestOperation *operation, id responseObject) {
        NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:responseObject options:NSJSONReadingAllowFragments error:nil]; 
          
 DDLog(@ "%@" , dic); 
          
 block(dic);
 /******************************************
 Make a judgment here if there is an errorCode in the dic
 Call errorBlock(dic)
 If there is no errorCode, call block(dic
         ******************************/   
          
    } failure:^(AFHTTPRequestOperation *operation, NSError *error) {
 failureBlock();
 }]; 
      
    op.responseSerializer = [AFHTTPResponseSerializer serializer]; 
      
 [op start]; 
  
 } 
  
  
  
  
 @end  

3. Detailed explanation of Config: creating pch files and Config.h files

The pch file introduces commonly used header files, the contents are as follows:

 //  
 // PrefixHeader.pch  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/6.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 #ifndef MVVMTest_PrefixHeader_pch
 #define MVVMTest_PrefixHeader_pch 
  
 # import "AFNetworking.h"  
 # import   "UIKit+AFNetworking.h"  
 # import   "Config.h"   
  
 # import   "NetRequestClass.h"  
 # import   "SVProgressHUD.h"  
 #endif

Config.h contains various macro definitions, enumeration types, and block types. The code is as follows:

 //  
 //Config.h  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/6.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 #ifndef MVVMTest_Config_h
 #define MVVMTest_Config_h 
  
 //Define the block type that returns the requested data  
 typedef void (^ReturnValueBlock) (id returnValue);
 typedef void (^ErrorCodeBlock) (id errorCode);
 typedef void (^FailureBlock)();
 typedef void (^NetWorkBlock)(BOOL netConnetState); 
  
 #define DDLog(xx, ...) NSLog(@ "%s(%d): " xx, __PRETTY_FUNCTION__, __LINE__, ##__VA_ARGS__) 
  
 //accessToken  
 #define ACCESSTOKEN @ "your own access_token"   
  
 //Request the network interface of the public microblog  
 #define REQUESTPUBLICURL @ "https://api.weibo.com/2/statuses/public_timeline.json"   
  
 #define SOURCE @ "source"  
 #define TOKEN @ "access_token"  
 #define COUNT @ "count"   
  
 #define STATUSES @ "statuses"  
 #define CREATETIME @ "created_at"  
 #define WEIBOID @ "id"  
 #define WEIBOTEXT @ "text"  
 #define USER @ "user"  
 #define UID @ "id"  
 #define HEADIMAGEURL @ "profile_image_url"  
 #define USERNAME @ "screen_name"   
  
 #endif

4. Detailed explanation of resource file Resource, the structure is as follows:

Image stores various images (3x, 2x, etc.), InterfaceBuilder stores some Xib and Storyboard files, and each developer responsible for UI is responsible for a Storyboard.

5. Detailed explanation of Model: This project uses the public Weibo interface to request. We need to display the user's avatar, username, release date, blog post, implicit user ID and Weibo ID on the page. The file directory structure is as follows:

The content of PublicModel is as follows:

 //  
 // PublicModel.h  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/8.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 # import   @interface PublicModel : NSObject
 @property (strong, nonatomic) NSString *userId;
 @property (strong, nonatomic) NSString *weiboId;
 @property (strong, nonatomic) NSString *userName;
 @property (strong, nonatomic) NSURL *imageUrl;
 @property (strong, nonatomic) NSString *date;
 @property (strong, nonatomic) NSString *text; 
  
 @end  

6. Detailed explanation of the ViewModel layer. This layer is the most important layer. The following is a detailed screenshot of this layer. ViewModeClass is the parent class of all ViewModes, which stores the common parts

The content of ViewModelClass.h is as follows:

 //  
 // ViewModelClass.h  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/8.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 # import   @interface ViewModelClass : NSObject 
  
 @property (strong, nonatomic) ReturnValueBlock returnBlock;
 @property (strong, nonatomic) ErrorCodeBlock errorBlock;
 @property (strong, nonatomic) FailureBlock failureBlock; 
  
  
 //Get the network connection status  
 -( void ) netWorkStateWithNetConnectBlock: (NetWorkBlock) netConnectBlock WithURlStr: (NSString *) strURl; 
  
 //Block block for incoming interaction  
 -( void ) setBlockWithReturnBlock: (ReturnValueBlock) returnBlock
                 WithErrorBlock: (ErrorCodeBlock) errorBlock
               WithFailureBlock: (FailureBlock) failureBlock;
 @end  

The contents of ViewModelClass.m are as follows:

 //  
 // ViewModelClass.m  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/8.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 # import   "ViewModelClass.h"  
 @implementation ViewModelClass 
  
 #pragma Get network reachability status
 -( void ) netWorkStateWithNetConnectBlock: (NetWorkBlock) netConnectBlock WithURlStr: (NSString *) strURl;
 {
    BOOL netState = [NetRequestClass netWorkReachabilityWithURLString:strURl];
    netConnectBlock(netState);
 } 
  
 #pragma Receive the block that passes through
 -( void ) setBlockWithReturnBlock: (ReturnValueBlock) returnBlock
                 WithErrorBlock: (ErrorCodeBlock) errorBlock
               WithFailureBlock: (FailureBlock) failureBlock
 {
    _returnBlock = returnBlock;
 _errorBlock = errorBlock;
    _failureBlock = failureBlock;
 } 
  
 @end  

The contents of PublicWeiboViewModel.m are as follows:

 //  
 // PublicWeiboViewModel.m  
 //MVVMTest  
 //  
 // Created by Li Zelu on 15/1/8.  
 // Copyright (c) 2015 Li Zelu. All rights reserved.  
 //   
  
 # import   "PublicWeiboViewModel.h"  
 # import   "PublicDetailViewController.h"   
  
 @implementation PublicWeiboViewModel 
  
 //Get public microblog  
 -( void ) fetchPublicWeiBo
 {
    NSDictionary *parameter = @{TOKEN: ACCESSTOKEN,
                                COUNT: @ "100"  
                                };
    [NetRequestClass NetRequestGETWithRequestURL:REQUESTPUBLICURL WithParameter:parameter WithReturnValeuBlock:^(id returnValue) { 
          
        DDLog(@ "%@" , returnValue);
        [self fetchValueSuccessWithDic:returnValue]; 
          
    } WithErrorCodeBlock:^(id errorCode) {
        DDLog(@ "%@" , errorCode);
        [self errorCodeWithDic:errorCode]; 
          
 } WithFailureBlock:^{
 [self netFailure];
 DDLog(@ "Network abnormality" ); 
          
 }]; 
      
 } 
  
  
  
 #pragma Get the correct data and process the correct data
 -( void )fetchValueSuccessWithDic: (NSDictionary *) returnValue
 {
 //Process the data obtained from the background and then pass it to the ViewController layer for display   
      
    NSArray *statuses = returnValue[STATUSES];
    NSMutableArray *publicModelArray = [[NSMutableArray alloc] initWithCapacity:statuses.count]; 
      
 for ( int i = 0 ; i < statuses.count; i ++) {
        PublicModel *publicModel = [[PublicModel alloc] init]; 
          
 //Set the time  
        NSDateFormatter *iosDateFormater=[[NSDateFormatter alloc]init];
        iosDateFormater.dateFormat=@ "EEE MMM d HH:mm:ss Z yyyy" ; 
          
 //Must be set, otherwise it cannot be parsed  
        iosDateFormater.locale=[[NSLocale alloc]initWithLocaleIdentifier:@ "en_US" ];
        NSDate *date=[iosDateFormater dateFromString:statuses[i][CREATETIME]]; 
          
 //Destination format  
        NSDateFormatter *resultFormatter=[[NSDateFormatter alloc]init];
        [resultFormatter setDateFormat:@ "MM month dd day HH:mm" ]; 
          
        publicModel.date = [resultFormatter stringFromDate:date];
        publicModel.userName = statuses[i][USER][USERNAME];
        publicModel.text = statuses[i][WEIBOTEXT];
        publicModel.imageUrl = [NSURL URLWithString:statuses[i][USER][HEADIMAGEURL]];
        publicModel.userId = statuses[i][USER][UID];
        publicModel.weiboId = statuses[i][WEIBOID]; 
          
        [publicModelArray addObject:publicModel]; 
          
 } 
      
    self.returnBlock(publicModelArray);
 } 
  
 #pragma handles ErrorCode
 -( void ) errorCodeWithDic: (NSDictionary *) errorDic
 {
    self.errorBlock(errorDic);
 } 
  
 #pragma handles network exceptions
 -( void ) netFailure
 {
 self.failureBlock();
 } 
  
  
 #pragma Jump to the details page. If a network request is required, you can add the corresponding network request in this method.
 -( void ) weiboDetailWithPublicModel: (PublicModel *) publicModel WithViewController:(UIViewController *)superController
 {
    DDLog(@ "%@,%@,%@" ,publicModel.userId,publicModel.weiboId,publicModel.text);
    UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@ "Main" bundle:[NSBundle mainBundle]];
    PublicDetailViewController *detailController = [storyboard instantiateViewControllerWithIdentifier:@ "PublicDetailViewController" ];
    detailController.publicModel = publicModel;
    [superController.navigationController pushViewController:detailController animated:YES]; 
      
 } 
  
  
 @end  

7. The directory structure of the ViewController layer is as follows:

I won't paste the above codes one by one (mainly because I'm tired of pressing command + C by hand), the link below will have the source code

8. The structure in storybord is as follows:

The final result of running:

9. The complete directory structure, business logic between pages, and network request data are placed in the ViewModel layer. Of course, this is not absolute and needs to be handled flexibly. I personally like programming very much because it is fun to be flexible in programming.

10. The article is almost over. Here I will summarize the most frequently used and important commands of SVN (of course, I usually use the SVN visual management that comes with XCode~)

(1) Update local code command

svn up Update version

svn info View the current version information

(2) Code submission

svn info View the current local version information

svn up Update to the latest version information

svn st View file status M-modify D-delete A-add U-update?-unknown status!-warning C-conflict

svn add fileName: If it appears? Usually it is a problem when adding files. After svn add fileName, the status of the file will change to A

svn del fileName: If it appears! It is usually a warning that appears when deleting a file. After executing the svn del fileName command, the status of the file will change to D

svn ci -m "Reason for commit"