FEX 技术周刊 - 2017/06/26

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

深阅读

Google’s Flutter = React + Java Swing
https://codeburst.io/googles-flutter-react-java-swing-8174c8d9d402
Google has recently announced its new mobile UI framework called Flutter. It allows you to create native-ish mobile apps that run on Android, iOS and Google’s new Fuchsia operating system.

Techniques for decomposing React components
https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da
React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much. As with any other kind of programming, adhering to the single responsibility principle not only makes your components easier to maintain, but also allows for greater reuse. However, identifying how to separate the responsibilities of a large React component is not always easy. Here are three techniques to get you started, from the simplest to most advanced.

webpack 3: Official Release!!
https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b
虽然号称 98% 的用户不受影响，但实际上…

San - 一个传统的MVVM组件框架
http://efe.baidu.com/blog/san-a-traditional-mvvm-component-framework/
百度推出的 MVVM 框架，甚至兼容 IE6. 如果拿车来比喻，我们想造的是一台陆巡。相比轿车甚至多数SUV，它没有那么好开，看不到很多 2.0T 的车尾灯；相比牧马人和 benz G，他越野能力和通过性也没那么强。但是它很可靠，能稳稳当当、舒适地带你到任何想去的地方。

如何理解Heroku提出的12要素应用
http://mp.weixin.qq.com/s?__biz=MzA5Nzc4OTA1Mw==&mid=2659599357&idx=1&sn=50146645d8c1d1ee7135ee8a0115364d
12 原则由公有云 PaaS 的先驱 Heroku 于 2012 年提出（[原文参见 ），目的是告诉开发者如何利用云平台提供的便利来开发更具可靠性和扩展性、更加易于维护的云原生应用。距离 12 原则的提出已有五年之久，12 原则的有些细节可能已经不那么跟得上时代，也有人批评 12 原则的提出从一开始就有过于依赖 Heroku 自身特性的倾向，不过不管怎么说，12 原则依旧是业界最为系统的云原生应用开发指南，我们可以把它作为一个非常有力的参考，但是也千万不要教条。

靠谱程序员必备技能——重构
http://mp.weixin.qq.com/s?__biz=MzIyNjE4NjI2Nw==&mid=2652558943&idx=1&sn=1516afcf876b9fb4a17ce048c5ade58d
敏捷软件开发的十二条原则中有一条是：我们始终拥抱需求变化，哪怕是在软件开发的后期。为了达到这种状态，我们就要在开发过程中持续地优化代码。而重构这项技术，为我们提供了一种更可控的方式来优化代码。附：Android代码重构实战.

大前端公共知识梳理：这些知识你都掌握了吗
http://mp.weixin.qq.com/s?__biz=MzIwNjQwMzUwMQ==&mid=2247485277&idx=1&sn=82703e13febb1e7947cc18d1f57fc375
随着移动化联网浪潮的汹涌而来与浏览器性能的提升，iOS、Android、Web 等前端开发技术各领风骚，大前端的概念也日渐成为某种共识。虽然具体的代码实现、使用的技术不同，但是 Android、iOS 以及 Web 乃至于 React Native 等开发中，我们需要解决的问题、能够用到的架构设计模式都是可以相互借鉴的。 在我们从某个领域迁移到其他领域时，我们能很方便地知道应该学习些什么，不同的技术、工具他们的职责是什么，应该选择怎样的架构或者设计模式。

如何使用JavaScript构建机器学习模型
https://www.jiqizhixin.com/articles/e2a4be9d-4b00-48d5-bccf-cc5a3582dd9b
JavaScript？我不是应该使用 Python 吗？甚至 Scikit-learn 在 JavaScript 上都不工作。这是可能的，实际上，连我自己都惊讶于开发者对此忽视的态度。就 Scikit-learn 而言，Javascript 的开发者事实上已经推出了适用的库，它会在本文中有所提及。那么，让我们看看 Javascript 在机器学习上能够做什么吧。

2017年Android百大框架排行榜
http://www.cnblogs.com/jincheng-yangchaofan/articles/7018780.html
榜单排序依据：1.项目开源 2.github上该项目的star个数 3.开发团队、作者的实力

美团点评酒店后台故障演练系统
http://tech.meituan.com/thrifycopy_and_faultdrill_system.html
套常态化的“故障演练”机制与工具来反复验证，可以确保服务能在正常情形下表现出正常的行为，在异常状况下，也要有正确、可控的表现。这个服务或是工具能执行：容量与性能评估；故障演练，进而进行依赖梳理、预案验证，保证服务柔性可用。这样才能够做到在节假日与大促时心中有数，在提高系统服务能力的同时增加开发人员应对与处理故障的经验。下面，以酒店后台switch研发组开发的“Faultdrill”系统为例，向大家介绍一下我们在这方面的经验。

An inside look at Quantum DOM Scheduling
https://hacks.mozilla.org/2017/06/an-inside-look-at-quantum-dom-scheduling/
Quantum DOM: Scheduling is a significant piece of Project Quantum, which focuses on making Firefox more responsive, especially when lots of tabs are open. In this article, we’ll describe problems we identified in multi-tab browsing, the solutions we figured out, the current status of Quantum DOM, and opportunities for contribution to the project. 另附：Powerful New Additions to the CSS Grid Inspector in Firefox Nightly

A new approach to text rendering
http://blog.atom.io/2017/06/22/a-new-approach-to-text-rendering.html
In Atom 1.19, we’re landing a complete rewrite of the text editor’s DOM interaction layer that improves rendering performance and simplifies the code. Prompted by the availability of some valuable new DOM APIs with the upgrade to Electron 1.6, we decided to start over from the beginning and take a critical look at the structure and performance every aspect of our DOM interaction.

Connect: behind the front-end experience
https://stripe.com/blog/connect-front-end-experience
In this blog post, we’ll describe how we used several next-generation web technologies to bring Connect to life, and walk through some of the finer technical details (and excitement!) on our front-end journey.

ES2017’s async/await is the best thing to ever happen to JavaScript
https://certsimple.com/blog/javascript-equals-async-await
Eventually I began understanding the idea of functions as values, that could be written inline, and passed to other functions as options. A callback was essentially a ‘what to do next’ action. I understood callbacks, and learned common async patterns. I liked learning a lot about functions, scope, and closures. I used, but never liked callbacks: a nagging doubt said this is the VMs job, not the programmers.

Intern and JavaScript Testing in 2017
https://www.sitepen.com/blog/2017/06/22/intern-and-javascript-testing-in-2017/
Intern was created to alleviate this problem and to provide a solid glue architecture for testing applications using JavaScript and various asynchronous patterns such as Promises. Intern has certainly helped us and our users test their applications far more efficiently than was previously possible. As the world of JavaScript evolved, though, we noticed that writing quality tests was getting more difficult.

What Does a Well-Documented CSS Codebase Look Like?
https://css-tricks.com/well-documented-css-codebase-look-like/
A well-documented CSS codebase enforces consistency, boosts maintainability, and helps the team to build a shared vocabulary. So, here we go! Let’s examine the 4 big signs of a well-documented CSS codebase: CSS Tech Stack & Toolchain; CSS Conventions; CSS Architecture; CSS Component Descriptions and Examples.

Functional programming in Javascript is an antipattern
https://medium.com/@alexdixon/functional-programming-in-javascript-is-an-antipattern-58526819f21e
I’m going out on a limb and calling functional programming in Javascript an antipattern. It’s an attractive path that gives way to a maze. It seems to solve some problems but ends up creating more. More importantly, those problems appear to have no higher-level solution that can prevent me from having to deal with them over and over again.

The State of Angular and the Due Date of Version 5
https://hackernoon.com/the-state-of-angular-and-the-due-date-of-version-5-68374002267f
In this article, we will take a high level overview of the 4.x.x versions, see the scheduling of the upcoming versions, discover the due date of the new Angular baby — Version 5, and we will review on two more surprises that are provided by Angular.

JavaScript for Microcontrollers and IoT
https://auth0.com/blog/javascript-for-microcontrollers-and-iot-part-1/
The low-end nature of certain microcontroller platforms makes it somewhat difficult for beginners to use JavaScript. In this post we will take a brief look at the different options for running JavaScript on small devices, and we will also pick one of them and get one JavaScript engine running on it.

Site Speed Monitoring in A/B Testing and Feature Ramp-up
https://engineering.linkedin.com/blog/2017/06/site-speed-monitoring-in-a-b-testing-and-feature-ramp-up
Predicting site speed impact of a feature rollout is a difficult engineering problem, particularly at scale. We are ramping hundreds of changes simultaneously through A/B testing. When ramping a feature into production, how can developers gain visibility into the site speed impact? Likewise, when a performance optimization is enabled in production, how can the developer quantify the benefit? In addition, how can performance degradation be detected at an early stage of feature ramp-up, before the impact spreads out to a larger audience? In this blog, we share our experiences and solutions here at LinkedIn.

Evolution of Dropbox’s Edge Network
https://blogs.dropbox.com/tech/2017/06/evolution-of-dropboxs-edge-network/
Since launching Magic Pocket last year, we’ve been storing and serving more than 90 percent of our users’ data on our own custom-built infrastructure, which has helped us to be more efficient and improved performance for our users globally.

Content Popularity for Open Connect
https://medium.com/netflix-techblog/content-popularity-for-open-connect-b86d56f613b
There are many reasons why Netflix cares about the popularity of our TV shows and movies. On the Open Connect Content Delivery team, we predict content popularity to maximize our infrastructure efficiency. From the Content Delivery perspective, we view popularity as the number of times a piece of content is watched. We compute it by dividing total bytes streamed from this asset by the size in bytes of the asset.

Designing The Perfect Accordion
https://www.smashingmagazine.com/2017/06/designing-perfect-accordion-checklist/
Design patterns can be extremely helpful, mostly because they save time and get us better results, faster. This series of articles is a summary of observations and experiments made throughout the time. Tighten up your seat belts: in this new series of articles on SmashingMag, we’ll look into examples of everything from carousels to filters, calculators, charts, timelines, maps, multi-column tables, almighty pricing plans all the way to seating selection in airline and cinema websites. But before we head off to complex interface problems, let’s start with something seemingly simple and obvious: an accordion.

10 Tips On Typography in Web Design
https://uxplanet.org/10-tips-on-typography-in-web-design-13a378f4aa0d
More than 95% percent of information on the web is in the form of written language. Good typography makes the act of reading effortless, while poor typography turns users off. Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. In this article, I will provide a set of rules that help you improve readability and legibility of your text content.

Tabs, spaces and your salary - how is it really?
http://evelinag.com/blog/2017/06-20-stackoverflow-tabs-spaces-and-salary/index.html#.WU31cmQw2gw
This blog post is my attempt to shed some light into the issue. The original article encouraged people to explore the data for themselves and this is precisely what I did. So I’d like to invite you to follow me through a little data science detective story and a deep dive into the data from the Stack Overflow survey. You’ll see that tabs and spaces are not what they seem. Spoiler: your salary has more to do with the type of company and the environment you work in rather than what type of indentation you use.

Why use SemVer?
http://blog.npmjs.org/post/162134793605/why-use-semver
npm’s documentation recommends that you use semantic versioning, which we also call semver, but it doesn’t explain why you’d use SemVer in the first place. This post is a quick overview of SemVer and why it’s a good idea.

新鲜货

Mikeal Rogers: Node.js Will Overtake Java Within a Year
https://thenewstack.io/open-source-profile-mikeal-rogers-node-js/
Mikeal Rogers has been with the Node.js Foundation since day one. Rogers’ main contribution, though, is organization and coordination within the Node.js open source community — particularly in scaling governance and processes as the project has accelerated from a dozen early contributors to many hundreds. Rogers spoke with The New Stack to talk about his experience getting started in the open source world, working at the Node.js Foundation and becoming an open source governance principals guru.

Cell
https://github.com/intercellular/cell
A self-constructing web app framework powered by a self-driving DOM. Cell has one and only one design goal: Easy.

Spected
https://github.com/25th-floor/spected
Spected is a low level validation library for validating objects against defined validation rules. Framework specific validation libraries can be built upon spected, leveraging the spected appraoch of separating the speciific input from any validation. Furthermore it can be used to verify the validity deeply nested objects, f.e. server side validation of data or client side validation of JSON objects. Spected can also be used to validate Form inputs etc.

Flight - The best way to build animation compositions for React
https://github.com/jondot/react-flight
Design and compose a component to start with, a component to end with, and Flight will take it from there. Flight tries to be for React what Principle is for Sketch compositions - the fastest, most friction free way to compose and an effortless way to animate an idea, an interaction, or a short movie-like composition in a self-contained widget (a React component after all).

Flexible date picker for React
https://github.com/gpbl/react-day-picker
no dependencies – fully customizable – ARIA support – localizable – less than 10KB

Grid Styled
https://github.com/jxnblk/grid-styled
Responsive React grid system built with styled-components.

Stardust: GPU-based Visualization Library
https://stardustjs.github.io/
Stardust is a library for rendering information visualizations with GPU (WebGL). Stardust provides an easy-to-use and familiar API for defining marks and binding data to them. With Stardust, you can render tens of thousands of markers and animate them in real time without the hassle of managing WebGL shaders and buffers.

Luna
http://www.luna-lang.org/
Visual and textual functional programming language with a focus on productivity, collaboration and development ergonomics.

Animate.css
https://daneden.github.io/animate.css/
Just-add-water CSS animations. 另附：Gallery Animate CSS.

mini.css
http://minicss.org/
mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox.

AlloyTeam正式发布pasition
https://alloyteam.github.io/pasition/
Pasition - Path Transition with little JS code, render to anywhere. 类似的库 https://github.com/veltman/flubber

Redbird Reverse Proxy
https://github.com/OptimalBits/redbird
Handling dynamic virtual hosts, load balancing, proxying web sockets and SSL encryption should be easy and robust. With redbird you get a complete library to build dynamic reverse proxies with the speed and robustness of http-proxy. This light-weight package includes everything you need for easy reverse routing of your applications. Great for routing many applications from different domains in one single host, handling SSL with ease, etc.

JSON Server
https://github.com/typicode/json-server
Get a full fake REST API with zero coding in less than 30 seconds (seriously). Created with <3 for front-end developers who need a quick back-end for prototyping and mocking.

Syntax Highlighting as a Service
https://photon.sh/
Photon is a powerful, multiplatform, highly customizable and free syntax highlighter for the modern web.

Get Ready for Web Bluetooth!
http://developer.telerik.com/content-types/tutorials/get-ready-web-bluetooth/
With the new Web Bluetooth API now available in Chrome Browsers 56+ and Opera 44+, as well as more recent Android browsers, the world of connected devices just got a little closer to realizing the promise of the Physical Web: “Walk up and use anything”.

Easy Machine Learning
https://github.com/ICT-BDA/EasyML
中科院开源的机器学习系统

Origami anything
http://news.mit.edu/2017/algorithm-origami-patterns-any-3-D-structure-0622
New algorithm generates practical paper-folding patterns to produce any 3-D structure.

Codemod
https://github.com/facebook/codemod
Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. Codemod was developed at Facebook and released as open source. 附介绍：Refactor Code in Your Lunch Break: Getting Started with Codemods.

vue-table-component
https://github.com/spatie/vue-table-component
A Vue component that can render a filterable and sortable table. It aims to be very lightweight and easy to use.

Practical Node.js Book, 2nd Edition, Open-Sourced on GitHub
https://www.kickstarter.com/projects/azat/practical-nodejs-book-2nd-edition-open-sourced-on
Making Practical Node.js current is a worthwhile aim but it’s not enough. The plan is to write it on GitHub, where you can follow along, comment, give me feedback, and through this collaboration I can ensure that the 2nd edition of Practical Node.js is even better than the first.

产品及其它

Why we’re betting against real-time team messaging
https://blog.doist.com/why-were-betting-against-real-time-team-messaging-521804a3da09
This post is the story of why we stopped using Slack. It’s also the story of how we had the (possibly) crazy idea that we could contribute something fundamentally different to an already cluttered team communication market - Twist. Something for teams like ours with the audacity to think that maybe there’s more to work than keeping up with group chat…

贝佐斯的独特思维是什么
http://mp.weixin.qq.com/s?__biz=MzA5ODMzMDkzOA==&mid=2661082003&idx=1&sn=59b74d10aafcd29a08193fa8c9de233d
贝佐斯管理哲学中的“逆向工作法”直击事物本质。大概也正因为此智慧，让贝佐斯超越巴菲特，成为全球的第二大富豪。学习贝佐斯“逆向工作法”，更重要的是可以将此运用到自己的工作和生活中。

2017年度最具商业价值人工智能公司TOP50
http://www.iheima.com/zixun/2017/0624/163769.shtml
我们评选出的50个项目只是对当前人工智能技术应用现状的一个极小的缩影。由于处于技术研发期以及其他原因，还有部分项目不便对外曝光。而由于时间和获取渠道等各种原因的限制，也有众多的项目并未参与本次评选。而这些入选者，也是在人工智能领域中起步不久的新秀。在未来，我们还将见证它们的成长，以及看到更多的革命性的技术和研究涌现，更多的行业应用爆发和改变。

对话王兴：太多人关注边界，而不关注核心
http://mp.weixin.qq.com/s?__biz=MzA3NDI0ODMzMw==&mid=2651302476&idx=1&sn=c9f183fc410db9b9f45e49010be7eb79
在中国互联网中，美团是一家特殊的公司。大量公司是从垂直领域开始成长，然后不断延展，所以他们难免由行业思维出发，更多去思考终局和边界。而美团点评是用商业流转中的一个环节来作为自己的内核——这个内核从商业上看，是交易；从客户看，是服务。它的业务是横向的，所以王兴的思考和多数CEO不太一样，他更多通用的、跨界的思考。比如他对业务和竞争的看法，他认为不要期望一家独大，也不要期望结束战争，所有人都要接受竞合才是新常态，同时，他认为太多思考边界和终局是错误的，“哪有什么真正的终局？”附：从王兴的谈吐，看一个CEO的自我修养

马云美国一小时英文演讲实录：错过中国，你就错过了未来
http://www.toutiao.com/i6434698496976093697/
作为小企业，你没有什么可失去，你唯一要焦虑的就是失去机会。错过互联网商业，错过中国，你就错过了未来。未来20年让我们打造一个体系，帮助中小企业实现更加自由便利的贸易。这就是为什么我过去一年飞行了870小时，会见了超过40位国家元首和政府高层，今年我会飞行超过1000个小时。如果我们相信，就要让它实现！

华为离职副总裁徐家骏-工作感悟
http://www.yixieshi.com/86188.html
非常值得学习：从小事做起，学会吃亏，与他人合作；勇于实践，勇于犯错，善于反思；独立思考，不人云亦云；对职业负责、对目标负责，对自己负责，成功者往往自觉自律、信守承诺、心无旁骛；要有方法、有套路，对问题系统思考、对解决方案有战略性的设计；少抱怨、少空谈、积极主动，多干实事；关注人，帮助人，真诚待人，厚道做人；

– THE END –