前端技术选型与探索

花了几天研究了一下各种前端框架和库,最后做了折中的选型。

选型原则

  • 尽量用静态类型检查,减少开发时的typo之类问题,也方便IDE检查
  • 可以方便添加和定制组件,可以做细调
  • 有丰富的模板和组件免费资源
  • 细节比较透明,方便调试和扩展

考察框架和库

  • 首先在react, vue和angular之间做选择,angular了解不多,这次详细看了一下,做为个人项目来说不太适合,团队协作上感觉不错,入门的话可以先排除了。react和vue各有所长,所以其实就由UI组件库来决定了
  • 已经有很多开源的UI组件库,基于react/vue,这次考察 antd, arco.design, shadcn-ui。antd, arco.design 都是自成一体的全套UI,好处是组件很多,坏处是如果自己要做小调整其实很不容易,另外css系统也是自成一套,所以引入外部的css还是有困难的。最后选择shadcn-ui,就是看重组件代码很透明,css是直接使用tailwindcss,所以有大量资源可用,也有 theme可以调,所以接下来 react就是必选了,因为 shadcn-ui是基于 react。
    • shadcn-ui 其实是把组件的源码复制到项目里,所以非常透明,要调什么可以马上动手
  • css也定型了,就是用 tailwindcss,这个看似复杂麻烦的css系统越来越受欢迎,特别是免费资源非常多,很容易获得,几个简单的源码一组合就可以做自己的UI。而且非常透明,要小调整也很容易
  • react 最佳平台目前是 next.js ,不过这次也考察了其他的: remix, gatsby,这两个各有所长,但整体上不如 next.js 顺手,next.js 覆盖了前端后端,各种扩展能力也不错,plugin 方面确实比 gatsby差了点,但社区和网上的支持也是非常多,也有 vercel 作为免费平台,所以仍然选定 next.js
  • 国际化这部分花了很长时间来选型,next.js 其实已经内置了一种国际化路由,但这个其实是基于 server 端的,如果纯打包 client 端要另外找,最后还是找了 next-i18next 的文档,按照里面的做法手搓了一个国际化支持,写下来其实不复杂,基于 react-i18next,自己简单地包装了一下
  • 网络请求考察了 fetch 和 axios,fetch是原生的,axios使用上更简便,社区和文档也丰富一点,所以还是选择axios。自己做个简单的包装,也方便替换。

最后选型

  • 基础框架:react && next.js
  • UI组件库:shadcn-ui
  • CSS: tailwindcss
  • 国际化:react-i18next 复制手搓
  • 网络请求:axios

样例:Hello UI

项目概览 - hello-ui - GitCode

相关推荐
低保和光头哪个先来1 分钟前
解决 ios 使用 video 全屏未铺满页面问题
前端·javascript·vue.js·ios·前端框架
MacroZheng4 分钟前
全面升级!看看人家的后台管理系统,确实清新优雅!
前端·vue.js·typescript
Mintopia7 分钟前
一套简单但有效的"代码可读性"提升法:不用重构也能清爽
前端
每天吃饭的羊13 分钟前
Node.js 创建可二次编辑的 HTML 文档并生成文件
开发语言·javascript·ecmascript
禅思院16 分钟前
一个轻量级 Vue3 轮播组件:支持多视图、滑动距离决定切换数量,核心原理与 Swiper 对比
前端·vue.js·typescript
牛马11120 分钟前
Flutter BoxDecoration border 完整用法
开发语言·前端·javascript
CodeSheep21 分钟前
宇树科技的最新工资和招人标准
前端·后端·程序员
奔跑的卡卡26 分钟前
Web开发与AI融合-第二篇:TensorFlow.js实战:在浏览器中运行AI模型
前端·人工智能·tensorflow
IT_陈寒27 分钟前
Vue的响应式居然在这里埋坑,差点加班到天亮
前端·人工智能·后端
We་ct30 分钟前
LeetCode 149. 直线上最多的点数:题解深度剖析
前端·javascript·算法·leetcode·typescript