在线公开课 | 前端工程师如何突破瓶颈更好地变现本身

在线公开课 | 前端工程师如何突破瓶颈更好地变现本身

原创： 京小云 京东云开发者社区  3天前

课程概要!

这次课程的分享主题是"前端工程师如何突破瓶颈更好地变现提高本身"。课程从如下三个方面入手，为你们详解一个前端工程师是如何一步步完善并提高本身的的。

• 前端工程师所应具有的能力;

• 现代前端工程师在企业或者部门的定位;

• 介绍下京东云前端，在公共服务这块儿的一些演进和沉淀心得。

这次课程的讲师是苗宇，是京东云产研部门的前端工程师，目前主要负责产研部门前端公共服务的搭建和维护。面对这样一个可能有些宽泛的主题，苗宇把所讲的内容对应配合着前端的具体实例或者知识点进行了详解。

前端工程师如何突破瓶颈更好地变现本身

— 京东云   苗宇—

01前端工程师所应具有的能力

****

前端相关技术

在搜索大厂对前端工程师的职位要求时，其中如下几点几乎是全部前端岗位都要求的。包括：

1. HTML/CSS及 Javascript 要熟练使用

2. 前端的三大框架 Angular/Vue/React 的熟练运用和理解

3. 一些移动端的适配要求

其实对于一些刚毕业或者工做一、2年的同窗，每每为了急于求成忽略了前端的一些基础知识，这种学习路线其实并不提倡，由于这会让你慢慢陷入为 API 工程师。

下面这张图里的两段 JS 代码，这个是在给别人作面试的时候常常会问到的一道题：这两段代码在执行流程有什么区别？

这道题能够考察 JavaScript 的不少知识点，其实代码的执行结果都是相同的，你们能够想一下。

咱们知道 JavaScript 是词法做用域，因此函数的做用域在函数定义的时候就已经决定了。在 JS 中最多见的做用域有全局做用域、函数做用域，而且 JavaScript 会经过一个叫 ECS 的栈结构去管理这些上下文，咱们知道栈的数据结构特色是 FILO。

固然，这道题还能够更进一步的深挖，好比关于执行上下文中包含的 变量对象(Variable object，VO)、做用域链及 this。

因此咱们能够看到一段普通的 JS 代码所涉及到的知识点，你若是能把这些点去连成线，再将这些线去连成一个网，创建本身的知识体系。比你去调用框架的 API 来的有意义得多。

接下来再来看下框架方面。在最先以前接触前端的时候，咱们用的是 AngularJS ，当时也只是调用 API 去完成任务，并不了解框架的实现原理，好比双向绑定的原理，脏检查的机制，依赖注入等等。可是，当真实代码量（这里说的真实代码指的不是那种一段代码通过不少次复制粘贴的那种，而是通过你思考写出来的）或者阅读量上来之后，对这些框架也就会有更深层次的认识。

拿 React 为例，React V16 版本推出的新的 Fiber 架构，是为了解决以前可能存在的性能问题。咱们知道 React 在渲染、更新组件的时候是分两个阶段的，一个叫调度阶段 Reconciler、一个是渲染阶段。React 管以前的 Reconciler 称之为 Stack Reconciler。 Stack Reconciler 采用相似函数调用栈的策略，经过 DFS，递归遍历全部 VDOM 节点，进行 Diff。这种状况一旦开始就没法中断，要等到整颗组件树都计算完成后，才会释放主线程。那这就会出现一个问题，在极端状况下，因为组件树比较复杂，致使 React 一直占用着 JavaScript 主线程，并且咱们知道 JavaScript 主线程与渲染线程是互斥的，因此这期间就会形成页面的卡顿，从而影响用户体验。

那React 团队是如何解决的？或者换作你们，能够想想解决方案。

React 团队实际上的思路是经过将整个 Reconciler 流程拆分为好几块，每执行完一块，都会去看有没有更高优先级的任务，例如用户的操做及动画优先级就会比视图窗口外的渲染任务优先级要高。若是有高优先级的任务，则 React 会暂停渲染将控制权交还给主线程，等待有机会再继续渲染。

在浏览器上是须要 API 的支持，React 则经过重构了浏览器的RequestIdleCallback API 来兼容全部平台。这个API会使得浏览器可以在空闲时间去执行一些低优先级的任务，从而不会阻塞像动画、交互这类操做。

同时 React 在原来的 VDOM 的基础之上新加了一层数据结构。名叫 Fiber Tree，其中每节点都和 VDOM 节点对应。固然这个 Fiber 节点中包含了三个比较重要的属性， return, child, sibling ，分别指向了父节点，子节点及兄弟节点。从而造成了一个单向链表树。这使得 React 不管从哪里被打断，均可以从新回溯到整棵树。

因此，咱们能够看到，不管是框架仍是什么，实现的原理，也逃不开 JS、浏览器、数据结构、算法这些基础。

计算机相关知识

前端工程师首先是工程师。前面的“前端”修饰词意味着你是偏向前端领域的工程师，用通用计算机基础知识和工程师思惟解决前端行业领域内的问题。这里面尤为是网络、数据结构、算法这方面，对前端工程师的要求愈来愈高。

网络这方面，好比面试时常常会遇到的，常见的HTTP Code码及对应的意义、常见的 Header头、TCP三次握手四次挥手的流程，包括Https这方面。你至少能作到在Http调试的时候毫无障碍，可以轻松地看明白捕获回来的请求。推荐你们回头能够看下《图解HTTP》、《图解 TCP/IP》这两本书。

若是有一天你在面试的时候，被问到一道经典的面试题，从浏览器输入 URL 到页面加载期间发生了什么。若是你能把这些知识点答上来的话，那确定是加分项，何况不少面试官也未必知道。

包括算法和数据结构如今也变成重点考察的目标，由于随着前端能作的事情愈来愈多，一些工程化思惟、逻辑思惟也都是考察的一项。

多刷算法题会培养你的逻辑思惟能力，同时在你写代码或者重构代码的时候，天然而然的就会想到最优解的方案。

业务拓展能力

其实大多数前端仍是更偏向于业务，时间长了以后，不免会以为枯燥，尤为是即使如此也仍是须要知足一些千奇百怪的需求。若是你不能从业务中拓展相关的一些知识点，你可能仅仅只是个作需求的，就相似你已经工做了五、6年，但实际的工做经验和技能却只有一、2年······

举例来讲，让你作一个单点登陆的页面。并非说你写个登陆表单，发几个请求就完事儿了。其中的一些知识点，例如 SSO，SSO只是一类解决方案的统称，具体的实现能够是 OAuth、SAML 等方案，其中关于认证、受权的区别 ( Authentication/Authorisation  ) 是相对重要的概念，认证的做用在于承认你可以访问系统，用于鉴别访问者是不是合法用户；而受权用于决定你有访问哪些资源的权限。

大多数人不会区分这二者的区别，由于站在用户的立场上。而做为系统的设计者来讲，这二者是有差异的，这是不一样的两个工做职责。咱们能够只须要认证功能，而不须要受权功能，甚至不须要本身实现认证功能。OAuth 的本意更加倾向于受权而非认证，只不过受权用户信息也就间接实现了认证。

还有常常搞混的 Session 和 Token 的区别。由于 HTTP 是无状态的，因此要保持登陆态的话，常见的作法就是 Session 或 Token ( JWT )，Session 主要是保存在服务器端，常见的是存在内存或者 Redis 中。同时会经过 Response 的 Set-Cookie 给浏览器种一个 SessionID。以后的接口请求，都会携带 Cookie ，服务器从中获取 SessionID，并去内存中查找是否有相应的合法用户。

而Token则更多的存放在客户端，经过Http的Header发送给服务端。例如如今常见的JWT，JWT的目的不是为了隐藏或者保密数据，而是为了确保数据确实来自被受权的人建立的，以防止中途篡改。服务端获取到Token后经过计算能力来验证用户的合法性。

因此Token更多的是经过服务器的计算能力去换取Session服务的存储能力，二者并无谁对谁错。

能够看到，由一个需求能延伸出许多知识点做为你的经验。将这些知识点都融会贯通，这样你就能够经过工做时间与别人进一步的拉开距离。

非技术层面

除了写代码，做为前端工程师日常更多的是与人沟通，不管是和产品经理仍是和后端研发，都须要良好的沟通能力。

而关于情商，并非说“见什么人说什么话”，在这里情商更多的是指可以控制本身的情绪，并可以感知别人的情绪。

Emm······港真，这个问题真的是有点难呢。

好比就有同窗在后台问小编：

Q:老师，您怎么保养头发的?

-向左滑动查看答案-

A: 三分天注定，七分靠飘柔🤣

02前端工程师的定位

再来看下关于现代前端工程师在企业或部门中的定位。

如今的前端已经不像之前的前端，只是切个页面，写个 Web 页面，而是更多的转换成了 Web APP 。在这个过程当中，一些原来须要在后端来实现的功能就能够放到前端来作。最典型的是 SPA 单页面，包括其中的路由的管理，数据状态的管理如今社区中都有相应的解决方案。因此前端能作的也愈来愈多。

如今有不少人都把前端定位为一个承上启下的角色，这样的定位其实还挺形象的。

向前的话能够和UED或者视觉设计师去链接，好比大家公司主要作一些中后台的项目，这些项目的特色是CRUD，好比表单、列表、详情页，这些页面每每能够抽象出一些公共的元件。这时候你能够和 UED 去共同制定一份规范和标准，这个标准能够是 字体、布局、样式及交互方式，这样慢慢的抽象出本身的公共组件、组件库甚至是业务组件库，由于基础组件应该是和业务无关的。但每每会出现一些操做是业务相关的，但又是通用的，这时候你可能经过业务组件将其封装，从而提升前端的开发效率。

向后链接的话，更多的是指与后端研发的链接。因为如今开发模式基本都是先后端分离，因此更可能是经过接口、数据模型之间的交互，再因为后端目前微服务的流行，致使接口变的更加细粒度化。以前的接口可能更多的是面向视图或者页面，但如今接口更加偏向于数据模型自己，这就给前端带来了必定的复杂度。这时你能够经过在Client端及 Server中间加一层服务，来专门对数据作整合或拆分，甚至是一些业务的鉴权等。

目前最流行的方案就是经过加一层 BFF ( Backend for FrontEnd ) 去解决这些问题，固然目前是 NodeJS 最适合作这个工做，由于 BFF 消费者就是前端工程师，这一层交由前端用同一种语言来实现，会相对比较高效。同时也可让后端更加向后关注于本身的领域。

而后是前端自身的链接，除了自己的业务，咱们能够再开发流程、工具化、自动化等这些方面做深刻探索，并且如今社区也有许多成熟的方案。好比，若是是一个团队，咱们能够经过统一的编码规范，例如经过 Eslint 或者自定义一个符合大家规范的 Eslint Plugin 或者经过 GitFlow 去统一开发流程，统一规范的 Commit 及 Review 流程。

关于工具化这方面，能够经过脚手架来快速初始化一个项目，也能够将一些公共业务封装成插件。好比一些项目须要支持国际化，但这些需求每每项目开发到必定程度时才提出来的，咱们知道国际化更多的是一个体力活。这时候能够经过脚本去实现自动替换，例如将 Vue 文件经过 vue-loader 解析后，经过 AST 匹配出中文提取出来造成一个 Excel 。以后也能够将翻译事后的 Excel 表格中的英文替换回来。

咱们能够发现直到 NodeJS 兴起了以后，前端的工程化才算是真正开启了大门。最典型的就是构建工具这块儿，从 Grunt、Gulp 开始基于 node 环境的流程化工具的兴起，直到如今的 Webpack 和 Rollup。

关于监控，你甚至能够配合“运维大人”去搭建一套前端的监控系统，像错误监控，最简单的实现是经过监听 window.onerror 去监听 javascript 的错误栈，并且像这些框架也每每都提供了组件的错误边界，例如 Vue 对应的是 errorHandler ，React 对应的是 componentDidCatch  ，甚至是 Ajax 请求的错误也都是能够拦截的，固然这只是最简单的实现。

还有像一些性能监控，能够经过 Performance API 暴露的属性作整合。

03京东云前端公共服务的演进

京东云前端最先的技术栈是 JQuery ，因为当时尚未造成组件化这个概念，也没有统一的规范，因此致使页面的产出效率不高。后来技术栈切换为 Vue 之后，慢慢造成了组件化的概念，与 UED 同窗制定了一些统一的交互规范，包括我以前说的样式、字体、图标、交互规范等等。根据这些规范慢慢造成了符合京东云本身风格的组件。

咱们经过以组件库为基础，向上衍生出了业务组件库，甚至可视化拖拽的实现。由于咱们不只是一些中后台的项目，还会有一些活动页面。这类的页面有个特色，就是上线时间紧，但每每只用一次。因此像这类的页面无需再经过 SPA 再单独搭建，而是尽量的经过拖拽的方式快速生成页面的总体架构。从而提升效率。

这是向上的一些产出，向下咱们还有本身的 BFF 层，去作数据的聚合等等。其中咱们能够经过在一些内部系统，去实现一些比较新的技术栈。好比京东云的 Open API 是标准的 REST API，而这类 API 在前端调用的时候每每会有一些数据的冗余，好比我一个接口每每只需其中的一小部分数据。或者我一个页面可能须要调用多个接口才能拿到我所须要的数据，这时候咱们能够经过 Apollo 这个 GraphQL 的实现来解决这类问题，由于咱们能够经过前端去声明式地获取数据 。甚至咱们经过 Apollo Link State 去替代掉现有的数据状态管理方案。再往下，咱们还有本身的一些工程化方案，例如脚手架、工具链这些。包括咱们的搭建的 Sentry 监控系统，去与京东云的发布、构建系统对接。

咱们计划经过以组件库为核心，能将整个前端公共服务打形成一个生态。这个也是身为一个前端所值得作的~

---

以上为公开课的全部内容

做为前端工程师的基本技能，网页的设计与搭建技能怎么能没有呢？

京东云域名特价抢注！

点击左下方“阅读原文”，便可9元注册专属于你本身的域名哦！

Q&A

课程问答

Q

前端工程师的职业发展，是作一个大前端，仍是作一个全栈？

A

主要仍是根据公司或者部门对前端的具体定位。好比前端技术栈有像 BFF 这层，可能你会有机会接触到 Server，这种你能够适当横向扩展，了解下服务端的相关知识，作一个 T 字型人才。但其实本质仍是须要把基础知识打牢，不少东西是须要时间、经验积累的。

Q 前端技术层出不穷，各个技术框架一波又一波，Vue、React

版本一个又一个。面对新技术，学不动了怎么办？ A

关于新技术学习，个人建议是：

一、不必定迅速上手实践，花一点时间去了解技术机制和应用场景；

二、关注新技术在前端社区的动向，提高本身的技术视野，拓展并完善知识体系；

三、试错方向没有那么可怕，不少技术都是相互关联，彼此之间容易过渡

最最重要的是不知足现状，不断去学习和积累。

Q前端的将来是什么？如今学的技术未来会不会被淘汰？A

前端的发展能够关注社区的动向，像现在比较新的技术例如GraphQL、PWA、Web Components，WebAssembly 及跨端方向如 Flutter ，都是为了解决某一类或者某些类问题的产生的。随着技术的发展，前端能作的事情愈来愈多，须要解决的问题也会愈来愈多。相应的新技术、新框架也会层出不穷。对你我的而言，你更多的是须要时刻保持学习能力，不断的提升本身。

若是你只是 API 工程师的话，那确定是会被淘汰的。但若是你能从掌握这些库、框架的原理，这些知识是不会随着框架淘汰而淘汰的。

·END·

参考文档：

• 漫谈前端体系建设： https://zhuanlan.zhihu.com/p/28299873

-浅谈SAML, OAuth, OpenID和SSO, JWT和Session：http://www.javashuo.com/article/p-hpniygfb-eo.html

阅读原文