componentization

background

About a month ago, the company had a requirement to come up with a new version of the app with the same functionality and business logic as the current app. All the UI has been reconfigured, not just the color scheme, font ICONS and other simple changes. When scheduling the relative is not too tight, all decided to do a reconstruction of the entire project, in order to achieve better reconstruction, hair a little bit of time to read about 30 article about the componentization blogs and more, also can stick these articles link at the bottom, and then start work started, today have time to put some ideas in the process of reconstructing the summary.

This article mainly covers the following topics:

  • The principles followed by componentization
  • Componentized layered model
  • Componentized integration approach

Follow the principle of

  • It’s a basic design principle that the top depends on the bottom, and the bottom cannot depend on the top, and you can design by dependency inversion.

  • It is also a basic design principle that modules at the same level have little or no dependencies, and can be designed through control inversion, typically using the observer pattern to decouple modules at the same level.

  • Principles of minimum knowledge and self-completeness AN independent module minimizes its dependence on other low-level modules. For example, if a module only relies on a method of a class of low-level modules, it might as well copy this method into the module, so that the module will have better self-completeness.

Hierarchical structure

Layered module Figure 2



Componentization evolution of 58.com iOS clients


I. Basic Underlying components Stable, business-neutral components, this layer is the legendary technical components, these components are basically present in every application, including:

  • Encapsulates basic network operations
  • The database
  • The log
  • Utility classes: common categories, macro definitions
  • Basic UI components
  • Cache management module
  • Other Third-party Components

Underlying components – Basic network libraries

According to the idea of input and output encapsulation, encapsulation change

Unencapsulated invariant parts:

  • Constant HttpHeader in the input argument
  • HTTP layer cache handling
  • Binary data is converted to JSON format

The input changes include:

  • url
  • parameter
  • The data type
  • The other parameters

The output changes include:

  • Callbacks (JSON data, error codes, error messages)
  • Global error handling (sending requests without network processing, URL loading system error handling, service error handling (authorization failure))

The input and output parts are optional, in addition to defining a universal external interface, need to provide a number of simple external interface to provide a client to use:

The client uses a simple request that calls a simple external interface to pass the URL and parameters without passing the data type and other parameters, which use the default values.

The client relationship returns error codes or error messages for data. Define a simple interface that contains only error codes and error message callbacks, without passing JSON data.

The network request interface provided to the upper layer is unchanged, and users do not need to care about the specific logic implementation of the bottom layer of the network. The bottom layer of the network request can use the URL of the system to load the system, or the use of third-party encapsulation will not affect the client.

Underlying components – utility classes and common macros

Classification of macro definitions

String handling correlation

  • Null handling of strings
  • Internationalized format string macros

Object handling correlation

  • Object model serialization related macros
  • Object singleton macros

Device information macro:

  • Screen size, Tabbar height, NavBar height and other macros
  • The ios version of macro
  • IPad or iPhone judgment macro

The DEBUG macros

  • Custom Log macro definition

Color macro definition

  • The color is in decimal RGB format
  • Color in HEX format

Macros define handling points of attention

UtilMacro definition avoids dependencies on concrete classes eg. UtilMacro -> UIUtil -> UtilMacro

The macro definition has indirect dependencies eg. ProductParameter -> UtilMacro -> UIUtil

The commonly used Category

  • UI series: UIXXX – Category UIView/UIColor/UIImage/UILabel/UIImageView/UIViewController
  • NS series: NSXXX – Category NSDate NSObject/NSData/nsstrings/NSDictionary

Underlying component – database module

The use of databases is common in applications. The following functions are required:

  • The database administrator provides an external interface to access the database
  • The database manager has capabilities that include, but are not limited to, automatic version upgrade processing of the database

For details, see iOS Database Upgrade Data Migration Solution

Underlying components – Basic UI components

Basic UI components are applicable to all business scenarios and support extension UI components. As business changes, basic UI components cannot be changed but can be extended and customized. The following are commonly used:

  • Pull up and down to refresh components
  • By the component
  • HUD prompt component
  • Slide back component
  • The paging component
  • Custom Tab components

Underlying component – Cache management module

Cache management has many application scenarios, such as caching page list and detail page data. To improve loading data and optimize user experience, the following aspects need to be paid attention to:

  • Cache storage policy The location of the cache data and the name of the cache
  • Cache storage object archive storage, database storage, binary storage,
  • Cache lookup and fetching
  • Cache update and expiration processing
  • Provides read and write interfaces for clients
  • Provides an interface for clients to clear the cache

Ii. Basic business layer components relatively stable data provision layer, data provision contains business interface or contains cache read and write services, this layer is legendary business service layer components, including:

  • Network interface encapsulation (business specific, may include data cache read and write capabilities)
  • The IMSDK wrapper component
  • Third party sharing, login, payment components
  • Statistics dotting component
  • Push notification component

Business component – Encapsulation of interfaces

Interface encapsulation provides the upper layer (generally the presentation layer) to provide data, centralized network interface design, provides a model object for the upper layer more detailed network layer design can refer to: iOS application architecture on the network layer design scheme

Business components – third party sharing, login, payment components

It provides third-party sharing, login, and payment services. You can extend customized third-party components to provide the following functions

  • Initialize The APPID, APPKEY, and APPSECRET of third-party platforms
  • Handles calls to third-party platform functions
  • Handle the data processing of third-party platform cross-process callbacks
  • Number of third-party platforms supported for customization For details, see: OS Third-party platform integration Componentization Sequel (Add customized third-party platforms in plug-in mode) iOS third-party platform integration componentization

Business Component – Push notification component

Push notifications are useful in many business scenarios, usually if your product has operations management, push notifications are a necessary feature. A push management component typically contains the following functions:

  • Initialize push notification Settings at App startup
  • Handling registration Tokens
  • Processing received messages
  • Interface to external push message data (can be designed as Observer mode, client is Observer)

Business Component – Statistics component

Statistics is also used in many apps (basic all), if there is no business-related statistics, page statistics, the most basic user increase, process, daily activity and other basic data are dependent on statistical data components. In addition, crash collection system is available for general statistical components, so it is also a good BUG feedback tool. The statistics component generally has the following functions:

  • Register key of third party statistics platform, can register multiple platforms for many times
  • A set of statistical interfaces is provided for client calls

Integration method

The integration method can be selected from mainstream Cocoapods, which provides powerful package management functions. During the development phase, you can select the development library, which points apod in your Podfile to a local PodSpec file for easy modification. If your library is good enough, consider making it private and submitting it to your Git system for use by other projects and other members. Due to space constraints, I will write a follow-up article on using Cocoapods to integrate development and private libraries.

Check out my article: iOS Componentization – Integration walkthrough using Cocoapods

The end of the

These are some of the lessons I summarized in a componentized refactoring of the project, hoping to help those who need it, please advise if there is anything wrong.

Reference article links

The following link is from my bookmark iOS application architecture talk about componentization scheme – Casa Taloyum iOS componentization scheme research – brief book Mogustreet App componentization road – Limboy’s HQ to make an App need to consider a few things – Limboy’s HQ The evolution of iOS Application Componentization Design – CSDN blog iOS Application Architecture Talk about componentization scheme – Casa Taloyum Evolution of Ele. me mobile APP architecture – SDK.cn – China’s leading developer service platform Drops travel iOS client architecture evolution path of iOS componentization ideas – great god blog reading and think – Jane books based on CocoaPods componentization and Git iOS project practice application of iOS network layer design is analysed blog.cnbluebox.com/blog/2015/1… Create private Podspec-GeekerProbe Cocoapods code management – The path of Componentization and modularization – Simple Book Podspec Syntax Reference v1.2.0.beta.1 iOS Development — Componentization and de-modezation Create private Pods Framework with Vue and iOS componentization Shaokanp/Seekrtech_docs Wiki Mobile phone Taobao client architecture explore practice – blog – Cloud community – Alicloud Examples of specifications · Kylefleming /CocoaPods Wiki ios – CocoaPods Dependency in Pod Spec Not Working – Stack Overflow Client Architecture – CSDN Blog Wechat, Momo and other famous IM software design architecture detailed explanation – CSDN blog architecture vernacular software design six principles – Zuochunsheng blog – CSDN blog wechat software design using thinking – CSDN blog APP and server – architecture design (I) – CSDN blog Mobile phone Taobao architecture evolution practice and optimization – CSDN blog Taobao.com technical architecture introduction – CSDN blog App architecture experience summary – CSDN blog IOS- Componentized architecture talk – CSDN blog IOS development – componentized and mode-oriented scheme – Book 58 city IOS Evolution of client componentization – Geek