前端技术选型与探索

最新推荐文章于 2024-07-08 18:51:22 发布

野生的正经人

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量460

点赞数 4

分类专栏： hello typescript react 文章标签：前端 javascript react

本文链接：https://blog.csdn.net/weixin_66886617/article/details/136376405

版权

hello 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

typescript

4 篇文章 0 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

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

选型原则

尽量用静态类型检查，减少开发时的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。自己做个简单的包装，也方便替换。