IMWebConf2017讲师系列之狼叔

狼叔(Qunar前端架构师)

桑世龙，江湖人送称号「狼叔」，天津空弦科技 CTO，开源项目 Moajs 作者，Node.js 技术传道者。曾就职在新浪、网秦，曾做过前端、后端、数据分析、移动端负责人、做过首席架构师、技术总监，全栈技术实践者。目前主要关注技术架构和团队梯队建设方向。

全栈工程师Node.js之路

（摘自狼叔）

Node.js 全球现状

虽然 Node.js 在国内没有盛行，但据 StackOverflow 2016 年开发者调查，其中 Node.js 、全栈、JavaScript相关的技术在多个领域（包括全栈、后端）都有排名领先。

（http://stackoverflow.com/research/developer-survey-2016）

后端分布

（http://stackoverflow.com/research/developer-survey-2016）

Node.js 与生俱来的 2 个特性：

• event-driven
• non-blocking I/O

以前总强调的异步特性，到今天异步已经不是明显优势。因此除了性能，其他都是病（不足）？

1、Callback hell 问题

目前已经很好的解决了。promise / generator / async 后面会讲。

2、包管理

npm 已经是开源世界里最大的包管理器了，模块非常丰富（25.6万 ）。

Node.js’ package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

以前我们总是喜欢拿异步说事儿，现在我们拿 Node.js 的强大的生态来炫耀。

为什么选择 Node.js？

空弦科技做的是基于云仓储的 SaaS 服务，给中小卖家提供服务，核心系统是进销存、订单池、WMS。

先看一下我们的瓶颈在哪里：

• 人（天津不好招人）。Node.js 招不到，好多都是从 Java 转的，前端也不好找，好多也是从 Java 转的，我们相当于从 0 开始组建团队
• 开发速度。创业公司 5 分钟要造火箭，大家都懂。所以让开发快速进入状态，提高开发速度，对我们来说至关重要。
• 稳定。在没有专业运维人员的情况下，如何保证系统可用、稳定。

于是就引出了我认为的 Node.js 好处

• 同样不优化，性能比大部分语言好。即使优化，也比其他语言简单，比如Java。
• 有足够多的选择和架构的平衡。
• 如实在不够，Java 补。

Node.js 给了我们足够的选择工具

• 可以采用面向过程
• 可以面向对象
• 可以函数式

甚至可以用各种编译器 coffee、typescript、babel（es）等。对于从 0 开始的团队来讲，可以先面向过程、然后随着团队的成熟度，一点一点增加难度。

提供好的基础和包管理工具

• 测试相关 tdd / bdd 测试覆盖率
• 规范化 standard、各种 lint、hint
• 构建相关 gulp、grunt、webpack，大量插件
• 生成器 yo 等
• 包管理工具 npm 足够简单易用

以上这些都做大型软件的基础，Node.js 在这方面做得非常好。

特定场景的快速

很多人把 MEAN 组合（比如 mean.io）起来，这样做的好处是如果熟悉，开发速度确实会非常快，但是难度太大，很少有人能搞的定。metetor 模糊了服务端和客户端，是同构的典型应用，对于实时场景是非常高效的。这种东西都算特定场景的快速，一般不敢轻易上，调优难度非常大，如果有人能 cover 的住，在初期是非常高效的。

总结需求：可以简单，可以难；可以快、也可以慢；可以开发大型软件

如果以上不满足咋办？这时就需要架构平衡了。

如何全栈？

讲了 Node 工具，前端 4 阶段，hybrid，各种跨平台，目前就是为了介绍 Node 全栈的各种可能，下面讲一下如何能做到 Node 全栈？

全栈核心，后端不会的 UI（界面相关），前端不会的 DB（业务相关），只要打通这 2 个要点，其他就比较容易了。

1、从后端转

做后端的人对数据库是比较熟悉，无论 MongoDB，还是 Mysql、Postgres，对前端理解比较弱，会基本的Html，Css，模板引擎等比较熟悉。

4 阶段循序渐进，build 与工具齐飞，前端开发 4 阶段，我的感觉是按照顺序，循序渐进。

• Html / Css / JavaScript（基础）
• jQuery、jQuery-ui，Extjs（曾经流行）
• Backbone，Angularjs（当前流行）、Vuejs
• React（未来趋势）、Vuejs

Vuejs 综合 Angular 和 React 的优点，应该是下一个流行趋势

2、从前端转

从前端往后端转，API 接口非常容易学会，像 Express、Koa 这类框架大部分人一周就能学会，最难的是对 DB、ER 模型的理解，说直白点，还是业务需求落地的理解：

我们来想想一般的前端有什么技能？

• Html
• Css（兼容浏览器）
• JavaScript会点（可能更多的是会点 jQuery）
• PS切图
• Firebug 和 Chrome debuger会的人都不太多
• 用过几个框架，大部分人是仅仅会用
• 英语一般
• Svn / Git 会一点

那么他们如果想在前端领域做的更深有哪些难点呢？

• 基础：OO，设计模式，命令，Shell，构建等
• 编程思想上的理解（MVC、IoC，规约等）
• 区分概念
• 外围验收，如 H5 和 hybird 等
• 追赶趋势，如何学习新东西

以上皆是痛点。所以比较好的办法：

• 玩转 npm、gulp 这样的前端工具类（此时还是前端）
• 使用 Node 做前后端分离（此时还是前端）
• Express、Koa 这类框架
• Jade、ejs 等模板引擎
• Nginx
• 玩转【后端】异步流程处理 promise / es6 的 ( generator | yield) / es7 ( async|await )
• 玩转【后端】MongoDB、Mysql 对应的 Node 模块

从我们的经验看，这样是比较靠谱的。https://github.com/moajs/moa-frontend 就是最简单前后端分离，里面没有任何和 DB 相关。

• 技术栈
• Express
• Jade
• bootstrap，bootstrap-table
• jQuery
• gulp
• Nginx

一般的前端都非常容易学会，基本 2 周就已经非常熟练了，我的计划是半年后，让他们接触【异步流程处理】和【数据库】相关内容，学习后端代码，就可以全栈了。

3、从移动端转

移动端分：native 原生开发，hybrid 混搭式开发。原生开发就是 iOS 用 oc/swift，Android 用 Java 或 Scala 等，就算偶尔嵌入 webview，能玩 JavaScript的机会也非常好少。所以移动端转全栈的方法，最好是从 cordova（以前叫 phonegap）开始做 hybrid开发。只要关注 www 目录里的 H5 即可，比较简单。如果 H5 不足以完成的情况下，可以编写 cordova 插件，即通过插件让 JavaScript调用原生s dk 里功能。cordova 的 cli 可以通过 npm 安装，学习 npm 的好方法，学习 gulp 构建工具。

只要入了 H5 的坑，其实就非常好办了。

• 然后 H5、Zeptojs、iScroll、fastclick 等
• 然后微信常用的，如weui、vux（vue weui）、jmui（react weui）
• 然后可以玩点框架，比如 jQuery mobile，Sencha touch
• 然后可以玩点高级货，ionicframework（基于Angularjs、cordova）
• 然后前端 4 阶段，依次打怪升级
• 然后 Node.js

这个基本上是我走的路，从 2010 年写 IOS、做 phonegap（当时是0.9.3）一路走到现在的总结吧。

关于IMWebConf2017

IMWebConf2017前端大会的发起方是腾讯公司，组织者是腾讯公司最专业的前端团队之一IMWeb团队。

作为国内前端圈一年一度的，有一定影响力的专业前端技术交流大会，IMWebConf已经成功举办五届，累计探讨的议题超过上百个，线上线下参会者数千人，累计影响前端爱好者超过数十万人。

今年IMWebConf2017将于9.16日在科兴国际会议中心进行，会议时间为一天，议题涵盖前端工程化，性能优化，Node.js，前端框架，安全等前沿方向。大会将设一个主会场和三个分会场（Node.js分会场、框架工具性能分会场、综合分会场）。 购买现场票的观众可以自由选择感兴趣的会场，相信总有一个议题可以带给您一些思路和价值。

9.16日，我们不见不散。