FEX 技术周刊 - 2017/04/05

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

深阅读

Simple React Development in 2017
https://hackernoon.com/simple-react-development-in-2017-113bd563691f
Regardless of your background, you’ve likely had a similar experience: React itself seems pretty straightforward, but the tooling and ecosystem is overwhelming. However, this is a solved problem! Believe it or not, it is actually very simple and painless to start a new React project, thanks to amazing work by the community over the past year. The goal of this guide is to showcase how easy it can be to start modern React development. It shares a step-by-step process, from initial system setup through to deployment, without straying into tangent explanations that aren’t critical at this point in the learning process.

Building For Mobile: RWD, PWA, AMP Or Instant Articles?
https://www.smashingmagazine.com/2017/03/building-for-mobile-rwd-pwa-amp-instant-articles/
Today, as our findings indicate, responsive web design is the norm, with 7 out of 10 mobile-optimized websites being responsive, up from 5 last year, which begs the questions: What’s next? Where is it all heading? We solved the screen-size issue and had a great run for a few years — now what?

70%以上业务由H5开发，手机QQ Hybrid 的架构如何优化演进
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995689&idx=1&sn=4f77f121345004ae6e18f4b945e46f8e
介绍QQ会员团队如何在页面打开时间以及用户流量方面所做的优化，分别对应sonic和reshape的两个自主技术框架。

如何向开源项目提交无法解答的问题
https://zhuanlan.zhihu.com/p/25795393
作为一名互联网开发者，本人使用和参与过许多开源项目。开源社区里，提问和回答是最有趣的组成部分，有些你来我往，有些则石沉大海。人们提问的方式有许多迷人和实用的共通之处。我把它们提炼出来，希望能帮助到那些像我一样充满了好奇心、且愿意付诸行动去惹恼开源项目维护者的人们。

Powering UberEATS with React Native and Uber Engineering
https://eng.uber.com/ubereats-react-native/
In this article, we focus on one challenge in particular: how Uber Engineering handled introducing a third party to what had previously been a two-sided marketplace.

Memory-Efficient Image Passing in the Document Scanner
https://blogs.dropbox.com/tech/2017/03/memory-efficient-image-passing-in-document-scanner/
Speed is not the only thing that matters in a mobile environment: what about memory? Bounding both peak memory usage and memory spikes is important, since the operating system may terminate the app outright when under memory pressure. In this blog post, we will discuss some tweaks we made to lower the memory usage of our iOS document scanner.

ARIA Grid: Supporting nonvisual layout and keyboard traversal
https://code.facebook.com/posts/1232839800098854/aria-grid-supporting-nonvisual-layout-and-keyboard-traversal/
At Facebook, we are experimenting with a user interface pattern for traversing a page with a keyboard that we call a logical grid. A logical grid reduces numerous tab stops to a single tab stop within a part of the interface designated as a grid. From the single tab stop, a person can traverse items in the grid using arrow keys.

A11Y Style Guide
http://a11y-style-guide.com/style-guide/
The A11Y style guide comes with pre-populated accessible components that include helpful links to related tools, articles, and WCAG guidelines to make your site more inclusive. These components also serve as a guide for both HTML markup and SCSS/CSS code, to inform designers, front-end and back-end developers at every stage of the website’s creation.

Setting up multi-platform npm packages
http://2ality.com/2017/04/setting-up-multi-platform-packages.html
This blog post explains ways of targeting multiple platforms via the same npm package.

Using DevTools to Tweak Designs in the Browser
https://css-tricks.com/using-devtools-tweak-designs-browser/
Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!

The Basics of DOM Manipulation in Vanilla JavaScript
https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/
In this article, I’ll demonstrate how to accomplish some of the most common DOM manipulation tasks with plain JavaScript, namely: querying and modifying the DOM, modifying classes and attributes, listening to events, and animation.

The Definitive Guide for Monitoring Node.js Applications
https://blog.risingstack.com/monitoring-nodejs-applications-nodejs-at-scale/
In this article, we will learn about running and monitoring Node.js applications in Production. Let’s discuss these topics: What is monitoring? What should be monitored? Open-source monitoring solutions; SaaS and On-premise monitoring offerings.

React Fiber是什么
https://zhuanlan.zhihu.com/p/26027085
使用React的同学们都应该要知道React Fiber，因为这玩意快要正式发布了。据说Facebook在自己的网站已经将React Fiber投入实战，所以，React Fiber大势所趋，是时候了解一下React Fiber了。React Fiber是个什么东西呢？官方的一句话解释是“React Fiber是对核心算法的一次重新实现”。这么说似乎太虚无缥缈，所以还是要详细说一下。

React London 2017 Conference Report
https://www.magnolia-cms.com/blogs/christopher-zimmermann/detail~&react-london-2017-conference-report~.html
In this blog post I hope to get you up to speed on what was presented at the conference. I’ll do a short blow-by-blow rundown of a few of the presentations and then share one person’s perspective of the themes that emerged during the day. 另附：MobX vs Redux: Comparing the Opposing Paradigms - React Conf 2017 纪要

React Lifecycle Methods- how and when to use them
https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1
In an ideal world, we wouldn’t use lifecycle methods. All our rendering issues would be controlled via state and props. But it’s not an ideal world, and sometimes you need to exact a little more control over how and when your component is updating. Use these methods sparingly, and use them with care. I hope this article has been helpful in illuminating when and how to use lifecycle methods.

6 Reasons Why JavaScript’s Async/Await Blows Promises Away
https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9
In case you missed it, Node now supports async/await out of the box since version 7.6. If you haven’t tried it yet, here are a bunch of reasons with examples why you should adopt it immediately and never look back.

精读 js 模块化发展
https://zhuanlan.zhihu.com/p/26118022
前端精读期刊与大家第一次正式碰面，我们每周会精读并分析若干篇精品好文，试图讨论出结论性观点。这期的主题是：The Evolution of JavaScript Modularity。

从技术、平台、工具、语言&框架等四大方面，详解技术未来的趋势
http://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2650995709&idx=1&sn=5a750ca48e2fb8ab2e6c13f7ac542b6d
ThoughtWorks 最新的技术雷达的解读。

IMVC（同构 MVC）的前端实践
http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247485119&idx=1&sn=5cd3855a84cd0a7bfd5b7c69ac853258
React/Vue 和 Redux/Vuex 是分别在 MVC 中的 View 层和 Model 层做了进一步发展。如果 MVC 中的 Controller 层也推进一步，将得到一种升级版的 MVC，我们称之为 IMVC（同构 MVC）。IMVC 可以实现一份代码在服务端和浏览器端皆可运行，具备单页应用和多页应用的所有优势，并且可以这两种模式里通过配置项进行自由切换。配合 Node.js、Webpack、Babel 等基础设施，我们可以得到相比之前更加完善的一种前端架构。

[译]一份关于Angular的倡议清单
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659599100&idx=1&sn=568cd164c9bea2e9fba075f0d025491c
Angular虽然是一个优秀的功能全面的JavaScript框架，但是如果停滞不前将逐渐丧失活力。新的特性会为开发者提供更强大的功能和新的机会来构建更完美的App。Eamon O’Tuathail在本文中将会提出一些如何让Angular更新潮更令人振奋的发展建议。

CURL IS C
https://daniel.haxx.se/blog/2017/03/27/curl-is-c/
Every once in a while someone suggests to me that curl and libcurl would do better if rewritten in a “safe language”. Rust is one such alternative language commonly suggested. This happens especially often when we publish new security vulnerabilities. At the end of the day the question that remains is: would we gain more than we would pay, and over which time frame? Who would gain and who would lose? CURL 的维护者对技术选型的考虑挺值得参考的。

Scaling your API with rate limiters
https://stripe.com/blog/rate-limiters
Rate limiting is one of the most powerful ways to prepare your API for scale. The different rate limiting strategies described in this post are not all necessary on day one, you can gradually introduce them once you realize the need for rate limiting. 另附：如何设计一个小而美的秒杀系统 https://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659599014&idx=1&sn=14ffbf9307b0f11fd218285c837204f2

Thirteen Years of Bad Game Code
http://etodd.io/2017/03/29/thirteen-years-of-bad-game-code/
There are many, many more embarrassing mistakes to discuss. I discovered another “creative” method to avoid globals. For some time I was obsessed with closures. I designed an “entity” “component” “system” that was anything but. I tried to multithread a voxel engine by sprinkling locks everywhere. Here’s the takeaway: Make decisions upfront instead of lazily leaving them to the computer; Separate behavior and state; Write pure functions; Write the client code first; Write boring code.

Modules vs. microservices
https://www.oreilly.com/ideas/modules-vs-microservices
Much has been said about moving from monoliths to microservices. Besides rolling off the tongue nicely, it also seems like a no-brainer to chop up a monolith into microservices. But is this approach really the best choice for your organization? It’s true that there are many drawbacks to maintaining a messy monolithic application. But there is a compelling alternative which is often overlooked: modular application development. In this article, we’ll explore what this alternative entails and show how it relates to building microservices.

新鲜货

Google Open Source - A new home for Google Open Source
https://opensource.googleblog.com/2017/03/a-new-home-for-google-open-source.html
赞 Google 的 slogan : Bringing better technology to the world by promoting open source. 另附：Microsoft Shutting down CodePlex.

New Web Features in Safari 10.1
https://webkit.org/blog/7477/new-web-features-in-safari-10-1/
While this release makes the web platform more capable and powerful, it also makes web development easier, simplifying the ongoing maintenance of your code. We’re excited to see how web developers will translate these improvements into better experiences for users.

Swift 3.1 Released!
https://swift.org/blog/swift-3-1-released/
Swift 3.1 is now officially released! Swift 3.1 is a minor release that contains improvements and refinements to the Standard Library. Thanks to efforts by IBM and other members of the community, it also includes many updates to the Linux implementation of Swift. There are also a number of updates to Swift Package Manager.

Echarts v3.5 发布
http://echarts.baidu.com/blog/2017/03/23/new-release.html
在 echarts 新发布的 3.5 版本中，新增了日历坐标系，增强了坐标轴指示器。同时，echarts 统计扩展 1.0 版本发布了。日历坐标系用于在日历中绘制图表，坐标轴指示器方便用户观察数据内容，统计扩展是一个专门用来进行数据分析的工具。

你不知道的前端新特性
https://ppt.baomitu.com/display?slide_id=84a42e3e#/
查漏补缺专用。

The Complete Redux Book
https://leanpub.com/redux-book
In this book you will learn about the inner workings of Redux, and how to use it to solve real-world challenges. We’ll teach you about everything you need to know to use this valuable tool effectively, including store enhancers, normalized state, unit testing, using third-party libraries, and much, much more.

Next.js 2.0
https://zeit.co/blog/next2
We are proud to introduce Next 2.0 to the world. What follows is a quick summary of every new feature and improvement we have made: Component CSS Support; Programmatic API; Pre-fetching.

Redux Offline: A Persistent Redux Store for Offline-First Apps
https://github.com/jevakallio/redux-offline
Persistent Redux store for Reasonaboutable™️ Offline-First applications, with first-class support for optimistic UI. Use with React, React Native, or as standalone state container for any web app.

Reactide - The first dedicated IDE for React web application development
http://reactide.io/
Reactide is a cross-platform desktop application that offers a custom simulator, making build-tool and server configuration unnecessary. Reactide brings development back to the days where opening a single file instantly renders the project in the browser. With Reactide, developers can achieve the same simplicity with a single React JSX file while still utilizing the power of React.

Fuchsia: a new operating system
https://lwn.net/SubscriberLink/718267/206c8a5fbf0ee2ea/
Fuchsia is a new operating system being built more or less from scratch at Google. From piecing together information from the online documentation and source code, we can surmise that Fuchsia is a complete operating system for PCs, tablets, and high-end phones.

Apollo Client 1.0: A flexible, community-focused JavaScript GraphQL client
https://dev-blog.apollodata.com/apollo-client-1-0-a-flexible-community-focused-javascript-graphql-client-2253b90e6c84
Apollo Client is a client-side library that leverages the power of a GraphQL API to handle data fetching and management for you, so that you can spend less time plumbing data and more on building your application.

Explain Shell
https://explainshell.com/
explainshell is a tool (with a web interface) capable of parsing man pages, extracting options and explain a given command-line by matching each argument to the relevant help text in the man page.

AsciiMath
http://asciimath.org/
AsciiMath is an easy-to-write markup language for mathematics.ASCIIMathML.js is a compact JavaScript program that translates simple calculator-style math expressions on a webpage to MathML.

Polished - A lightweight toolset for writing styles in JavaScript
https://polished.js.org/
Want to write styles in JavaScript, but also want Sass-style helper functions and mixins? Need a consistent color palette throughout your app? ✨ polished is for you!

The 5 features of ES8 and a wishlist for ES
https://www.sitepen.com/blog/2017/03/21/the-5-features-of-es8-and-a-wishlist-for-es9/
We wanted to take a few moments to highlight our 5 favorite things about the upcoming 2017 release: 1. Object.entries and Object.values; 2. String.prototype.padStart / String.prototype.padEnd; 3. Object.getOwnPropertyDescriptors; 4. Async functions; 5. Shared memory and atomics.

Chromium policy on JavaScript dialogs
https://developers.google.com/web/updates/2017/03/dialogs-policy
While they fit into the JavaScript of the time, their synchronous API is problematic for modern browsers. Because the JavaScript engine needs to pause until a user response is obtained, the JavaScript dialogs are app-modal. And because the dialogs are app-modal, they commonly (and unfortunately) are used to harm our users. Because of this, the Chromium team highly recommends that you not use JavaScript dialogs.

Popper.js
https://popper.js.org/
A library used to position poppers in web applications.A popper is an element on the screen which “pops out” from the natural flow of your application. Common examples of poppers are tooltips, popovers and drop-downs.

fsm-as-promised
https://github.com/vstirbu/fsm-as-promised
A minimalistic finite state machine library for browser and node implemented using promises.

Glimmer - A fast and lightweight UI component library from the Ember.js team
https://glimmerjs.com/
Glimmer is one of the fastest DOM rendering engines, delivering exceptional performance for initial renders as well as updates. Architected like a virtual machine (VM), Glimmer compiles your templates into low-level code so it can run as fast as possible—without sacrificing ease of use.

产品及其它

参与这场线上大战之后，我觉得人类未来还是有希望的
http://mp.weixin.qq.com/s?__biz=MjM5MTE4Nzk1NA==&mid=2650741697&idx=1&sn=9e460ef496d57164c27b617ff17a78f8
愚人节 Reddit上线了一个叫做Place的节点，它是一块空白的巨大画布，每个用户每10分钟会得到一个机会，可以选一种颜色，在上面点一个点（后来间隔时间被修改成5分钟）。规则本身非常简单，但和Reddit的气质非常贴合，Reddit本来就是一个靠投票和用户贡献来产生内容的网站，用户参与度很高。这不仅是一个出色的愚人节项目，也是一个伟大的尝试，在这种完全自由，不受管控，只有简单规则的活动里面，人们之间会产生什么样的互动？

[译]Redis之父：如何成为一个高效的程序员
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659599117&idx=1&sn=eac8fb8f90f1dcadcb1d2ac7420410cb
在我的二十年程序员生涯中，我与其他程序员一起工作，作为同事，或者由我指导他们达成目标，为Redis和其他项目贡献代码补丁。在工作过程中，我仔细观察他们。与此同时，有很多人说我是一个高能的程序员。不过我不认为自己是一个工作狂，我只是编码速度比较快而已。 下面列出了我认为可以用于区分程序员生产力高低的重要特质。 另附：完美代码只是一个幻想罢了

Tower 团队 48 个月远程实践
https://zhuanlan.zhihu.com/p/26031654
有三个驱动我们远程工作的原因，一是产品原因，二是不愿意再花时间在一些麻烦事上，三是最重要的一点，就是因为彼此信任。2013 年我们决定要开始远程工作，当时最大的一个初衷是想要通过这种方式，把产品打造得更好。远程工作适合耐心的团队，适合愿意独自面对自己的团队，适合对目标有清醒认识的团队，适合单兵作战强悍的团队，如果你的团队是这样的，不妨一试。