FEX 技术周刊 - 2017/01/23

深阅读

webpack 2.2: The Final Release
https://medium.com/webpack/webpack-2-2-the-final-release-76c3d43bf144#.5g9b4ros0
升级指南 https://webpack.js.org/guides/migrating/

阿里9年，我总结的前端架构演进3大阶段及团队管理心法
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995238&idx=1&sn=0c639d9186a5fa02175291694f96d03b
技术人生就是在不断地修行，每个人都有每个人的功课，每个人也有每个人的精彩。你也许刚上路，又或许踽踽独行了很久，听听别人的故事没准也能帮助自己的成长。在阿里修行的9年，他学会了这些。

egg.js 文档第一版发布
https://eggjs.org/zh-cn/intro/
egg 为企业级框架和应用而生，在阿里内部广泛使用，我们希望由 egg 孕育出更多上层框架，帮助开发团队和开发人员降低开发和维护成本。文档质量非常高，从中可以学到很多框架设计及 Node 企业级应用开发的知识，比如这两篇：单元测试、多进程模型，文档和框架绝对都是良心之作，不看必悔。

2016 JavaScript Rising Stars
https://risingstars2016.js.org/
The JavaScript community is going full speed on innovation, what was once trendy becomes old-fashioned a few months later. 2016 is over, you may think you missed something important? Don’t worry, we are going to review what were the main trends.

Styled-Components: Enforcing Best Practices In Component-Based Systems
https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/
As we’ve built more and more apps with components, we’ve discovered some best practices when working with them. I want to talk about three main ones today: building small, focused and independent components; splitting container and presentational components; and having single-use CSS class names.

The Infrastructure Behind Twitter: Scale
https://blog.twitter.com/2017/the-infrastructure-behind-twitter-scale
Twitter came of age when hardware from physical enterprise vendors ruled the data center. Since then we’ve continually engineered and refreshed our fleet to take advantage of the latest open standards in technology and hardware efficiency in order to deliver the best possible experience.

Caching at Reddit
https://redditblog.com/2017/1/17/caching-at-reddit/
In this post we’ll talk about some of the nuts-and-bolts numbers of Reddit’s caching infrastructure—the number of instances, size of instances, and overall throughput. We hope that sharing this information may help others gauge what type of performance and sizing they can expect when building similar clusters. At the very least, we hope you’ll find it interesting to see a bit more about how Reddit works under the hood.

The Problem With AMP
https://80x24.net/post/the-problem-with-amp/
感兴趣的同学可以研究下 Google 的 AMP https://www.ampproject.org/ ，相关文章：Google AMP Cache, AMP Lite, and the need for speed、AMP is Google’s Last Hope for Relevance in Mobile Search

Speeding up V8 Regular Expressions
http://v8project.blogspot.com/2017/01/speeding-up-v8-regular-expressions.html
This blog post covers V8’s recent migration of RegExp’s built-in functions from a self-hosted JavaScript implementation to one that hooks straight into our new code generation architecture based on TurboFan. V8’s RegExp implementation is built on top of Irregexp, which is widely considered to be one of the fastest RegExp engines.

Introducing Riptide:
WebKit’s Retreating Wavefront Concurrent Garbage Collector
https://webkit.org/blog/7122/introducing-riptide-webkits-retreating-wavefront-concurrent-garbage-collector/ JSC终于也有并发 GC 了，另附，[译]Go语言的垃圾回收算法被吹过头了

Google发布新的图像压缩技术，最高可节省75％带宽
https://blog.google/products/google-plus/saving-you-bandwidth-through-machine-learning/
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659598877&idx=1&sn=704e7d5a05adaff567c9adf015753124 Google刚刚发布了一种名为RAISR（Rapid and Accurate Super Image Resolution，意为“快速、精确的超级图像分辨率技术”）的图像压缩技术，旨在保存宝贵的数据，而不牺牲照片质量；并在带宽受限的移动设备上提供清晰锐利的图像。Google声称，该技术可以降低高达75％的带宽，RAISR分析同一图像的低分辨率和高分辨率版本，了解到高分辨率版本出众的原因，然后在低分辨率版本模拟出来。

React at 60fps
https://hackernoon.com/react-at-60fps-4e36b8189a4c#.dga0jalth
React is an abstraction over the DOM and as any abstraction, it has its costs and limitations that you may hit sooner or later. Understanding and being able to overcome such limitations are important parts of working with an abstraction. 另附：Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue

[译]前端性能优化の备忘录(2017版)
https://www.w3ctech.com/topic/1945
虽说Micro-optimization可以让你的性能优化手段起作用，但是(我觉得大家)还是应该在思想层面上树立一个明确的目标，这是因为目标量化会影响整个项目期间所作出的任何决定，所以说树立明确的目标才是至关重要的。(至于如何解决前端性能问题)，这里有很多不同的优化模型(model)，不过我们下面将要讨论的(优化模型)内容是十分武断的，所以你只需要确保(在使用上述优化模型时)使用自己的优先次序就行啦。

Improve Your Node.js App Throughput One Micro-optimization at a Time
https://www.infoq.com/articles/node-micro-optimizations-javascript
In order to improve the performance of an application that involves IO, you should understand how your CPU cycles are spent and, more importantly, what is preventing higher degrees of parallelism in your application. While focusing on improving the overall performance of the DataStax Node.js driver for Apache Cassandra, I’ve gained some insights that I share in this article, trying to summarize the most significant areas that could cause throughput degradation in your application.

Modernizing our Progressive Enhancement Delivery
https://www.filamentgroup.com/lab/modernizing-delivery.html
For more than a decade here at Filament Group, we’ve been scrutinizing and updating our workflow for delivering broadly accessible, fault-tolerant websites. Much of that time was spent making small, subtle refinements, but there were several moments where we made larger and philosophical changes to the way we deliver sites as well.

10 Node.js Best Practices: Enlightenment from the Node Gurus
https://www.sitepoint.com/node-js-best-practices-from-the-node-gurus/
In my previous article 10 Tips to Become a Better Node Developer in 2017, I introduced 10 Node.js tips, tricks and techniques you could apply to your code today. This post continues in that vein with a further 10 best practices to help you take your Node skills to the next level.

Virtual DOM is the new IR
https://medium.com/@jiyinyiyong/virtual-dom-is-the-new-ir-67839bcb5c71#.8y15dub50
An intermediate representation is a representation of a program part way between the source and target languages. A good IR is one that is fairly independent of the source and target languages, so that it maximizes its ability to be used in a retargetable compiler.

Node.js Async Best Practices & Avoiding Callback Hell - Node.js at Scale
https://blog.risingstack.com/node-js-async-best-practices-avoiding-callback-hell-node-js-at-scale/
In this post, we cover what tools and techniques you have at your disposal when handling Node.js asynchronous operations: async.js, promises, generators and async functions. After reading this article, you’ll know how to avoid the despised callback hell!

THE LINE OF DEATH
https://textslashplain.com/2017/01/14/the-line-of-death/
When building applications that display untrusted content, security designers have a major problem— if an attacker has full control of a block of pixels, he can make those pixels look like anything he wants, including the UI of the application itself. He can then induce the user to undertake an unsafe action, and a user will be none the wiser.

Asyncing Feeling about JavaScript Generators
https://www.bignerdranch.com/blog/asyncing-feeling-about-javascript-generators/
Async generators and async iteration have arrived! Err, they’ve reached Stage 3, which means they are likely to ship in a future version of JavaScript. Until then, you can enable Stage 3 proposals in Babel to try them out in your own projects.

百度第三代 Spider 背后的万亿量级实时数据处理系统
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995223&idx=1&sn=9c2722a2dcddbc26eefc437a1e82531b
信息技术发展突飞猛进，网络数据呈现爆炸之势，线性扩展面临高昂成本。Spider系统是百度搜索引擎的主要数据来源，每天处理着数万亿次的链接分析和数百亿次的互联网资源采集。那么，第三代Spider是怎样“化繁就简”实现增量式流式处理的呢？

[译]Bluebird 是如何做到比原生实现更快的
http://mp.weixin.qq.com/s?__biz=MzA4NjE3MDg4OQ==&mid=2650964223&idx=1&sn=f2c37c05fb6ad370a67c59ca745bd7bf
Bluebird 是一个广泛使用的 Promise 库，最早在 2013 年得到人们的关注。相比其他同等水平的 Promise 库，Bluebird 快了一百来倍。Bluebird 自始至终遵循着 JavaScript 优化的一些基本原则，所以才有这么好的性能。本文将会介绍其中最有价值的三个方面。

Native ECMAScript modules - the first overview
https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview
ES6 模块化方案的尝试，以后就不需要打包工具了

当我们在抢红包时，微信运维在做什么？
http://mp.weixin.qq.com/s/DhHz99KzXaA6c1VXEt0flA
微信红包的数据库运维经验

Docker Introduction
https://tobiastom.name/explains/docker
非常不错的一篇介绍 Docker 的文章。

A Brief History of JavaScript
https://auth0.com/blog/a-brief-history-of-javascript/
JavaScript is arguably one of the most important languages today. The rise of the web has taken JavaScript places it was never conceived to be. We take a look at how JavaScript has evolved in its short history, and where it is headed. Read on!

新鲜货

Chrome开发者工具的小技巧
http://coolshell.cn/articles/17634.html
Chrome的开发者工具是个很强大的东西，相信程序员们都不会陌生，不过有些小功能可能并不为大众所知，所以，写下这篇文章罗列一下可能你所不知道的功能，有的功能可能会比较实用，有的则不一定。

3 New CSS Features to Learn in 2017
https://bitsofco.de/3-new-css-features-to-learn-in-2017/
With the new year, we have a whole new set of things to learn. Although there are many new features, these are 3 new CSS features I’m most excited about adopting this year.

5 web trends for 2017
https://www.oreilly.com/ideas/5-web-trends-for-2017
What’s coming with PWAs, Angular, React, and Vue; the rising tide of functional reactive; looking beyond REST to GraphQL and Falcor; and the future of artificial intelligence on the web.

ChakraCore’s first anniversary
https://blogs.windows.com/msedgedev/2017/01/13/chakracores-first-anniversary/#r5Kc6qJRc0uvz88l.97
开源一周年，虽然用得不多，但还是有不少进步

search update: improved search in the npm CLI (and how we got here)
http://blog.npmjs.org/post/156076312840/search-update
Over last month’s holidays, with the help of npms.io, npm introduced an improved search platform and brought it to the npmjs.com web experience. We’re really proud of how this project went: it was an opportunity to work with folks in the community and pull in an open-source solution that people love. As we promised at the time, here are some more details about the how and the why, and an exciting announcement about bringing new search to the npm command-line tool.

Welcoming Fabric to Google
https://firebase.googleblog.com/2017/01/FabricJoinsGoogle17.html
Twitter 移动应用开发者工具 Fabric 被 Google 收购

Super charge your Sublime Text 3 to increase your productivity
https://hackernoon.com/super-charge-your-sublime-text-3-to-increase-your-productivity-5d02c2c1b356#.cs0j57lht
一些快捷键和配置技巧

Awesome dataviz
https://github.com/fasouto/awesome-dataviz
译文： https://yq.aliyun.com/articles/45517

Awesome_API
https://github.com/marktony/Awesome_API
A collection of APIs

mo.js - Motion Graphics For The Web
http://mojs.io/
Designed for building Retina-ready ‘silky smooth’ animations and effects.

React Table
https://github.com/tannerlinsley/react-table
react-table is a lightweight, fast and extendable datagrid built for React.

Introducing Draco: compression for 3D graphics
https://opensource.googleblog.com/2017/01/introducing-draco-compression-for-3d.html
谷歌出的 3D 模型压缩格式，很适合 Web 及移动端

WebSlides
https://github.com/jlantunez/webslides
一个新的 Web 演示工具

iView
https://www.iviewui.com/
一个 VUE 的 UI 库

Big List of Naughty Strings
https://github.com/minimaxir/big-list-of-naughty-strings
各种奇怪的字符，用来测试程序健壮性

mathsteps
https://github.com/socraticorg/mathsteps
Step by steps math solutions for everyone. 详细介绍：Stepping into math: Open-sourcing our step-by-step solver

Most used words in programming languages
https://anvaka.github.io/common-words/#?lang=js

2016 Top 10 Android Library
http://stormzhang.com/2017/01/16/top-10-android-library-of-2016/
过去的 2016 年，开源社区异常活跃，很多个人与公司争相开源自己的项目，让人眼花缭乱，然而有些项目只是昙花一现，有些项目却持久创造价值，为开发者提供了极大的便利，这些终究由时间来判断。

产品及其它

2016 年那些 10w+ 文章是怎么刷爆朋友圈的
http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653433859&idx=1&sn=c2adc899029523992058f2dcd966c5b4
文中的传播路径图蛮有意思的。

你看到的大多数小程序，可能都在做错误的事情
http://mp.weixin.qq.com/s?__biz=MjM5NDUyOTAwOA==&mid=2652914751&idx=1&sn=d14ba034872872439702daa39a7bc558
一周内，我们看到了一群小程序开发者抢在“风口”来临时发布了他们的产品。一周内，我们看到“得到”的小程序下线了，看到“今日头条”的小程序“暂停服务”了。一周内，我们看到大家尝鲜、转发之后，再没声响了。在小程序正式面世后的一周，我梳理了一些信息，也做了一些小调查，接下来我会在这篇文章中把我的一些观察分享给大家。