CN115686462A - 基于React-Native的工程化架构方法及系统 - Google Patents
基于React-Native的工程化架构方法及系统 Download PDFInfo
- Publication number
- CN115686462A CN115686462A CN202211422163.XA CN202211422163A CN115686462A CN 115686462 A CN115686462 A CN 115686462A CN 202211422163 A CN202211422163 A CN 202211422163A CN 115686462 A CN115686462 A CN 115686462A
- Authority
- CN
- China
- Prior art keywords
- native
- module
- codes
- gitlab
- code
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 31
- 238000012360 testing method Methods 0.000 claims abstract description 37
- 238000009434 installation Methods 0.000 claims abstract description 16
- 238000004806 packaging method and process Methods 0.000 claims abstract description 14
- 238000011161 development Methods 0.000 claims abstract description 13
- 230000003068 static effect Effects 0.000 claims abstract description 12
- 238000012937 correction Methods 0.000 claims abstract description 7
- 238000012795 verification Methods 0.000 claims abstract description 7
- 230000000977 initiatory effect Effects 0.000 claims abstract description 4
- 230000006870 function Effects 0.000 claims description 16
- 230000008571 general function Effects 0.000 claims description 7
- 238000001514 detection method Methods 0.000 claims description 4
- 230000002787 reinforcement Effects 0.000 claims description 4
- 238000012545 processing Methods 0.000 claims description 3
- 238000012856 packing Methods 0.000 claims 2
- 230000003014 reinforcing effect Effects 0.000 abstract description 5
- 238000012423 maintenance Methods 0.000 abstract description 4
- 230000015556 catabolic process Effects 0.000 abstract description 3
- 238000006731 degradation reaction Methods 0.000 abstract description 3
- 230000008569 process Effects 0.000 description 6
- 238000007726 management method Methods 0.000 description 5
- 238000013519 translation Methods 0.000 description 4
- 230000002776 aggregation Effects 0.000 description 3
- 238000004220 aggregation Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000013461 design Methods 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 230000001960 triggered effect Effects 0.000 description 2
- 238000012550 audit Methods 0.000 description 1
- 230000004888 barrier function Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000008878 coupling Effects 0.000 description 1
- 238000010168 coupling process Methods 0.000 description 1
- 238000005859 coupling reaction Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 238000003032 molecular docking Methods 0.000 description 1
Images
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Stored Programmes (AREA)
Abstract
本发明提供了一种基于React‑Native的工程化架构方法及系统，包括如下步骤：代码提交申请步骤：发起代码提交申请；本地静态代码扫描步骤：对提交的代码进行格式校验并自动校正；单元测试步骤：对提交的代码中的测试用例进行测试；React‑Native业务步骤：测试用例通过后将代码提交到gitlab；gitlab工作流步骤：对提交到gitlab的代码执行扫描、编译、打包和安全加固，根据环境变量的配置生成不同平台的安装包并上传至对应平台。本发明解决多人开发时候代码容易劣化，导致项目后期维护成本过高的问题。
Description
技术领域
本发明涉及工程化架构的技术领域，具体地，涉及一种基于React-Native的工程化架构方法及系统。
背景技术
React Native(简称RN)是Facebook开源的跨平台移动应用开发框架,支持iOS和android两大平台,是目前运用最广泛的移动应用开发框架。
公开号为CN110780917A的中国发明专利文献公开了一种React Native应用自动化打包发布的方法及系统。包括：代码更新模块，负责从代码仓库更新下载代码，支持从SVN、GIT、CVS中更新代码；编译校验模块，负责校验及纠正一些应用工程配置和一些编译类文件；编译打包模块，负责将代码编译打包成应用安装包，根据不同配置进行定制化打包；应用发布模块，负责发布编译完成的应用安装包，配置发布到不同平台。
针对上述中的相关技术，发明人认为多人开发时候代码容易劣化，导致项目后期维护成本过高。
发明内容
针对现有技术中的缺陷，本发明的目的是提供一种基于React-Native的工程化架构方法及系统。
根据本发明提供的一种基于React-Native的工程化架构方法，包括如下步骤：
代码提交申请步骤：发起代码提交申请；
本地静态代码扫描步骤：对提交的代码进行格式校验并自动校正；
单元测试步骤：对提交的代码中的测试用例进行测试；
React-Native业务步骤：测试用例通过后将代码提交到gitlab；
gitlab工作流步骤：对提交到gitlab的代码执行扫描、编译、打包和安全加固，根据环境变量的配置生成不同平台的安装包并上传至对应平台。
优选的，该方法还包括导航底座步骤：进行pop、push、present和modal，并在js层统一api，提供给React-Native调用，通过json对象来描述页面结构。
优选的，该方法还包括壳工程步骤：进行组件化开发、组件工程创建，以及组件自测调试，进行运行调试，并发布到内部制品仓库，通过cli命令生成项目。
根据本发明提供的一种基于React-Native的工程化架构系统，应用基于React-Native的工程化架构的方法，包括如下模块：
本地静态代码扫描模块：对提交的代码进行格式校验并自动校正；
单元测试模块：对提交的代码中的测试用例进行测试；
React-Native业务模块：测试用例通过后将代码提交到gitlab；
gitlab工作流模块：对提交到gitlab的代码执行扫描、编译、打包和安全加固，根据环境变量的配置生成不同平台的安装包并上传至对应平台。
优选的，该系统还包括导航底座模块：进行pop、push、present和modal，并在js层统一api，提供给React-Native调用，通过json对象来描述页面结构。
优选的，该系统还包括壳工程模块：进行组件化开发、组件工程创建，以及组件自测调试，进行运行调试，并发布到内部制品仓库，通过cli命令生成项目。
优选的，在所述静态代码扫描模块中，一部分为代码提交时进行代码规范检测，基于eslint进行配置，自动纠正不符合规范的代码；另一部分由gitlab工作流模块调用，上传代码后在托管服务器上跑代码扫描工具，达到预定通过率后允许继续编译和打包。
优选的，该系统还包括通用功能模块：集合公司内多个项目提取的通用功能，管理形式不限于单个模块，根据业务划分边界，聚合成各自的功能模块。
优选的，在所述React-Native业务模块中，为项目框架提供约束，将客户端业务划分为Page、Service和Repository；Page层为用户视图层，负责接收用户指令；组件为Service，所有的Service协调并委派业务逻辑给Repository进行处理；Repository负责对接通用功能模块。
优选的，该系统包括codepush模块：根据React-Native特性，进行分包加载；利用React-Native和codepush动态特性，进行动态更新。
与现有技术相比，本发明具有如下的有益效果：
1、本发明解决多人开发时候代码容易劣化，导致项目后期维护成本过高的问题；
2、本发明解决一个公司内部存在多个项目，必定存在重复的功能重复开发的情况，如果此时在一个地方针对某个通用功能有需求变更，会存在在另一个项目改功能更新不及时或者需要在多个项目重复维护一个组件的情况，浪费人力的问题；
3、本发明解决UI跟业务强耦合的问题；
4、本发明解决跨端开发资源分配不均的问题，可以根据开发人员当前任务熟练进行动态分配开发任务。
附图说明
通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：
图1为本发明架构图；
图2为本发明流程图。
具体实施方式
下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。
本发明实施例公开了一种基于React-Native的工程化架构方法，如图1和图2所示，包括如下步骤：代码提交申请步骤：发起代码提交申请。
本地静态代码扫描步骤：对提交的代码进行格式校验并自动校正。
单元测试步骤：对提交的代码中的测试用例进行测试。
React-Native业务步骤：测试用例通过后将代码提交到gitlab。
gitlab工作流步骤：对提交到gitlab的代码执行扫描、编译、打包和安全加固，根据环境变量的配置生成不同平台的安装包并上传至对应平台。
导航底座步骤：进行pop、push、present和modal，并在js层统一api，提供给React-Native调用，通过json对象来描述页面结构。
壳工程步骤：进行组件化开发、组件工程创建，以及组件自测调试，进行运行调试，并发布到内部制品仓库，通过cli命令生成项目。
本发明还提供一种基于React-Native的工程化架构系统，基于React-Native的工程化架构系统可以通过执行基于React-Native的工程化架构方法的流程步骤予以实现，即本领域技术人员可以将基于React-Native的工程化架构方法理解为基于React-Native的工程化架构系统的优选实施方式。
如图1所示，该系统包括：导航底座模块，壳工程模块，静态代码扫描模块，单元测试模块，通用功能模块，gitlab工作流模块和React-Native业务模块。GitLab是一个用于仓库管理系统的开源项目。
工作流程如图2所示，代码提交行为触发静态代码扫码模块运行，对本地工程进行格式校验并自动纠正，然后会调用单元测试模块，自动运行React-Native业务模块中的测试用例，待测试用例都通过后才会正式提交代码到远端gitlab，代码上传至gitlab之后会触发gitlab工作流模块，执行代码扫描、编译、打包、安全加固等流程，最后根据环境变量的配置生成不同平台的安装包并上传至对应平台的应用商店，全流程结束。
导航底座模块：由于android和iOS的导航架构不一致，用户体验也不一致，为了统一api与用户体验，以iOS的导航体验为基准，实现pop(返回上一页)、push(推出新页面)、present(从下方弹出新页面)、modal(模态窗口)等功能，并且在js层统一api，提供给React-Native调用，支持通过json对象来描述页面结构的功能。JavaScript(简称JS)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。Json(JavaScript ObjectNotation，JS对象简谱)是一种轻量级的数据交换格式。API的英文全称为ApplicationProgram Interface，中文译文为应用程序界面。
壳工程模块：为了实现组件化开发，组件工程快速创建，方便组件自测调试等功能，壳工程模块集成主工程基础功能，可以单独运行调试，并且发布到内部制品仓库，可以通过cli命令快速生成项目，减少重复配置工程的工作。CLI的英文全称为command-lineinterface，中文译文为命令行界面。
静态代码扫描模块：由两部分组成，一部分为代码提交时候的代码规范检测，基于eslint进行配置，自动纠正不符合规范的代码，另一部分则由gitlab工作流模块调用，在上传代码之后，在托管服务器上跑代码扫描工具，达到一定通过率后才允许继续编译，打包。eslint是一个代码检查工具，用来检查你的代码是否符合指定的规范。
单元测试模块：在提交代码的时候会自动运行项目内已写好的单元测试，并且测试通过后才能上传代码。
gitlab工作流模块：用来控制代码上传gitlab之后，自动触发后续一系列自动化操作，包含代码扫描、编译、打包、安全加固等流程，可以串行执行，也可以单独某一向进行执行。
通用功能模块：指代公司内多个项目提取出来的通用功能的集合，管理形式不限于一个模块，根据业务划分边界，聚合成各自的功能模块。
React-Native模块：为项目框架，提供约束指导作用，参考DDD的思想，将客户端业务划分为Page(页面)、Service(服务)、Repository(数据仓库)三层，Page层为用户视图层，负责接收用户指令，组件是Service，所有的Service协调并委派业务逻辑给Repository进行处理，Repository负责对接下层通用功能模块。DDD的英文全称为Domain-drivendesign，中文译文为领域驱动设计。
该系统还包括codepush模块，系统还可以引入codepush，根据React-Native特性，可以实现分包加载功能，提升应用运行性能。codepush是微软的开源项目，专门作为React-Native热更新解决方案。利用React-Native+codepush动态特性，可以实现有限度的动态更新，实现无需应用商店审核就能更新版本的效果。
本发明可适用公司同时存在多个项目，每个项目都有通用功能的情景，减少冗余代码的维护。
分析关联关系：对象之间复杂的关联关系容易形成对象的关系网，对于理解和维护单个对象很不利，同时也很难划分对象与对象之间的边界。所以在设计关联时，关联应尽可能的少，而且尽量保持单向的关联，把多对多或者一对多简化为一对一的关系。
设定聚合边界，确定聚合模块；区分业务之间的关系和边界，每个聚合都有一个Service，并且唯一可被外访问的。
工程化流程，由于iOS(苹果操作系统。)android(安卓操作系统)、javascript技术栈不同，需要打通不同环境之间的壁垒，进行统一的流程化管理。
本发明进行统一的组件化管理，采用组件热插拔技术，实现快速的工程构建，进行更便捷的开发资源分配，从流程上尽可能的减少代码劣化的因素，提高代码健壮性，实现devops。Devops是过程、方法与系统的统称。本发明通过gitlab工作流模块，达到了代码在上传之后，自动进行代码扫描，编译，打包，加固的功能，达到自动化的效果。
本发明参考DDD分层架构思想，将业务聚合成一个个组件提供给项目接入，React-Native作为中间层，实现跨平台api统一，并且实现Service与UserInterface解耦，方便界面快速迭代而不影响核心业务逻辑，利用React-Native前端特性，在提交代码时完成静态代码扫描以及单元测试检测达到防劣化效果。
UserInterface的中文译文为用户界面。
本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的系统及其各个装置、模块、单元以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统及其各个装置、模块、单元以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同功能。所以，本发明提供的系统及其各项装置、模块、单元可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置、模块、单元也可以视为硬件部件内的结构；也可以将用于实现各种功能的装置、模块、单元视为既可以是实现方法的软件模块又可以是硬件部件内的结构。
以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。
Claims (10)
1.一种基于React-Native的工程化架构方法，其特征在于，包括如下步骤：
代码提交申请步骤：发起代码提交申请；
本地静态代码扫描步骤：对提交的代码进行格式校验并自动校正；
单元测试步骤：对提交的代码中的测试用例进行测试；
React-Native业务步骤：测试用例通过后将代码提交到gitlab；
gitlab工作流步骤：对提交到gitlab的代码执行扫描、编译、打包和安全加固，根据环境变量的配置生成不同平台的安装包并上传至对应平台。
2.根据权利要求1所述的基于React-Native的工程化架构方法，其特征在于，该方法还包括导航底座步骤：进行pop、push、present和modal，并在js层统一api，提供给React-Native调用，通过json对象来描述页面结构。
3.根据权利要求1所述的基于React-Native的工程化架构方法，其特征在于，该方法还包括壳工程步骤：进行组件化开发、组件工程创建，以及组件自测调试，进行运行调试，并发布到内部制品仓库，通过cli命令生成项目。
4.一种基于React-Native的工程化架构系统，其特征在于，应用权利要求1-3任一所述的基于React-Native的工程化架构的方法，包括如下模块：
本地静态代码扫描模块：对提交的代码进行格式校验并自动校正；
单元测试模块：对提交的代码中的测试用例进行测试；
React-Native业务模块：测试用例通过后将代码提交到gitlab；
gitlab工作流模块：对提交到gitlab的代码执行扫描、编译、打包和安全加固，根据环境变量的配置生成不同平台的安装包并上传至对应平台。
5.根据权利要求4所述的基于React-Native的工程化架构系统，其特征在于，该系统还包括导航底座模块：进行pop、push、present和modal，并在js层统一api，提供给React-Native调用，通过json对象来描述页面结构。
6.根据权利要求4所述的基于React-Native的工程化架构系统，其特征在于，该系统还包括壳工程模块：进行组件化开发、组件工程创建，以及组件自测调试，进行运行调试，并发布到内部制品仓库，通过cli命令生成项目。
7.根据权利要求4所述的基于React-Native的工程化架构系统，其特征在于，在所述静态代码扫描模块中，一部分为代码提交时进行代码规范检测，基于eslint进行配置，自动纠正不符合规范的代码；另一部分由gitlab工作流模块调用，上传代码后在托管服务器上跑代码扫描工具，达到预定通过率后允许继续编译和打包。
8.根据权利要求4所述的基于React-Native的工程化架构系统，其特征在于，该系统还包括通用功能模块：集合公司内多个项目提取的通用功能，管理形式不限于单个模块，根据业务划分边界，聚合成各自的功能模块。
9.根据权利要求8所述的基于React-Native的工程化架构系统，其特征在于，在所述React-Native业务模块中，为项目框架提供约束，将客户端业务划分为Page、Service和Repository；Page层为用户视图层，负责接收用户指令；组件为Service，所有的Service协调并委派业务逻辑给Repository进行处理；Repository负责对接通用功能模块。
10.根据权利要求1所述的基于React-Native的工程化架构系统，其特征在于，该系统包括codepush模块：根据React-Native特性，进行分包加载；利用React-Native和codepush动态特性，进行动态更新。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211422163.XA CN115686462A (zh) | 2022-11-14 | 2022-11-14 | 基于React-Native的工程化架构方法及系统 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202211422163.XA CN115686462A (zh) | 2022-11-14 | 2022-11-14 | 基于React-Native的工程化架构方法及系统 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN115686462A true CN115686462A (zh) | 2023-02-03 |
Family
ID=85051572
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202211422163.XA Pending CN115686462A (zh) | 2022-11-14 | 2022-11-14 | 基于React-Native的工程化架构方法及系统 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115686462A (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117539521A (zh) * | 2024-01-10 | 2024-02-09 | 中航国际金网(北京)科技有限公司 | 应用程序升级方法、装置、非易失性存储介质及电子设备 |
-
2022
- 2022-11-14 CN CN202211422163.XA patent/CN115686462A/zh active Pending
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117539521A (zh) * | 2024-01-10 | 2024-02-09 | 中航国际金网(北京)科技有限公司 | 应用程序升级方法、装置、非易失性存储介质及电子设备 |
| CN117539521B (zh) * | 2024-01-10 | 2024-05-07 | 中航国际金网(北京)科技有限公司 | 应用程序升级方法、装置、非易失性存储介质及电子设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10073684B2 (en) | Adaptive selection of programming language versions for compilation of software programs | |
| US10572249B2 (en) | Software kit release management | |
| CN110851356A (zh) | 一种基于Selenium的Web应用自动化测试框架及其构建方法、系统 | |
| CN105022630B (zh) | 一种组件管理系统及组件管理方法 | |
| US9740459B2 (en) | Automated generation of bridging code to augment a legacy application using an object-oriented language | |
| US10372112B2 (en) | System and method for legacy level 1 controller virtualization | |
| US20040268293A1 (en) | Automating the life cycle of a distributed Computing application | |
| US20150100945A1 (en) | Resuming a software build process | |
| WO2009140250A1 (en) | Framework-based model-driven software development | |
| US20150100830A1 (en) | Method and system for selecting and executing test scripts | |
| CN111045675A (zh) | 一种基于Flutter的页面生成方法、装置、设备和存储介质 | |
| KR20200125159A (ko) | 전자 장치 및 이의 제어 방법 | |
| Bartusevics et al. | Models for implementation of software configuration management | |
| US10459698B2 (en) | Framework for generating adapters in an integrated development environment | |
| CN115686462A (zh) | 基于React-Native的工程化架构方法及系统 | |
| CN107122182B (zh) | 一种代码构建和发布的方法及系统 | |
| CN114064083A (zh) | 通过在配置中心自定义模板部署云原生应用的方法及应用 | |
| CN111796863A (zh) | 一种跨环境的项目版本的管理方法 | |
| US20130111432A1 (en) | Validation of a system model including an activity diagram | |
| US11740894B2 (en) | Build-independent software framework for creating custom adapters | |
| US20230325298A1 (en) | System and method for cloud infrastructure test automation | |
| CN114090189A (zh) | 一种基于流水线的构建部署管理方法及系统 | |
| CN114237574A (zh) | 金融业务生产管理系统、方法、设备、介质和程序产品 | |
| US20110107324A1 (en) | Association of object elements to operational modes | |
| CN111596952B (zh) | 系统全局名称配置处理方法、装置、设备及介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |