FEX 技术周刊 - 2016/12/19

微信搜索『FEX』关注我们的公众号，及时获得最新资讯。

业界会议

第11届D2前端技术论坛 - 12.17
http://d2forum.alibaba-inc.com/#/index?_k=fclt5x
D2为国内前端领域的开发者和设计者，以及所有对前端技术感兴趣的人提供一个交流的机会，以技术会友，一起分享技术的乐趣，探讨行业的发展。十届是一次轮回，十一届的主题定为“初心”，近10年来，前端领域风云涌动，移动终端领域突飞猛进，web全栈势不可挡，作为距离用户最近的工程师，我们回望“初心”，不惧未来。

中国第三届CSS开发者大会 - 12.17
https://css.w3ctech.com/
围绕 CSS Grid Layout、Sass & CSS Design
Pattern、SVG工程化、SVG动画、微信网页重构实践、WebGL 等话题展开。

GOPS2016全球运维大会北京站- 12.16-17
http://gops2016-beijing-tcwechatshare.eventdove.com/
主题是：DevOps 2.0，node.js 及全栈的推进使得运维也逐渐成为前端需要关注的内容，可以关注下业界的最新成果。附：GOPS北京站实录及PPT资料

深阅读

20 Years of CSS
https://www.w3.org/Style/CSS20/
On December 17, 1996, W3C published the first standard for CSS. And thus from December 17, 2016 until one year later, CSS is 20 years old. Read more about the history of CSS and the future, see what CSS is not and some imagery around CSS.

V8 ❤️ Node.js

http://v8project.blogspot.com/2016/12/v8-nodejs.html
Node’s popularity has been growing steadily over the last few years, and we have been working to make Node better. This blog post highlights some of the recent efforts in V8 and DevTools.

npm@5, specifications, and our RFC process
http://blog.npmjs.org/post/154473364440/npm5-specifications-and-our-rfc-process
Before the release of Node.js 8, we intend to ship npm@5: a faster client, as measured by benchmarking and profiling tools available to everyone; a much improved version of npm-shrinkwrap.json, npm’s lockfile. In particular, shrinkwrap was originally intended to be a finalizing tool used prior to deployment, but we intend the new shrinkwrap to be used for the entire lifecycle of your JavaScript applications; new tools intended for use with upcoming registry features.

it’s going to be Angular 4.0, or just Angular
http://angularjs.blogspot.com/2016/12/ok-let-me-explain-its-going-to-be.html
Why Angular 4?? Why even Angular 3?? What is going on?

Prefer DEFER Over ASYNC - by Steve Souders
http://calendar.perfplanet.com/2016/prefer-defer-over-async/
In this article, I make the argument that DEFER should be the default choice over ASYNC. To set the stage, I’m going to review how browsers evolved to make scripts faster with preloaders and the motivation for the ASYNC and DEFER attributes.

How Creating A Design Language Can Streamline Your UX Design Process
https://www.smashingmagazine.com/2016/12/how-creating-a-design-language-can-streamline-your-ux-design-process/
Around a year ago, while working at a digital agency, I was given the objective of streamlining our UX design process. Twelve months later, this article shares my thoughts and experiences on how lean thinking helped to instill efficiencies within our UX design process.

The Inner Workings Of Virtual DOM
https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf#.lvgg5l8mj
Virtual DOM (VDOM aka VNode) is magical ✨ but is also complex and hard to understand. React, Preact and similar JS libraries use them in their core. Unfortunately I couldn’t find any good article or doc that explains it in a detailed-yet-simple-to-understand fashion. So I thought of writing one myself.

The JS Community has a Bullying Problem
https://medium.com/javascript-scene/the-js-community-has-a-bullying-problem-96c10f11c85d#.bly6zilv1
JavaScript has grown up. It’s time for the community to grow up with it. We need a lot less negativity and a lot more positivity in our community. The last thing we need to do is drive our most positive, selfless, helpful voices away.

Linux Kernel 4.9 中的 BBR 算法与之前的 TCP 拥塞控制相比有什么优势
https://www.zhihu.com/question/53559433/answer/135903103
中国科大的同学在 LUG HTTP 代理服务器上部署了 Linux 4.9 的 TCP BBR 拥塞控制算法。从科大的移动出口到新加坡 DigitalOcean 的实测下载速度从 647 KB/s 提高到了 22.1 MB/s，附：测试方法，BRR 的论文见 - Google - BBR: Congestion-Based Congestion Control。

JavaScript Clean Coding Best Practices - Node.js at Scale
https://blog.risingstack.com/javascript-clean-coding-best-practices-node-js-at-scale/
Writing clean code is what you must know and do in order to call yourself a professional developer. There is no reasonable excuse for doing anything less than your best. In this blog post, we will cover general clean coding principles for naming and using variables & functions, as well as some JavaScript specific clean coding best practices.

When everything’s important, nothing is
https://aerotwist.com/blog/when-everything-is-important-nothing-is/
关于性能优化的实践，重点讨论了 Server-Side-Rendering 和 Client-Side-Rendering 的对 First Meaningful Paint (‘FMP’) 和 Time to Interactive (‘TTI’) 的影响。

2016年前端技术观察
http://geek.csdn.net/news/detail/128912
https://www.zhihu.com/question/53625757
阿当老师的一篇文章又引发业界轩然大波，抛开文章对主流前端技术的一些主观判断，这几个观点还是不错的：技术选型要考虑个人开发还是团队合作；技术方案不会只有优点而没缺点，做任何的技术选型都是在对优点和缺点做权衡；任何一个领域的开发，要掌握的知识都是多方位的，语言只是其中之一而已；不要迷信任何权威；基础很重要。他的另一篇后续文：写给迷茫前端工程师们的善意提醒 还是比较实在的。好奇心、空杯心态、独立思考是为专业码农的基本素养。另外，社区有不同观点是正常的，但处理方式还是蛮重要的，这篇译文：一封写给 JavaScript 女神的信 非常值得借鉴。另附：最简编程基本功指南：那些年追过的 CS 书本。

[译]2017 年你应该学习的编程语言、框架和工具
https://zhuanlan.zhihu.com/p/24369470
回顾 2016 年，我们看到了更多新兴的流行语言、框架和工具，它们改变着我们的工作方式，让我们看到更多的可能。但在这个行业，紧随潮流是很难的。所以在每年年底，我们都会给你提供一些建议，它涉及什么是最重要的，以及你在未来一年中应该学习什么。另附：割裂的前端工程师— 2017年的预测

双11的极限挑战——5个极致目标教你玩转前端栈
https://yq.aliyun.com/articles/66106
双11中的前端的极限挑战，包括前端栈，5个极致目标（从后到前的100%可用、秒开体验、AR和3D体验、可视的体验监控、人性化的无障碍端体验）的实现过程和方法，以及前端未来的发展。

初识 Dva
https://github.com/pigcan/blog/issues/2
https://github.com/dvajs/dva
近期，我们在内部做了一个类似 IDE 性质的应用，基于 electron 和 dva，由于之前一直只关注 node 相关的开发者工具，并未太多接触 React 等内容，所以这段时间过的有点煎熬同时也很兴奋，煎熬来源于非舒适区，而兴奋来源于发现基于 dva + electron 给开发者工具带来了更多的可能性。

vue-cli#2.0 webpack 配置分析
https://github.com/DDFE/DDFE-blog/issues/10
滴滴的同学似乎在大规模使用 vue，近期给出了多个源码解析文章，对学习和了解 vue 挺有帮助的。

一个拼写错误引来的讨论

https://github.com/visionmedia/debug/issues/347#issuecomment-266959055
npm 上的新版 debug 由于拼写问题导致报错，影响了无数依赖的项目，也引发了大量讨论，很多人吐槽没有静态检查和持续集成，后来连 tj 大神也现身了，吐槽开源项目难做。。。其实吧，比尔盖茨在文革结束那年早就预测到了

Why we chose Vue.js over React
http://pixeljets.com/blog/why-we-chose-vuejs-over-react
We have pretty big codebase, mostly PHP&JS. We decided to use Vue.js after we’ve completed evaluation of modern frameworks: we’ve built our customer calculator on React, Vue.js and Angular2. 另外，还有从 Angular -> React 的 。

跨平台 ListView 性能优化
https://mp.weixin.qq.com/s/FbiSLPxFdGqJ00WgpJ94yw
详细分析了 RN、Weex 下 ListView 的性能问题及优化

Saving the internet 2000 terabytes a day: fixing Font Awesome’s fonts
https://pixelambacht.nl/2016/font-awesome-fixed/
优化 Font Awesome 的体积

浅析渲染引擎与前端优化
http://jdc.jd.com/archives/2806
根据渲染原理来介绍如何优化性能

使用 Enzyme 测试 React（Native）组件
https://blog.jimmylv.info/2016-12-07-react-testing-with-enzyme/
React 测试框架的介绍

微信读书 iOS 质量保证及性能监控
http://wereadteam.github.io/2016/12/12/Monitor/

在使用微信读书的过程中，我们也碰到过app随机丢失动画、用户反馈app卡死、用户投诉看不了书籍等等的问题，这些问题都严重影响使用，也会降低产品口碑，因此我们开发了一些监控工具来解决这些问题，在这里总结和分享一下。

解读2016之Golang篇：极速提升，逐步超越

http://www.infoq.com/cn/articles/2016-review-go?winzoom=1
Go语言从原先的第50多位经过多次上窜已经跃到了第13位，跻入绝对主流的编程语言的行列！下面就带领大家一起回顾一下Go语言在2016年做出的那些大动作。

新鲜货

TypeORM
https://github.com/typeorm/typeorm
TypeORM is an Object Relational Mapper (ORM) for node.js written in TypeScript that can be used with TypeScript or JavaScript (ES5, ES6, ES7). Its goal to always support latest JavaScript features and provide features that help you to develop any kind of applications that use database - from small applications with a few tables to large scale enterprise applications.

react-redux v5.0.0
https://github.com/reactjs/react-redux/releases/tag/v5.0.0
Backwards compatible API; Major internal changes; Significant performance improvements in common usage patterns; Additional features added to connect(); New connectAdvanced() API;

RxJS 5

https://github.com/ReactiveX/rxjs
This is a rewrite of Reactive-Extensions/RxJS and is intended to supersede it once this is ready. This rewrite is meant to have better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.

webpack 2.2: The Release Candidate
https://medium.com/webpack/webpack-2-2-the-release-candidate-2e614d05d75f#.sv5w97osa
webpack 2.2.0-rc.0 is available to download right now: npm install webpack@beta –save-dev

Voca - The ultimate JavaScript string library
https://vocajs.com/

The Voca library offers helpful functions to make string manipulations comfortable: change case, trim, pad, slugifly, latinise, sprintf’y, truncate, escape and much more. The modular design allows to load the entire library, or individual functions to minimize the application builds. The library is fully tested, well documented and long-term supported.

Visual Studio Code
https://code.visualstudio.com/updates/v1_8
细节改进非常多

Chrome 56 Beta Ships With WebGL 2.0 Enabled By Default & Much More
https://blog.chromium.org/2016/12/chrome-56-beta-not-secure-warning-web.html
WebGL 2.0 终于来了

Weex 进入 Apache 基金会孵化阶段
http://mp.weixin.qq.com/s/00ccnbbIaf2JksqaesICSQ
12月15日，阿里巴巴宣布将 Weex 捐赠给Apache基金会开始孵化，Weex有望成为中国移动领域的首个Apache顶级项目。

Polymer is the whole package
https://wearenorthern.com/blog/2016/polymer-is-the-whole-package/
可以了解下 ployer 生态

2016 in Jest
https://facebook.github.io/jest/blog/2016/12/15/2016-in-jest.html
2016 was a big year for JavaScript testing with Jest. In the first six months of the year we rewrote Jest and built a solid foundation to significantly improve performance and the developer experience of testing JavaScript code.

roadhog —— 让 create-react-app 可配的命令行工具
https://github.com/sorrycc/blog/issues/15
roadhog 是一个 cli 工具，提供 server 和 build 两个命令，分别用于本地调试和构建。命令行体验和 create-react-app 一致，配置略有不同，比如默认开启 css modules，然后还提供了 JSON 格式的配置方式。

BROWSIX - UNIX IN YOUR BROWSER TAB
https://browsix.org/
Run C, C++, Go and Node.js programs as processes in browsers, including LaTeX, GNU Make, Go HTTP servers, and POSIX shell scripts.

Hyper™ 1.0.0 发布
https://www.oschina.net/news/79981/hyper-1-0-0
Hyper™ 1.0.0 发布了，Hyper™ 是一款 JS / HTML/ CSS 终端工具。该项目旨在为用户创建一个美观的、易于扩展的命令行接口工具，并且构建一个开放式 Web 标准。

gitql - A git query language
https://github.com/cloudson/gitql
Gitql doesn’t want kill git log. It was created just for science!!
It’s read-only. Nothing about delete, insert or update commits.

redux-orm
https://github.com/tommikaikkonen/redux-orm
A small, simple and immutable ORM to manage relational data in your Redux store.

产品及其它

谷歌拿什么PK后发制人的巨头亚马逊
http://mp.weixin.qq.com/s?__biz=MjM5MTM5ODQyMA==&mid=2651194595&idx=1&sn=6f5223c6ccaa0cebce5889e49a402764
文中云计算的一些理念挺不错的，比如：AWS 本身是一套可持续演进的系统。它能够在不停机、不瘫痪的情况下就完成大幅度升级和大规模客户转移等任务，让企业级客户安享 7x24 小时不间断的服务，无需担心自己会受到影响；AWS 提供给用户的，不是框架（frameworks）而是“基元”（primitives），利用这些“基元”，客户自己也可按照具体需要，构建出种种可持续演进、可持续扩展的（scalable）后端系统；当分配成本（distribution cost）或转换成本（switching cost）下降时，用户体验的重要性就会上升，利用 Kubernetes，谷歌希望能创建一个完全不受控于云基础设施的浏览器，然后降低转换成本。

知乎在移动端的艰难与它错过的一个时代
http://mp.weixin.qq.com/s?__biz=MjM5NDUyOTAwOA==&mid=2652914245&idx=1&sn=72e4ec6a763703da60f7c77407817291
以2016年为时间维度的话，毫无疑问，知乎的商业化是2016年中国互联网圈内不容忽视的一个产品大事件。
但，如果我们退后一步，将知乎上线的6年作为一个整体来看待，我们将会发现，知乎的6年，也正恰好是移动互联网最狂飙突进的6年。那么，知乎在移动化这件事情上，又做得怎么样呢？

在技术概念的大爆发中何以自处
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995079&idx=1&sn=b7f5bd64614c1ef487766ffc5af56aed
腾讯Web前端技术级别最高的程序员黄希彤结合他10多年的经历分享了对技术的看法：

• 工程师的天职是「解决问题」，我们要关心的是新的技术是否赋予另了我们新的解决问题的能力，让我们能够解决以前不能解决的问题，在掌握了基础的编程能力的基础上，更加专注于有哪些问题是前人没解决的；
• 基于云去思考和架构系统的方式，现在我们也常常称为「云原生」，这样的思考方式会极大提升我们前端工程师和全栈工程师解决问题的能力；
• 我们使用的很多技术将来都会被淘汰，我们做的很多产品将来都会过时，真正能让我们牛的，应该是那些可以经得起时间考验的技术实践；