• 个人前端选型谈


    前端选型讨论

    • 根据熟悉程度使用库
    • 根据项目功能使用库
    • 根据整体项目通用性选择
    • 根据前端技术稳定库选择
    • 根据前端新技术库选择(新库,但有潜力、未来会出稳定版)

    语言

    typeScript

    jsx

    scss

    less

    技术框架

    vue2

    vue2框架大家都比较熟悉,已经是非常成熟稳定的框架。从2013年开始到2015.08发布1.0稳定版一直维护到2021.07,技术圈逐渐庞大成长到前端第一框架(github stars: 196k),也是国内众多程序员开发首选。上手快,开发便捷,对于有angular基础的来说可以直接开干。

    vue2前端库公司同事都有在用的项目,大家都很熟悉,对框架生命周期、api调用、书写规范都有过探讨的和统一,改踩得坑基本填平,属于上手即用的框架库,可以以高质量代码输出,完成项目开发。

    react

    react在本公司项目中基本没有使用(原因未知)。Facebook从2011年起步,2013.05开源上线,逐步走向稳定到主流,从react16进行一个大改进,一直在迭代,始终引领着前端的潮流。最新的react18在计划迭代修复用了半年的时间后,于2022.03月份发布正式版。不断的对底层优化重构,配合着大前端的跃进和浏览器环境的更新,不断的突破瓶颈和寻求新的改革,每个版本对开发者都是一个深造的过程。

    所以对于react的学习是有门槛的,对于api如果只是会用还不够,要理解其原理和实现方式才能更好使用的框架和完成开发。当理解了这些,react才会是“第一框架”。

    如果项目存在web端或者H5端与原生端有相同页面,使用react-native可以解决通用功能页面开发一次就可多端使用的需求,减少开发时间。

    vue3

    vue3在互医和native交互项目上已经开始使用。从2018年底开始产生基础理念,20年底发布beta版本,到现在的稳定版本迭代。在vue2理论上面进行全面重构,前端的进步让实现方式可以更加的丰富和选择优化,对vue2架构问题和性能问题做了很大的改进。在新项目的开发中,着重推荐使用vue3来架构新工程。

    angular&angular2

    angular太古老,第一代框架,已不维护。

    angular2太沉重,适用于超大型项目管理后台,全家桶都过于重,写法偏向于后端。基本不需要其他第三方的东西,功能框架全带,第三方插件的兼容性也不好,圈子较窄。

    UI框架

    elementUI&elementPlus

    十分稳定健壮的UI框架,大多vue项目使用此UI框架,坑基本填平。elementPlus在element基础上进行vue3写法的改造和重构,全面拥抱ts,包含国际化、动画、主题切换等,基本满足日常需求。

    有点小毛病的就是——UI较丑较旧,和新出的UI框架对比无创新性,交互也较老套。

    TDesign

    TDesign是腾讯开发的一款UI框架,属于后发制人,UI较优美,集成其他UI框架功能,再优化输出API。

    缺点是还没有稳定版本,除了UI样式,实现逻辑代码没有element质量高,部分样式也写死,没有暴露给用户全局修改。需要踩坑

    相同逻辑组件复用做的挺好,比如在treeSelect组件中,使用tree组件的props就会直接暴露出来,全面支持定制化,这点做的比element要好。

    常见需求api较全面,比如table组件,会使用到的拖拽改变顺序的需求、合并单元格的需求等,TDesign会有现成api可供使用,element则没有,需要引入sortable等第三方插件配合使用完成功能。

    AntDesign

    前期主要搭配react使用,现已支持vue配套使用。UI风格大气,细节做得很好,也提供原型和UI的设计资源和工具。和vue3同时期发布,已经有两个大版本迭代,比较稳定,可以使用此框架来改变页面风格。

    对比

    难易程度

    react > angular2 > vue3 > vue2 > angular

    文档和技术社区

    vue2 > react = vue3 > angular > angular2

    element > antDesign > tDesign (基本靠文档都能解决)

    考虑因素

    主观
    团队
    1. 开发者技术能力
    2. 开发者学习能力
    3. 团队原有的积累
    业务
    1. 对浏览器的要求
    2. 对单一场景的追求(复杂table、复杂表单、日期选择、动画等)
    3. 后台管理和多用户使用
    用户体验

    UI框架的选型需要和产品、设计一起衡量决策

    客观
    指标
    1. 开发背后团队稳定,官方投入度
    2. 是否有稳定性版本,或者后期会发布稳定版本
    3. 社区活跃程度
      • trend
      • star
      • issue
      • pull request
      • 包下载量和趋势
    开发成本
    1. 与其他库的兼容程度,侵入性等
    2. 功能完善程度
      • 文档具体细致(国际化、文档修改记录)
      • 完善的基础demo
      • 技术博客推荐和使用
    3. api清爽简洁,可直接用
    4. 源码结构清晰,代码可读性强
    5. 源码设计架构层次合理,是否可配置,方便修改
  • 相关阅读:
    使用Cloud application Studio在C4C UI里创建下拉列表(dropdown list)
    如何使用Kubernetes里的NetworkPolicy
    SpringBoot应用和PostgreSQL数据库部署到Kubernetes上的一个例子
    Kubernetes API server工作原理
    Kubernetes Helm入门指南
    两张图弄懂函数的递归(以golang为例)
    (十四)golang--函数和包
    【自然语言处理(三)】主题模型
    【自然语言处理】使用朴素贝叶斯进行语种检测
    【自然语言处理】利用朴素贝叶斯进行新闻分类(自己处理数据)
  • 原文地址:https://www.cnblogs.com/rion1234567/p/16314144.html
Copyright © 2020-2023  润新知