JavaScript 社区的新趋势（2016）

[sivagao]

JavaScript 社区的新语言，新趋势

PS：本文会加工为PPT，在腾讯 AlloyTeam 2016 前端大会，作为 lightning talk（10min）快速分享下~ 感谢稀土

大家好，今天给大家带来的分享是JavaScript生态的新趋势。ppt1（cover）

我个人的经历是百度/豌豆荚/广发证券。算是全栈工程师，大概半年前也在这里分享过广发 Node.js的实践，平时会把自己喜欢的技术文章分享到稀土掘金上，所以这次掘金的朋友让这里做下这个闪电演讲。ppt2（about me & xitu）

由于项目开发需求我离开过前端一阵子，当我回来重操旧业，立即被一个悲催事实吓到：所有东西都变了！相信大家对最近火热的2016学习JavaScript是什么体验这篇文章还印象深刻，的确各式各样的新东西。ppt3(js 多元)

PS: 尽管大部分时间，这种更迭是增量的。（ppt3-b 盖住前面的）
社区中有些人感到fatigue！！就是 我们认识速度跟不上社区创新更迭的速度，慢慢就疲劳麻痹了。



为什么 - (ppt4 - 螺旋上升和state of )

为什么呢？我们在构建复杂的应用。它在数十种浏览器中数以百计的设备上要良好的运行，不同的屏幕尺寸不同操作系统不同的WebView），要应对糟糕的网络环境如电梯地铁，甚至是要对盲人等，都能deliver良好的体验。

有许多可行的方法来实现所有这些目标。新的平台能力（v8, chrome, web components, Progressive Web Apps），来自于其他社区的新思路(mvvm, virtual dom, immudate data的等)，
我们新实践新潮流会引入新问题，从而循环往复，推着整个技术圈往前波浪式螺旋的发展。

而一个大型的工具生态系统已经出现 - 每一个从不同的角度攻击不同的问题。
接下来的趋势来自于 state-of-javascript调查问卷的开放数据：

state of js - 选择篇

一页ppt展示『
javascript flavors
front-end frameworks
css tools
build tools
』 目前的不同选择。相信大家都有所耳闻

语言之选

当谈论“JavaScript”时，我们不只是在谈论单一的语言：它实际上更像是一个密切相关的表兄弟家庭。

ES6是新的标准。CoffeeScript已经过去了。新的JavaScript风格即将到来。
ES6与React，TypeScript与Angular 2，两大框架的站位让趋势更加明朗。



框架之争

不能错过 React.
Vue 越来越流行（因为国人？）
Angular 2 > Angular. 吸引着大量的关注



样式工具

SASS / SCSS是目前主流。
CSS Modules 也许值得研究。
在React中的CSS： - 如果你想构建可以在其他React应用中可使用的可移植React组件，CSS in JavaScript 是你的最佳选择。 除了CSS Modules，还有 Aphrodite。



构建工具

Webpack和Gulp是闪亮的未来。
Grunt可能成为过去的东西

Webpack用户与ES6，React，React Native和Redux重叠 - happy family
Rollup - 声称生成比Browserify或Webpack更小的包，值得关注。 (成为ionic2的default，声称在 es6 module 使用更好，webpack2 开始集成 tree-shaking)



JS 新趋势

ppt6
哇，这和我几年前刚入门前端的时候已经完全不一样、

极限编程的创造者肯特贝克 说过：
“让它工作，使它正确，使它快速。”
“Make it work, make it right, make it fast.” — Kent Beck
就是快速迭代，快速试错嘛。 在过去的20年，我们专注于使 Web能 Works~

工具正在被爆炸式的发展， 如果你想知道 JavaScript 社区生态朝着什么方向发展，你可能会去关注现在什么特性和工具正在快速流行被高度评价。

PS：社区中每个人都在拼了命的去做的更好，而且这个不是被大公司所夹持的，而是社区力量决定它的。。。

下面是这些特性：3代表Nice-to-have的，越高越代表是主要feature，越低代表没那么需要。

The Cambrian explosion of tools you see around you is what rapid progress looks like when it’s not controlled by an Apple or a Microsoft.
Everyone’s scrambling to make it right, and to make it fast, all at once.



接下来我们分别看看看那这些技术点。

打包构建

来解决代码越来越复杂臃肿后的切分压缩传输问题

• Code Splitting
  现在的SPA框架会导致构建的单体应用所有代码被打包成bundle一块发给客户端，包括那些很少被访问的页面的代码。所以社区有一些方案把你的代码分离成小块Chunk，后者可以按需加载， 它往往要结合SPA的路由方案一起使用，目前在React，Angular社区都有较为成熟的支持。
• Dead Code Elimination
  死代码消除，它更进一步，深入你的代码库，以删除不需要的代码。譬如不需要打包整个 Undersore 库，小型的应用也许用不到大型框架全部功能。使用类似于 Rollup tree-shaking 遍历源码在bundle打包前把你没有用到的代码去掉。
  PS：以前这是要实现在编译器的优化，现在使用类似于(rollup 利用 es6 import 来分析， possible when the entire code base is ES6 and uses import statements) AOT - angular

开发调试

专注于提升复杂应用编码效率。

• Hot Module Replacement
  热模块替换，HMR 通过监听文件变化，通知浏览器替换改动的特定模块，从而可以不刷新整个页面来更新代码从而让状态保持。尤其要调试需要实施很多步骤如登录点选特定按钮tab后才到特页面的情况下很方便。

PS：『当您更改文件时，服务器将仅向客户端发送更改（以及可能是其依赖关系）。 “热感知”的模块（导入/要求彼此的文件）然后可以在新代码到达时采取动作来使用新代码。』HMR works by watching changes to files, and signaling the browser to replace specific modules, or functions, but not reload the entire page.
The major benefit of hot module replacement is that state is not lost – if you’ve had to perform a number of actions to get to a specific state, you won’t perform a full page refresh and lose the history of those actions.

• Time-Travel Debugging
  。随着新的类似于Redux这样的状态管理工具的流行，新的编码和调试模式也在涌现。它就是利用Redux来存储应用的连续状态，从而可以无限的撤销和重做 action，甚至把用户一步步操作形成的状态回传给后端分析调错。
  PS：非常方便如果你改了reducer的代码，被staged的action会被重新全部求值生效。

数据交互？

数据交互是单页应用的核心功能点。

• Real-Time Operations
  实时操作，也行之前在聊天工具，在线文档协作或数据仪表盘网站中是常见的，但是服务性能带宽提升和用户体验苛刻要求，越来越多的网站都开始提供了这项功能，之前习惯F5刷新页面，可能很快会变成历史了（00们... ）
  ps：结合数据库端的livequery/或对oplog的socket.io 广播updates到客户端的状态管理工具处就行了。
• Optimistic Updates
  乐观更新，在客户端发起接口请求时不是等待服务器返回，而是在客户端上模拟预期的返回并立即显示它。只有在少数情况下服务器返回异常时修复冲突回滚UI状态。尤其是在低速的网络下会有好的用户体验。
• Offline Usage /w Service Workers
  离线使用。 在我们的应用跑在移动设备中，譬如上地铁进电梯的时断网后是否会重链接，页面是否重拉数据，操作提交是否会重做。Service Workers 会帮助我们更好的实施，这两年浏览器支持情况也会越来越好。
  PS：Any app that might conceivably be used from a smartphone should account for the possibility of disconnects, reconnects, and the offline use and data syncing issues that they entail. -

事实上上面特性不仅仅是体验上的，结合刚才提到的状态管理工具和新应用开发框架的特性，这些实施起来会变得相对容易并逐渐变成应用开发的标配。
PS：新框架新的工具库正在让这件事变得容易，从而

语言应用

不得不说，JavaScript 变得不再是我们熟悉的犀牛书（第五版）中样子了。

• Static Type System
  JavaScript可能没有静态类型系统，但不意味着我们不可以使用。Angular 2采用TypeScript和像Flow这样的项目是社区中强类型系统的风向标。它的好处如果你仅仅只会JavaScript而没有其他语言的基础估计可能体会到。编译前检查来避免runtime error，把一些常规事务交给language platform去做了提升编码体验。
• Isomorphic Architecture /w Server-Side Render
  前后同构。让我们在客户端和服务器之间共享代码，以尽量减少重复工作和上下文切换。Meteor 就是很好的例子。Angular Universual 和 React router Server rendering 让服务端渲染更容易实现了。

1.5+2+1.5*4min

光明的未来 - Fatigue Fatigue

哇，我们应该感到高兴，蓬蓬勃勃发展的社区解决各种各样的问题，让整个圈子都往前一大步。

不要疲于追赶新技术，你完全不需要知道所有，因为两个月后它就过时了。不要因为某些东西看起来很酷就引入，像Redux(在小项目中为什么我加个小功能需要改三个文件？！！Why do I have to touch three files to get a simple feature working?)
但是 The myth of the “Real JavaScript Developer”

最后值得庆幸大部分人还是认为JavaScript正在向着一个好的方向去发展。我今天的分享就是这样，谢谢大家~



Reference

2016/04/12 永不停步（折腾死人）的JavaScript 生态
2016/04/07 展望 Javascript 2016年的趋势和生态发展
The State of JavaScript in 2016
The myth of the “Real JavaScript Developer”
JavaScript Fatigue Fatigue