带你入门前端工程(一):技术选型

简介: 带你入门前端工程(一):技术选型

技术选型应该对很多程序员都不陌生了,无论是大到技术框架、编程语言,还是小到工具库的选择,都属于技术选型的范围。个人认为技术选型应该按照以下四个指标进行选择:

  1. 可控性
  2. 稳定性
  3. 适用性
  4. 易用性

由于没有统一的叫法,所以以上四个指标的名称是我自己定的。下面就让我们一起来深入了解一下如何进行技术选型吧。

可控性

可控性是技术选型中非常重要的一个指标。可控,就是指如果这门技术因为 BUG 对项目造成了影响,团队中有人能够解决它,而不是等待官方修复。作为技术团队的负责人,一定要是能够兜底的那个人。如果团队解决不了,你必须能够解决。

例如一些公司内部独有的由于“个性化”需求产生的各种魔改版 Vue、React,就完美体现了可控性。

稳定性

稳定性,表示一门技术更新迭代比较稳定,不会有特别大的修改,比较靠谱。即使有,也很容易做到向后兼容(迁移简单、成本小)。

做为一名程序员,我想大家都有过这种想法。希望自己在做项目时能用上最新、最热门的技术,这样就可以一边工作一边学习了。可是理想很美好,现实却是骨感的。新技术往往意味着不确定性,很有可能一步一坑。所以不建议在核心项目中使用新技术。

使用成熟稳定的技术,意味着你的项目比较安全。在这一点上有两个很典型的反例,那就是 Angular 和 python。例如 python2 升级到 python3,除了语法、API 不兼容之外,python3 的各个版本之间也有差异,直到现在才逐渐稳定下来。

从稳定性上来看,该如何进行技术造型呢?可以根据以下四点来进行选择:

  1. 社区是否活跃、配套插件是否丰富。
  2. 是否经常维护,可以通过 git commit 查看。
  3. 官方文档是否齐全。
  4. 更新是稳定、小步的迭代,而不是非常激进的更新。

刚才说到不建议在核心项目中使用新技术,但为了团队成员自身的发展抑或为了其他原因,是可以尝试一下新技术的。但一定要在边缘项目或者小项目上进行尝试,尝试完如果发现这门新技术非常适合你们的项目,那就可以进一步考虑是否在核心项目中使用了。

适用性

适用性,是指需要根据业务场景和团队成员来选择技术。

业务场景

生命周期

从项目的生命周期来看,并不是所有的项目都需要做到滴水不漏的。例如节假日特定的活动页面,生命周期只有一两天。这种页面就算用 JQuery 写也是可以的,唯一的要求就是快。

与之相反的是,公司需要长期维护的核心项目。它们需要使用成熟稳定的技术栈,在开发语言上也要使用 TypeScript 而不是 JavaScript。

兼容性

由于项目必须在各种各样的设备上运行,所以兼容性也是一个需要考虑的点。

web 项目需要考虑不同浏览器的兼容性,app 需要考虑 IOS 和 Android 的兼容性。除了必须保证不能有死机、白屏、卡顿等明显 BUG 外,样式也需要尽量保持一致。

团队成员

团队成员不一定所有人都使用相同的技术栈,在这一点上需要权衡大家的长短处进行选择。

但我建议尽量将团队成员的权重放到比较低的位置,选择约束性比较强的技术是一个更好的选择(如果团队成员不会,就让他学)。要用长远的眼光来为团队考虑,太过自由的技术,往往会造成灾难。例如使用 TypeScript 已经被很多大公司和开源项目证明过是一个更好的选择。

易用性

易用性,顾名思义就是这门技术好不好上手,容不容易理解。如果两门技术各方面指标及应用场景差不多,易用性强的将成为赢家。

最典型的例子就是 Angular 和 Vue。Angular 学习曲线陡峭,需要比较长的学习时间;而 Vue 在熟练掌握 JavaScript 的情况下,看文档一两天就能上手干活。

从 Google、百度的趋势图就能看出来,它们在国内的受欢迎程度有相当大的差别。

易用性,决定了你的团队好不好招人,这一点对小公司和不在一线城市的公司来说非常重要。我在天津(二线城市)工作快 4 年了,招前端的基本上每个公司都要求会 Vue,而要求会 Angular 的基本没有。

小结

如果同时综合以上 4 点来考虑,该如何做技术选型呢?我建议按照以下顺序来做选择:

  1. 必须可控。
  2. 核心项目必须使用成熟稳定、可靠的技术栈,边缘小项目可以使用新技术给团队成员练手或者踩坑。
  3. 在第 2 点的基础上,再按适用性做选择。
  4. 在第 3 点的基础上,再按易用性做选择。

为了帮助大家理解,我画了一个流程图:

虽然说前端目前只有三大框架可以选择,但技术永远是在发展的,框架也是在不断的更新迭代。学会如何进行技术选型,则不管当下流行的是什么技术,都可以减少你在进行技术选型时可能会犯的失误。

参考资料

带你入门前端工程 全文目录:

  1. 技术选型:如何进行技术选型?
  2. 统一规范:如何制订规范并利用工具保证规范被严格执行?
  3. 前端组件化:什么是模块化、组件化?
  4. 测试:如何写单元测试和 E2E(端到端) 测试?
  5. 构建工具:构建工具有哪些?都有哪些功能和优势?
  6. 自动化部署:如何利用 Jenkins、Github Actions 自动化部署项目?
  7. 前端监控:讲解前端监控原理及如何利用 sentry 对项目实行监控。
  8. 性能优化(一):如何检测网站性能?有哪些实用的性能优化规则?
  9. 性能优化(二):如何检测网站性能?有哪些实用的性能优化规则?
  10. 重构:为什么做重构?重构有哪些手法?
  11. 微服务:微服务是什么?如何搭建微服务项目?
  12. Severless:Severless 是什么?如何使用 Severless?
目录
相关文章
|
2月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
628 2
|
1月前
|
编解码 前端开发 JavaScript
从入门到精通:揭秘前端开发中那些不为人知的优化秘籍!
前端开发是充满无限可能的领域,从初学者到资深专家,每个人都追求更快、更稳定、更用户体验友好的网页。本文介绍了四大优化秘籍:1. HTML的精简与语义化;2. CSS的优雅与高效;3. JavaScript的精简与异步加载;4. 图片与资源的优化。通过这些方法,可以显著提升网页性能和用户体验。
24 3
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
133 1
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
45 0
|
2月前
|
缓存 前端开发 JavaScript
前端的全栈之路Meteor篇(二):容器化开发环境下的meteor工程架构解析
本文详细介绍了使用Docker创建Meteor项目的准备工作与步骤,解析了容器化Meteor项目的目录结构,包括工程准备、环境配置、容器启动及项目架构分析。提供了最佳实践建议,适合初学者参考学习。项目代码已托管至GitCode,方便读者实践与交流。
|
2月前
|
自然语言处理 资源调度 前端开发
前端大模型入门(四):不同文本分割器对比和效果展示-教你如何根据场景选择合适的长文本分割方式
本文详细介绍了五种Langchain文本分割器:`CharacterTextSplitter`、`RecursiveCharacterTextSplitter`、`TokenTextSplitter`、`MarkdownTextSplitter` 和 `LatexTextSplitter`,从原理、优缺点及适用场景等方面进行了对比分析,旨在帮助开发者选择最适合当前需求的文本分割工具,提高大模型应用的处理效率和效果。
226 1
|
2月前
|
机器学习/深度学习 人工智能 自然语言处理
前端大模型入门(三):编码(Tokenizer)和嵌入(Embedding)解析 - llm的输入
本文介绍了大规模语言模型(LLM)中的两个核心概念:Tokenizer和Embedding。Tokenizer将文本转换为模型可处理的数字ID,而Embedding则将这些ID转化为能捕捉语义关系的稠密向量。文章通过具体示例和代码展示了两者的实现方法,帮助读者理解其基本原理和应用场景。
560 1
|
2月前
|
人工智能 前端开发 JavaScript
前端大模型入门(二):掌握langchain的核心Runnable接口
Langchain.js 是 Langchain 框架的 JavaScript 版本,专为前端和后端 JavaScript 环境设计。最新 v0.3 版本引入了强大的 Runnable 接口,支持灵活的执行方式和异步操作,方便与不同模型和逻辑集成。本文将详细介绍 Runnable 接口,并通过实现自定义 Runnable 来帮助前端人员快速上手。
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
192 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
56 0