当前位置: 首页 > Web前端 > vue.js

一种提高跨端开发速度的方法!

时间:2023-03-31 23:23:43 vue.js

什么是跨端开发?首先,让我们了解什么是终端。像Andriod、PC、IOS、ipad等,我们可以称之为用户终端,也就是我们的应用运行的平台。这种终端操作系统往往有自己的开发声音,而且终端系统是排他性的(比如Andriod和IOS互不兼容),如果我们使用某种操作系统的语法来开发应用程序,那么它就会无法在其他系统上运行,如IOS原生应用无法在Andriod上运行。然后,让我们了解一下什么是交叉端。顾名思义,跨终端就是指跨终端,例如:跨PC、跨多个Native平台、跨Web、跨POS机、跨手表设备等。最后我们来看一下什么是跨端开发。我们所说的跨端开发是指使用非封闭系统语言开发,让应用程序可以运行在多个封闭的操作系统中。在这些各式各样的跨终端诉求的基础上,相应地,也有跨终端的解决方案百花齐放。与原生开发相比,跨端开发具有开发成本低、开发周期短、开发难度低等诸多优势。主流的跨端开发方案中的跨端方案或多或少都可以起到降低研发成本和提高效率的作用,每种方案都各有优缺点。目前市场上主流的跨端开发方案有四种:1.基于Web的H5Hybrid方案。简单来说,这种方案就是利用网页进行跨端。现在大部分终端(甚至是封闭的小程序生态)都支持Webview,所以你只需要开发一个网页,然后放到多个终端上。桌面上对应的解决方案是Electron。在开发成本低、标准统一、生态繁荣等方面,H5Hybrid方案非常出色。但是这种方案的缺点也非常明显,就是性能和体验上有明显的差距。同时,Web生态的繁荣源于其良好的历史兼容性,这也意味着沉重的历史包袱。2.React-Native/Weex-like解决方案React-Native/Weex-like解决方案通过尽可能取长补短的方式将Web生态和Native组件进行整合,让JS执行代码,使用Native组件进行渲染,从而解决遗弃Web问题的历史包袱。该方案也存在一些缺陷:iOS/Android端的组件和布局机制不一致,难以保证端的一致性;依赖Native机制也导致一些CSS属性难以实现,比如z-index问题。另外,这个方案也需要非常高的维护和支持成本:比如它借鉴了Web的生态,但不完全是Web生态,还有很多不一致的地方,比如不能使用惯用的CSS布局方式.3.FlutterFlutter并没有继续借力Web生态,从设计之初就没有考虑Web生态。相对于依赖NativeView进行渲染的RN,Flutter是一个自绘组件,通过Skia绘制到屏幕上。既然可以充分发挥GPU的能力,就没必要绕着Native走。Flutter理论上可以在两端实现更好的性能和一致性,这意味着理论上,未来基于Flutter的JS动态方案可能支持比WEEX更好的样式。但是从前端开发的角度来看,Flutter更像是一个Native开发方案而不是一个跨端方案(虽然它实际上是跨Android/iOS的)。目前的主要问题是,FlutterforWeb在技术原理上可能离生产可用性还很远,动态能力确实会让一些场景无法适用。4.小程序运行时方案这个方案可以说是目前笔者认为性价比最高的方案,没有之一。在应用体验上,小程序技术是前端容器技术的一种应用。其组件和UI有明确的规范,开发者不需要考虑兼容性和选择类似H5开发的复杂工具和框架。同时,由于预置了组件和UI,显示体验会更好。在应用框架支持方面,部分运行时方案不仅支持运行纯wxml微信小程序,还支持与uniapp、Taro、kbone等第三方框架集成的小程序。在宿主环境集成方面,小程序是基于App端的应用,其获取系统(App)权限会超过H5;随着微信小程序的风潮,各大互联网平台的追捧,小程序技术的发展已经趋于成熟,市场上的小程序开始适配多种智能终端设备(基于多终端屏幕适配在Andriod系统上)运行时。跨端开发的本质是降本增效。我们不能寄希望于一种技术方案可以解决所有的跨端问题。我们只能选择更适合我们业务增长的长期技术治理方案。跨端开发的本质是实现降本增效。在为业务支撑做新的技术方案的同时,更重要的是如何让这个效率的提升真正的稳定和持久,让我们的效率提升不会变成从一个新的方案跳到另一个新的方案。在这里给大家介绍一下FinClip小程序运行时项目。在核心技术层面,FinClip是一种小程序容器技术。它具备上述所有跨端技术的优势,包括:应用体验归功于H5,应用框架支持各种主流框架生成的小程序,多终端设备(主机)环境友好兼容。另外,视图层和逻辑层的分离也带来了很多好处:1.方便了多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为开发人员提供具有熟悉的编码体验的原生应用程序开发背景;2、Service和View的分离和并行实现,可以避免JS执行影响或拖慢页面渲染,有利于提升渲染性能;3、由于JS是在Service层执行的,在JS中操作DOM不会影响到View层,所以小程序无法操作DOM结构,这也使得小程序的性能优于传统小程序。H5更好。基础设施层面的底层支撑方案需要有一个完整的、可扩展或可二次开发的基础设施模块,才能真正实现长期的降本增效。FinClip自带企业端管理后台,方便企业统一管理小程序上架下架、主机设备关联绑定、基础数据分析功能。FinClip为小程序提供了IDE开发工具。界面类似于微信小程序的开发工具。自带调试和真机预览功能,使用方便。在这个IDE中,您可以对已有的项目进行二次开发,扩展功能和接口,或者从头开始编写一个小程序。有商业生态的企业可以尝试利用FinClip打通自己的小程序生态,让合作伙伴开发小程序并放到自己的APP上,形成丰富的场景和功能来服务客户。比如银行信用卡APP可以上架大量的第三方消费场景小程序,旅游APP可以上架吃住行伙伴的小程序,最终实现客流闭环——为中心的数字服务。跨终端开发方案很多,选择时需要从技术、业务、扩展性等方面综合考虑,才能真正达到降本增效的效果。

猜你喜欢