保存成功
订阅成功
保存失败,请重试
提交成功

从软件工程角度看大前端技术栈

freeCodeCamp 西安前端社区组织者,校内互联网实验室前端开发成员,两年软件工程专业学习经历,“韩亦乐”公众号作者。在猿生态十城巡回沙龙·西安站、腾讯云+校园西邮站、西邮小全栈马拉松均有过讲师分享经历。(97小鲜肉哈,自称一波“JavaScript 奇异麻瓜”
查看本场Chat

我们都知道,大学几乎是没有 Web 前端课的。以我所在的大学为例,唯一引导我们了解 JavaScript 的也只是‘人机界面’和‘Web应用开发’选修课。再者,由于这些选修课的课时短、面向的主要群体是大部分大学生等原因,其最终所涉及的内容层次也很难赶上近年来 Web 前端领域的快速变化。自学,看起来是广大前端学习者的普遍成长道路。本文尝试结合软件工程专业背景并贯穿软件工程思想,开启一个常常“不为人所知”的大前端技术栈之旅。

P.S: 为了对这场 Chat 有一个背景了解,这里小提一句:笔者现为准大三学生,前俩年的 Web 开发学习经历辅之以参与/组织线上线下开发者社区的技术分享活动,对整个 Web 开发有了一定程度上的宏观认知。希望本文能通过一定程度的抛砖引玉填补不足~。

目录

  • 技术基本功

  • 前端设计能力

  • 前端开发能力

  • 计算机网络知识储量

  • 服务端应用开发能力

  • 数据库与搜索引擎开发能力

  • 编程软技能

一、技术基本功

标准搜索引擎搜到的,只是 4% 的互联网数据。引以为例,希望当我们谈到“大前端”时,前端初学者不再总被“HTML、CSS、JavaScript 基础”俘困于学习 Web 开发的瓶颈之中,反之可以通过掌握以下技术基本功来拓展自己的编程视野、提高自己的编程能力,为成为合格的大前端工程师做出扎实的铺垫。所有章节通过“必修”、“选修”来简单标识其重要性。

1.1 打字速度至少达到 40WPM+(必修)

我曾用整整一篇博客 (@强化你的打字速度) 来说明训练出一个打字坐姿良好、打字速度标准的习惯其重要性。打字速度可以用 WPM - Word Per Minute - 每分钟敲出的单词个数(5 个字符被视为一个单词)来进行衡量。初级、中级和高级的打字水平评判准分别是 20 WPM、40 WPM和 60 WPM。刚刚在注意打字手势与打字坐姿的条件下,评测出我的最新打字速度是 51 WPM,不算太高,但还可以。

在这里我们以打字速度达到 40 WPM 为一个奇点,合格的程序开发者都应该能达到这一水准的。

延伸阅读:

  1. 常用的键盘布局为 QWERT 布局,可以选用更高效的 DVORAK 布局。

1.2 熟练掌握至少一种主流代码编辑器或 IDE(必修)

“工欲善其事,必先利其器。”对于主流代码开发工具的掌握将会是我们高效开发的一个加分项。就代码编辑器和 IDE 的区别来说:

前者专注源代码的开发,常常会根据具体编程语言有语法高亮、代码折叠等功能,支持大多数编程语言的开发。通过一定的定制化,我们可以给简易的编辑器加入风格迥异的插件,组成一整套得心应手的开发流程。一个典型的例子如跨平台的 Sublime 编辑器,其支持 Python 语言编写的插件,可通过包管理器扩充本身功能,大多数的包使用自由软件授权发布,并由社区建置维护。

后者的中文全称是“集成开发环境”,通俗来讲可以当做一种编辑器的全家桶,主要针对特定的编程语言而量身打造。IDE 在内部除了可以直接写源代码文本,还常常默认拥有打包并编译为可用程序的功能,有些 IDE 还可以设计图形界面。IDE 通常包括代码编辑器、自动构建工具、调试器和版本控制系统。一个典型的例子如 WebStorm,其支持图片预览,拥有内置命令行和版本控制系统,对于错误的前端 JavaScript 代码还有相应的智能提醒和改正能力。WebStorm 良好的集成了编辑、文件、管理、编译、调试、运行等功能,大大的提高了开发者生产力。

身为大前端工程师,根据开发需要选择自己偏爱的编辑器或 IDE 并刻意练习其使用方法,在开发代码时能达到工具熟练度与思维速度相匹配的境地,也就足够胜任这项技术基本功。

延伸阅读:

  1. Web 开发推荐掌握的代码编辑器或 IDE 有: VIM、Sublime、WebStorm、IDEA、VSCode 以及一些在线 IDE 等。

1.3 拥有良好的代码规范、代码质量、代码注释能力(必修)

程序开发的真实情况是,代码是给人看的,偶尔在机器上跑一跑。如何制定一个可执行的代码规范并使项目最终拥有较高代码质量,对于占据软件开发成本比例很高的软件维护工作起到了一个决定性的作用。代码规范、代码质量、代码注释能力三者相辅相成。

代码规范是一种持续的行为 ,良好的代码规范可以依靠代码规范文档或成熟的规范工具进行统一——前者不应复杂,但应具有一些强制性;后者例如在前端开发的环境下,可以使用 ESLint 来进行可定制化的代码风格检查,或使用持续集成(CI)理念并通过相匹配的 CI 服务器进行软件交付,以确保高水平的代码质量。下图是 CI 的实际应用过程示例。

基于 AWS Lambda 持续集成工具 LambCI - 取材@开源中国

互动评论
评论
guanhui072 年前
写的很好
评论
蔡路明4 年前
都是面上的无聊文章,有时间还是写写技术干货科普一下吧
评论
Form-World4 年前
文章很长,看后細想我们的编程其实质是一种工匠式的做法。一个问题交给n个程序员设计,可以有n种不同的方法。好比鞋子破了个洞,如果分别交给不同的工匠,有个在外面贴一块、有的在里面贴一块、还有....。都能解决问题。工匠的技巧并无需象建筑结构工程师那样需要数学、物理计算、需要科学理论。因此可以这么说:软件应用系统的建造是以工匠式的技巧“堆砌”而起的系统。
评论
Kunter4 年前
转技能还缺一条,自我控制能力,合理安排作息,做到劳逸结合的能力,这样才能保证自己将来能够领到养老金
评论
阳光4 年前
兵专一项,将需多能!
评论
南瓜4 年前
看到你很喜欢用思维导图,对于思维导图这个工具的使用心得有什么可以分享的吗?
评论
南瓜4 年前
你才大三,你是怎么成长到技术大牛的?有什么经验教训分享吗?
评论
南瓜4 年前
前端知识多而杂,需要了解的也很多,在近两年应该往哪个方向深入研究?
评论
张大侠4 年前
韩老师从软件工程的角度几乎梳理了当今前端领域的方方面面,真可谓全栈👍 我的问题是,前端在计算机或者编程领域一直都处于“偏门”,且门槛相对也比较低,也是近些年前端的发展越来越像全栈发展,越来越借鉴很多成熟、流行编程语言的思想而产生一系列新的框架或编程模式,所以我特别想了解其中的道道,能够看透其本质而不至于为其“迷惑”,不知韩老师有什么好的建议?这个问题提给群里的余大大@余博伦
评论
张大侠4 年前
也提给,最后少了个“也”字
评论
余博伦4 年前
想要掌握所有的这些知识肯定不是短时间可以做到的,并且在学习基础知识的同时,新的技术和知识也在不停地出现,那么要如何做才能够消除知识焦虑,保持清醒不断学习提升自己呢?
评论
南瓜4 年前
想问一下,在工作完一个项目,或者学习了某个技术点后,如何更清晰地从中获得反馈,然后找到下一个关注点?我做完一个项目都会做总结,但是,我并知道我的技术在同行中到达了什么程度,哪些东西应该重点关注从而塑造成自己的核心竞争力。
评论
✘_✘4 年前
这问题赞,期待答案
评论
赵宁|Neal4 年前
ajax请求与websocket哪一个更好
评论
赵宁|Neal4 年前
有哪些比较好的前端论坛和社区
评论
赵宁|Neal4 年前
如何参考官方api开发项目
评论
赵宁|Neal4 年前
cgi的作用是什么
评论
赵宁|Neal4 年前
用什么方法可以用前端播放网络摄像头的rtsp流视频
评论
赵宁|Neal4 年前
前端代码出现bug时,有哪些比较好的调试方法
评论
赵宁|Neal4 年前
有哪些比较好的javascript和angularjs开源项目
评论
赵宁|Neal4 年前
由于前端知识太过丰富,有时候不知道从何学起该怎么办
评论
赵宁|Neal4 年前
如何应对快速更新的前端框架
评论
赵宁|Neal4 年前
前端开发的发展前景如何
评论
赵宁|Neal4 年前
一个非科班出身的学生如何快速入手前端开发,现在已经对javasricpt html css angularjs nodejs有了初步的了解
评论
李序锴4 年前
可以,花了不少心思
评论
廖泽恩cva4 年前
我是非科班,想转行做前端开发。我的问题是,前端涉及的知识很多,需要学习到什么样的程度才可以去找第一份前端相关的工作?
评论
无敌阳爸爸4 年前
一个人在开发,写的东西总是在不断的重复,希望可以得到提升,但是不知道自己的代码哪里需要升级,哪里需要改进,很是头疼
评论
Lu、4 年前
刚开始学前端、需要掌握那些知识点才可以去试着找工作、然后一边实习、一边学习。
评论
于勇4 年前
看完了,作者不是一般的牛。作者花了多久掌握这些知识的?
评论
Adele4 年前
对于小作者您,是如何确保自己在理论和实践方面达到一致的?做了哪些前端相关的项目,感受比较深刻?
评论
嫻xian4 年前
对自己说,路还很长,还等不断坚持,作者很棒
评论
敖天羽4 年前
给自己预备了多久学完自己文章中所说的技术栈
评论
a4 年前
如果都掌握了,都是大神级别了,
评论
闫理智4 年前
666
评论
高辛戊4 年前
写的非常全面,由衷佩服。
评论
Calpa4 年前
作者写得很全面,也提供更多的书本,以及知识点。
评论
小心4 年前
这很6啊
评论
查看更多