职业指导 -- 前端工程师入门

[Zhangjd]

蟹妖！（笑）

作为部门里近年来为数不多的选择了 Web 前端开发 作为职业起点的师兄，在这里开个帖，跟各位师弟师妹分享一下我的前端工程师之路。

我准备就以下问题，结合亲身经历讲讲自己的看法，欢迎各位补充提问并提出建议。

• 前端工程师的工作职责
• 前端圈的历史、现状、展望
• 如何系统地学习前端知识体系
• 如何快速上手一款前端技术 (以 React 为例)
• 用于公司开发环境的前端工作流
• 如何应对前端面试

[Zhangjd]

前端工程师的工作职责

在我去过的几家公司里，根据公司大小和人员规模的不同，前端工程师的职责也不尽相同：

1. 拿到 UI 设计和交互流程图，和设计师沟通
2. 切图？
3. UI 开发（HTML + CSS）
4. 拿到后台接口文档，和后端沟通
5. 逻辑开发（JavaScript）
6. 前后端联调
7. 测试、上线

大小公司的区别

在小公司因为人手不足，至少要完成上述的完整流程。在之前的某个创业公司里，我甚至还承担了一部分服务器端开发的工作。

但是到了大公司，会发现分工比较明确，任务更加细化，比如在现在的公司里，步骤 1-3 是由页面重构（也有称作 UI 开发）的小伙伴来完成。那我要负责的部分就是 写 JavaScript 以及前后端联调，但是就比较少和设计打交道。而后面的步骤则是与测试、运维那边沟通了，前端没有直接发布到生产环境的权限。

至于个人适合大公司还是小公司的问题，我感觉因人而异，虽然知乎上关于这个问题也有不少相关的讨论，但是别人强行给你灌输的观点未必适合自己，所以我建议有可能的话最好能到大小公司都去实习感受一下。

前端要切图吗？

网上有人把前端戏称为 “切图仔”。实际上我在工作的过程中，很少承担切图的工作，基本上是由设计师完成。

(未完待续)

[Zhangjd]

前端在整个 Web 开发体系的地位

前端可以说是 Web 开发体系的最后一环，接过重构给出的静态页，接过后端给出的接口文档，就可以开始写业务逻辑了。所以说前端既要跟重构、设计、后端进行沟通与反馈，又要顶住压力把页面完成，尽快把页面交付给测试或者运维（有一些活动页也可能是免测直接部署的，自己测试）。

相对来说，个人认为基于这个现状，前端的开发效率相比起代码质量更加重要一些。毕竟前端的 bug 通常不会是严重等级，但是开发进度不能及时完成的话，作为最后一环，这锅肯定是逃不掉的。

常见的问题

既然要与重构、设计、后端进行沟通，免不了会遇到问题，这里列举一些比较常见的问题，大家可以思考下：

1. 设计稿的标注问题。标注包括宽度高度、字体字号颜色、内外边距、单位（百分比？像素？em、rem？）等，理想情况下前端应该实现像素级还原。问题是必要的标注应该由谁来完成呢？（不要告诉我目测。）之前的一段实习里，我们使用 Sketch + Zeplin 曾经很好地解决了这里的沟通成本问题，但是后面也遇到过使用 Photoshop 的公司，设计师很懒标注很少，我浪费了不少时间在自己使用 MarkerMan 来做标注。当然到了大公司，这个问题可以抛给重构了（微笑）。
2. 切图的格式问题。包括 png、jpg、gif、svg、iconfont 等，各种格式之间的优劣、使用场景？
3. 后端接口和实际需求对不上。后端开发接口是从数据、工程的角度上出发，然而前端看问题的角度是从页面出发，页面需要的数据和后端开发一开始设想的数据结构很可能是不尽相同的。前端作为最后一环，有责任及时核对设计稿与接口，把接口的变动及时推进给后端更改，不然的话最后不能完工，背锅的还是自己（微笑）。
4. 后端和前端同步开发的配合问题。理论上后端应该是先提供接口文档和数据结构，再编写逻辑的，这样即使后端逻辑没写完，前端也可以使用假数据完成前端逻辑，实现同步开发。

以上是对于问题 1 的解答，有疑问欢迎交流。

(未完待续)

[Zhangjd]

前端圈的历史、现状、展望

这部分想偷懒一下，引用下别人的文章好了，毕竟我接触的时间也就这几年，大家不妨先读一读下面几篇。

前端演进史
Web开发技术的演变
2015前端生态发展回顾
2016年JavaScript开发者需要了解的技能

我简单谈一下我认为的几个关键的节点：

1. 最原始的前端，使用 HTML 和 CSS 展示静态页面，使用 JavaScript 响应用户事件
2. 动态语言的出现，使得后端可以使用变量和控制逻辑动态渲染出 HTML 结构
3. 随着网站整体复杂度的增加，后端出现了 mv* 框架，前端就是 view 层，负责视觉显示
4. 随着技术演进和用户交互的改进需求，出现了页面局部刷新的技术（AJAX)
5. 随着移动端的普及和 HTML5 / CSS3 的诞生，出现了响应式布局和单页面应用（SPA）
6. 随着 AJAX 的广泛应用，前端要处理数据的机会越来越多，为应对复杂度增加，出现了前端 mv* 框架
7. 随着 Node.js 的出现，JavaScript 的影响范围扩大，包管理器 npm 也为前端的模块化工程化作了贡献
8. 随着 React 的出现和生态圈的繁荣，过去用在桌面端应用开发的一些思想（比如单向数据流）引入进来
9. 随着 ECMAScript 2015 的定稿，前端可以用更加优雅的 JS 语法进行开发
10. 随着前端工作流的演进，前端可以用 webpack 等工具完成前端的打包构建、配合 node 工具进行前后端分离式的开发。

我在部门里时候，理解的前端只有 1-5，现在理解的前端是 1-10，当然未来可能还有更多，所以部门里想选择 Web 前端的同学要多加油，尽早扩大自己的知识面，争取把 6-10 的内容落入到部门日常开发中。

(未完待续)

[Zhangjd]

如何快速上手一门前端技术

我把第四点提上来讲，因为想了一下，我相信大部分人都是先快速上手再深入理解的，这样在初期比较有成就感。拿 React 为例好了，我是这么做的：

1. 了解这门技术的背景、起源、现状。
   • 比如 React 是 Facebook 家创建的，他们把 React 用到了实际的项目中，然后要关心一下：
   • GitHub 上有多少 React 相关的代码，热度如何？（大可以善用 GitHub 搜索）
   • 国内 React 的接受程度如何？只是昙花一现，还是大厂率先用到了生产环境？（知乎）
   • 国内外开发者对 React 持什么样的态度？对他的支持和反对的声音分别持什么理由？当然，看看就好，理性思辨，不要和他们撕逼。
   • 当前的版本号多少？是否经常有破坏性更新？是否很久没更新？（我不是在黑 ThinkPHP）
2. 初步概览一下文档，最好能找到一篇教你用这个框架的方式思考的文章。
   • 比如 React 文档里有一篇 Thinking in React 就是这个目的（建议尽量看英文，React 的中文文档翻译得有点糟糕），看完这篇文章，你起码要知道 React 的几个核心思想：View library、把 UI 组件化、组件之间的通信（props)、组件本身的状态（state）、组件的 render 由 props 和 state 决定等...
   • 为什么我不建议你把文档一直看到底？实际上有的技术本身不错，可文档却写得很糟糕（比如 Webpack）。这一步大概了解到技术本身能做什么，思考模式大概是怎样的，足够了。
3. 纵向比较
   • 拿 React 和过往的前端开发比较。比方说 jQuery ，jq 入门很容易，也确实是一代前端标准。但是 React 和 jQuery 相比又有什么革命性的改变？这里需要回到上一个问题，多读一读前端发展历史，你会找得到答案。
   • jQuery 简化 DOM 操作，React 则是希望我们尽量避免 DOM 操作，这里是出于什么考虑？（提示： virtual-dom）
   • 思考一下，哪些应用场景更适合用 jq？哪些应用场景适合用 React？
4. 横向比较
   • 拿 React 和现在流行的其他技术比较，比如 Angular / Vue 等。
   • 语法比较 等
   • 性能比较 等
   • 主观比较。或许一开始你不可能把全部框架都试个遍，但是你可以看看别人的开发体验，大家是怎样称赞/吐槽这些框架的，也可以看看框架开发者本身（比如 Vue 的个人开发者尤雨溪、React 的主开发者之一 Pete Hunt）是怎么考虑的。比方说尤大经常在知乎上面回答问题的，在我看来他对于 React 和 Vue 的看法是比较中肯的。
5. 开始写
   • 怎么写？当然不要盲目地写。React 已经有一个比较复杂的生态圈，你要有一个学习的顺序。比如 Pete Hunt 就写过一个 react-howto 告诉你怎么入门。
   • 找一些 demo 和 boilerplate，比从零开始搭会容易一点。这个很好理解，就像大家入门时候是让你们装 WAMP 集成包，而不是分开安装一样。React boilerplate 有很多，GitHub 上面随便搜。
6. 一边写，一边回头再看看文档，你会有新的收获。

(未完待续)