首页 > 股票资讯 正文

前端开发:如何正确跨端? 黄金交易软件

时间:2021-03-06 14:03:55作者:佚名

原标题:前端开发:如何正确跨端?

简介:面对各种跨端需求,有哪些跨端解决方案?跨端的本质是什么?作为商业技术开发人员应该怎么做?本文分享了对阿里巴巴ICBU技术部跨端开发的一些思考,介绍了目前主流的跨端解决方案和跨端开发的经验。

交叉端 写一次,到处跑。 这个经典的宣传用语我们都听说过,后来都知道没有什么东西是真的可以到处跑的,顶多只能到处调试。

当我们谈到一次性写多端运行的时候,显然不可能真的是指跨所有端。大多数情况下,你不需要同时在电脑和手环上开发一个功能。

跨越个人电脑和无线终端。 跨多个本机平台:例如,跨Android和iOS,甚至跨Windows。 跨应用交付:随着超级应用数量的增加,许多企业需要在多个应用中交付相同的页面。 跨Web和APP:Web在很多情况下还是不可避免的。我们的页面可能需要分享,SEO或者放在M站等。此时,我们需要能够在网络和应用程序中运行。 跨Web,小程序,QuickApp等。:其实和跨APP差不多,只是小程序本身就是各个家庭控制的封闭生态,所以有一个需求就是一次性开发适应多种封闭生态。 其他端的跨端需求:比如跨POS机、手表等。 对应我们各种跨端需求,是百花齐放的跨端方案。

百花齐放的十字路口方案 基于网络的H5混合方案 这种方案是最直接的。简单来说就是用网页来跨端。由于我们的大部分服务器(甚至是封闭的小程序生态系统)都支持Webview,所以我们只需要开发网页放在多台服务器上,桌面上对应的解决方案就是electronic。

为什么不直接使用网络呢?

就开发成本低、标准统一、生态繁荣而言,H5杂交基本上是最佳选择。但是这种方案很难避免性能和体验上的差距。Web的生态繁荣源于其良好的历史兼容性,这也意味着沉重的历史负担。

W3C标准作为一个开放的技术标准,有着许多历史包袱和复杂的逻辑。 Web标准不是为性能而设计,这使得它在许多地方很难改进。比如JS执行,Layout和渲染互斥,导致JS执行任务较长,会执行正常渲染,造成堵塞。 网络的标准化也进展缓慢,新功能可能需要很长时间才能使用。 反应-本地/Weex类方案 在移动平台上,尤其是早期的WebView,性能体验很差。正如我们前面提到的,这个差距主要来自Web生态系统本身沉重的历史负担。

而REACT-NATURE/WEEX这样的方案,通过尽可能的取长补短,将Web的生态和Native组件结合起来,让JS执行代码,用Native组件渲染。因为抛弃了Web的历史包袱,所以可以对这样的方案做一些剧烈的改变。

比如RN,如下图所示,将JS执行、布局和渲染(Native component)放在三个进程中分别执行,避免了JS执行复杂任务时的接口堵塞。通过抛弃CSS中的大量标准,只支持部分flex布局能力,降低布局和渲染的复杂度。

这个方案也有一些缺陷:

iOS/Android终端的组件和布局机制不一致,很难保证两个终端的一致性。 对Native机制的依赖也使得一些CSS属性难以实现,比如长期存在的z-index问题。 最麻烦的是,这个解决方案意味着非常高的维护和支持成本。

借用Web生态,但不完全是Web生态,有很多不一致的地方,最常见的吐槽就是不能使用常规的CSS布局。 相对于浏览器新的devtool需要一套完整的传感器API,这种方案在大多数情况下的开发体验保证可以说是刀耕火种(下图是Chrome的direction传感器API的devtool)。

在WebView性能差距逐渐缩小的今天,是否值得维持这个复杂方案的ROI,需要根据我们场景的具体需求来考虑。

拍翅而飞 与上述方案不同,Flutter根本不打算继续利用Web生态,在设计之初也没有考虑Web生态。相比RN对Native View渲染的依赖,Flutter是一个自绘制组件,通过Skia直接绘制到屏幕上。

因为GPU可以被充分利用,所以没有必要绕过Native。颤振在理论上可以实现更好的性能和两端一致性,这意味着理论上基于颤振的JS动态方案在未来可以比WEEX更好的支持风格。

从前端的角度来看,它仍然更像是一个本机开发解决方案,而不是一个跨端解决方案(尽管它实际上是跨Android/iOS的)。目前的主要问题是,从技术原理上来说,腹板颤振可能远远不能用于生产。况且动态能力会让一些场景不适合。

小程序的R&D框架 小程序是创造出来的问题,每个小程序出于商业考虑,主动在Web生态的基础上构建一个相对封闭的生态。它与网络生态不兼容。但是,很难接受使用有多个小程序,或者小程序和Web终端同时放入的场景。

因为小程序的末端是封闭的,不受控制的,所以小程序的跨端问题只能从R&D框架层面来解决。

编译时方案 Taro是众所周知的编译时方案,一般原理可以解释为编译JSX到WXML/WXSS/JS的小程序。但是这种框架的实现原理并不是真正的React或者React样的框架,而是通过静态编译把看起来像JSX的模板翻译成小程序的模板。

局限性很明显,就是JSX是JavaScript的扩展语言(React Blog是作为JavaScript的语法扩展写的),而小程序使用的WXML是表达能力非常有限的模板语言,所以我们不可能从一般的编程语言编译成模板语言。

为了实现这一点,静态编译类框架采用了限制开发人员写作风格的方式,这也是taro对JSX的写作风格做了很多限制的原因。这直接导致了无尽的维护成本和严重破坏开发体验,然后taro/next转向了运行时解决方案和静态编译优化的结合。

运行时架构 不谦虚地说,小程序的运行时方案应该是我写第一期remax时最早的

remax的Paypal性能测试

在某些情况下,这种损失是值得的。这些运行时框架还通过关闭由编译、部分静态编译、虚拟列表等生成的模板中未使用的属性来提高性能。

当然最后嵌入Webview还是一个解决方案。

作为一个商业技术团队,我们应该做什么 以上提到的所有解决方案都是针对一些特定的场景。然而,对于业务技术团队来说,跨端的本质是提高效率。一方面,更重要的是为新的变化提出新的方案,这样我们的效率提高就不会从一个新方案变成另一个新方案。

我们再来看上图,可以确定的是,跨端需求和对应的方案仍然会处于频繁的变化中,不会有一个解决所有跨端问题的方案。而相对不变的部分,值得我们长期稳定的投入。

WebView & ampH5混合动力车 WebView可能是众多容器中最特殊的容器。虽然它很难满足某些场景对性能和体验的极端要求,但它将是最稳定、最长期和受支持的解决方案。

从未来的开发效率和长期维护演进来看,在满足性能体验要求的前提下,Web解决方案仍然是重中之重。

同时,我们可以在APP的WebView容器上做更多的工作,比如通过容器提供一些内部功能,结合Native功能实现并行数据加载,保持页面的活跃度等等。

基础设施 无论采用哪种跨端方案,在哪个容器中,性能、稳定性和效率是不可分割的三驾马车。

演出 不同的方案往往有不同的性能方案。如上所述,在小程序的运行时方案中,会有减少编译模板的输出等优化。但实际上,除了这个具体方案的优化之外,大多数优化方法都是类似的:离线缓存、数据预取、快照、SSR、NSR等等。

对于不同的码头和集装箱,性能问题的测量和发现应该是一致的。我们需要对不同终端的页面性能有一个清晰的认知和横向比较。

端到端的性能构建(端能力、特定端的性能计算方案、性能打点等。)可能需要根据不同的端和不同的跨端方案而不同。但是性能基础设施(首屏标准、数据分析、基础优化能力)在跨端应该是比较稳定的。

在端侧能力方面,ICBU早期在WEEX性能优化中引入了并行加载能力,并通过wh_prefetch协议使用了容器的并行加载能力。然后,在新的容器(WebView,Browser)中,尽管底层功能有所不同,但仍然可以识别相同的协议。

在数据采集和分析方面,我们统一了跨端基础数据库,使得不同端的不同技术解决方案可以在同一标准下进行分析、测量和比较。

稳定结构 在无线端,我们经常把性能&稳定也叫“高可用性”,主要涵盖灰度能力、业务监控、告警、错误监控、白屏检测等等。

这些功能不太依赖于特定的端到端和跨端方案,除了端端的数据采集逻辑略有不同之外,其他结构部分相对稳定。对于这些场景,也有一些跨端可用的解决方案,比如iTrace。

工程基本建设 对于不同的场景,尽管在方案上有一些差异,我们的工程基础设施可以保持统一

容器层提供统一的应用编程接口和文档功能 统一R&D进程 R&D工具提供统一的捕获和调试功能 一致的工具库等等 这样,当一个新的容器或解决方案出现时,我们只需要根据相应的能力进行对齐,这样我们的上层业务代码和开发经验就可以保持相对稳定的状态。

跨终端业务逻辑 相对来说,我们会发现在各种跨端方案的演进过程中,UI层面的变化,比如如何渲染,如何布局,远远大于业务逻辑层面的变化。即使是applets和Flutter的一般开发范式也没有太大变化。比如Flutter开发范式和React很像,React也是声明式UI,也有VirtualDOM。

考虑到SEO和性能问题以及Flutter基于Skia的渲染模式,Flutter for Web可能在很长一段时间内都不是生产环境中可用的解决方案。

在统一了业务逻辑代码的组织之后,我们可以通过Hooks for ALL在Flutter和Web之间共享一个基于Hooks的业务逻辑代码。

有时候不需要真的到处跑,提高效率,保持一致性就能达到目的。

视图层 目前视图层的跨端依然充满变数。在我们的业务逻辑层的跨端足够原子化之后,也许我们交互逻辑不是特别重的一些视图层可以通过DX+绑定原子化逻辑+数据参数覆盖更多的跨端场景。从而同时满足性能和效率的要求。

然而,对于一般场景的十字端视图来说,仍然没有银弹。

总结 总的来说,跨终端在很长一段时间内是并且将会是多种方案共存、不断变化的状态。除了为新的变化和新的场景选择或创造合适的解决方案,我们还必须做好这种动态变化的长期稳定性:

H5混合动力车. 性能、稳定性和效率三驾马车的统一性和连续性。 在不坚持写一次的场景下,考虑业务逻辑的跨端,比UI的跨端简单。 作者:开发者助理_LS

本文是阿里巴巴云的原创内容。未经允许不能转载回搜狐。查看更多

负责编辑:


以上就是前端开发:如何正确跨端?黄金交易软件的全部内容了,喜欢我们网站的可以继续关注菁眉股票网其他的资讯!