FEX 技术周刊 - 2016/12/05

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

业界会议

Velocity China 2016：构建弹性系统 - 12.01-12.02
http://velocity.oreilly.com.cn/2016/
可以看看各大公司在性能优化和运维方面的实践经验

2016年OSC北京源创会年终盛典 - 12.04
https://www.oschina.net/2016-beijing-ceremony
源创会年终盛典是由“开源中国社区”主办的开源技术盛会，一年一次，旨在推广和传播开源技术，关注开源社区和开发者、关注开源软件和技术实践、关注前沿科技和技术新领域。年终盛典的主题是从今年以来开源软件技术的众多主题中选取出来的精华，抛弃了华而不实的背景和光环，让技术分享回归到开源软件本身，落实到软件代码，为开发者打造一场酣畅淋漓的纯技术分享盛典。

深阅读

V8 Release 5.6
http://v8project.blogspot.com/2016/12/v8-release-56.html
V8 version 5.6, which will be in beta until it is released in coordination with Chrome 56 Stable in several weeks. V8 5.6 is filled will all sorts of developer-facing goodies, so we’d like to give you a preview of some of the highlights in anticipation of the release: Ignition and TurboFan pipeline for ES.next (and more) shipped; Performance improvements; WebAssembly browser preview;

Amazon States Language
https://states-language.net/spec.html
This document describes a JSON-based language used to describe state machines declaratively. The state machines thus defined may be executed by software. In this document, the software is referred to as “the interpreter”.

GitChat - 从前端 Leader 到 客户端 Leader
http://mp.weixin.qq.com/s?__biz=MzIwNjEwNTQ4Mw==&mid=2651576742&idx=2&sn=98fda46d23d57a9a269c610ba49ba499&chksm=8cd9c742bbae4e54b281cafdb3994511921a900637aa39a726381cf3c203706c6e41a68131e7&scene=0#rd
来自美团大前端技术负责人 Rank 大叔在 GitChat 上的交流，设计到端相关的技术以、团队管理、个人成长等内容，精彩不容错过，请大家微信扫描打开。GitChat 最近挺火的，挺有意思的一个产品。这么多有价值的信息，不能在微信生态外传播，挺遗憾的。

如何看待民工叔因为 Teambition 是 React 技术栈而离职
https://www.zhihu.com/question/53022579
民工叔的离职引发了业界的官方关注，看看大家对如何用人、如何进行技术选型、团队内如何调好不同的理念等问题的思考吧。

The State of Front-End Tooling 2016 - Results
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2016-results
了解下大家都在用什么。译文：https://segmentfault.com/a/1190000007666924

Writing Native Node.js Modules - Node.js at Scale
https://blog.risingstack.com/writing-native-node-js-modules/
There are times when the performance of JavaScript is not enough, so you have to depend more on native Node.js modules. While native extensions are definitely not a beginner topic, I’d recommend this article for every Node.js developer to get a bit of knowledge on how they work.

The Most Common XSS Vulnerability in React.js Applications
https://medium.com/node-security/the-most-common-xss-vulnerability-in-react-js-applications-2bdffbcc1fa0#.x9yhmtww8
People are often drawn towards using React.js thanks to the benefits of isomorphic (or universal) rendering. That is, the ability to render your single page application on the server-side, send the html to the client and have the client become interactive without having to re-rendering the entire page.

JavaScript Developers: Watch Your Language
https://bocoup.com/weblog/javascript-developers-watch-your-language 了解下 JS 语言规范的 API 的不同阶段，对决定在项目中改用哪些新 feature 有参考意义。

微信小程序云端解决方案探索之路
https://github.com/tencentyun/blog/issues/1 详细介绍了腾讯云小程序一站式解决方案背后的技术细节。另附：腾讯内部首个被张小龙点赞的小程序是怎么开发出来的

百度输入法在启动速度、智能手写、语音输入上所做的技术优化
http://www.infoq.com/cn/news/2016/11/baidu-mobile-terminal-input-meth
第68期百度技术沙龙邀请了百度输入法团队的研发工程师们，从三个方面解析百度输入法移动端输入技术，包括对 iOS 输入法启动速度和内存的优化措施；AI 在手写引擎中的应用，输入体验的提升；以及智能语音输入的技术核心，实现方式，优化细节等。

美团点评酒旅前端的技术体系
https://zhuanlan.zhihu.com/p/23976121
技术体系指社会中各种技术之间相互作用、相互联系、按一定目的、一定结构方式组成的技术整体。技术体系是科技生产力的一种具体形。结合前端研发的特点，一个完备的技术体系应当包括流程规范（涵盖开发、构建、部署、运行的各个阶段）、技术工具栈（技术选型和基础工具设施）、构建工具栈、自动化测试、部署流程和部署平台、监控体系（错误监控、性能监控、业务监控、服务监控）。另附：美团大众点评 Hybrid 化建设 。

[译]前端 MVC 已死吗？
http://www.zcfy.cc/article/is-model-view-controller-dead-on-the-front-end-1603.html
越来越多的前端开发者采用单向架构。那么经典的“模型-视图-控制（MVC）”前景如何呢？

[译]7种方式实现web下划线
http://www.lixuejiang.me/2016/11/27/7%E7%A7%8D%E6%96%B9%E5%BC%8F%E5%AE%9E%E7%8E%B0web%E4%B8%8B%E5%88%92%E7%BA%BF/
有许多种不同的方式来实现下划线，你也许还记得 Crafting link underlines on Medium 这篇文章。Medium也不是想做什么疯狂的事情，他们只是想让他们的文字下面好看一点。这是一条基本的下划线，它大小合适。绝对比浏览器的默认样式好看的多。所以，看上去Medium为了实现这个效果也经历了许多困难。两年后，实现一个好看的下划线依然一样困难

The magic behind styled-components
http://mxstbr.blog/2016/11/styled-components-magic-explained/
Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier! styled-components is compatible with both React (for web) and ReactNative – meaning it’s the perfect choice even for truly universal apps! See the ReactNative section for more information

Scoped Selectors for Redux Modules
http://www.datchley.name/scoped-selectors-for-redux-modules/
Namely, the reusability of selectors when using Redux in applications with more complex state and decomposed reducers (using combineReducers() vs a single, top-level reducer). Specifically, I’ve been trying to determine how to have selectors, defined parallel with their related reducer, that work on both the localized state and the global state.

What’s New in HTML 5.1
https://www.sitepoint.com/whats-new-in-html-5-1/
While HTML 5.1 was still in development, the W3C has already started working on a draft of HTML 5.2 which is expected to be released in late 2017. In the meantime, here’s an overview of some of the interesting new features and improvements introduced in 5.1. Browser support is still lacking for these features but we’ll refer you to at least some browsers which can be used to test each example.

Service Worker, what are you ?
http://kosamari.com/notes/Service-Worker-what-are-you
总结了 Service Worker 的典型使用场景：Interact with Cache; Send Push Notification; Run Background Sync;

I made an iPhone game with PhoneGap and I’ll never do it again
https://bokstuff.com/i-made-an-iphone-game-with-phonegap-and-ill-never-do-it-again/
I’m never going to develop a webview app again. Not having to learn a new language was great, but it wasn’t worth the performance hit and quirks I encountered along the way. The fact that I should be able to easily port this to Android and other platforms is nice too, but I’m sure those platforms are going to have their own quirks and performance problems. If you’re thinking about developing a game like this, just do yourself a favor and go native instead. You won’t regret it.

How Font Awesome 5 Became Kickstarter’s Most Funded Software Project
https://articles.fortawesome.com/how-font-awesome-5-became-kickstarters-most-funded-software-project-4a63c035e84#.pklbk1wby
The Font Awesome 5 Kickstarter raised $1,076,940 with 35,549 backers, making it the most funded and most backed software Kickstarter of all time (and if you haven’t seen the video yet, please take a moment to watch just below — we genuinely think you’ll get a chuckle out of it).

HPACK: the silent killer (feature) of HTTP/2
https://blog.cloudflare.com/hpack-the-silent-killer-feature-of-http-2/
If you have experienced HTTP/2 for yourself, you are probably aware of the visible performance gains possible with HTTP/2 due to features like stream multiplexing, explicit stream dependencies, and Server Push. This blog post gives an overview of the reasons for the development of HPACK, and the hidden bandwidth and latency benefits it brings.

新鲜货

Svelte • The magical disappearing UI framework
https://svelte.technology/guide
https://github.com/sveltejs/svelte
https://svelte.technology/blog/frameworks-without-the-framework/
If you’ve ever built a JavaScript application, the chances are you’ve encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. But Svelte has a crucial difference: rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don’t pay the performance cost of the framework’s abstractions, or incur a penalty when your app first loads.

InfernoJS – a JavaScript library for building powerful user interfaces
https://github.com/trueadm/inferno Inferno is an insanely fast, 7kb React-like library for building high-performance user interfaces on both the client and server. Inferno aims to provide all the great benefits that React does, plus other great features for people already familiar with the React ecosystem, such as: lifecycle events on functional components, server side render streams, better real-world performance, lower memory consumption and faster parse/load times.

IBM, Intel, Microsoft, Mozilla and NodeSource Join Forces on Node.js API
https://medium.com/@nodejs/ibm-intel-microsoft-mozilla-and-nodesource-join-forces-on-node-js-48e21ffb697d#.hpg37amr4 Today, we are excited to announce several initial milestones in these efforts. The first is centered around Node.js API (ABI Stable Module API or NAPI for short), which is focused on defining a stable module API that is independent from changes in V8. 另附：Node-ChakraCore and VM Neutrality in Node.js

Show HN: Antd – A set of high-quality React components
http://www.daemonology.net/hn-daily/2016-11-28.html
https://news.ycombinator.com/item?id=13053137
Antd 被国际同行广泛关注，欢迎大家在后台系统中使用。

腾讯QQ团队开源分布式后台毫秒服务引擎全解析
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650994968&idx=1&sn=6713bb3b59e1fb38c70f7178de136cfc
http://haomiao.qq.com/ 毫秒服务引擎(Mass Service Engine in Cluster)是一个开源框架，适用于在廉价机器组成的集群上开发和运营分布式后台服务。毫秒服务引擎集RPC、名字发现服务、负载均衡、业务监控、灰度发布、容量管理、日志管理、key-value存储于一体。毫秒服务引擎的创作冲动和构建经验，来自QQ后台团队超过10年的运营思考。它是一整套解决方案，但也可以拆分的来使用其中的监控、key-value存储单品。

The first release candidate of Redis 4.0 is out
http://www.antirez.com/news/110
But well, finally with 4.0 we got a lot of these stuff done… and here is the list of the big ones, with a few details and pointers to learn more. Modules. Replication version 2. Cache eviction improvements. Non blocking DEL and FLUSHALL/FLUSHDB. Mixed RDB-AOF persistence format. Redis Cluster is now NAT / Docker compatible. The new MEMORY command. 另附：Redis + Node.js: Introduction to Caching

Running ReactOS in a Web Browser
https://60devs.com/running-react-os-in-browser.html
Recently it became possible to run ReactOS in any modern web-browser thanks to the x86 virtual machine Virtual x86. The VM is written in JavaScript and works well not only in your browser but also in NodeJS.

Grafana 4.0 - Beautiful metric & analytic dashboards
http://grafana.org/
Grafana provides a powerful and elegant way to create, explore, and share dashboards and data with your team and the world. Grafana is most commonly used for visualizing time series data for Internet infrastructure and application analytics but many use it in other domains including industrial sensors, home automation, weather, and process control.

MultiPicker - A Flexible Picker for Mobile
https://github.com/AppianZ/multi-picker
『为移动端而生』的自定义多级联动选择器，可处理各种类型的多级联动，例如城市联动，时间联动。

Jq – Work with JSON on the command line
http://200ok.ch/jq-my-new-favorite-tool-to-work-with-json-on-the-command-line/index.html
jq is like sed for JSON data - you can use it to slice and filter and map and transform structured data with the same ease that sed, awk, grep and friends let you play with text. 另附：JSON-Splora: GUI for Editing, Visualizing, and Manipulating JSON Data

frp
https://github.com/fatedier/frp
frp is a fast reverse proxy to help you expose a local server behind a NAT or firewall to the internet. Now, it supports tcp, http and https protocol when requests can be forwarded by domains to backward web services.

reasondb
https://github.com/anywhichway/reasondb
The first 100% native JavaScript automaticaly synchronizing object database with a SQL like syntax (JOQULAR) and swapable persistence engines for the browser or NodeJS . ReasonDB also supports JSON projections or live object result sets, asynchronous cursors, streaming analytics, 18 built-in predicates (including soundex and RegExp matching), in…

Cyclotron: A web application for constructing dashboards
https://github.com/ExpediaInceCommercePlatform/cyclotron
Cyclotron is a browser-based platform for creating dashboards. It provides standard boilerplate and plumbing, allowing non-programmers to easily create and edit dashboards using customizable components. It has a built-in dashboard editor, and hosts the dashboards directly. Dashboards are defined declaratively as a JSON document, which contains all the properties required to render the Dashboard.

Advanced Data Tables in React
https://techblog.commercetools.com/advanced-data-tables-in-react-dbe33f8345ab#.x00ivboxn
In React there is a handful of options for building data tables. Here are the ones we looked at: react-data-grid; react-virtualized FlexTable; react-datagrid; fixed-data-table; ag-grid.

The Lua VM, on the Web
http://daurnimator.github.io/lua.vm.js/lua.vm.js.html
This is an experiment in running Lua on the web, by porting the Lua C implementation to JavaScript using Emscripten.

Int64 and Uint64 Now Stage 1 Proposals
http://www.slideshare.net/BrendanEich/int64
Int64 & Uint64 are now Stage 1 proposals for an ECMA-262 future edition

CRYPTO101
https://www.crypto101.io/
Crypto 101 is an introductory course on cryptography, freely available for programmers of all ages and skill levels.

AnyBar: OS X menubar status indicator
https://github.com/tonsky/AnyBar
AnyBar is a small indicator for your menubar that does one simple thing: it displays a colored dot. What the dot means and when to change it is up to you.

产品及其它

Customize your G Suite experience with App Maker and Recommended apps
https://blog.google/products/g-suite/customize-your-g-suite-experience-app-maker-and-recommended-apps/
App Maker is a low-code, application development tool that lets you quickly build and deploy custom apps tailored to your organization’s needs. Whether you’re looking for better ways to onboard new team members, staff projects, or approve employee travel requests, App Maker helps you build an app for that in days instead of months.

亚马逊 CTO：云架构师都应该知道的六大定律
http://mp.weixin.qq.com/s?__biz=MjM5MzM3NjM4MA==&mid=216101937&idx=2&sn=6f8b260b942ef76a7db142a65b64a70d
如果完全依赖历史数据中观察到的关系，就预测变化的影响，这是很幼稚的做法；一个切实可行的复杂系统势必是从一个切实可行的简单系统发展而来的；每个软件单位对其他单位应该都只有最少的知识，而且局限于那些与本单位密切相关的单位，每个软件单位应该只与它的朋友说话；不要与陌生人说话；需要最少假设的那个解释应该被选中；大型网络、尤其是社交网络的功效会随着网络规模呈指数级增加；大型网络、尤其是社交网络的功效会随着网络规模呈指数级增加；

4个步骤提升交互思维
http://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653433706&idx=1&sn=2ae17e896290200b0e5cf4d62e74ef64
认知用户、定义设计的过程总是千头万绪的，各个流程之间也是交叉进行的，商业设计的具体实践中很难真的遵循如此明确的流程。源于对具体设计问题的理解，大致可以将交互设计的过程分成四个步骤：识别需求，模拟场景（define、discover；理清设计机会、定义功能（synthesize、construct）；交互流程与原型图（construct、refine）；反思评估、规范化（refine、reflect）。

技术人生打怪升级的攻略秘籍 - 君山
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650994977&idx=1&sn=350d50c72a21cd7337572aa5d4149d02
介绍新人成长中遇到的一些技巧性的问题，从两个维度介绍新人成长过程中（从普通的工程师到架构师，从架构师再到技术TL）如何从内在思维上提升自己。 另附：十年工龄的程序员为你揭示最危害程序员职业生涯的三大观念 、技术的成长曲线 。