yugasun
Published on

朋友，你怕是对前端有什么误解

Authors
  • avatar
    Name
    Yuga Sun
    Twitter

by yugasun from https://yugasun.com/post/mistakes-about-frontend.html 本文可全文转载，但需要保留原作者和出处。

某个阳光灿烂的午后，我还一如既往的欢快的敲击着键盘，欢快的演奏着李闰珉的 River flow in you。突然感觉身旁一个强大的气场慢慢向我逼近。我紧张的抬起头，一缕缕耀眼的光芒透过他那帅气的络腮胡，射入我的心灵之窗，我情不自禁的揉了揉眼睛，才看清他那帅气的脸颊，原来是后端开发的同事。他轻轻地将 Mac 放到我的桌上，缓缓蹲下高大的身躯，尽量让手臂与桌面齐平。他嘴角微微上扬了下，我知道接下来，他要说点什么了，原来他是来请教我问题的。他一边骚弄着那满头乌黑的浓发，一边指着自己开发的后台页面，一边陈述着令他坐立不安的 CSS 问题，嘴里还嘟哝着 “我不喜欢写 CSS，这语言就像一坨 shi 一样....”。作为一名时刻向往美好生活的前端开发，灿烂的微笑是我对身边一切事物的最好回应，于是我微笑而不失礼节帮他把问题解决了。

经过这段邂逅过后，我的小心脏不知道为什么，一直在碰碰乱跳，有个声音一直在我脑海中萦绕，仿佛有只蓝精灵一直在我耳边嘀咕着什么，但是怎么都听不清楚。终于在这个周末的清晨，我开心的拉开窗帘，冬日阳关温柔的抚摸着我那英俊的脸蛋，我才听清楚那句话，原来是：“朋友，你怕是对前端有什么误解”。

故事讲到这，下面本该是一段浪漫的办公室爱情故事。但是，本人并没有琼瑶那浪漫的写作天赋，也只能偶尔写一点庸俗的个人感悟...

前言

写这篇文章并不是为前端争论什么，也不想引起 “谁是世界上最好的语言” 此类的的争论（本人也并没有那个资格和能力，如果此文得评论不小心过于激烈，引起大家的不适，我会删文处理），只是想说清楚一些事情，让大家明白，做前端是一件很不容易的事情，也是一件很有创造力的事情。作为一个好的前端，同时掌握 HTML, CSS, Javascript 三门语言是必不可少的，而且这每一种都有她独特的魅力所在，是值得使用她的人去尊重和学习的。

关于 CSS

摘自 Wiki：层叠样式表（英语：Cascading Style Sheets，简写 CSS），一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。

CSS 就跟 HTML 不一样了，她是一门真正的计算机语言，所以她是可以和 Java、Golang、PHP、JavaScript 等语言拥有同等地位的，如果没有她，网页将是一堆枯燥无味的文字而已。当然她不能单独使用，必须与 HTML（或者 XML） 一起才能展现她的意义。CSS 是门很友好的语言，很容易入门。所以，很多没有编程基础的人，稍微学习下 HTML 和 CSS 就能进入前端圈，他们只需要熟记各哥属性值对应的特性，就能编写出常见的 Web 页面。但当他们发现自己可以很愉快的实现页面的时候，就会觉得 CSS 也就那样，所以才有了上面那段浪漫的办公室邂逅。

在一些牛人的手中，CSS 可以是他们的画笔，为他们绘制出各种绚丽的图案，比如这个用纯 CSS 绘制的 13 种手机图案的项目 devices.css，感兴趣的朋友可以去研究学习下。当然了解 CSS3 的朋友，一定知道还可以用她来创造各种绚丽的动画，这里就不一一列举了。总之她从诞生开始，便成了一位婀娜多姿和能歌善舞的少女，俘获了千千万万用户的心。

说到 CSS，不得不提到我非常敬佩的前端前辈 张鑫旭，他在 CSS 方面的研究和造诣，在前端圈可谓是屈指可数。他用十年时间学习研究 CSS 的智慧结晶，写成了一本书 《CSS 世界》，读完此书，你会对 CSS 有一个全新的认识。

关于前端开发

平常工作中，我也遇到有些人，在他们眼里前端开发是一件很简单的事情，他们能够顺利的完成将设计稿转化为漂亮页面的工作，并且同时结合 jquery 或者一个简单的前端 UI 框架，就可以让页面交互更加炫酷一些。难道前端开发就仅此而已吗？

我们来看看一名优秀前端需要掌握的技能，总结自拉钩资深前端招聘需求：

  1. 良好的计算机基础知识，熟悉常用 算法 和 数据结构；
  2. 三年及以上前端开发经验, 熟悉 Mobile Web/Hybrid Web App 开发；
  3. 理解 W3C标准 与 ES规范，熟悉 Web语义化，掌握 盒模型、常用布局以及 浏览器兼容性；
  4. 熟练使用各种 调试抓包工具，能独立分析、解决和归纳问题；
  5. 熟练使用至少一种 JS框架(Vue, React, Angular)，掌握其原理，能独立开发常用组件；
  6. 熟悉常用 MV*框架、熟悉常用 设计模式；
  7. 使用常用的打包工具（Webpack,Rollup 均可）构建工程化的大型项目经验；
  8. 熟悉 NodeJS 及其最佳实践者优先；
  9. 熟悉 Linux、Nginx、PHP、Lua、Golang、Redis、Mysql等技术者优先；

下面我来列举几个相对比较新的前端技术名词：

  • PWA: 渐进式 web 应用，接近 App 体验的网页方案
  • TypeScript: 一门静态类型的 JavaScript 超集语言
  • Parcel：受到社区高热度关注的前端打包工具，未来或将撼动 Webpack 的地位
  • WebAssembly：一种运行在现代网络浏览器中的新型代码，比 JavaScript 体积更小，运行更快。
  • Pkg：可以将 Nodejs 项目打包成可执行文件的工具。
  • ...

我这里就不一一列举了，实在太多，每一个技术名词，都值得前端开发去关注和学习。

当然不用每个都深入学习，因为人的精力是有限的。我在这里提及的目的是想说明，作为一名优秀的前端，我们需要时刻更新和了解技术动态，并不断学习和补充自身专业技能。想成为一名前端开发很容易，但是要想成为一名优秀的前端开发是有难度的（这里就不用“很难”这个词了，因为大神的世界，我还不是太懂，也许他们看一眼就会了......）。

其他职业对前端开发产生误解，这个可以理解，但是作为前端开发的我们，千万不要出现上面说到的那种误解。

前端开发图谱

如果你是一个入门的前端开发，对这个职业略感迷茫，新技术层出不穷，不知道如何学习，希望下面这个前端开发路线图能够帮助到你。

Frontend Knowledge Map

图片来源于 2018 Web 开发者路线图，侵删

最后

本文只是个人年底对于前端开发的一点小小的感悟，最为一名前端菜鸟，一直在不断学习和探索中。最后附上乔帮主的至理名言：

Stay hungry, stay foolish.