React 牵手 Meteor 个人生产力革命（第一部分）

到 B 站观看视频

这里是我2016年3月31日晚上，在 InfoQ 的微课堂在线演讲的内容，这期是第一部分，后面189期是第二部分。

大家好，今天我的分享的题目是《Meteor 牵手 React ，个人生产力革命》。 今年一月份的时候，我在清华大学做过一个演讲，叫《为何最爱 Meteor+React》 ，其实跟今天要论述的主题也是一致的，就是要找到当代 Web 开发中，最简单最高效的一套框架解决方案。嗯，两个演讲主题一样，但是内容角度是完全不同的。提前声明一下，今天这些内容注定是洗脑的，里面大家听到一些非常反常识的观点，大家可以准备好砖头了。

Peter 是谁？

总体介绍应该是：

一边写代码，一边录视频的一个人。

我是从06年开始写代码，到现在全职干了十年了，谁说写代码很枯燥了，挺有意思的。个人介绍部分，我也是围绕着 JS 开发相关的来吧，分三个方面介绍：第一，我写的书；第二，我录的视频课程；第三，我做的事情。

我写的书，如下

• 《 Happypeter 的摩登 JS 王国》学习地图，各个知识山头的轻重缓急
• 《搬进 Github 》 一个 JS 开发者应该具备的 Git 和 Github
• 《和 Peter 一起学 HTTP 》HTTP 协议那些事儿
• 《Linux 命令行》JS 开发者的命令行，而不是系统管理员的命令行，这个是我和我老婆翻译的，很厚很实用

我录制的视频课程：

• 《快乐的 Sublime 编辑器》 Sublime 使用思想，以及具体技巧
• 《版本控制入门 – 搬进 Github 》 最最直观的 Git 入门课程
• 《开发者的 Linux 命令行》 Linux 用在日常开发和服务器管理的那些小把戏
• 《小白变怪兽》 摩登 JS 的基石，基本 HTML/CSS/Github/Google 实战演练
• 《Html 7日谈》 HTML 小案例实战

以前还录制过几门关于 Rails 的课程，都在我的慕课网账号下可以看到。

我做的事情：

• 写开源代码 我的 Github 账号是 happypeter，有 2K 的粉丝，比很多超级大牛还多。
• Meteor-React 企业同盟 各个企业间人才资源互通，秦皇岛的学生获得北京的实战机会
• Meteor-React 实战训练营 第嘉学社在秦皇岛的学生
• 最近一年我还搞收费的摩登 JS 培训，这里就不广告了。如果关注我朋友圈，里面会发的。
• 最近四年，我花费时间最多的一件事情是在好多视频网上发布免费视频 ，这个是值得嘚瑟一下的。

Meteor 是什么？

Meteor 是一个全栈型 JS 开发平台，基于 Nodejs 技术。所谓全栈，就是我们可以用一种语言 JS ，同时开发前端和后端程序，用 Meteor 技术开发的 App 不仅仅可以运行在各个浏览器中，包括微信，也可以编译成原生应用，运行在 ios 和 andriod 系统之上。

Meteor 写成的 Web App 是 SPA （单页面应用），每次页面有内容修改，页面是不刷新的，就以我自己的 好多视频网 为例，每次点一个 Link ，页面是不会整个页面刷新的。源码在github 上 。具体 SPA 的更多技术细节，可以参考这个视频 。另外一个例子是 coding.net ，目前他们主体是用 Angular 的。

React 也是用来做 SPA 的，但是 React 是一个前端框架，或者准确来说就是一个库。但是 Meteor 是一个全栈 SPA 框架，这个其实是很特别的。

传统框架 pk 摩登平台

最早 Peter 使用 C++ 的一套框架叫 Qt 来写界面的。后来 Peter 做过 PHP ，随时关注 Laravel ，当前最火热的 PHP 框架之一。Peter 做过 Python 开发者，React 诞生的地方，Instagram ，是用 Django 做后台的，参考 OSCON 2014: How Instagram.com Works; Pete Hunt。Ruby On Rails ，Web 开发框架之王，Peter 是全职用了五年。那么为啥目前全职关注 Meteor-React 平台了呢?

简单来讲就是传统的框架，包括 Laravel/Django/Rails 这些东西，都是基于传统的 HTTP 请求/应答 模式的，而摩登平台也就是 Meteor 是基于实时数据订阅的，是以实时性为默认的框架，差别还是非常大的。虽然传统框架中也可以自己集成 Socket.io 来实现实时，但是如果我们要开发的应用，也就是要强交互，实时性，用户体验平滑的这种当代应用，那么使用摩登平台，还是能大大缩短开发时间的。传统框架下 JS 都感觉是硬塞进去的，是二等公民。即使我们添加了 Angular 或者 Socket.io 这种 JS 框架进了传统框架，但是依然感觉很不对劲，各种不配套，而且开发者的脑子还要在一种后台语言和 JS 之间不断切换，开发效率堪忧。而 Meteor 这样的平台是前后端都用 JS 的，一种语言统一所有。

这里来插一句，就是框架 Framework 和平台 Platform 有什么区别呢？其实坦率的说，很多时候大家都把 Meteor 也叫做一个框架，我觉得也没有问题的。因为选定一个 Framework 其实就是选定了一套做事情的方式，Meteor 也自然是有一套自己做事情的方式的，所以叫框架也没有问题的。但是 Meteor 官方的说法是。

Meteor is UNIX ，NOT Rails。

意思基本就是 Meteor 提供了各种常见框架提供的各种功能，但是与 Rails 不同的是，Meteor 并不强制大家去用这些功能。实际效果导致了，初学者上手 Meteor 要比上手 Rails 简单很多。Rails 很多默认就带的功能，其实我自己用了5年都没怎么用到过。

然后，咱们再说到 React ，传统的 html 模板 + CSS/Sass/Less/Bootstrap 这样的思路开发网页的时代，我认为也是过时了。你可能会反驳：“ CSS 大家用了几十年，你说过时就过时了，那原来为啥那么多高手都在用呢？”好，现在我给出我的观点：”CSS 只是在写 HelloWorld 级别的东西的时候才会让人觉得简单，真正的项目哪怕再小，CSS 都是非常难以运用的，大项目中 CSS 完全靠人力堆积来实现，逻辑清晰很难控制“，就像网上流行的一句话

CSS 只有两个问题，一个是”层叠“（也就是第一个 C ），一个是”样式表“（也就是后面的 SS )

基本意思是说，CSS 一无是处。参考我的视频 CSS 将死。视频中，我没有提到的一点就是，为何 CSS 会存在这么长的时间。答案很简单，因为 Web 发展很慢。Web 是一个全人类共有平台，这个是它最大的优势，造成了 Web 是创新力爆棚的平台。但是同时 Web 也是一场伟大的妥协，私有公司平台上几个月就能推广开的一套技术方案，Web 上可能需要十年。但是随着 Angular/Ember 最重要的是 React 这样的 JS 前端框架的流行，革命来了。由于 JS 处理速度已经够快，浏览器上面各种框架可以实现自己虚拟的一个功能层，很多东西于是可以自由的玩了。像十几年前，C++/Java 界面开发领域就非常流行的技术方发，例如面向对象编程，这种基本技巧，还有组件划分，组件重用，组件通信，这些再平常，但是再重要不过的技巧，原来 Web 上都是行不通的，现在在 React 这里，都已经实现了。所以说这是一个前端革命的年代，但是革命的方向其实是几十年来大家已经反复验证过的了，所以革命的成功也没有悬念。