FEX 技术周刊 - 2017/01/09

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

深阅读

复杂单页应用的数据层设计
https://zhuanlan.zhihu.com/p/24677176
飞叔新作，结合一些典型场景探讨了 Web 应用数据层的可行实现方式，对做单页应用非常有帮助。

编写「可读」代码的实践
http://taobaofed.org/blog/2017/01/05/writing-readable-code/
编写可读的代码，对于以代码谋生的程序员而言，是一件极为重要的事。从某种角度来说，代码最重要的功能是能够被阅读，其次才是能够被正确执行。一段无法正确执行的代码，也许会使项目延期几天，但它造成的危害只是暂时和轻微的，毕竟这种代码无法通过测试并影响最终的产品；但是，一段能够正确执行，但缺乏条理、难以阅读的代码，它造成的危害却是深远和广泛的：这种代码会提高产品后续迭代和维护的成本，影响产品的稳定，破坏团队的团结（雾），除非我们花费数倍于编写这段代码的时间和精力，来消除它对项目造成的负面影响。

Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability
http://blog.isquaredsoftware.com/2017/01/idiomatic-redux-thoughts-on-thunks-sagas-abstraction-and-reusability/
The redux-thunk and redux-saga libraries are the most widely-used libraries for “side effects” in Redux. There’s been a lot of recent statements arguing that thunks (and sagas) are bad and should almost never be used. As a result, I’ve seen developers confused and wondering what alternatives they have to implement a given feature. The concerns being raised are valid, but to balance the discussion, I would argue that thunks are a useful tool in Redux applications, and that developers should not be scared to use thunks in their codebase. 作者的 Idiomatic Redux 系列文章挺不错的。

The memory models that underlie programming languages
http://canonical.org/~kragen/memory-models/
There are about six major conceptualizations of memory, which I’m calling “memory models”², that dominate today’s programming. These models shape what our programming languages can or cannot do at a much deeper layer than mere syntax or even type systems. Mysteriously, I’ve never seen a good explanation of them — you pretty much just have to absorb them by osmosis instead of having them explained to you — and so I’m going to try now. Then I’m going to explain some possible alternatives to the mainstream options and why they might be interesting.

Clean Code concepts adapted for JavaScript
https://github.com/ryanmcdermott/clean-code-javascript
Software engineering principles, from Robert C. Martin’s book Clean Code, adapted for JavaScript. This is not a style guide. It’s a guide to producing readable, reusable, and refactorable software in JavaScript. Not every principle herein has to be strictly followed, and even less will be universally agreed upon. These are guidelines and nothing more, but they are ones codified over many years of collective experience by the authors of Clean Code.

The PRPL Pattern
https://developers.google.com/web/fundamentals/performance/prpl-pattern/
PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. It stands for:

• Push critical resources for the initial URL route.
• Render initial route.
• Pre-cache remaining routes.
• Lazy-load and create remaining routes on demand.

Algorithm-Driven Design: How Artificial Intelligence Is Changing Design
https://www.smashingmagazine.com/2017/01/algorithm-driven-design-how-artificial-intelligence-changing-design/
This is a story of a beautiful future, but we should remember the limits of algorithms — they’re built on rules defined by humans, even if the rules are being supercharged now with machine learning. The power of the designer is that they can make and break rules; so, in a year from now, we might define “beautiful” as something totally different. Our industry has both high- and low-skilled designers, and it will be easy for algorithms to replace the latter.

How Difficult Can It Be to Integrate Software Development Tools
https://www.infoq.com/articles/tool-integration-hard-truth
An unintegrated software development and delivery toolchain creates bottlenecks, drains productivity, impedes collaboration and inhibits project visibility. Integration of the toolchain may seem like a straight forward undertaking, but it is much more difficult than it appears initially.

React’s Five Fingers of Death. Master these five concepts, then master React
https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3#.icq5xllzf
Now don’t get me wrong, this doesn’t mean I can turn you into a React master instantly. But at least you’ll understand all the major concepts, if you do decide to jump in. The five key concepts are: Components、JSX、Props & State、The Component API、Component Types.

How I converted my React app to VanillaJS
https://hackernoon.com/how-i-converted-my-react-app-to-vanillajs-and-whether-or-not-it-was-a-terrible-idea-4b14b1b2faff#.8ghr0bw0i
This little exercise started as a React replacement project, but quickly turned into a React appreciation project. I’m quite sure that if I hadn’t been peeking over the shoulder of React, my efforts would have been a white hot mess. Frameworks will often be doing a bit of extra work that you could avoid if you wrote the code yourself, this is true. But on the whole, I think this is a fair tradeoff for the improved productivity that comes with using a well-written framework that encourages some great practices.

Authoring and publishing JavaScript modules with Flow
http://javascriptplayground.com/blog/2017/01/npm-flowjs-javascript/
I hope this blog post gives you a look into the world of writing typed JavaScript with Flow. In terms of the type system itself this blog post barely touches the power of Flow, and it’s something I’ll be writing more about as I get more comfortable with it and learn more. If you’re a library author I’d encourage you to try writing in Flow, it’s a great experience whilst developing a library and can help prevent bugs.

How to ask good questions
https://jvns.ca/blog/good-questions/
Asking good questions is a super important skill when writing software. I’ve gotten way better at it over the years (to the extent that it’s something my coworkers comment on a lot). Here are a few guidelines that have worked well for me!

[译]打造亚秒级页面加载速度网店实践经验
http://www.infoq.com/cn/articles/practice-of-create-a-sub-page-loading-speed-shop
各种性能优化经验总结

13 best practices to secure your web application
http://nodewebapps.com/2017/01/03/13-security-best-practices-for-your-web-application/
Everyone agrees that web application security is very important but few take it seriously. Here’s a 13-step security checklist that you should follow before deploying your next web application.

Node.js Interview Questions and Answers (2017 Edition)
https://blog.risingstack.com/node-js-interview-questions-and-answers-2017/
Finally and most importantly: we are all humans, so make your hiring process as welcoming as possible. These questions are not meant to be used as “Questions & Answers” but just to drive the conversation.

看我如何搞定Nodejs内存泄漏问题
http://blog.kazaff.me/2017/01/04/%E7%9C%8B%E6%88%91%E5%A6%82%E4%BD%95%E6%90%9E%E5%AE%9Anodejs%E5%86%85%E5%AD%98%E6%B3%84%E9%9C%B2%E9%97%AE%E9%A2%98/
一篇解决内存泄露问题的经验

一篇文章说清浏览器解析和CSS（GPU）动画优化
https://segmentfault.com/a/1190000008015671
整理了 GPU 合成的相关资料，另外推荐看看 Chromium 的设计文档，更详细

手机天猫解耦之路
http://www.infoq.com/cn/articles/the-road-of-mobile-tmall-decoupling
优化开发模式、完善工具等

阿里HotFix2.0升级详解 畅谈热修复领域那些事
http://mp.weixin.qq.com/s/KyDg09MpWpP7NbGXuFTlvw
比较业界的各个热修复方案，并提出基于 AndFix 的下一代方案。另附：腾讯开源手游热更新方案

也谈JavaScript数组去重
https://www.toobug.net/article/array_unique_in_javascript.html
这样一个看似简单的需求，如果要做到完备，涉及的知识和需要注意的地方着实不少。

TypedArray or DataView: Understanding byte order
https://hacks.mozilla.org/2017/01/typedarray-or-dataview-understanding-byte-order/
使用 TypedArray 的时候需要注意这个问题

新鲜货

大批 MongoDB 因配置漏洞被攻击
http://www.oschina.net/news/80766/number-of-mongodb-databases-be-attacked
另附：耗子哥的 从 MONGODB “赎金事件” 看安全问题、MongoDB 官方的：How to Avoid a Malicious Attack That Ransoms Your Data

微信iOS客户端将升级为WKWebview内核
http://mp.weixin.qq.com/s?__biz=MjM5NDAxMDg4MA==&mid=2650959275&idx=1&sn=56040489ba61ab7327ab2567a9635dd8
微信iOS客户端将于3月1日前逐步升级为WKWebview内核，请网页开发者尽快做好各自网站的兼容检查，完成适配。WKWebview是苹果为支持最新的Webkit功能，自iOS 8起引入的网页浏览控件。开发者可以在微信已发布的6.5.3版本客户端中，手动切换到WKWebview，再检查自己的网页表现是否正常。

Inferno - An extremely fast, React-like JavaScript library
https://www.infernojs.org/
Inferno is an insanely fast, 9kb 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.

React-Motion
https://github.com/chenglou/react-motion
A spring that solves your animation problems.

Transitioning Firefox’s rendering engine from Gecko to Servo
http://jensimmons.com/post/jan-4-2017/replacing-jet-engine-while-still-flying
For the past several years, Mozilla’s been working on a brand new, top-secret engine. Except it’s totally not top-secret. Never was. At another company it would have been a top-secret project. At Mozilla, it’s all done out in the open. The project is called Servo. It was started as an experiment. It’s coded in a new programming language called Rust. Servo is a modern, high-performance browser engine designed for both application and embedded use.

flatpickr - javascript datetime picker
https://github.com/chmln/flatpickr
lightweight and powerful datetimepicker with no dependencies

ZOOM.JS
https://github.com/nishanths/zoom.js
A pure JavaScript image zooming plugin;as seen on Medium.com.

UNPKG
https://unpkg.com/
unpkg is a fast, global content delivery network for stuff that is published to npm. Use it to quickly and easily load files using a simple URL like: https://unpkg.com/package@version/file

loadjs
https://github.com/muicss/loadjs
LoadJS is a tiny async loading library for modern browsers (IE9+). It has a simple yet powerful dependency management system that lets you fetch JavaScript and CSS files in parallel and execute code after the dependencies have been met. The recommended way to use LoadJS is to include the minified source code in your <html> and then use the loadjs global to manage JavaScript dependencies after pageload.

A simple HTTP/2 server for development
https://github.com/GoogleChrome/simplehttp2server
simplehttp2server serves the current directory on an HTTP/2.0 capable server. This server is for development purposes only.

Viz.js — Graphviz in your browser
http://mdaines.github.io/viz.js/
Graphviz is open source graph visualization software. Graph visualization is a way of representing structural information as diagrams of abstract graphs and networks. It has important applications in networking, bioinformatics, software engineering, database and web design, machine learning, and in visual interfaces for other technical domains. Viz.js is a hack to put Graphviz on the web.

3 JavaScript Libraries to Keep an Eye on in 2017
https://www.sitepoint.com/3-javascript-libraries-2017/
Vue.js、Svelte、Conditioner.js

Test how mobile-friendly your site is
https://testmysite.thinkwithgoogle.com/
来自 Google 的工具：Test how mobile-friendly your site is.

HTML5 Canvas Gauge
https://github.com/Mikhus/canvas-gauges
This is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

marky
https://github.com/nolanlawson/marky
High-resolution JavaScript timer based on performance.mark() and measure()

Anbody used Ant Framework? Looks awesome!
https://forums.meteor.com/t/anbody-used-ant-framework-looks-awesome/32658
国外社区对 antd 的讨论，antd 在国外社区也越来受欢迎了。

What did you do after quitting the IT industry and how have things been?
https://news.ycombinator.com/item?id=13337305
围观下老外关于退出 IT 行业后干啥的讨论。

Grumpy: Go running Python
https://opensource.googleblog.com/2017/01/grumpy-go-running-python.html
Grumpy is an experimental Python runtime for Go. It translates Python code into Go programs, and those transpiled programs run seamlessly within the Go runtime. The goal is for Grumpy to be a drop-in replacement runtime for any pure-Python project.

Font Face Observer Build Status
https://github.com/bramstein/fontfaceobserver
Font Face Observer is a small @font-face loader and monitor (3.5KB minified and 1.3KB gzipped) compatible with any web font service. It will monitor when a web font is applied to the page and notify you. It does not limit you in any way in where, when, or how you load your web fonts. Unlike the Web Font Loader Font Face Observer uses scroll events to detect font loads efficiently and with minimum overhead.

vonic
https://github.com/wangdahoo/vonic
Mobile UI Components, based on Vue.js and ionic CSS.

产品及其它

CES 2017
http://www.ces.tech/
关注下今年有啥高科技，附：CES2017十大最具看点新品 、 CES 2017 上有不少黑科技，但主角并不是硬件

10 Web Predictions for 2017
https://www.sitepoint.com/10-web-predictions-for-2017/
Each year, Craig Buckler makes 10 predictions about the year to come, and gives himself a score for the previous year. Read on to see how he performed in 2016, and what he predicts for the web in 2017!

关于约束、掌控、选择与自由
http://mp.weixin.qq.com/s?__biz=MjM5NDUyOTAwOA==&mid=2652914523&idx=1&sn=73312597e60090cf7d84e4022533140f
世界上存在两类人。一类人叫做约束者，永远面临的是无尽的任务与约束；另一类人叫做选择者，他们面前则总是无限的选择与自由。约束者要去完成一件事，动机往往是“不得不做”。选择者要去完成一件事，都是为了“让自己感觉更好”。

小团队与抠需求
http://www.jianshu.com/p/b20ff184c079
研发浪费通常发生在三个地方：方向上的浪费、低价值需求的浪费、产品经理level高低带来的浪费。如果能得到良好控制，程序员减少几倍，沟通成本随之减少几倍，带动研发效率翻倍上升，就可以实现 APP 由小团队来完成。小团队的精髓并不是牛逼的程序员，而是对需求的冷静把控。产品发展起来，融资到位以后，真正杀死小团队的不是业务成长，而是亢奋带来的需求膨胀。Medium 近期的计划可以算是这篇文章的典型案例：Venture capital is going to murder Medium、Renewing Medium’s focus 、译文在这里：http://www.ifanr.com/771571