FEX 技术周刊 - 2016/11/21

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

业界会议

Chrome Dev Summit 2016
https://blog.chromium.org/2016/11/chrome-dev-summit-2016-mobile-web-moves.html https://developer.chrome.com/devsummit/ 附 w3ctech 关于这次会议的内容整理、来自 auth0工程师的参会记录

SDCC 2016中国软件开发者大会
http://sdcc.csdn.net/ 可关注前端专场和微信开发专场。会议 PPT 下载： http://download.csdn.net/meeting/meeting_detail/23

深阅读

React v15.4.0
https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html
15.4.0 is a special release, and we would like to highlight a few notable changes in it:

• Separating React and React DOM
• Profiling Components with Chrome Timeline
• Mocking Refs for Snapshot Testing

What Test Engineers do at Google: Building Test Infrastructure
https://testing.googleblog.com/2016/11/what-test-engineers-do-at-google.html
In a recent post, we broadly talked about What Test Engineers do at Google. In this post, I talk about one aspect of the work TEs may do: building and improving test infrastructure to make engineers more productive.

Node.js Garbage Collection Explained
https://blog.risingstack.com/node-js-at-scale-node-js-garbage-collection/
In this article, you are going to learn how Node.js garbage collection works, what happens in the background when you write code and how memory is freed up for you.

Not An Imposter: Fighting Front-End Fatigue
https://www.smashingmagazine.com/2016/11/not-an-imposter-fighting-front-end-fatigue/
这几个观点挺不错的：

• Get Your Fundamentals Locked In
• You Don’t Need To Learn Everything
• Most Companies Aren’t Using Bleeding Edge Tech
• The More You Learn, The More You Discover You Don’t Know, And That’s Okay
• Don’t Spend All Your Free Time Learning

You, Me And The Emoji: Character Sets, Encoding And Emoji
https://www.smashingmagazine.com/2016/11/character-sets-encoding-emoji/
We all recognize emoji. They’ve become the global pop stars of digital communication. But what are they, technically speaking? And what might we learn by taking a closer look at these images, characters, pictographs… whatever they are. We will dig deep to learn about how these thingamajigs work.

Infoq- 双 11 技术专栏

http://www.infoq.com/cn/1111
学习下这场狂欢背后各家的关键技术。

Nodejs 线上服务稳定性保障体系
https://zhuanlan.zhihu.com/p/23778500
来自大搜车的实践经验，本文会有条理的将我们团队在稳定性保障方面做的一些事情与大家分享，文中着重强调“线上”服务的保障，尽量不会涉及开发过程中的话题，改天会就开发过程的质量保障另外介绍。另外，我们在此方面也并非完全成熟，大家可以作为参考，但也许并非最佳实践，本文我会尽量讲我们的解决问题的思路，而不是最终如何执行。

如何打造亚秒级页面加载速度的网店

http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247484506&idx=1&sn=89d0588e5522956183dd560bc86112f8
良好的用户体验需要从三方面来实现：前端、网络，以及后端性能。前端性能在我们看来是最容易实现的，因为市面上已经有很多现成的工具以及各种最佳实践，照做很容易就能搞定。但依然有很多网站没有参照这些最佳实践，甚至完全没有对前端进行任何优化。网络性能是页面加载速度的最大影响因素，同时也是最难优化的。缓存和CDN是最有效的优化方法，但需要注意到，这些机制只能对静态内容进行优化。后端性能主要取决于单台服务器的性能以及分布式环境的规模。横向扩展非常难以实现，因此从一开始就要妥善考虑。很多项目将缩放能力和性能放在最后考虑，随着业务的增长最终将遇到非常棘手的问题。
另附一篇性能强相关的文章：HTTP缓存详解

Vue 的理念问题
https://zhuanlan.zhihu.com/p/23752826
赞 Vue 作者的观点：Vue 有一个其他框架真的都没有的理念，同时也是我觉得真正关系到 Vue 的成功的一点，那就是『把高大上的思想变得平易近人』。每个喜欢 Vue 的用户，都会提到容易上手和文档友好。易用性不是偶然的，做到易用而强大也不是简单的事情。

Atom 背后的故事

http://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651223882&idx=1&sn=717a539c27e2d60c9d92b0ea1348cbf7
Atom 是 GitHub 在 2014 年发布的一款基于 Web 技术构建的文本编辑器，我从 2014 年末开始使用 Atom 完成我的全部工作，对 Atom 很是喜爱，也创建了 Atom 的中文社区、翻译了一部分 Atom 的文档和博客。今天我将着重介绍 Atom 背后的故事，包括底层的 Electron、如何对 Atom 进行定制、Atom 的插件化机制、Atom 在启动速度和渲染性能方面的优化等。
另附一篇 Electron 科普文：[译]Electron 的本质

Why AlloyFinger is so much smaller than hammerjs
http://www.cnblogs.com/iamzhanglei/p/6064325.html
AlloyFinger 向国外社区介绍自己的文章。期待越来越多的国内类库走向世界。

React Native初探
http://www.cnblogs.com/yexiaochai/p/6042112.html
挺全面的一个 RN 学习教程，还收录了很多资料。

Why I took October off from OSS volunteering
http://www.snarky.ca/why-i-took-october-off-from-oss-volunteering
维护过不少开源项目的 FEX 成员表示深有感触

The Coming Revolution in Email Design
http://alistapart.com/article/the-coming-revolution-in-email-design
Email, the web’s much maligned little cousin, is in the midst of a revolution—one that will change not only how designers and developers build HTML email campaigns, but also the way in which subscribers interact with those campaigns.

Choosing Ember over React in 2016
https://blog.instant2fa.com/choosing-ember-over-react-in-2016-41a2e7fd341#.7nirza98m
One month ago, we started working on a new product: Instant 2FA, the easiest way to add two-factor authentication to any site in less than an hour. This blog post outlines our thinking behind choosing Ember (a technology none of us had ever used before) over React (which we’ve been running for 2.5 years in production at Clef) and our reflections on the decision after one month of work.

Write Reusable JavaScript Business Logic with peasy-js
https://www.sitepoint.com/reusable-javascript-business-logic-peasy-js/
peasy-js makes it trivial to whimsically swap out UI, backend, and data frameworks in your applications by creating your business logic in a composable, reusable, scalable, and testable manner.

Abusing npm libraries for data exfiltration
https://blog.sourceclear.com/all-your-secrets-belong-to-us/
In this blog post, we demonstrate how an attacker can use npm to exfiltrate information from the developer’s machine. Although we show the attack scenarios for npm, similar attacks can also be done on other package managers like gradle.

NodeJS Advanced - How to create a native add-on using C++
https://github.com/DAB0mB/node-distance-addon/blob/master/README.md
In this tutorial we gonna go through the basics on how to write a native add-on to NodeJS using C++, one of the platform’s most powerful capabilities of which most web/JS developers now a days are not even familiar with.

Migrating to Jest
https://medium.com/@kentcdodds/migrating-to-jest-881f75366e7e#.t98xx6gqu
Jest https://github.com/facebook/jest 在 PayPal 的实践。

How We Make Money at Stack Overflow: 2016 Edition
http://stackoverflow.blog/2016/11/How-We-Make-Money-at-Stack-Overflow-2016-Edition/
可以了解下 stack overflow 的商业模式。

手机APP安装包缩减方案
http://tmq.qq.com/author/153906054/
如何发现和优化体积

WebP原理和Android支持现状介绍
http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653578220&idx=1&sn=bdc57c640427984e240b19d8b9e10a15
目前各大公司都已经使用了

新鲜货

Visual Studio Development – Introducing Visual Studio for Mac
https://msdn.microsoft.com/en-us/magazine/mt790182.aspx
https://www.visualstudio.com/vs/visual-studio-for-mac/
At Connect(); in November, Microsoft is launching a preview of Visual Studio for Mac. This is an exciting development, evolving the mobile-centric Xamarin Studio IDE into a true mobile-first, cloud-first development tool for .NET and C#, and bringing the Visual Studio development experience to the Mac. 同时，微软还成为了 Linux 基金会的白金会员

Google Earth VR

https://vr.google.com/earth/
https://blog.google/products/google-vr/google-earth-vr-bringing-whole-wide-world-virtual-reality/
Google 发布了 Google Earth VR，效果很震撼。

**Next.js
https://github.com/zeit/next.js
https://medium.com/javascript-mantra/next-js-53e9cf4da5af#.7vfoq7evi
Next.js is a minimalistic framework for server-rendered React applications. 挺火的一个库，推出没多久 star 已经 6000 多了。其设计理念如下：

• Zero setup. Use the filesystem as an API
• Only JavaScript. Everything is a function
• Automatic server rendering and code splitting
• Data fetching is up to the developer
• Anticipation is the key to performance
• Simple deployment

mo.js

https://css-tricks.com/introduction-mo-js/
http://mojs.io/
mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation. Even though mo.js is still in beta, there is already a host of amazing features to play with.

Angular 2.2.0 Now Available

http://angularjs.blogspot.com/2016/11/angular-220-now-available.html
Angular version 2.2.0 - is now available. This is a minor release following our announced adoption of Semantic Versioning, meaning that it contains no breaking changes and that it is be a drop-in replacement for 2.1.x.

Clarity Design System
https://github.com/vmware/clarity
UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences. 来自 vmware 的 UI 组件库。

Preact
https://github.com/developit/preact/
Preact is a fast, 3kB alternative to React, with the same ES2015 API. Preact retains a large amount of compatibility with React, but only the modern (ES6 Classes and stateless functional components) interfaces. As one would expect coming from React, Components are simple building blocks for composing a User Interface.

Choo
https://github.com/yoshuawuyts/choo
https://www.sitepoint.com/functional-programming-choo/
choo cleanly structures internal data flow, so that all pieces of logic can be combined into a nice, cohesive machine. Internally all logic lives within models that contain several properties. subscriptions are functions that are called at startup and have send() passed in, so they act as read-only sources of data. effects react to changes, perform an action and can then post the results. reducers take data, modify it, and update the internal state.

Pino

https://github.com/pinojs/pino
http://www.nearform.com/nodecrunch/sematext-guest-post-pino-fastest-node-js-logger-production/
Extremely fast node.js logger, inspired by Bunyan. It also includes a shell utility to pretty-print its log files.

Celery 4.0

http://docs.celeryproject.org/en/latest/whatsnew-4.0.html
Celery is a simple, flexible, and reliable distributed system to process vast amounts of messages, while providing operations with the tools required to maintain such a system. It’s a task queue with focus on real-time processing, while also supporting task scheduling.

The First Object Database for Node: Introducing Realm Node.js
https://realm.io/news/first-object-database-realm-node-js-server/
At Realm, we’re very focused on mobile developers, and have built and open-sourced Realm Mobile Database versions for Swift, Objective-C, Java, Xamarin, and React Native. But today, we’re announcing something completely different: Realm Node.js. We’re pretty sure this is the first real object database for Node, and is available today on NPM as a free and fully open source repo – just run npm install –save realm.
视频教程 https://egghead.io/lessons/node-js-use-realm-object-database-with-node-js

12 JavaScript libraries to watch in 2017

http://www.webdesignerdepot.com/2016/11/12-javascript-libraries-to-watch-in-2017/
Most developers already know the big names like jQuery and React. But in this post I’d like to introduce twelve alternative JS libraries that are less well-known but rising rapidly.
另附：15 Interesting JavaScript and CSS Libraries for November 2016

Clarity Design System
https://github.com/vmware/clarity
UX guidelines, HTML/CSS framework, and Angular 2 components working together to craft exceptional experiences. 来自 vmware 的 UI 组件库。

ChaosSocket
https://zzarcon.github.io/chaosocket/
Chaosocket aims to provide you a set of tools to test this sort of behaviours, also it respects the WebSocket interface, making this transparent to you, this means that you don’t have to modify your code at all when you introduce the library in your app.

Running NodeJS on Linux on Windows
https://hackernoon.com/running-nodejs-on-linux-on-windows-88bd12993bae#.esg8xldwo
介绍了 WSL https://msdn.microsoft.com/en-us/commandline/wsl/about 给 windows 下 node 开发中的代来的便利

Best of Visual Studio Code: Features, Plugins, Acting Like Atom and Sublime
https://scotch.io/tutorials/best-of-visual-studio-code-features-plugins-acting-like-atom-and-sublime
vscode 挺好用的，没用过的赶紧去体验下。

产品及其它

ICQ: 20 Years Is No Limit!
https://medium.com/@Dimitryophoto/icq-20-years-is-no-limit-8734e1eea8ea#.grm5dt7ql
译文 http://mp.weixin.qq.com/s?__biz=MjM5NDUyOTAwOA==&mid=2652913882&idx=1&sn=174c8d7803f99027aa805c4ab2aa2834
ICQ is turning 20 (and that is no small potatoes). A whole generation has already grown up with the forerunner of all messengers. For this occasion, we have decided to take a retrospective look at how our technology developed over the past two decades.

技术债：the good, the bad, and the tao
http://mp.weixin.qq.com/s?__biz=MzA3NDM0ODQwMw==&mid=2649827509&idx=1&sn=61a7adbeb49a105b9a22bae41614d07f
技术债是每个技术团队都面临的问题，技术债并非洪水猛兽，我们要要合理控制，让其发挥债务的优势。作者这几个处理建议值得参考：

• 拥抱 MVP。先解决温饱问题，再考虑还债。
• 把技术债外包出去
• 雇佣你所能获得的最优秀的人，给予她们你所能给予的，最能发挥她们能力的权限。
• 拥抱匡威定律。你的组织架构决定了你的代码结构。想要快速独立的功能交付能力，你要有包含所有角色，拥有直接决策权的端到端的功能团队，而不是开发，测试，运维等彼此独立。
• 在实现上可以多些负债，在接口上尽量减少负债。

虚幻与喧嚣，互联网时代真的要落幕了
http://mp.weixin.qq.com/s?__biz=MjM5OTM5OTAyMQ==&mid=2654430480&idx=1&sn=c903fe8efd4301939b124a439e553871
这个文章从对当前互联网的一些现象尤其是创业相关的分析还是挺值得看看的。

被忽略的交互设计本质
http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653433671&idx=1&sn=74acc467e43f3f73de73ae76f203ca7d
谈论交互设计本质是起源于日常的很多谈论，不管是向朋友介绍自己从事“交互”相关岗位，还是需要向亲戚通过三言两语解释自己的工作内容；甚至在工作的上下游沟通中，也经常会被问道“你怎么就判断用户是这么想的”“产品如何从0（概念）到1（页面界面）的”；这些问题促使我想要追本溯源，捋顺一下交互的由来、工作内容，以及依照什么方法执行等问题。

稻盛和夫：除了拼命工作之外，不存在第二条通往成功的路
http://mp.weixin.qq.com/s?__biz=MzA5Mzk0NjQwOA==&mid=2653198516&idx=5&sn=e9c76dc9c11f4a6fe8d00708ba63f51a
当你每天都全身心投入工作时，低效的、漫不经心的现象就会消失。拼命工作可以磨练灵魂。人一旦有了闲暇，就会动起不正经的念头，干不正经的事。企业经营的根本意义和真正目的既不是圆技术者之梦，也不是肥经营者一己之私。经营者必须为员工的幸福殚精竭虑，必须超脱私心，让企业拥有大义名分。 “无论如何也要达成目标”这一愿望的强烈程度，正是事情成败的关键所在。

前 Facebook 副总裁：伟大的公司每六年出现一个，关键在于找到受限制资源
http://mp.weixin.qq.com/s?__biz=MzA5NzAzMjIxMw==&mid=2650925567&idx=3&sn=4770ebfac8a8ea3f1ca48dc51bcd9ada
当大家都在做记忆芯片，英特尔就做CPU；当大家都在拼命做PC的时候，微软就做操作系统；当大家都在做操作系统的时候，思科决定把所有电脑连接起来；当大家都在想着怎么样让电脑相互连接，谷歌想到的是如何组织机器之间的信息……结果他们都赢了。尽管公司主体不同，你会看到同一套规则在发生作用：找到受限制的资源并使之变得富足，是成就伟大企业的底层密码。