FEX 技术周刊 - 2018/06/19

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

深阅读

Concurrent marking in V8
https://v8project.blogspot.com/2018/06/concurrent-marking.html
This post describes the garbage collection technique called concurrent marking. The optimization allows a JavaScript application to continue execution while the garbage collector scans the heap to find and mark live objects. Our benchmarks show that concurrent marking reduces the time spent marking on the main thread by 60%–70%. Concurrent marking is the last puzzle piece of the Orinoco project — the project to incrementally replace the old garbage collector with the new mostly concurrent and parallel garbage collector. Concurrent marking is enabled by default in Chrome 64 and Node.js v10.
另附：JavaScript engine fundamentals: Shapes and Inline Caches

Jsonnet - The Data Templating Language
https://jsonnet.org/
A data templating language for app and tool developers: Generate config data; Side-effect free; Organize, simplify, unify; Manage sprawling config.

State of React Native 2018
https://facebook.github.io/react-native/blog/2018/06/14/state-of-react-native-2018
Alongside the community inside Facebook, we’re happy to have a thriving population of React Native users and collaborators outside Facebook. We’d like to support the React Native community more, both by serving React Native users better and by making the project easier to contribute to. Just as our architecture changes will help React Native interoperate more cleanly with other native infrastructure, React Native should be slimmer on the JavaScript side to fit better with the JavaScript ecosystem, which includes making the VM and bundler swappable.
另附：Vue Native - A framework to build cross platform native mobile apps using JavaScript、

Introducing the GraphQL Guide
https://blog.graphql.guide/introducing-the-graphql-guide-11a5ae48628a
jQuery 作者新书。The Guide shows you why GraphQL APIs are the true successor to REST APIs. We’ll be looking at the core fundamentals of GraphQL along with strategies for how to implement it (client-side with Apollo and server-side in Node.js). Additionally, we’ll be exploring different situations in which GraphQL can be used (on mobile with React Native or Java/Swift, and on the web with either React or Vue).
另附：Trying GraphQL

From Node.js to Go: There, and back again
https://www.thenativeweb.io/blog/2018-06-12-15-47-from-node-to-go-there-and-back-again/
A few years ago, we chose Go over Node.js for writing the wolkenkit CLI. A few months ago we rewrote everything from scratch, this time using Node.js again. We’ve learned that you can’t dance at two weddings.

Building A Pub/Sub Service In-House Using Node.js And Redis
https://www.smashingmagazine.com/2018/06/pub-sub-service-in-house-node-js-redis/
As the size of data for each message in our system differs from a few bytes to up to 100MB, we needed a scalable solution that could support a multitude of scenarios. In this article, Dhimil Gosalia explains why you should consider building an in-house Pub/Sub service, too.

Eggjs 和 SOFA 的跨语言互调
https://zhuanlan.zhihu.com/p/38004479
本文通过 Step by Step 的形式介绍了 Eggjs 和 SOFA（Java）是如何进行互联互通的，涵盖了 RPC 的服务发现、接口定义、本地代理生成、服务端实现等各方面，期望展现给你一个相对完整的 Nodejs RPC 解决方案。考虑到社区的接受度、多语言友好性等因素，接下来的示例采用 protobuf 作为 RPC 的序列化方式。

结合源码分析 Node.js 模块加载与运行原理
http://efe.baidu.com/blog/nodejs-module-analyze/
在 Node.js 中使用模块非常简单，我们日常开发中几乎都有过这样的经历：写一段 JavaScript 代码，require 一些想要的包，然后将代码产物 exports 导出。但是，对于 Node.js 模块化背后的加载与运行原理，我们是否清楚呢。首先抛出以下几个问题：Node.js 中的模块支持哪些文件类型？核心模块和第三方模块的加载运行流程有什么不同？除了 JavaScript 模块以外，怎样去写一个 C/C++ 扩展模块？本篇文章，就会结合 Node.js 源码，探究一下以上这些问题背后的答案。

是时候好好安利下LuLu UI框架了
https://l-ui.com/
LuLu UI是阅文前端荣誉出品的UI框架，基于jQuery，针对PC网站，兼容IE8+，包含20+静态或动态UI组件，非常适合面向外部用户的网站开发。其实 jQuery 如果有一个像 AntD 这么漂亮的 UI 库的话，应该还是有不少人会用的。 另附：NG-ZORRO(Ant Design + Angular) 1.0 版本发布

如何提高代码的可读性
https://zhuanlan.zhihu.com/p/34982747
编程语言的文本形式决定了它只能提高一个方面的信噪比而放弃其他方面的信噪比。但是文本不是唯一的信息获取方式。IDE 或者 PaaS 完全可以用各种不同的方式重组信息。

The new (and old) CSS units you’ve never heard about
https://dev.to/maxart2501/the-new-and-old-css-units-youve-never-heard-about-1mn1
Talking about CSS that you might - but more probably might not! - have heard, and even less used, about the units described in this article. And no, not like the “old” vw and vh (which I happen to still have to explain to those less proficient in CSS).

Image Inconsistencies: How and When Browsers Download Images
https://csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images/
Firefox and Safari seem to have the most preferred behaviour here: they won’t download background-images that they know they won’t need. Chrome, Opera, and Edge will all download background-images that are applied to invisible elements.

The Trouble with D3
https://medium.com/dailyjs/the-trouble-with-d3-4a84f7de011f
Recently there were a couple of threads on Twitter discussing the difficulties associated with learning d3.js. I’ve also seen this come up in many similar conversations I’ve had at meetups, conferences, workshops, mailing list threads and slack chats. While I agree that many of the difficulties are real, the threads highlight a common misconception that needs to be cleared up if we want to help people getting into data visualization.

Your Brain on Front-End Development
https://css-tricks.com/your-brain-on-front-end-development/
Part of the job of being a front-end developer is applying different techniques and technologies to pull off the desired UI and UX. Perhaps you work with a design team and implement their designs. I know when I look at a design (heck, even if I know I’m not going to be building it), my front-end brain starts triggering all sorts of things I know will be related to the task. Let’s take a look at what I mean.

Reverse Engineering Instruments’ File Format
http://jamie-wong.com/post/reverse-engineering-instruments-file-format/
At Figma, I work in a C++ codebase that cross-compiles to asm.js and WebAssembly to run in the browser. Occasionally, however, it’s helpful to be able to profile the native build we use for development and debugging. The tool of choice to do that on OS X is Instruments. If we can extract the right information from the files Instruments outputs, then we can construct flamecharts to help us build intuition for what’s happening while our code is executing.

How Developers Power eBay’s Product-Based Shopping Experience
https://www.ebayinc.com/stories/blogs/tech/powering-ebays-product-based-shopping-experience/
As eBay evolves and adapts to stay ahead of commerce trends and user preferences, eBay’s public API portfolio continues to expand and improve to enable third-party developers the means to easily integrate with eBay and to create innovative and valuable experiences for their customers and ours.

Open-sourcing Sonar, a new extensible debugging tool
https://code.facebook.com/posts/1461914677288302/open-sourcing-sonar-a-new-extensible-debugging-tool/
Sonar has enabled Facebook engineers to more easily inspect the behavior of our applications. It has been used in many projects, but sample use cases include: Providing our engineers with access to a view hierarchy that more accurately resembles the features and functionality they are working with, by showing Litho and ComponentKit components; Surfacing a stream of GraphQL requests, as opposed to raw network events; Tracking performance markers in real time, allowing developers to more easily investigate performance problems.
另附：Building data science teams to have an impact at scale

Metacat: Making Big Data Discoverable and Meaningful at Netflix
https://medium.com/netflix-techblog/metacat-making-big-data-discoverable-and-meaningful-at-netflix-56fb36a53520
At Netflix, our data warehouse consists of a large number of data sets stored in Amazon S3 (via Hive), Druid, Elasticsearch, Redshift, Snowflake and MySql. Our platform supports Spark, Presto, Pig, and Hive for consuming, processing and producing data sets. Given the diverse set of data sources, and to make sure our data platform can interoperate across these data sets as one “single” data warehouse, we built Metacat. In this blog, we will discuss our motivations in building Metacat, a metadata service to make data easy to discover, process and manage.

Twitter meets TensorFlow
https://blog.twitter.com/engineering/en_us/topics/insights/2018/twittertensorflow.html
In this blog post, we will discuss the history, evolution, and future of our modeling/testing/serving framework, internally referred to as Deepbird, applying ML to Twitter data, and the challenges of serving ML in production settings. Indeed, Twitter handles large amounts of data and custom data formats. Twitter has a specific infrastructure stack, latency constraints, and a large request volume.

Open Source Database HA Resources From Severalnines
http://highscalability.com/blog/2018/6/8/open-source-database-ha-resources-from-severalnines.html
Severalnines has spent the last several years writing blogs and crafting content to help make your open source database solutions highly available. We are fans of highscalability.com and wanted to post some links to our top resources to help readers learn more how to make MySQL, MongoDB, MariaDB, Percona and PostgreSQL databases scalable.

新鲜货

React & VUE Star 过 10W
https://seven.ooo/hubble-congrats-react-and-vue-100k-stars/#Hubble
Vue.js Passes React in Terms of GitHub Star Count.

Office 365 Is Being Rewritten with JS and React
https://twitter.com/TheLarkInn/status/1006746626617008128

GitHub Release Radar · May 2018
https://blog.github.com/2018-06-12-release-radar-may-2018/
You may have noticed there were a lot of great open source releases this past month. Here are a few of our favorites.

Meet the GitLab Web IDE
https://about.gitlab.com/2018/06/15/introducing-gitlab-s-integrated-development-environment/
Here’s how we went from a proof of concept to a new feature that makes it even easier for everyone to edit inside of GitLab.

Parcel v1.9.0 — Tree Shaking, 2x faster watcher, and more
https://medium.com/@devongovett/parcel-v1-9-0-tree-shaking-2x-faster-watcher-and-more-87f2e1a70f79
The highlights of this release include: Tree Shaking for both ES6 and CommonJS modules — Parcel now removes unused code from your production bundles by completely compiling away the module system, reducing the file sizes and initialization times of bundles considerably; Up to 2x faster file watcher — Parcel’s file watcher now runs in a background worker for performance and stability. This speeds up compilation times during development by up to 2x! Resolved filenames are now cached…

Now, you can deploy your Node.js app to App Engine standard environment
https://cloudplatform.googleblog.com/2018/06/Now-you-can-deploy-your-Node-js-app-to-App-Engine-standard-environment.html
App Engine is ready and waiting to host your Node.js apps, with very minimal changes.
另附：Introducing QUIC support for HTTPS load balancing

Open Source Serverless Frameworks on Docker EE
https://blog.docker.com/2018/06/open-source-serverless-frameworks-docker-ee/
The maturation of container platforms such as Docker EE has made this process even easier, resulting in a number of competing frameworks in this space. We have identified at least 9 different frameworks*. In this study, we start with the following six: OpenFaaS, nuclio, Gestalt, Riff, Fn and OpenWhisk.

Announcing winston@3.0.0!
https://godaddy.github.io/2018/06/12/announcing-winston-3/
winston is the most popular logging solution for Node.js. In fact, when measured in public npm downloads winston is so popular that it has more usage than the top four comparable logging solutions combined.

Record, replay, and stub HTTP interactions.
https://medium.com/dailyjs/the-trouble-with-d3-4a84f7de011f
Polly.JS is a standalone, framework-agnostic JavaScript library that enables recording, replaying, and stubbing HTTP interactions. Polly taps into native browser APIs to mock requests and responses with little to no configuration while giving you the ability to take full control of each request with a simple, powerful, and intuitive API.

React-Select
https://github.com/JedWatson/react-select
A Select control built with and for React. Initially built for use in KeystoneJS.

Math.js
http://mathjs.org
Math.js is an extensive math library for JavaScript and Node.js. It features a flexible expression parser with support for symbolic computation, comes with a large set of built-in functions and constants, and offers an integrated solution to work with different data types like numbers, big numbers, complex numbers, fractions, units, and matrices. Powerful and easy to use.

SVG Icons Library - Vivid.js
https://webkul.github.io/vivid/
A JavaScript library which is built to easily customize and use the SVG Icons with a blaze.

node-android
https://github.com/getICO/node-android
Run Node.js on Android by rewrite Node.js in Java with the compatible API. 挺能折腾的。

PulltoRefresh.js
https://www.boxfactura.com/pulltorefresh.js/
A small, but powerful Javascript library crafted to power your webapp’s pull to refresh feature. No markup needed, highly customizable and dependency-free!

style guide guide, gatsby edition
http://bradfrost.com/blog/post/style-guide-guide-gatsby-edition/
Style Guide Guide is a boilerplate for creating a custom style guide for your organization’s design system. It provides just enough IA and hooks to get you going. As a bonus, I’ve provided links to helpful resources and inspiration to help you as you create your own custom style guide.

Hoyjar - All-in-one Analytics & Feedback
https://www.hotjar.com/
Hotjar is a new and easy way to truly understand your web and mobile site visitors. Find your hottest opportunities for growth today.

The 50 Best Free Datasets for Machine Learning
https://gengo.ai/articles/the-50-best-free-datasets-for-machine-learning/
What are some open datasets for machine learning? We at Gengo decided to create the ultimate cheat sheet for high quality datasets. These range from the vast (looking at you, Kaggle) or the highly specific (data for self-driving cars).

The Second Edition of “Refactoring”
https://martinfowler.com/articles/refactoring-2nd-ed.html#new-cover
For the past two years, I’ve been working on a second edition of my book “Refactoring”. Here I have details about the new edition and some memos describing my thoughts in the last months of this project. The book is in production: we hope that it will be on the shelves early in the fall.

设计

The Problem with Patterns
http://alistapart.com/article/problem-with-patterns
A design pattern library can range from being thorough, trying to cover all the bases, to politely broad, so as to not step on the toes of a design team. But patterns should never sacrifice user context for efficiency and consistency. They should reinforce the importance of the design process while helping an organization think more broadly about its users’ needs and its own goals. Real-world problems rarely are solved with out-of-the-box solutions. Even in service design.

Smashing Book 6 Excerpt - Bringing Personality Back To The Web
https://www.smashingmagazine.com/2018/06/bringing-personality-back-to-the-web/
We’re pleased to announce that the brand new Smashing Book 6 is now available for pre-order. To give you a taste of what the book offers, here’s a sneak peek of a chapter written by Vitaly Friedman. Let’s explore a strategic guide for bringing back personality to the web, in regular real-life projects.
另附：Meet Smashing Book 6: New Frontiers In Web Design

The new design tools on the block
https://uxdesign.cc/the-new-design-tools-on-the-block-1adcba8a293d
While Sketch, Adobe XD, Figma and Invision Studio are all building the same product with slight differences in their focus areas and execution, some new cool kids just arrived to ease painful parts of our workflow.
另附：Flatten 2.0 — Sketch Plugin - Flatten and mirror layers without destructing and update them like a boss

Emotional Design for data heavy apps
https://blog.prototypr.io/emotional-design-to-make-people-fall-in-love-with-data-heavy-apps-fde2bd5db500
It is boring to see the data/statistics in the form of plain graphs or tables or pie charts. But, to represent the data in a way that is more scannable and logical we have to use these forms or representations. Specially in an environment where the customers have to look at the data daily and repeatedly to track status of their audience it is tough to get rid of these representations. In such situation, how can we improve the user experience? From my experience and from inspiration looking at online trends in UX, I wanted share few tips to improve the UI for a possible better UX.

How to Build an Effective Design Framework
https://www.toptal.com/designers/ui/design-framework
Let’s outline the main issues a design framework solves, why you need one, and the components you will need to create when building one. You will find a free downloadable Sketch UI framework later in the article that allows you to create your own design framework.

产品及其它

Blot
https://blot.im/
Blot is a blogging platform with no interface. It creates a special folder in your Dropbox and publishes files you put inside. The point of all this — the reason Blot exists — is so you can use your favorite tools to create whatever you publish.

Speak with Confidence
https://adamdrake.com/speak-with-confidence.html
The good news is that speaking with confidence is a skill that can be learned. It requires practice, but there are a few things you can do in order to dramatically improve the confidence you project when speaking.

游戏是不是洪水猛兽
https://mp.weixin.qq.com/s?__biz=MzA3MDMwOTcwMg==&mid=2650005309&idx=1&sn=e47a34de9bd2420cbf2b2d054e8f2b42
关于游戏的讨论又多了起来。有叫好的，也有叫骂的，还有扼腕叹息的。游戏究竟是不是洪水猛兽？这个问题值得探讨，答案没那么简单。
另附：傅盛：游戏是孩子认识世界的另一种方式

增长教科书Netflix：进取到让自己毛骨悚然
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247496448&idx=1&sn=40a37dd2df0fd66f39eb482a2a0eac73
我们太沉迷于一种想法：不要成为下一个柯达或者美国在线，不要成为一家死守本业，而错过大趋势的公司。我们当时说，如果别人对此存有偏见，我们反而必须更加进取，我们必须进取到让自己毛骨悚然的程度。

死于 25 岁，葬于 75 岁，这是改变上百万人的短片
https://mp.weixin.qq.com/s?__biz=MjM5NDg2NjA4MQ==&mid=2650943601&idx=1&sn=87017e27b33db6d3a4d8009af0d8687c
富兰克林这句名言是一剂猛药…你生来与众不同。现在你所拥有的思想,灵魂,精神是任何时刻、任何地点的其他人都不曾拥有的。每个人从零开始到成为一个领域的专家需要大约7年的时间。我们需要做的是秉持信念,期盼未来。许下你最真诚的梦想,一旦机会来临,就为之拼搏。上帝多次赋予我们梦想的天资,去点亮不曾确信的世界。如果你能活到88岁，在11岁之后，你将有11次机会成为某个领域的专家。
另附：学习编程，从任何时候开始都不晚

在美国模式之外，来见识下不甘平庸的「英伦式」科技创新
http://www.geekpark.net/news/230229
如果硅谷为人们描绘出的未来图景是乐观至上、充满冒险意味，那么当我们来到「前沿之前」，就能发现英国创新者对于时间哲学的理解无形中渗透到了各个层面。无论是剑桥大学卡文迪许实验室、帝国理工大学哈姆林中心里正在攻克的课题方向，还是老牌跑车公司捷豹设计的一款新能源汽车，都在执着地平衡着前沿和人文、大胆创新和实际应用之间的关系。在这里，你几乎不会看到「风口」和「概念」，「能否解决实际问题，给人类带来更好的未来」是最重要的风向标。这也是几个世纪以来，英国推动技术社会进步的一贯思维体现。它看似少了锋芒，但如果我们必将要回答人类社会如何与技术共存的终极问题，这种典型的英式思考或许又是更先进和超前的，它值得被关注和重视。