前端框架、组件化选型

一、整理组内项目框架、语言、组件化规范,目的:提高开发效率,项目框架,快速响应公司需求发版。

H5:

技术选型:用表格形式从各个维度分析react,vue,angular

维度 React Vue Angular
生态系统 大而活跃的社区,丰富的第三方库和组件 灵活的生态系统,中等规模的社区 大型生态系统,强大的工具和组件库
学习曲线 相对较低,适合初学者 低至中等,易于上手 相对较高,全面学习需要时间
组件化 支持组件化开发,单向数据流 非常注重组件化,支持单文件组件 强调组件化,具有丰富的模块化和组件化特性
状态管理 灵活的状态管理,可以选择Redux等 内建的状态管理,也支持Vuex 内建的状态管理器(RxJS),也支持NgRx等
模板语法 JSX,JavaScript语法的扩展 模板语法类似HTML,直观易懂 使用TypeScript的模板语法,强类型检查
数据绑定 单向数据绑定 双向数据绑定,支持v-model 双向数据绑定,强调响应式编程
灵活性 非常灵活,可以搭配其他库和工具 灵活,可以渐进式地使用 较为严格,更多的约定和规范
社区支持 强大的社区支持 热情的社区,相对较小 大规模社区,有强大的官方支持
适用场景 大型项目,复杂应用 中小型项目,快速开发 大型企业级应用,团队合作

结合项目需求和团队人员以及之前的项目框架,选取Vue为前端开发框架。

  • H5移动端:
    IDE:Node.js版本 v16+
    框架: Vue版本 v3+
    UI组件库: Vant

  • H5管理系统端:
    IDE:Node.js版本 v16+
    框架: Vue版本 v3+
    UI组件库: Element-plus

二、支付宝、微信小程序:

支付宝、微信小程序继续使用原生开发,不使用跨平台框架进行开发,例如:Uniapp优缺点以表格的形式进行对比

维度 微信&支付宝 Uniapp
定义与特点 利用官方提供的开发语言、开发类库、开发工具进行开发,原生开发具有高性能、丰富的设备功能支持和良好的安全性等特点。 是一个基于Vue.js的跨平台应用开发框架,它允许开发者使用Vue.js编写一次代码,然后将代码编译成可以运行在多个平台上的应用程序,包括Android、iOS、微信小程序、支付宝小程序等。uni-app开发具有跨平台性、简单易学和丰富的组件和API等特点。
优点 1.高性能。2.丰富的设备功能。3.良好的安全性。4.用户体验好。 1.跨平台性。2.简单易学。3.丰富的组件和API
缺点 1.开发周期长。2.开发成本高。 3.可移植性差 1.性能相对较低。2.对设备功能的支持有限(每个系统需要适配)3.安全性问题
备注:
  • 性能:
    原生开发在性能方面具有明显优势,可以获得更高的运行性能和更好的用户体验。而uni-app开发的性能相对较低,但足以满足大部分应用的需求。在一些对性能要求极高的应用中,原生开发可能是更好的选择。
  • 开发周期和成本:
    uni-app开发可以实现一次开发,多平台运行,大大缩短了开发周期和降低了开发成本。而原生开发需要针对不同平台编写不同的代码,导致开发周期较长和成本较高。在需要快速开发并部署到多个平台的应用中,uni-app开发可能是更好的选择。
  • 可移植性:
    uni-app开发的App可以在多个平台上运行,实现了真正的跨平台开发。而原生开发的App只能在特定的平台上运行,可移植性较差。在需要同时支持多个平台的应用中,uni-app开发具有明显优势。
  • 用户体验:
    原生开发因其直接针对特定平台进行优化,能充分发挥设备的性能,提供更流畅的用户体验。而uni-app虽然在性能上稍逊一筹,但也能提供相当良好的用户体验,尤其是在小程序端,其性能甚至可能优于市场其他框架。然而,在涉及到需要高性能输出的应用场景,如图形渲染、复杂计算等,原生开发可能更具优势。
  • 设备功能支持:
    原生开发可以充分利用移动设备的各种功能,如摄像头、GPS、传感器等,实现更加丰富的功能。而uni-app虽然也支持调用设备功能,但可能受到跨平台性的限制,部分特定于某个平台的功能可能无法实现或需要额外的开发。
  • 安全性:
    原生开发在安全性方面具有较高的保障,因为原生应用直接运行在移动设备上,可以保护用户数据的安全。而uni-app由于其跨平台性,可能会面临一些安全性的挑战,如恶意软件可能利用跨平台的特性进行攻击。因此,在开发过程中需要特别注意安全性问题。

总结:小程序直接面客展示,公司注重用户体验和严格的UI设计,所以小程序(微信、支付宝)继续采用原生开发,使用各自的开发工具和框架以及原生提供的组件。

三、iOS、Android:

iOS、Android 继续使用原生开发(优缺点同上),框架和设计模式等以表格形式展示

维度 iOS Android
开发工具和版本 Xcode Android studio
语言 OC/Swift Java
组件框架 Cocoatouch butterknife
项目设计模式 MVC MVC/MVVM

四、iOS、Android:

关于项目公共组件部分,根据前端开发项目来看,目前项目中用的组件在各个平台上面的组件库可以满足我们日常开发任务,对与需要自定义的,我们将通用部分分离出来,单独封装成一个工具类以供调用eg:webview统一一个 常用弹框组件等

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容