前端框架、组件化选型

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

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统一一个 常用弹框组件等

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容