浅谈国内主流的跨端开发框架,跨端开发框架结构图

4747 1624 2022-12-05

本文讲述了浅谈国内主流的跨端开发框架,跨端开发框架结构图。

Flutter 是一款由 Google 开发的开源、跨平台移动端开发框架。Flutter 使用 Dart 作为开发语言，这是一门简洁、强类型的编程语言。它允许使用同一个代码库构建高性能、漂亮的 iOS 和 Android 应用，Flutter还提供了两套视觉库，可以针对不同的平台有不同的展示效果。此外，通过自定义的 Flutter 引擎可以将其嵌入到其他平台。

一直以来，跨平台工具采用以下两种方法之一：
  • 在原生应用程序中嵌入 web view ，像构建网站一样构建应用程序。
  • 封装原生平台里的控件并为它们提供一些跨平台的参数。

Flutter的特别之处

为了使移动端开发变得更好，Flutter 尝试了一种不同的方法。它提供了开发人员工作的框架应用程序和能够托管应用程序的可移植运行时的引擎。该框架依托 Skia 图形库而构建，提供了实际渲染时用到的 widgets，而不仅仅是原生应用控件的包装器。就像 web 包装器选项提供的那样，该方法可以灵活的以完全自定义的方式构建跨平台应用程序，同时还会提供流畅的性能体验。与此同时，Flutter 自带的丰富的 widget 库以及一些开源的 widgets 使其成为一个功能丰富的平台。
目前已经有不少大型项目接入Flutter，阿里的闲鱼、头条的抖音、腾讯的NOW直播，都将Flutter当做应用程序的开发语言。除此之外，还有一些其他中小型公司也在做。

Flutter的整体架构

简单明了的说，Flutter 分为三大部分：由 Dart 语言负责的 Framework 层；Dart 语法执行器；Skia 图像处理引擎。
Flutter 也可以理解为开发SDK或者工具包，其通过Dart作为开发语言，并且提供Material和Cupertino两套视觉控件，视图或其他和视图相关的类，都以Widget的形式表现。Flutter有自己的渲染引擎，并不依赖原生平台的渲染。Flutter还包含一个用C++实现的Engine，渲染也是包含在其中的。

Flutter的跨端优势

1、如果以后想在 Google 的新系统上跑程序的话，用Flutter来编写是一定没错的。
2、Flutter 用 Dart，学习 Flutter的同时会使我们掌握一门新的语言，买一送一。
3、Flutter 天生支持 iOS 风格的控件， 称为 Cupertino，这样我们可以一套设计， 一套code跑在两个系统上。
4、学习Flutter的过程会改变手机端app开发的思维，毕竟只有一个activity，全程跟个游戏引擎一样， 60帧每秒绘图。
5、Hot reload，极大地加速了开发效率。
6、Flutter 提供 method channel 给 Android 和 iOS，其实可以只用 Flutter 来开发UI，其他底层逻辑可以封装Android 和 iOS 分别的 lib package，然后直接Rx封装写回 method channel，也是一种新的开发模式。
7、性能更好， 兼容性更好，开发起来更有乐趣，这才是程序员的人生，正好 Flutter 都能满足。

跨平台方案的比较

NATIVE

原生应用程序在使用新功能时带来的困扰是最少的。由于应用程序是使用平台供应商自己（Apple 或 Google）的控件构建，为了让用户体验更加符合给定的平台，因此他们通常遵循这些供应商制定的设计指南。大多数情况下，原生的应用将会比那些跨平台构建的应用性能要好一些，尽管在很多情况下两者的差异可以忽略不计，不过具体还要取决于底层跨平台技术。原生应用的一大优势是：当需要时，他们可以立即采用 Apple 和 Google 在测试版中开发的新技术而不用等待第三方的集成。构建原生应用的主要缺点是缺乏跨平台的代码复用，如果同时开发 iOS 和 Android 应用，那么开发成本可能会很高。

REACT NATIVE

React Native 允许原生应用使用 JavaScript 构建。应用中用到的控件实际上都是原生平台里的控件，所以用户使用起来感觉和原生应用一样。对于那些 React Native 没有提供的需要自定义的应用，仍然需要使用原生开发。当需要定制的模块比较多时，某些情况下，在 React Native 中开发不如使用原生开发更合适。

XAMARIN

当谈到 Xamarin 时，有两种不同的方法将会被提及。跨平台方法：Xamarin.Forms。该方法不同于 React Native，但是从概念上讲是相似的，因为它也是抽象原生控件。同样的，在定制方面它也有和 React Native 同样的缺点。第二种方法：Xamarin-classic。该方法分开使用 Xamarin 的 iOS 和 Android 产品来构建适用于特定平台的功能，就像直接使用 Apple/Android 原生功能一样，只不过在 Xamarin 中需要使用 C# 或 F# 。使用 Xamarin 的好处是可以共享非平台特定的代码，例如网络、数据访问、Web 服务等。

NATIVE+小程序

说起这个可能首先会想到「原生 + HTML5」，至少一些业务功能通过H5的形式实现，可以节省安装包的体积，也可以实现快速更新。但会发现 HTML5 开发的方式，性能体验问题较大。比如，HTML5 页面在用户手机上经常出现打不开、一直加载中、卡顿，而且H5很多系统权限获取不了，也不支持本地缓存，需要访问通讯录、调用硬件、访问蓝牙啥的这些 H5 都是无法支持的，导致还是有大量的功能不得不放到客户端上实现。

由于国内的特殊的原因，在微信、支付宝的带动下小程序成为移动端的时代搅局者，小程序具有强大的 Web 渲染引擎、提供丰富组件、支持本地缓存、避免 DOM 泄露等等这些都是，而且小程序技术也有利于帮助App实现「松散耦合」，比如当App的一些业务功能用小程序的形式替代，那么这个小程序可由团队或者个人独立开发、独立部署、独立管理生命周期，随时上下架而不影响APP主体，实现APP复杂业务动态化，多维发布。
目前也有国内厂商推出了成熟的解决方案，之前有了解到 FinClip ，这个框架对标微信小程序的功能，相同的代码，既能在微信端跑，也能在自己的 App 里跑，效果是一样的，相当于把已经上架的微信小程序能够直接搬到自己的 App 能运行。开发一次就能够在包括 Linux、Windows、MacOS、麒麟等操作系统运行。这意味着，PC 端、车载设备、智能电视都能使用小程序了，实现了“一次开发，到处运行”。
FinClip凭借插件化、嵌入式、轻量而灵活的产品特点及行业领先优势已经赋能银行、证券、政企、电商、航空、园区、零售等多个行业，在无界开放银行、数字券商、监管与合规科技、电子政务、信创等方面形成较有特色的创新应用案例。现在登陆官网点击咨询即可获得行业解决方案！

除私有化版本外，FinClip 现已推出SAAS版本，无需部署即可使用全部功能，每月有10000次免费发布调用，平台自带小程序流量统计，可根据实际用量灵活拓展。帮助企业以最低的价格实现商业化运行。赶紧登录 FinClip 官网注册使用吧！手动指引：https://www.finclip.com

一年前我们打算做一个跨端产品，希望一套代码，同时发布Android/IOS/Windows/Mac/Web五端，以减少开发成本及测试成本和维护成本，基于此，对市面上一些技术栈进行对比研究。

首先确定几个选型的标准：

  • 最好具有跨平台能力，能够一套代码支持多端发布

  • 性能较高，各端均有很好的流畅度

  • 兼容性较好，各端不会有较大差异，从而导致各端陷阱

  • 开发效率越高越好

  • 比较成熟，有完善工具链，社区

目前比较符合条件有以下5种方式：

原生开发

  • 使用语言：Kotlin/Java/Swift/OC

  • 优势：

    • 官方原生支持，功能强大健全，性能和体验是最好的

    • 组件丰富，社区强大

  • 劣势：

    • Android和IOS需要分别开发，开发人力、测试人力翻倍，bug数量翻倍

    • 容易出现ios和Android表现不一致的情况

  • 社区：官方社区，比较活跃

总结：不能多端开发，开发，测试，维护成本都偏高，直接淘汰

React

  • 使用语言：js/原生扩展

  • 优势：

    • 可以基于js开发，方便复用前端开发人员及部分web代码

    • web兼容性和性能都较好，开发人员比较好找

    • react作为响应式框架，代码结构清晰，开发效率较高

    • 可以使用ReactNative实现跨平台

  • 劣势：

    • 使用js作为语言，性能不及原生，js和原生通信交互，进一步损失性能

    • 由于UI表现使用原生模拟web/css，有一定的局限性和兼容性，从而在实现真正跨平台时，会经常碰到兼容性及功能局限性

  • 社区：Facebook维护，社区较为活跃

总结：React是企业用的最多，各方面都比较成熟的方案，是可以备选的方案，但性能和兼容性上未能到达极致体验，需要积累避坑经验

Weex

  • 使用语言：js/vue/原生扩展

  • 优势：

    • 同react，可以结合vue框架书写

    • 对于熟悉vue的同学能较快入门

  • 劣势：

    • 同react，最初由阿里巴巴开发，后来转交给Apache基金会

    • 测试bug较多，后续缺乏维护动力

  • 社区：Apache基金会

总结：相比ReactNative，Weex稳定度和社区较差，淘汰

UniApp

  • 使用语言：js+vue+微信小程序组件

  • 优势：

    • 使用js+vue，能让前端无需学习，就能快速开发

    • 一套代码，能同时支持APP/H5/小程序，是较为全面的跨平台框架

    • 兼任小程序，能同时发布到多个小程序平台

  • 劣势：

    • 使用js+小程序多进程架构，在ui和逻辑通信过程中，性能大打折扣，对实现复杂界面及极致效果时会有点力不从心

    • App实现部分不开源（最新部分开源），遇到问题只能等官方解决

    • 兼容性较差，大部分时间不是在开发，而是在优化性能及调试各端兼容性问题

  • 社区：DCloud

总结：UniApp一开始是我比较看好的技术，结合小程序+vue技术栈，很有潜力，但测试一段时间发现几个问题：1.部分开源（不开源部分就没法优化），2.性能有瓶颈，对于想做极致体验的App，有一个明显的天花板，3.多端兼容性较差，经常在web端正常，在移动端就莫名其妙的不正确，会浪费很多时间在调试兼容性上，最终放弃

Flutter

  • 使用语言：dart/第三方扩展

  • 优势：

    • google出品，目前可以同时跨Android/IOS/Web/Windows/Mac

    • desktop版本在开发中（计划2020年发布），同时也是google下一代操作系统Fuchsia的官方UI方案

    • flutter框架性能优异，兼容性小，类似react的组件化响应式开发框架，开发效率较高

    • 官方提供移动端大量第三方组件，能极快的提高UI组装效率，关键还开源，哪里不好改哪里，开发不怕遇到天花板

    • 工具链强大，热更新秒看结果，极大的提高开发效率

    • dart强类型语言，相对js在代码提示，代码重构上有较大方便性，在开发过程中就能避免很多bug产生

  • 劣势：

    • UI组织方式比较另类（代码嵌套方式，习惯了就好）

    • 不支持小程序，web实现不是最优方案，在内存和性能上会比传统开发有较多消耗

    • 插件还需完善，第三方插件很难做到跨所有平台（大部分可以跨移动端）

  • 社区：google pub.dev第三方社区，比较活跃

总结：Flutter作为一个新兴的技术栈，有着巨大的潜力，以google的技术背景支持下，工具链，社区都比较完善，Flutter打破了React依赖原生的缺点，直接自己接管渲染层，在各端有较好的兼容性，同时使用dart语言，相比js有较好的开发体验，组织代码更容易，再加上热更新，开发效率直接翻倍

最终我们选择Flutter作为技术栈，现在回顾一下，依然觉得Flutter是最好的跨平台框架，使用的时候真是各种爽，无论开发效率，性能，跨平台上，都有非常不错表现，随着Flutter的日趋完善，我相信还会越来越好。

上文就是小编为大家整理的浅谈国内主流的跨端开发框架,跨端开发框架结构图。

国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：微信小程序 代码 版本
上一篇:组装式应用：数字化转型的关键,组装式应用技术概述
下一篇:跨端开发大势所趋，全场景互联离我们还有多远？跨端开发框架结构图
相关文章

 发表评论

暂时没有评论，来抢沙发吧~