FEX 技术周刊 - 2019/08/26

FEX 专区

amis 发布 1.0.1 正式版
https://github.com/baidu/amis/releases/tag/1.0.1
正式版本中去除了 react-bootstrap 依赖，并提供了 jssdk 文件，使得不会 react 的开发者也能方便使用。

深阅读

On-Device, Real-Time Hand Tracking with MediaPipe
http://ai.googleblog.com/2019/08/on-device-real-time-hand-tracking-with.html
We are announcing the release of a new approach to hand perception, which we previewed CVPR 2019 in June, implemented in MediaPipe—an open source cross platform framework for building pipelines to process perceptual data of different modalities, such as video and audio. This approach provides high-fidelity hand and finger tracking by employing machine learning (ML) to infer 21 3D keypoints of a hand from just a single frame. Whereas current state-of-the-art approaches rely primarily on powerful desktop environments for inference, our method achieves real-time performance on a mobile phone, and even scales to multiple hands. 另附：Turbo, An Improved Rainbow Colormap for Visualization

Using Native JavaScript Modules in Production Today
https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/
Two years ago I wrote about a technique—now commonly referred to as the module/nomodule pattern—that allows you to write ES2015+ JavaScript and then use bundlers and transpilers to generate two versions of your codebase, one with modern syntax (loaded via <script type="module">) and one with ES5 syntax (loaded via <script nomodule>). The technique allows you to ship significantly less code to module-supporting browsers, and it’s now supported by most web frameworks and CLIs. But now, thanks to some recent advances in bundler technology, it’s possible to deploy your production code as ES2015 modules—with both static and dynamic imports—and get better performance than all non-module options currently available. In fact, this site has been using real modules in production for months.

WebAssembly Interface Types: Interoperate with All the Things!
https://hacks.mozilla.org/2019/08/webassembly-interface-types/
Today’s WebAssembly, you wouldn’t want to use it in this way. You can run WebAssembly in all of these places, but that’s not enough. Right now, WebAssembly only talks in numbers. This means the two languages can call each other’s functions. But if a function takes or returns anything besides numbers, things get complicated. It should be possible to ship a single WebAssembly module and have it run anywhere… without making life hard for either the module’s user or developer. And with a new, early-stage proposal, we’re seeing how we can make this Just Work™. So let’s take a look at how this will work. But first, let’s look at where we are today and the problems that we’re trying to solve.

Software Architecture Guide
https://martinfowler.com/architecture/
When people in the software industry talk about “architecture”, they refer to a hazily defined notion of the most important aspects of the internal design of a software system. A good architecture is important, otherwise it becomes slower and more expensive to add new capabilities in the future. This page outlines my view of software architecture and points you to more material about architecture on this site. 另附：Why Software Architects Must Be Involved in the Earliest Systems Engineering Activities.

面向对象的编程：一场万亿美元级的灾难
https://mp.weixin.qq.com/s/o4cHtmhmoXpDdF6GclNx0g
OOP被许多人认为是计算机科学界皇冠上的明珠，是编程部门的终极解决方案，可以消除我们的所有问题，是编写程序的唯一实际方式，是上天赐予我们的编程法宝……实则不是，人们开始无法忍受抽象和随意共享的可变对象组成的复杂图形。宝贵的时间和脑力耗费在了思考“抽象”和“设计模式”上，而不是解决实际问题。许多人批评面向对象编程（OOP），包括大名鼎鼎的软件工程师。就连OOP的发明者本人也猛烈炮轰现代OOP！每个软件开发人员的终极目标应该是编写可靠的代码。如果代码有缺陷且不可靠，其他一切都不重要。编写可靠代码的最佳方法又是什么？简单性。简单性是复杂性的对立面。因此，我们软件开发人员的首要职责应该是降低代码复杂性。

前端物料中台建设
https://juejin.im/post/5d5b542e6fb9a06acb3ea2b0
接上一篇的文章大BU级别的”前后端分离”实践中提出了当前的前端团队中存在一些问题以及解决思路，并且在其中详细地写出了统一视图服务的实现思路和收益。这篇文章主要写关于前端迭代及上下游协作效率我们是如何解决的。

NoahV | 百度智能运维前端框架开源了
https://mp.weixin.qq.com/s?__biz=MzUyMzA3MTY1NA==&mid=2247485193&idx=1&sn=3989d168bfa0cebc5dc02a95c999b15c
百度智能运维前端研发团队是如何在人员有限的情况下开发出完善的覆盖百度内外的各类运维管理平台呢？这主要得益于团队根据多年的实践经验推出的NoahV运维前端研发框架。下面我们就来详细介绍下NoahV框架是如何提升运维平台前端研发效率，从而帮助团队快速高效的研发运维管理平台。

SEIN.js
http://seinjs.com/
Sein致力于打造一个专业的多平台（目前已支持Web、小程序、小游戏，未来还会更多）的3D游戏开发解决方案。它提供了从简单快速开发到复杂稳健设计的各个过渡阶段，来灵活应对各个项目的需求。得益于作者对许多成熟的游戏引擎的使用与思考，本引擎借鉴了它们中很多优秀的特点，也结合了作者本人在Web前端领域的经验，加上了许多针对Web端的特别设计和优化，使其在开发效率和运行效率之间保持了平衡，并拥有不俗的扩展性和复用性。

解析 Antd Table 组件的错位和性能问题
https://mp.weixin.qq.com/s?__biz=MzAwODcwODYwMw==&mid=2247484598&idx=1&sn=a0c434792ed73263e5e2403fd207c5a1
在做活动引擎的过程中，发现 Antd 的 Table 组件会发送各种行错位，和列错位。关于行错位不是本节内容介绍的重点，本文主要介绍在启用固定列的时候（即使用fixed） 时发生的列错位 bug 以及其衍生的一系列性能问题。

Functional Programming in JavaScript: How and Why
https://blog.bitsrc.io/functional-programming-in-javascript-how-and-why-94e7a97343b
How to write ultra-modular, easily testable, easily maintainable, and highly reusable Javascript w/o React

Microfrontends — when they aren’t the answer (React, Angular, Vue etc)
https://medium.com/javascript-in-plain-english/microfrontends-when-they-arent-the-answer-react-angular-vue-etc-45dcf266f6f9
Taking a look at potential drawbacks of using Microfrontends and when it doesn’t make sense to adopt them.

Iframes are just terrible. Here’s how they could be better
https://medium.com/@bluepnume/iframes-are-just-terrible-heres-how-they-could-be-better-974b731f0fb4
In a nutshell: iframes let you build user experiences into embeddable ‘cross-domain components’, which let users interact with other sites without being redirected. There are a metric ton of awesome uses for that other than tracking and advertizing. Nothing else comes close for this purpose; and as a result, I feel we’re not using iframes to their full potential.

How to build a plugin system on the web and also sleep well at night
https://www.figma.com/blog/how-we-built-the-figma-plugin-system/
At Figma, we recently tackled one of our biggest engineering challenges yet: supporting plugins. Our plugins API enables third-party developers to run code directly inside our browser-based design tool, so teams can adapt Figma to their own workflows. They can enable accessibility checkers to measure contrast, translation apps to convert language, importers to populate designs with content, and anything else their heart desires.

How to Build Good Software
https://www.csc.gov.sg/articles/how-to-build-good-software
Software has characteristics that make it hard to build with traditional management techniques; effective development requires a different, more exploratory and iterative approach.

Lesson Learned from Queries over 1.3 Trillion Rows of Data Within Milliseconds of Response Time at Zhihu.com
https://pingcap.com/success-stories/lesson-learned-from-queries-over-1.3-trillion-rows-of-data-within-milliseconds-of-response-time-at-zhihu/
In this post, I’ll dive deep into how we managed to keep milliseconds of query response time over such a large amount of data and how TiDB, an open source MySQL-compatible NewSQL Hybrid Transactional/Analytical Processing (HTAP) database, empowered us to get real-time insights into our data. I’ll introduce why we chose TiDB, how we are using it, what we learned and best practice and some thoughts about the future.

Understanding Apache Arrow Flight
https://www.dremio.com/understanding-apache-arrow-flight/
Arrow Flight provides a high-performance wire protocol for large-volume data transfer for analytics, designed for the needs of the modern data world including cross-platform language support, infinite parallelism, high efficiency, robust security, multi-region distribution, and efficient network utilization.

Serverless on GCP
https://bravenewgeek.com/serverless-on-gcp/
GCP has a comprehensive set of compute options ranging from minimally managed VMs all the way to highly managed serverless backends. Below is the full spectrum of GCP’s compute services at the time of this writing. I’ll provide a brief overview of each of these services just to get the lay of the land. We’ll start from the highest level of abstraction and work our way down, and then we’ll hone in on the serverless solutions. 另附：Google Cloud Run Button: ‘Click-to-Deploy’ for your Git Repos.

Redesigning our systems to provide more control over Off-Facebook activity
https://engineering.fb.com/data-infrastructure/off-facebook-activity/
At F8 2018, we shared our plan to build a tool that would allow people to see the apps and websites that choose to share activity with us and to disconnect that activity from their accounts. Today we are beginning to roll out that tool, which is called Off-Facebook Activity. Building Off-Facebook Activity required an extensive redesign of the way our systems store and process this activity and new methods for disconnecting information about a person’s off-site activity from their account.

Building a universal search system for Pinterest
https://medium.com/@Pinterest_Engineering/building-a-universal-search-system-for-pinterest-e4cb03a898d4?source=rss-ef81ef829bcb——2
As the types of content on Pinterest grow, our search results must adapt as well. Pinners can use filters to narrow down to the content type they want, but we can make the experience even better by predicting the most relevant answers for them. As a solution, we’re building a system to deliver content from various verticals within one integrated search results page. Today when you search you’ll already see these different types of formats (Video, Shopping, Pinners to follow). Over time these results will become even more personalized and relevant through advancements in machine learning ranking.

Building the New Uber Freight App as Lists of Modular, Reusable Components
https://eng.uber.com/uber-freight-app/
As Uber Freight marked its second anniversary, we went back to the drawing board to redesign its app. The original carrier app was successful for owner-operators with one or two drivers, but it wasn’t optimized for larger fleets—feedback we were hearing directly from our carrier base. It let carriers find and move freight from point A to point B, but did not support multi-stop loads with multiple pick-ups and drop-offs.

YAML: probably not so great after all
https://arp242.net/yaml-config.html
Don’t get me wrong, it’s not like YAML is absolutely terrible – it’s probably better than using JSON – but it’s not exactly great either. There are some drawbacks and surprises that are not at all obvious at first, and there are a number of better alternatives such as TOML and other more specialized formats. Personally I’m not likely to use it again when I’ve got a choice.

新鲜货

Chrome Dev Summit is now open for registration!
https://blog.chromium.org/2019/08/chrome-dev-summit-is-now-open-for.html
Nov 11-12, San Francisco. Over the two days, we will focus on the latest best practices, tools and updates coming to the web platform and give developers a chance to hear directly from the Chrome product engineering teams.

GitLab 12.2 released with Directed Acyclic Graphs for Pipelines and Design Management
https://about.gitlab.com/2019/08/22/gitlab-12-2-released/
Faster, more flexible pipelines; Design Management; Cross Project Merge Request Dependencies.

The GitHub Student Developer Pack is back
https://github.blog/2019-08-20-the-github-student-developer-pack-is-back/
The GitHub Student Developer Pack is back for another school year. The program has provided over 1.5 million students the best real-world developer tools and training for free since its introduction six years ago. As the Pack continues to grow and shape the next generation of developers, we’ve continued to listen. We’re here to better understand how you’re using these tools and what’s missing that you hope to see included. Whether you’re developing your portfolio, building a new desktop app, or creating an interactive map—the Pack was built to provide you with the exact tools you need to learn.

Introducing Microsoft Edge Beta: Be one of the first to try it now
https://blogs.windows.com/windowsexperience/2019/08/20/introducing-microsoft-edge-beta-be-one-of-the-first-to-try-it-now/
Microsoft Edge is now available for all supported versions of Windows and macOS. Our goal with Microsoft Edge is to create better web compatibility with better performance for our customers while ensuring less fragmentation of the web for all web developers. Our community has been with us on this journey from the beginning and your feedback is making it possible to rapidly improve. 另附：evolt.org Browser Archive 20 Years Old.

Rails 6.0
https://weblog.rubyonrails.org/2019/8/15/Rails-6-0-final-release/
Dealing with incoming email, composing rich-text content, connecting to multiple databases, parallelizing test runs, integrating JavaScript with love, and rewriting the code loader. These are fundamental improvements to the fundamentals of working with the web and building fast and fresh applications. This is the kind of work we’ve been doing for the past fifteen years, and we’re still at it. THIS IS RAILS SIX!

Announcing NodeGUI and React NodeGUI - Build native desktop apps with Javascript and CSS
https://blog.atulr.com/nodegui-intro/
NodeGUI is an open source library for building cross platform native desktop applications with JavaScript and CSS like styling. NodeGui apps can run on Mac, Windows, and Linux from a single codebase. NodeGUI is powered by Qt5 💚 which makes it CPU and memory efficient as compared to other chromium based solutions like electron. NodeGui wants to incorporate everything that is good about Electron: The ease of development, freedom of styling, Native APIs, great documentation, etc. At the same time NodeGui aims to be memory and CPU efficient.

Growing Web Template Studio
https://blogs.windows.com/windowsdeveloper/2019/08/21/growing-web-template-studio/
Web Template Studio (WebTS) is a user-friendly wizard to quickly bootstrap a web application and provides a ReadMe.md with step by step instructions to start developing. Best of all, Web Template Studio is open source on GitHub. Our philosophy is to help you focus on your ideas and bootstrap your app in a minimal amount of time. We also strive to introduce best patterns and practices. Web Template Studio currently supports React, Vue, and Angular for frontend and Node.js and Flask for backend. You can choose any combination of frontend/backend frameworks to quickly build your project.

AdminBro v1.0.0 released
https://medium.com/@wojciechkrysiak/adminbro-v1-0-0-released-admin-panel-for-node-js-apps-with-react-on-the-frontend-bc58b22cbb9e
AdminBro is An automatic admin interface which can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminBro generates UI which allows you (or other trusted users) to manage content.

react-flame-graph
https://react-flame-graph.now.sh/
A React component for visualizing profiling data.

FilePond
https://github.com/pqina/filepond
Upload anything, from anywhere. A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

Fusion.js
https://fusionjs.com/
Fusion.js gives you the developer experience you expect from a React/Redux setup and provides tools to take project quality to the next level.

date-fns
https://github.com/date-fns/date-fns
date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. date-fns is like lodash for dates. It has 180+ functions for all occasions.

Chart.xkcd - xkcd styled chart lib
https://github.com/timqian/chart.xkcd
Chart.xkcd is a chart library plots “sketchy”, “cartoony” or “hand-drawn” styled charts.

Sunsetting Mercurial support in Bitbucket
https://bitbucket.org/blog/sunsetting-mercurial-support-in-bitbucket
After much consideration, we’ve decided to remove Mercurial support from Bitbucket Cloud and its API. Mercurial features and repositories will be officially removed from Bitbucket and its API on June 1, 2020. Read on to learn more about this decision, the important timelines, and get migration resources and support.

monolith
https://github.com/Y2Z/monolith
A data hoarder’s dream come true: bundle any web page into a single HTML file. You can finally replace that gazillion of open tabs with a gazillion of .html files stored somewhere on your precious little drive. Unlike conventional “Save page as…”, monolith not only saves the target document, it embeds CSS, image, and JavaScript assets all at once, producing a single HTML5 document that is a joy to store and share. If compared to saving websites with wget -mpk, monolith embeds all assets as data URLs and therefore displays the saved page exactly the same, being completely separated from the Internet.

Big Blue Open Sources Power Chip Instruction Set
https://www.nextplatform.com/2019/08/20/big-blue-open-sources-power-chip-instruction-set/
It has been a long time coming, and it might have been better if this had been done a decade ago. But with a big injection of open source spirit from its acquisition of Red Hat, IBM is finally taking the next step and open sourcing the instruction set architecture of its Power family of processors.

OpenDrop: an Open Source AirDrop Implementation
https://www.sqlite.org/fasterthanfs.html
OpenDrop is a command-line tool that allows sharing files between devices directly over Wi-Fi. Its unique feature is that it is protocol-compatible with Apple AirDrop which allows to share files with Apple devices running iOS and macOS. Currently (and probably also for the foreseeable future), OpenDrop only supports sending to Apple devices that are discoverable by everybody as the default contacts only mode requires Apple-signed certificates.

Tech Interview Handbook
https://yangshun.github.io/tech-interview-handbook/
Carefully curated content to help you ace your next technical interview.

设计

The Untapped Power of Vulnerability & Transparency in Content Strategy
https://alistapart.com/article/the-untapped-power-of-vulnerability-transparency-in-content-strategy/
In marketing, transparency and vulnerability are unjustly stigmatized. The words conjure illusions of being frightened, imperfect, and powerless. And for companies that shove carefully curated personas in front of users, little is more terrifying than losing control of how people perceive the brand.

4 Rules for Intuitive UX
https://learnui.design/blog/4-rules-intuitive-ux.html
What I want to talk about today is four little rules that will help eliminate these pain points in your own designs. They’re the heuristics that are a level or two deeper than “use radio buttons if the user can only select one thing”. But, if you can remember to obey the things in this checklist, you’ll be that much closer to creating designs that your users can use easily right off the bat, freeing up your time for other, more important things. Here’s what we’ll be covering:

• Obey the Law of Locality
• ABD: Anything But Dropdowns
• Pass the Squint Test
• Teach by example

UI Design System and Component Library: Where Things Break
https://codeburst.io/ui-design-system-and-component-library-where-things-break-d9c55dc6e386
Is the workflow between designers and developers broken for UI components? And will it be better in 2020? 另附：OutSystems UI: A Design System Foundation, The ABCs of Design Systems.

Lexend is a variable font empirically shown to significantly improve reading-proficiency
https://thomasjockin.github.io/lexend/
As prescription eyeglasses achieve proficiency for persons with short-sightedness, Lexend employs variable font technology to prescribe a personalized axis setting according to the Shaver-Troup Formulations.

Richer Relationships with People-Centered Design
https://medium.com/microsoft-design/richer-relationships-with-people-centered-design-cd3dd16c6646?source=rss—-71c99841f1ad—4
People and relationships are at the core of everything we do in our lives, from grabbing coffee to starting a new project. Understanding our relationships to other people, and the relationships among people we know, is a key part of the human experience. Sharing these nuances of identity and relationships in the tools we use every day is the next step in reflecting reality in our digital lives.

Uber Redesign Concept 2019
https://uxplanet.org/uber-redesign-concept-2019-3d8c430f6c29
My goal was to redesign or we can say improve the design and the flow of the app to make it simpler and intuitive by finding inspirations and gaps among existing products and ease the process of booking a cab.

产品及其它

Every productivity thought I’ve ever had, as concisely as possible
https://guzey.com/productivity/
I combed through several years of my private notes and through everything I published on productivity before and tried to summarize all of it in this post.

美团张川：做了8年平台，我总结了平台的5道坎
https://news.caijingmobile.com/article/detail/402650
第一关：动态不平衡才能形成真正的平台；第二关：标准化决定平台大小；第三关：高频打低频是个误解；第四关：供给端的效率高，平台价值大；第五关：商业化变革，剃须刀还是电冰箱?

中台禁区：为什么最关键的组织架构却鲜少人谈
https://mp.weixin.qq.com/s?__biz=MjM5MDE0Mjc4MA==&mid=2651018922&idx=1&sn=26ac29a28433ce64f65a7675ddc0b546
对于建设中台的必要性，每家企业肯定都有自己的想法，诸如现有体系不能满足新产品快速迭代和试错的渴望；产品越来越多时，多分支的维护和开发凸显了人力不足的问题等。如果中台确实是解决企业现有问题的合理方案，那么建设过程中伴随的组织架构问题就是企业需要关心的，比如中台团队的人从哪来？经费从哪来？建设中台之后，业务团队的决策权力是不是被大幅缩减？本文采访了多位中台实践者，揭秘大多数人不愿意公开分享的中台组织架构调整。

互联网大佬推崇的生物学思维，是什么鬼
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654635983&idx=1&sn=7dace1ab05d8315bcb076adf8fea7653
人类的技术，从网站到交易系统，从城市基础设施到科学模型，甚至是为大型企业提供配套服务的供应链系统和物流系统，都已变得过于复杂且相互交错。为什么复杂的技术系统越来越难以理解了呢？我们应该如何看待这个复杂的世界呢？生物学思维和物理学思维是理解世界的两种方式，而复杂的技术系统更接近生物学系统，因此用生物学思维理解技术系统是个不错的选择。复杂系统研究专家塞缪尔•阿贝斯曼用《为什么需要生物学思维》这本书为我们提供了一个洞悉复杂世界的思考方式——生物学思维。生物学是一门能打通很多跨界知识的学科。相比物理学等自然科学，生物学更深刻地揭示了世界的底层规律，其思想放之四海而皆准。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-08-26·手绘风可视化、可视分析效率改进、人体解剖学地铁图

– THE END –