CN113126966A - 一种逻辑跨端思路的设计与实现 - Google Patents

一种逻辑跨端思路的设计与实现 Download PDF

Info

Publication number
CN113126966A
CN113126966A CN202110500729.5A CN202110500729A CN113126966A CN 113126966 A CN113126966 A CN 113126966A CN 202110500729 A CN202110500729 A CN 202110500729A CN 113126966 A CN113126966 A CN 113126966A
Authority
CN
China
Prior art keywords
logic
cross
hooks
design
implementation
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
Application number
CN202110500729.5A
Other languages
English (en)
Inventor
李雪芳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beiyin Financial Technology Co ltd
Original Assignee
Beiyin Financial Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beiyin Financial Technology Co ltd filed Critical Beiyin Financial Technology Co ltd
Priority to CN202110500729.5A priority Critical patent/CN113126966A/zh
Publication of CN113126966A publication Critical patent/CN113126966A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/24—Object-oriented
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/31—Programming languages or programming paradigms
    • G06F8/315—Object-oriented languages

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computing Systems (AREA)
  • Stored Programmes (AREA)

Abstract

本发明涉及前端场景建设的技术领域，特别是涉及一种逻辑跨端思路的设计与实现,适用于重逻辑的业务场景下，结合普通项目中提取公共逻辑进行封装的技术方案应用于多端开发中，提高跨端开发效率；包括以下步骤：S1、选择合适语言作为Web端和App端的一个桥梁；S2、逻辑分离；S3、差异化。

Description

一种逻辑跨端思路的设计与实现
技术领域
本发明涉及前端场景建设的技术领域，特别是涉及一种逻辑跨端思路的设计与实现。
背景技术
随着业务场景的增加，很多时候我们都需要PC端，App端各一套代码，耗费人力成本，时间成本巨大，导致效率低下；跨技术栈调试一直是难题，问题排查成本越来越高，由于技术方案的特殊性，需要量身定制许多配套设施(包括但不限于IDE、调试、性能、监控)，才能将各个环节的成本降下来，耗费成本巨大，效率低下成了该方案的关键。
现有技术中，跨端方案有如下三种：
Web类方案的研发配套和一致性较好，但是性能有着显著差距，rem、媒体查询、scale/zoom等适配经验都不一定适用；
React-Native类方案的性能比Web好，但是多端一致性差，研发配套建设难度高；
Flutter的两端一致性和性能优秀，但是在Web上的性能表现则近乎不可用。
发明内容
为解决上述技术问题，本发明提供一种逻辑跨端思路的设计与实现,适用于重逻辑的业务场景下，结合普通项目中提取公共逻辑进行封装的技术方案应用于多端开发中，提高跨端开发效率。
本发明的一种逻辑跨端思路的设计与实现，包括以下步骤：
S1、选择合适语言作为Web端和App端的一个桥梁；
S2、逻辑分离；
S3、差异化。
本发明的一种逻辑跨端思路的设计与实现，所述步骤S1中语言为Dart。
本发明的一种逻辑跨端思路的设计与实现，所述S2具体步骤如下：构建一个抽象的Hooks层，用Hooks的方式写的Dart代码，通过这个抽象的Hooks层去抹平Flutter和React的一些底层差异，然后用Hooks把Web端和App端的这个逻辑都抽离到一个模块里。
本发明的一种逻辑跨端思路的设计与实现，所述步骤S3指的是如何让S2抽取的逻辑在Web端和App端均可以使用。
与现有技术相比本发明的有益效果为：本方案适用于重逻辑的业务场景下，结合普通项目中提取公共逻辑进行封装的技术方案应用于多端开发中，提高跨端开发效率；
由于Dart是可以通过浏览器的Devtools去调试代码的，所以比跨多端技术栈调试要方便；
该技术方案不需要多个IDE，只需要在VS Code中配置插件，并且安装对应的sdk即可。
附图说明
图1是Flutter和React的构成图；
图2是构建Hooks抽象层的结构图；
图3是React Hooks的理解图；
图4是实施例中“在Flutter中实现，触发改变时重置Hooks的计数在闭包中存取当前组件，让Hooks知道该渲染谁”的示意图；
图5是实施例中“在Web环境下去加载Web的代码，在Flutter环境下就去加载Flutter的代码”的示意图；
图6是实施例中“通过Dart的js/js包和外部的JavaScript进行互交互把函数直接映射到JavaScript函数上”的示意图；
图7是实施例中，得到的逻辑共享示意图；
具体实施方式
下面结合附图和实施例，对本发明的具体实施方式作进一步详细描述。以下实施例用于说明本发明，但不用来限制本发明的范围。
实施例：
本方案的来源：
因为在很多业务场景下，比如PC端和APP端，两端的UI交互是不同的，而且APP端对性能要求比较高，所以这就导致了技术选型；
基本上PC端的话考虑React或者其他Web场景的开发，APP端的话会考虑Flutter这个方向，但是实际上逻辑基本多端是一致的，如图1所示，所以思路是考虑在Flutter和Web之间找一个跨端方案，也就是所谓的逻辑跨端，抽取各端相同的逻辑，而各端的UI以及动画等依旧采用各端技术方案。
逻辑跨端的步骤：
S1、跨平台双向桥接Dart语言，可以用于web、服务器、移动应用和物联网等领域的开发，而且Dart从一开始就是为Web设计的，它可以转译为JavaScript并和JavaScript进行互操作；
Flutter是Google使用Dart语言开发的移动应用开发框架，使用Dart代码构建高性能、高保真的混合移动应用，所以Dart语言可以作为Web端和App端的一个桥梁，把各端逻辑的部分抽取出来采用Dart语言开发；
S2、在确定开发语言之后，再将逻辑拆分出来；以纯函数为例，只有输入和输出，只需要把它拆成一个单独的函数就可以了，但事实上在真正的业务逻辑代码里面，很多的逻辑是和组件的生命周期或者是组件的状态相关的，所以要找一个开发者很熟悉方式把逻辑从耦合的代码里分离出来；
React Hooks就是一个很好的选型，Hooks引出了函数式组件的方案，可以将组件中相互关联的部分拆成更小的函数并进行再组合，这样就可以把业务逻辑和UI代码进行分离；
而Flutter本身和React构建组件的方式是很相似的，所以可以构建一个抽象的Hooks层，如图2所示，用Hooks的方式写的Dart代码，通过这个抽象的Hooks层去抹平Flutter和React的一些底层差异，然后用Hooks把两端的这个逻辑都抽离到一个模块里；
React Hooks的理解(底层是闭包+数组)：如图3所示；
在Flutter中实现，触发改变时重置Hooks的计数在闭包中存取当前组件，让Hooks知道该渲染谁：如图4所示；
S3、这的差异化主要是是指怎么让上面抽取的逻辑在两端都可以使用，在Dart2开始提供的Conditional Import加载相同接口的不同模块，比如在Web环境下去加载Web的代码，在Flutter环境下就去加载Flutter的代码：如图5所示；
除了上面的差异化加载，还可以通过Dart的js/js包和外部的JavaScript进行互交互，把函数直接映射到JavaScript函数上，如图6所示；
在做完上面的逻辑之后，它的一个逻辑共享如图7所示，使用Dart书写了一份Hooks逻辑之后，在Flutter中，是直接usrCount拿过来用，然后绑定到UI上；在React当中也和React Hooks一样正常使用，把它相应的事件和状态绑定到UI上，而且Dart的技术相对来说比较成熟了，以通过浏览器的Devtools去打断点调试在Dart中书写的逻辑。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明技术原理的前提下，还可以做出若干改进和变型，这些改进和变型也应视为本发明的保护范围。

Claims (4)

1.一种逻辑跨端思路的设计与实现，其特征在于，包括以下步骤：
S1、选择合适语言作为Web端和App端的一个桥梁；
S2、逻辑分离；
S3、差异化。
2.如权利要求1所述的一种逻辑跨端思路的设计与实现，其特征在于，所述步骤S1中语言为Dart。
3.如权利要求2所述的一种逻辑跨端思路的设计与实现，其特征在于，所述S2具体步骤如下：构建一个抽象的Hooks层，用Hooks的方式写的Dart代码，通过这个抽象的Hooks层去抹平Flutter和React的一些底层差异，然后用Hooks把Web端和App端的这个逻辑都抽离到一个模块里。
4.如权利要求3所述的一种逻辑跨端思路的设计与实现，其特征在于，所述步骤S3指的是如何让S2抽取的逻辑在Web端和App端均可以使用。
CN202110500729.5A 2021-05-08 2021-05-08 一种逻辑跨端思路的设计与实现 Pending CN113126966A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110500729.5A CN113126966A (zh) 2021-05-08 2021-05-08 一种逻辑跨端思路的设计与实现

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110500729.5A CN113126966A (zh) 2021-05-08 2021-05-08 一种逻辑跨端思路的设计与实现

Publications (1)

Publication Number Publication Date
CN113126966A true CN113126966A (zh) 2021-07-16

Family

ID=76781461

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110500729.5A Pending CN113126966A (zh) 2021-05-08 2021-05-08 一种逻辑跨端思路的设计与实现

Country Status (1)

Country Link
CN (1) CN113126966A (zh)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112235357A (zh) * 2020-09-23 2021-01-15 建信金融科技有限责任公司 跨平台应用开发系统

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112235357A (zh) * 2020-09-23 2021-01-15 建信金融科技有限责任公司 跨平台应用开发系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
当轩: "跨端的另一种思路", 《HTTPS://DEVELOPER.ALIYU.COM/ARTICLE/781215》 *

Similar Documents

Publication Publication Date Title
EP2668577B1 (en) Unrolling quantifications to control in-degree and/or out degree of automaton
CN108984174B (zh) 跨平台的应用创建方法、装置、服务器和存储介质
CN102142032B (zh) 一种分布式文件系统的数据读写方法及系统
CN102265264A (zh) 调试流水线
CN112235357B (zh) 跨平台应用开发系统
CN106155749A (zh) 一种监控插件扩展方法及装置
CN102981827B (zh) 一种基于中间件的显示界面数据处理方法及平台
CN108763546A (zh) 一种数据格式的转换方法、装置、存储介质及终端
CN103914404A (zh) 一种粗粒度可重构系统中的配置信息缓存装置及压缩方法
KR20150125275A (ko) 소프트웨어 시스템의 디버깅 장치 및 방법
CN104985939A (zh) 一种激光打标机控制方法和激光打标机
CN104679493A (zh) 一种流程化的事件处理机制的改进方法
CN103425469A (zh) 基于mda技术的手机游戏代码生成方法
CN113126966A (zh) 一种逻辑跨端思路的设计与实现
WO2018022303A1 (en) Capturing commands in a multi-engine graphics processing unit
CN101059758B (zh) 屏幕转换程序生成方法及设备
CN104484305B (zh) 一种服务器调试分析接口装置
CN102799423A (zh) Jsf中执行动态方法的方法及装置
CN113704819B (zh) 一种应用日志的打码输出方法、装置及计算机可读存储介质
CN101553800B (zh) 将主机系统sam/vsam文件转换为开放系统sam/vsam文件的转换装置和方法
CN108959411A (zh) Etl任务的处理方法、装置和设备
CN103399752A (zh) 基于互联网服务的手机应用连锁反应系统及方法
CN103124309B (zh) 手机文件的读写控制方法及终端
CN113934767A (zh) 一种数据处理的方法及装置、计算机设备和存储介质
CN113238941A (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20210716

RJ01 Rejection of invention patent application after publication