FEX 技术周刊 - 2017/10/30

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

业界会议

Chrome Dev Summit 10.23-10.24
https://developer.chrome.com/devsummit/
视频：https://www.youtube.com/playlist?list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m

ReactiveConf 2017 10.25-27
https://reactiveconf.com/

深阅读

V8 Release 6.3
https://v8project.blogspot.ca/2017/10/v8-release-63.html
V8 version 6.3, which is in beta until its release in coordination with Chrome 63 Stable in several weeks. V8 v6.3 is filled with all sorts of developer-facing goodies. This post provides a preview of some of the highlights in anticipation of the release.
附：V8 Today and in the Future.

Introducing the Chrome User Experience Report
https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html
We’re making the Chrome User Experience Report available to encourage performance and user experience improvements across the web. The report is a public dataset of key user experience metrics for top origins on the web. The initial release includes data from a sample of ten thousand origins and focuses on loading metrics, though we hope to expand coverage in future iterations.

Can You Afford It?: Real-world Web Performance Budgets
https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/
Performance budgets are an essential but under-appreciated part of product success and team health. Most partners we work with are not aware of the real-world operating environment and make inappropriate technology choices as a result. We set a budget in time of <= 5 seconds first-load Time-to-Interactive and <= 2s for subsequent loads. We constrain ourselves to a real-world baseline device + network configuration to measure progress. The default global baseline is a ~$200 Android device on a 400Kbps link with a 400ms round-trip-time (“RTT”). This translates into a budget of ~130-170KB of critical-path resources, depending on composition — the more JS you include, the smaller the bundle must be.

Coding with Clarity
https://alistapart.com/article/coding-with-clarity
Working code isn’t necessarily good code. Your code also needs to be easy to read, understand, and modify. It needs clarity, and to achieve that, it has to be organized well, with careful planning and proper separation of ideas taking place before you even open your code editor. Coding for clarity is something that separates the great developers from the merely good, and there are a few basic principles that can set you on that path.

The QUIC transport protocol: design and Internet-scale deployment
https://blog.acolyer.org/2017/10/26/the-quic-transport-protocol-design-and-internet-scale-deployment/
QUIC is a transport protocol designed from the ground up by Google improve the performance of HTTPS traffic. The chances are you’ve already used it – QUIC is deployed in Chrome, in the YouTube mobile app, and in the Google Search app on Android. It’s also used at Google’s front-end servers, handling billions of requests a day. All told, about 7% of global Internet traffic is now flowing over QUIC. There are three interesting aspects to the paper, that we can essentially divide into the Why, the What, and the How. How QUIC was built and evolved over time is an integral part of the story.

The Web Fundamentals Gap
https://zendev.com/2017/10/24/the-web-fundamentals-gap.html
There are no shortage of boot camps, courses, and resources to learn front-end development out there, but having interviewed a lot of the folks coming out of these boot camps, I think there is a serious under-appreciation of the importance of CSS and the fundamentals of JavaScript.

小米直达服务介绍与开发实战
https://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247485534&idx=1&sn=5e2bb37df32a89db8bc0be825d6768c4
直达服务平台上的各个服务采用前端技术栈开发，但是并不跑在浏览器或 WebView 中，它舍弃了浏览器内核渲染，转而采用 Android 的原生渲染机制，也就是说，实际上是使用前端技术栈开发了一个原生应用，无论是渲染效率，还是系统能力的 API 丰富程度，都远远超出传统网页。

打造丝般顺滑的 H5 翻页库
http://fex.baidu.com/blog/2017/10/build-a-silky-smooth-slide-library/
百度 H5 团队在使用了流行开源的 H5 翻页库之后，结合自身的业务需要，开发出了平台运行时所需的 H5 翻页库，具有轻量级、高性能的特点。这篇文章讲述了在开发过程中遇到的一些问题和对应的解决办法。

EggBorn.js：一款顶级Javascript全栈开发框架
https://cnodejs.org/topic/59eebce1f8d374775c0157d7#59eed0621bbf067d5c3fa7cd
EggBorn.js是采用Javascript进行全栈开发的最佳实践。EggBorn.js不重复造轮子，而是采用业界最新的开源技术，进行全栈开发的最佳组合。EggBorn.js前端采用Vue.js + Framework7 / Vue Router + Webpack，后端采用Koa.js + Egg.js，数据库采用mysql。

[译]构建Uber端到端技术栈的十条经验
https://mp.weixin.qq.com/s?__biz=MzIwMzg1ODcwMw==&mid=2247487005&idx=1&sn=eb24f50840ebe3f3e5c67f46dcea558d
我在 Uber 这几年，做了很多系统稳定性及可扩展性的工作，也做了一些移动开发的工作，因此我对 Uber 端到端的技术栈还比较熟悉。在这里以我的经历为例跟大家分享一下如何快速地做一个稳定的端到端大型应用。

从架构理解价值
http://www.jianshu.com/p/6ebf289d0e05
所以软件架构不仅仅只是选用什么框架、选用什么技术组件这么简单。它贯穿了对人的组织、对技术的组织、对业务的组织，并将这三种组织以解决业务问题这一目标有机的结合在了一起。

忘掉技术债，创造技术财
https://mp.weixin.qq.com/s?__biz=MzA4NTU2MTg3MQ==&mid=2655161735&idx=1&sn=4426d3d7717d874a22827d8a5533b423
这个理念蛮不错的。Andrea Goulet 是 Corgibytes 的 CEO ，这家咨询公司主要承担应用的重构和现代化等项目。她曾经见识过各种各样破旧的系统、遗留的代码以及繁重的技术债，感觉人们都在以数字化的方式囤积各种“古董”。因此 Goulet 认为初创公司需要转变自己的心态，不要斥资积累技术债，而是要创造技术财；不应继续用老旧的代码将就，而应特意进行重构。她将通过本文介绍自己提出的新方法，以及将不可能变为可能的做法。

React 16 Release: What’s New?
https://auth0.com/blog/whats-new-in-react16/
In this article, we’ll highlight notable additions to ReactJS 16 and dabble into the architecture it runs on.

HTML Web Component using Vanilla JavaScript
https://ayushgp.github.io/html-web-components-using-vanilla-js/
Web Components have been around for a while now. Google has really been trying to push for their more widespread adoption, but most major browsers still have very little support for it, except for Opera and Chrome. However, by using polyfills, available from https://www.webcomponents.org/polyfills, you can build your own Web Components now. In this article, I’m going to teach you how to create your own HTML tags with styles, functionality, and markup neatly packaged in their own files.

Stop Designing For Only 85% Of Users: Nailing Accessibility In Design
https://www.smashingmagazine.com/2017/10/nailing-accessibility-design/
The visual interface is an obvious place to begin digging into accessibility. In this article, we’ll discuss some of the most common visual impairments, focusing on color-blindness to explain how you can make small changes to your workflow and products to ensure you’re not alienating users.

A Guide to Automating & Scraping the Web with JavaScript
https://codeburst.io/a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js-b18efb9e9921
Learn to Automate and Scrape the web with Headless Chrome

Node.js Async Function Best Practices
https://nemethgergely.com/async-function-best-practices/
In this article, I will briefly show you what async functions are, and how they change the way we write Node.js applications.

Building Smart Replies for Member Messages
https://engineering.linkedin.com/blog/2017/10/building-smart-replies-for-member-messages
At LinkedIn Messaging, we are working hard to bring value to our members by providing innovative improvements to the way they communicate professionally with others. Today, we are introducing a brand new natural language processing (NLP) recommendation engine that provides members with smart reply recommendations. In this blog post, we discuss the process we went through to build the models and infrastructure that power smart replies for members.

Why does one NGINX worker take all the load?
https://blog.cloudflare.com/the-sad-state-of-linux-socket-balancing/
Balancing the incoming connections across multiple application workers is far from a solved problem. The single queue approach (b) scales well and keeps the max latency in check, but due to the epoll LIFO behavior the worker processes won’t be evenly load balanced. The best generic solution seem to be to change the standard epoll behavior from LIFO to FIFO.

What’s going on with containers? Here’s a helpful glossary
https://coreos.com/blog/software-container-terminology-glossary
Containers bring additional security, isolation, and simplified app delivery to the classic model. At CoreOS, we see container standards and components as a function of three major categories: cluster operations, node operations, and software delivery. Each of these categories has inputs and outputs that link it to the others. Check out the Software Container Terminology Glossary for a comprehensive list of defined standards and components in each of the three categories above.
另附： DOCKERCON EU 2017: ALL THE VIDEOS ARE NOW LIVE!

新鲜货

Saying Goodbye to Firebug
https://hacks.mozilla.org/2017/10/saying-goodbye-to-firebug/
Firebug is now reaching end-of-life in the Firefox browser, with the release of Firefox Quantum (version 57) next month. The good news is that all the capabilities of Firebug are now present in current Firefox Developer Tools. The story of Firefox and Firebug is synonymous with the rise of the web. We fought the good fight and changed how developers inspect HTML and debug JS in the browser. Firebug ushered in the Web 2.0 era.

Android Studio 3.0 Release
https://developer.android.com/studio/releases/index.html
Android Studio 3.0.0 is a major release that includes a variety of new features and improvements: Kotlin support, Java 8 language features support, Android Profiler, APK profiling and debugging, Device File Explorer, Layout Editor…

sonar: Linting the web forward
https://blogs.windows.com/msedgedev/2017/10/25/introducing-sonar-site-scanner/#iEKg2C7W6j34VY34.97
sonar brings many improvements compared to previous scanners: execution of website code instead of static analysis, a more flexible and modernized set of rules, parallel test execution, integration with other services, a completely open source code base from day one, and more. Additionally, sonar can also be used as a command line tool (CLI) that you can integrate directly into your local web development workflows.

Ionic: 2017-18 Roadmap
http://blog.ionic.io/ionic-2017-18-roadmap/
A step back and talk about what the next ~6-12 months looks like for everything Ionic.

Netflix: Removing client-side React.js improved performance by 50%
https://twitter.com/NetflixUIE/status/923374215041912833
详见：Netflix UI Engineering JS Talks Live Stream

accessibilityjs
https://github.com/github/accessibilityjs
Client side accessibility error scanner. In GitHub we use this script to scan for inaccessible elements in development and production staff mode. We style the elements with red borders in the logError function passed in, and add a click handler explaining the reasons.

Apollo Client 2.0
https://dev-blog.apollodata.com/apollo-client-2-0-5c8d0affcec7
The universal way to manage your application state with GraphQL

Wiki.js
https://wiki.js.org/
An open source, modern and powerful wiki app built on Node.js, Git and Markdown.

Strapi
https://strapi.io/
The most advanced open-source Content Management Framework to build powerful API with no effort.

SciPy 1.0 released!
https://mail.python.org/pipermail/scipy-user/2017-October/037357.html
We are extremely pleased to announce the release of SciPy 1.0, 16 years after version 0.1 saw the light of day. SciPy (pronounced “Sigh Pie”) is a Python-based ecosystem of open-source software for mathematics, science, and engineering.

react-snap
https://github.com/stereobooster/react-snap
Pre-renders web app into static HTML. Uses headless chrome to pre-render. Crawls all available links starting from the root. Heavily inspired by prep and react-snapshot, but written from scratch. Uses best practices to get best loading performance.

HEAD
https://github.com/joshbuchea/HEAD
A free guide to <head> elements. A list of everything that could go in the head of your document

HEML
https://github.com/SparkPost/heml
HEML is an open source markup language for building responsive email.

Reason 3
https://reasonml.github.io/community/blog/#reason-3
Reason lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems. Reason 3 is primarily the work of Fred, the maintainer of Merlin (yeah, that Merlin), Iwan and Jared, over the last six months. The release packs a lot of infra changes under the hood, most of which, we hope, stay invisible to you and occasionally make you feel “yeah, that is how I think it should work”.

Exoframe
https://github.com/exoframejs/exoframe
Exoframe is a self-hosted tool that allows simple one-command deployments using Docker.

sketch-to-react-native
https://github.com/nanohop/sketch-to-react-native
Convert Sketch files into React Native components

Awesome Go
https://awesome-go.com/
A curated list of awesome Go frameworks, libraries and software. Inspired by awesome-python.

产品及其他

MakeCode for Minecraft makes learning to code super fun
https://www.microsoft.com/en-us/research/blog/code-minecraft/
The MakeCode for Minecraft editor has the pixelated look and feel of Minecraft. MakeCode allows coding with visual blocks, based on a drag and drop interface for beginners, as well as in text with a JavaScript interface for the more experienced learners. Coding with blocks or text, MakeCode teaches the 101 of programming languages, including variables, control flow, if statements, loops and functions.

用《清单革命》让复杂工作变简单
https://mp.weixin.qq.com/s?__biz=MjM5NjgzMzkwMQ==&mid=2653646406&idx=1&sn=9fc89b68138045f882a1f5dd04afbef4
所谓的创新，其实没那么天外飞仙，也不是靠灵感，情怀或者勤奋，本质是靠你对一件事情或方法的反复推演和严格执行。这也是《清单革命》最有价值的佐证。清单就是把干好一件事情的原则和关键点都写下来，保证曾经成功过的方法和结果能大概率地可复现。所谓清单方法论，就是选定自己关键的清单，严格按照这个清单执行，再根据结果去修改清单。这个过程中，最重要的两个字就是——严格。如果光有清单，不严格执行，一定会出问题。即便做创意性或创造性的工作，其实也需要有自己的清单。

稻盛和夫：极度认真地工作能扭转人生
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654590489&idx=1&sn=f2101b8051c1384dfd5563ea52e9623d
内心不渴望的东西，它不可能靠近自己。不惜一切，努力创造世人公认的“尽善尽美”的产品，这对于以创造为目标的人来说是非常重要的，甚至是一种义务。想要成就某项事业，就必须成为能够自我燃烧的人。要成为“自燃型”的人，在热爱自己工作的同时，必须持有明确的目标。

智商碾压众人是一种什么体验？做对这11道题就知道了
https://mp.weixin.qq.com/s?__biz=MzA5ODMzMDkzOA==&mid=2661083013&idx=1&sn=d76030d1dd6628d4413b551c34db84f8
10月21日，北京大学哲学系陈波教授来到混沌大学讲堂，带来了一堂极致“烧脑”的思维训练课： 《批判性思维和创新能力培养》 ，系统阐释了批判性思维如何养成，大信息量，大冲击力，简直是智商碾压级体验，而且又是深入浅出，风趣幽默。为此，混沌君特意详细梳理了其中的精彩案例剖析，供你学习。11个逻辑命题，你能做对多少？不服来战。