FEX 技术周刊 - 2019/12/16

深阅读

Develop, Debug, Learn? A time to re-think our tooling
https://christianheilmann.com/2019/12/12/develop-debug-learn-a-time-to-re-think-our-tooling/
I don’t have all the answers we seek to make development a simpler task. But I think we are well on the way. With an open mind, open ears and open source we can fix a lot of the things that both tire us and make our market appear less appealing. People are worried about automation and computers taking their jobs. They also are worried about large tech companies ruling the world without opening the doors to people who haven’t got the same education and experience as the ones working in them. By changing our tools to be more all-encompassing and making our accumulated knowledge part of the development process we make a good start to changing that. And we make it easier for the next generation of developers to focus on delivery, not on knowing all about the toolchain.

Announcing Flutter 1.12: What a year!
https://medium.com/flutter/announcing-flutter-1-12-what-a-year-22c256ba525d
https://medium.com/flutter/web-support-for-flutter-goes-beta-35b64a1217c0
https://developers.googleblog.com/2019/12/flutter-ui-ambient-computing.html
Flutter 1.12 has been released with several performance improvements, localizations for 24 new locales, new widgets and more. 另附：Under the Hood of eBay Motors: New App Powered By Advanced Technology Like Flutter, ML and BFF、Exploring SwiftUI Part 1 - A brief history of Apple UI development and Initial impressions.

20 ways to become a better Node.js developer in 2020
https://medium.com/@me_37286/20-ways-to-become-a-better-node-js-developer-in-2020-d6bd73fcf424
I’ve compiled below 20 skills, technologies and considerations on choosing between them. Picking the right tools became one of our greatest challenges — the Node.js ecosystem has matured and present attractive options in almost every field. Vanilla or TypeScript? Ava, Mocha or Jest? Express, Fastify or Koa? or maybe Nest? should I include ES6 modules in my next project or stick to good-old ‘require’? Mixing and matching among all of those require deep familiarity with the consequences. These rich set of tools and paradigms also encourages you to tiptoe into unexplored territory. I hope that the next bullets will inspire you to enrich your toolbox and diversify yourself.

Browser Functions: A new serverless platform using Web Browser execution engines
https://medium.com/@richardyoung00/browser-functions-a-new-serverless-platform-using-web-browser-execution-engines-31d2293e650b
https://github.com/IBM/browser-functions
If you want to build a modern web app, you typically need to use a few different tools: one set for the front-end, and another for the back-end. In addition, you would need to learn and use a different API (and often even a different programming language) for the back-end. However, the Web API is a rich and stable API, and the web browser is a stable, powerful and secure execution environment. So why then can we not use this execution environment for our back-end too? This is the question we asked ourselves at IBM Research, so we decided to try running a browser on the server. This turned out to work much better than we had anticipated!

从 VSCode 看大型 IDE 技术架构
https://www.yuque.com/paranoidjk/blog/vuuz30
谈起 Web IDE，没人能绕开 VSCode，它非常流行，同时又完全开源，总共 350000 行 TypeScript 代码的巨大工程，使用了 142 个开源库。市面上选择基于 VSCode 去修改定制的 IDE 比比皆是：Weex Studio、白鹭Egret Wing、快应用IDE… 我希望从 VSCode 身上看到什么？大型复杂 GUI 软件（如 IDE 类）如何组织功能模块代码，如何使用 Electron 技术将 Web 软件桌面化，如何在打造插件化开放生态的同时保证软件整体质量与性能，如何打造一款好用的、流行的工具软件。

基于通用组件语言规范的声明式组件库，腾讯WeComponents正式开源
https://mp.weixin.qq.com/s?__biz=MTEwNTM0ODI0MQ==&mid=2653439208&idx=1&sn=21ff492d720d3987b568b8103dff73b8
面对各类运营需求，微信游戏团队在B端开发实践中进行思考和提炼，创立了通用组件语言规范（CLS，Common Components Language Specification），对所有组件进行统一抽象，指引无终端依赖、无语言依赖、无框架依赖的标准化组件开发模式。并基于此规范实现了一套 Vue.js 的声明式组件库，以标准化JSON描述页面组成，写完JSON就完成了页面开发，以此来简化前端工作，提高开发效率。

你的分层架构还好吗？
https://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652977171&idx=1&sn=f2ada22d4526d1cbeb122b9b073eaab3
当我们开始一个新的项目，我们就开始创建一个个折文件夹。哦，不对，那我们在做分层架构设计。架构最后落到现有的计算机操作系统上，其的展示形式是分层架构。毕竟，硅基不如碳基。可是呢，为什么我们要做分层架构设计呢？通过层（Layer）来隔离不同的关注点。

業務架構團隊是公司最核心的團隊
https://www.ithome.com.tw/voice/134802
在任何一家公司，業務絕對都是最重要的，但諷刺的是，對於業務的設計和規劃，大家似乎都是正襟危坐地亂做一通。表面很嚴肅認真地探討研究業務，實際上卻沒有系統性、科學性、協調性。如果業務架構設計得好且後續實行得好，可以幫助公司減少混亂、減少浪費、加快產品上市週期、增加競爭優勢。

Thinking in React Hooks
https://wattenberger.com/blog/react-hooks
React introduced hooks one year ago, and they’ve been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks.

React is a state manager too, ya know!
https://levelup.gitconnected.com/react-is-a-state-manager-too-ya-know-ff3a7b357eeb
You probably don’t need Redux… or Context. Use React’s internal component state instead of complex and third-party solutions. 另附：Manage Global State with Context API and Hooks

Z’s Still Not Dead Baby, Z’s Still Not Dead
https://24ways.org/2019/zs-still-not-dead-baby-zs-still-not-dead/
Still, all fashions fade eventually. I’m hopeful that with the styling tools we have today, we’ll move beyond flatness and add an extra dimension. Here are five CSS properties which will bring depth and richness to your designs. 另附：Art Direction and the New WordPress Editor.

Six Web Performance Technologies to Watch in 2020
https://simonhearne.com/2019/2020-predictions/
Don’t bet on 5G and HTTP/3 to make things faster, there are six technologies that I believe will have a bigger impact on web performance in 2020.

W3C Trace Context: An Open Standard with Big Implications for Distributed Tracing Tools
https://blog.newrelic.com/product-news/w3c-trace-context-distributed-tracing-standard/

Continuous integration and deployment with Bazel
https://blogs.dropbox.com/tech/2019/12/continuous-integration-and-deployment-with-bazel/
Code in our monorepo is built and tested exclusively with Bazel. Abstractly, Bazel views the repository as a set of targets (files, binaries, libraries, tests, etc.) and the dependencies between them. In particular, Bazel knows the dependency graph between all source files and tests in the repository. We modified our continuous integration system to extract this dependency information from Bazel (via bazel query) and use it to compute the set of tests affected by a particular commit. This allows us to greatly reduce the number of tests executed on most commits while still being correct.

Back under a SQL Umbrella
https://queue.acm.org/detail.cfm?id=3371598 If anything will define the year databases have had in 2019, it’ll probably be the huge shift into thinking about everything (well, almost) in terms of SQL. This post digs into two papers that respectively cover Google’s Procella data system and a SQL-based distributed machine learning system. 另附：[Why databases use ordered indexes but programming uses hash tables](https://www.evanjones.ca/ordered-vs-unordered-indexes.html.

Parsing 18 billion JSON lines with Go
https://itnext.io/parsing-18-billion-lines-json-with-go-738be6ee5ed2
At my employer Tjek we recently decided to rebuild our event pipeline and move it to Google BigQuery to reduce complexity in the stack and to remove some services that were no longer maintainable. The new service that would replace the old http service was easy to write, but then came the question of moving the historic data into BigQuery. To migrate the old data, we had to backfill our entire dataset, accumulated over the last 10 years, into BigQuery and this is the story of how it was done. 另附：JSON Parser with JavaScript.

How Scylla Scaled to One Billion Rows a Second
https://www.scylladb.com/2019/12/12/how-scylla-scaled-to-one-billion-rows-a-second/
Scylla is a highly scalable, highly performant NoSQL database. But just how fast can fast get? And what happens when you run it on a bare metal cloud like Packet? We set out to design a test that would showcase the combined abilities of Scylla as a database and Packet’s fastest instances. We’ll spill the beans early: we were able to scan more than 1,000,000,000 rows per second (that’s a billion, with a “b”). Now, if we were only doing a million rows per second per server, that’d need a cluster of 1,000 servers.

Introducing Storage Transfer Service for on-premises data
https://cloud.google.com/blog/products/storage-data-transfer/introducing-storage-transfer-service-for-on-premises-data
There’s an enormous amount of data in the world today, and your company likely operates its own storage infrastructure to store this data. Running your business in the cloud can generate more value from your data and facilitate collaboration across your organization, all while optimizing for infrastructure costs. Before you can take advantage of all that cloud offers, though, you have to actually get your data to the cloud. That’s why we’ve developed a new software service that helps you accomplish large-scale, online data transfers: Transfer Service for on-premises data. This can help take the complexity out of data transfers and move data faster than existing online tools like gsutil. 另附：[]

The History of Data Exchange
https://www.liquidata.co/blog/2019-12-06-the-history-of-data-exchange/
We need to collaborate on open data to make it better, just like with open source software. We need to collaborate at internet-scale. That is why we created DoltHub, a place on the internet to store, host, and collaborate on open data for free. CSVs are the past and present of data exchange but Dolt and DoltHub are the future.

Bootstrapping Understanding
http://www.muppetlabs.com/~breadbox/txt/bure.html
An Introduction to Reverse Engineering.

API Practices If You Hate Your Customers
https://queue.acm.org/detail.cfm?ref=rss&id=3375635
In this article, I document a number of industry best practices designed to show customers how much you hate them. All of them are easy to implement. Heck, your company may be doing many of these already.

The Product-Minded Software Engineer
https://blog.pragmaticengineer.com/the-product-minded-engineer/
Product-minded engineers are developers with lots of interest in the product itself. They want to understand why decisions are made, how people use the product, and love to be involved in making product decisions. They’re someone who would likely make a good product manager if they ever decide to give up the joy of engineering. I’ve worked with many great product-minded engineers and consider myself to be this kind of developer. At companies building world-class products, product-minded engineers take teams to a new level of impact.

Challenging projects every programmer should try
http://web.eecs.utk.edu/~azh/blog/challengingprojects.html
I talk to a lot of students and professional developers that often want to start a side project, but aren’t sure what to build. Below is a handful of software projects that taught me a lot. In fact, they’re great because you could build them multiple times and learn new things each time. So whenever I don’t know what to build or I want to learn a new programming language or framework, I start with one of these:

• Text editor
• 2D game - Space Invaders
• Compiler - Tiny BASIC
• Mini operating system
• Spreadsheet (hard!)
• Video game console emulator (hard!)

新鲜货

参加第十四届D2前端技术论坛，是种怎样的体验？
https://www.zhihu.com/question/360620835
一年一度的前端网友见面会，期待演讲视频和资料。

OSCHINA 公布 2019 年度最受欢迎中国开源软件
https://www.oschina.net/question/2918182_2313492
开源中国（OSCHINA）是目前国内为数不多深耕于围绕“开源/自由软件”为开发者分享开源业内事、传播开源价值观的平台。为了更好地展示国内开源现状，探讨国内开源趋势，激励国内开源人才，促进国内开源生态完善，开源中国每年会在年底举办一年一度的最受欢迎中国开源软件评选活动，该活动目前已成功举办五届。

Instadeq - Data Analysis and Visualization for Everyone
https://instadeq.com/
Data analysis, visualization and collaboration for individuals and teams. 另附：Things end users care about but programmers don’t.

Atlassian launches new serverless cloud development platform
https://techcrunch.com/2019/12/12/atlassian-launches-new-serverless-cloud-development-platform/
https://www.atlassian.com/forge
Atlassian has a portfolio of developer tools like Bitbucket, Jira and Confluence. It also has a marketplace with thousands of add-ons. But what it lacked was a development platform to call its own. Today, that changed when the company announced the Forge platform. “Forge will empower developers to more easily build and run enterprise-ready cloud apps that integrate with Atlassian products,” the company wrote in a blog post announcing the new tools.

W3C Trace Context specification enters proposed recommendation status and what it means
https://www.w3.org/blog/2019/12/trace-context-enters-proposed-recommendation/
https://blog.newrelic.com/product-news/w3c-trace-context-distributed-tracing-standard/
https://opensource.googleblog.com/2019/12/w3c-trace-context-specification-what-it.html
W3C Trace Context specification defines the format for propagating distributed tracing context between services. Distributed tracing makes it easy for developers to find the causes of issues in highly-distributed microservices applications by tracking how a single interaction was processed across multiple services. Each step of a trace is correlated through an ID that is passed between services, and W3C Trace Context now defines a standard for these context propagation headers.

Web Design And Development Advent Roundup For 2019
https://www.smashingmagazine.com/2019/12/web-design-development-advent-roundup-2019/
A roundup of Advent Calendar sites of interest to web designers and developers. From accessibility to UX, coding challenges to Perl, there really is something for everyone this December.

A Recap of Frontend Development in 2019
https://levelup.gitconnected.com/a-recap-of-frontend-development-in-2019-1e7d07966d6c
A look back at the top events, news, and trends for frontend and web development.

5 Top Cloud IDEs for JavaScript Developers
https://blog.bitsrc.io/5-top-cloud-ides-for-javascript-developers-62ee672c6e88
Top 5 JavaScript IDEs you should know in 2020

Electron joins the OpenJS Foundation
https://openjsf.org/blog/2019/12/11/electron-joins-the-openjs-foundation/
The OpenJS Foundation today announced the open source web framework Electron has been accepted into the Foundation’s incubation program. Electron, an open source framework created for building desktop apps using JavaScript, HTML, and CSS, is based on Node.js and Chromium. Additionally, it is widely used on many well-known applications including Discord, Microsoft Teams, OpenFin, Skype, Slack, Trello, Visual Studio Code, and many more.

reactstrap
https://github.com/reactstrap/reactstrap
Stateless React Components for Bootstrap 4.

Preact V10.1
https://github.com/preactjs/preact/releases/tag/10.1.0
This release adds support for the highly anticipated preact-devtools extension. It’s in an early preview state, but it has proven to be very useful already for inspecting a component tree in our internal testing. Apart from that there is a new SuspenseList component to control loading in lists and the usual round of bug fixes.

OpenLayers
https://openlayers.org/
A high-performance, feature-packed library for all your mapping needs. OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source. OpenLayers has been developed to further the use of geographic information of all kinds.

Fx Command-line JSON processing tool
https://github.com/antonmedv/fx
Command-line tool and terminal JSON viewer.

Deep JavaScript: Theory and techniques
https://exploringjs.com/deep-js/
This book dives deeply into JavaScript: It teaches practical techniques for using the language better. It teaches how the language works and why. What it teaches is firmly grounded in the ECMAScript specification (which the book explains and refers to). It covers only the language (ignoring platform-specific features such as browser APIs) but not exhaustively. Instead, it focuses on a selection of important topics

Gluegun
https://github.com/infinitered/gluegun
Gluegun is a delightful toolkit for building Node-based command-line interfaces (CLIs) in TypeScript or modern JavaScript,.

SSH2
https://github.com/mscdex/ssh2
SSH2 client and server modules written in pure JavaScript for node.js.

HappyHues - Curated colors in context
https://www.happyhues.co/
Not sure what colors to use in your designs or where to use them? Happy Colors is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.

DockerSlim
https://github.com/docker-slim/docker-slim
https://dockersl.im/
Don’t change anything in your Docker container image and minify it by up to 30x (and for compiled languages even more) making it secure too!

httpserver.h
https://github.com/jeremycw/httpserver.h
Single header library for writing non-blocking HTTP servers in C.

Vim 8.2 is available!
https://www.vim.org/vim-8.2-released.php
The main new feature of Vim 8.2 is support for popup windows. These can be used to display text on top of other windows and are very flexible: they can be positioned relative to text, at an absolute position or just in the middle of the screen. The size can be fixed or can adjust to fit the text. A “zindex” value specifies what popup window goes on top of others.

设计

Looking at the Future – Design Trends of 2020
https://www.toptal.com/designers/ux/digital-design-trends-2020
We’ve identified 20 emerging design trends for 2020, but we’re not just listing fonts and colors. We’re showcasing game-changers and industry shakers that will define our experiential landscape for the year to come.

Principles of Conversational Design
https://blog.marvelapp.com/principles-of-conversational-design/
Using human conversation patterns to design more natural digital interactions. 另附：A Six-Minute Breakdown of Gartner’s Top Conversational AI Platforms.

Mental models for designers
https://medium.com/dropbox-design/mental-models-for-designers-7c03d5e4a092
Curious about product design at Dropbox? Here’s a look at tools we use for solving problems, making decisions, and communicating ideas.

The Icon Kaleidoscope
https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4
Redesigning over 100 icons with new colors, materials, and finishes.

Becoming a strategic, customer-centric product designer
https://medium.com/designing-atlassian/following-a-customer-centric-design-process-in-product-design-8369016b8b52
A design-led strategy is now standard practice and I think it’s a really exciting time to be a designer. Designers learn to think creatively, build empathy for customers, and be comfortable with ambiguity. These are core skills needed to develop innovative customer-centric ideas, and it means designers are uniquely positioned to help frame design-led product strategy. If jumping into this strategic side of design scares you, don’t worry. This article guides you through typical activities and links to Atlassian plays that you can borrow.

产品及其它

I Invented the World Wide Web. Here’s How We Can Fix It.
https://webfoundation.org/2019/12/i-invented-the-world-wide-web-heres-how-we-can-fix-it/
My parents were mathematicians. My mother helped code one of the first stored-program computers — the Manchester Mark 1. They taught me that when you program a computer, what you can do is limited only by your imagination. That excitement for experimentation and change helped me build the World Wide Web. I’m introducing a new approach to overcome that stalemate — the Contract for the Web. The Contract for the Web is a global plan of action created over the past year by activists, academics, companies, governments and citizens from across the world to make sure our online world is safe, empowering and genuinely for everyone.

陆奇如何解构一家企业？
https://mp.weixin.qq.com/s?__biz=MzIzNzY0ODY0Mg==&mid=2247489325&idx=1&sn=6c4962cd0e5b8369d61514d664946cf5
人类的组织性行为的信息结构是类似的，比如宗教、江湖帮派等——都是通过使命、愿景、价值观带动人的动量，然后定战略，同时制订运营机制并有效地执行战略。在这个过程中，有了产品、商业模式、市场、技术，并不断推进……此外，以文化为纽带，把人才和组织连接在一起，使之变得越来越有效。其实，企业亦然，作为一个结构化的体系，企业是可以系统地推进的。另附：对话陆奇：做一件长期有价值的事，不被人理解是必然的。

企业在不同时期，要紧紧牢记的3句话
https://mp.weixin.qq.com/s/GEJjJVSv6fAxtfyJE0GIeQ
商业顾问最重要的能力之一，是“建模能力”。我有庞大的兵器库，有了这些“金刚钻”，我才敢揽下那些“瓷器活”。其中有一个模型，应用场景特别广泛，也特别好用——企业生命周期模型。这个模型，把企业分为三个时期：创业期、成熟期、转型期。每个时期有不同的状态和挑战。我想这也许是所有创业者、管理者、企业家都用得上的一个模型，它揭示了你已经走过的一部分道路，和终将要去到的未来。创业期注重战略，成熟期注重管理，转型期是第二次创业，又回到战略。这个模型其实提醒我们，要给企业加上一条“时间轴”，用更动态全面的眼光看待世界，明白在不同阶段应该有不同的战略思考和管理手段，然后在每个阶段，坚决地执行。

宿华的产品观：提升每个人独特的幸福感
https://mp.weixin.qq.com/s?__biz=MjM5MDczODM3Mw==&mid=2653029427&idx=1&sn=c6cba05b89be6a28dae8cdda7748fe25
本文为快手科技CEO宿华为新书《被看见的力量–快手是什么》作的序。宿华在序言中阐述了快手的核心理念。他回顾了自己不同阶段对幸福感的探索，认为幸福感最底层的逻辑是资源的分配，而注意力是互联网的核心资源，快手的使命就是，用有温度的科技，尤其是AI技术，让更多的人得到注意力，提升每个人独特的幸福感。本书较系统地阐述了视频时代、人工智能与普惠理念的关系。书中配有30个鲜活案例，生动地展现了快手生态，比较有趣好读。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-12-16·生物的进化关系、球赛复盘展示、德国气候变化

– THE END –