FEX 技术周刊 - 2020/05/18
本期看点
前端开发的瓶颈与未来之路
https://zhuanlan.zhihu.com/p/139731168
前端开发的瓶颈到底在哪里，前端技术是否已经走到一个十字路口，全栈化的系统架构是否能改变目前的窘境？本文将根据我自己的开发经历谈谈当下前端开发中遇到的一些问题和想法。我们再回到前端，那么未来的前端到底会发展成什么样？长期而言充满了未知数，谁也没法预测，但是短期来讲我比较关注几个东西：ESBuild、Deno、Figma。如果你仔细研究一番，上面的这些新鲜东西，都是起源于前端，但又不把视野局限在前端。或许这就是前端未来的发展方向吧。
万物代码化：从低代码、云开发到云研发
https://mp.weixin.qq.com/s/9IKyltXqzRzG2YOmUVeu3A
过去的几个月里，我陆陆续续和不同公司的人一起讨论了开发、研发的未来。光是发我写过的几篇文章的链接，已经不能很好地解决问题。所以我决定写一篇长长的文章，来帮助更多地人理解：研发的未来在哪里？我也是从我的所做、所见、所听中，构建了整个的模型，并非从未来穿越到现在，所以其中的一些设想，可能并非如此准确。
Second-guessing the modern web
https://macwright.org/2020/05/10/spa-fatigue.html
https://twitter.com/dan_abramov/status/1259614150386425858
There is a sweet spot of React: in moderately interactive interfaces. Complex forms that require immediate feedback, UIs that need to move around and react instantly. That’s where it excels. I helped build the editors in Mapbox Studio and Observable and for the most part, React was a great choice. But there’s a lot on either side of that sweet spot. The high performance parts aren’t React.
Deno 1.0
https://deno.land/v1
https://areknawo.com/deno-why-all-the-buzz/
https://mp.weixin.qq.com/s/85x4uep6SAZ9v_AR2hqv4w
With the changing JavaScript language, and new additions like TypeScript, building Node projects can become an arduous endeavor, involving managing build systems and other heavy handed tooling that takes away from the fun of dynamic language scripting. Furthermore the mechanism for linking to external libraries is fundamentally centralized through the NPM repository, which is not inline with the ideals of the web. We feel that the landscape of JavaScript and the surrounding software infrastructure has changed enough that it was worthwhile to simplify. We seek a fun and productive scripting environment that can be used for a wide range of tasks. 另附：Deno worker for Azure Functions、10 Things I Regret About Node.js.
为什么顶尖高手，都有窄门思维？
https://mp.weixin.qq.com/s/RWUPANKFMj1MlIf3XfCmLQ
这个世界上，总有人选择开始简单的事情。虽然开始是“宽门”，但会发现，到后面竞争者挤满了道路，越来越难。而另一些人，会选择开始很难的事情，虽然开始是“窄门”，看上去荆棘密布，但一旦披荆斩棘跨过去，海阔天空。但其实这个世界上，哪有全程好走的路，哪里有一路“宽门”？差别只是，高手心中装着更大的格局，哪怕舍弃1000万的利润分出去，也在所不惜。他们不是不在乎钱，而是相信只要方向正确，资源、技能、优势，一切皆可积累。顶尖高手，总是选择“窄门”。
深阅读
DataWorks 前端架构演进与 Serverless 实践之路
https://developer.aliyun.com/article/760167
DataWorks 是一个提供了大数据 OS 能力、并以 all in one box 的方式提供专业高效、安全可靠的一站式大数据智能云研发平台，提供了数据集成、数据开发、数据治理、数据安全、数据服务、应用开发、机器学习完整数据链路的产品。
大规格文件的上传优化
https://aotu.io/notes/2020/05/12/file-upload/index.html
在开发过程中，收到这样一个问题反馈，在网站上传 100 MB 以上的文件经常失败，重试也要等老半天，这就难为需要上传大规格文件的用户了。那么应该怎么做才能快速上传，就算失败了再次发送也能从上次中断的地方继续上传呢？下文为你揭晓答案~
干掉过多的if…else：据说这项技能可以看出程序员的境界
https://mp.weixin.qq.com/s/rXwqnPN2WiMxcLXOlz0cjA
if…else是所有高级编程语言都有的必备功能。但现实中的代码往往存在着过多的 if…else。虽然 if…else 是必须的，但滥用 if…else 会对代码的可读性、可维护性造成很大伤害，进而危害到整个软件系统。现在软件开发领域出现了很多新技术、新概念，但 if…else 这种基本的程序形式并没有发生太大变化。使用好 if…else 不仅对于现在，而且对于将来，都是十分有意义的。今天我们就来看看如何“干掉”代码中的 if…else，还代码以清爽。
A (Mostly) Complete Guide to React Rendering Behavior
https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/
I’ve seen a lot of ongoing confusion over when, why, and how React will re-render components, and how use of Context and React-Redux will affect the timing and scope of those re-renders. After having typed up variations of this explanation dozens of times, it seems it’s worth trying to write up a consolidated explanation that I can refer people to. Note that all this information is available online already, and has been explained in numerous other excellent blog posts and articles, several of which I’m linking at the end in the “Further Information” section for reference. But, people seem to be struggling to put the pieces together for a full understanding, so hopefully this will help clarify things for someone.
Accessible Animations in React
https://joshwcomeau.com/react/prefers-reduced-motion/
As humans, we tend to bias around our own experiences. The “Golden Rule”—treat others as you want to be treated—totally ignores the fact that people are different! Not everyone experiences things the same way, and we need to be mindful about that. An animation that delights me might make someone else so woozy that they need to lie down for half an hour afterwards. Every non-trivial feature that gets added to a browser is the result of a lot of hard work and coordination. The fact that the prefers-reduced-motion media query exists in every major browser is a testament to how much work browser vendors put in, not to mention the operating system developers who built the control in the first place!
CSS fix for 100vh in mobile WebKit
https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/
Not long ago there was some buzz around how WebKit handles 100vh in CSS, essentially ignoring the bottom edge of the browser viewport. Some have suggested avoid using 100vh, others have come up with different alternatives to work around the problem. In fact, this issue goes further back a few years when Nicolas Hoizey filed a bug with WebKit on the subject (the short of it: WebKit says this is “intentional” 🧐).
Let’s Take a Deep Dive Into the CSS Contain Property
https://css-tricks.com/lets-take-a-deep-dive-into-the-css-contain-property/
This article has covered the basics of the CSS contain property with its values, benefits, and potential performance gains. There are some excellent benefits to applying this property to certain elements in HTML; which elements need this applied is up to you. At least, that’s what I gather since I’m unaware of any specific guidance. The general idea is apply it to elements that are containers of other elements, especially those with some form of dynamic aspect to them.
Convincing-looking 90s fonts in modern browsers
https://vistaserv.net/blog/90s-fonts-modern-browsers
We wanted to make a website that looked like it was from the 1990s. Sounds easy, right? Looking back from 2020, the aesthetic of the early World Wide Web stands out for the things it lacked: no CSS, emojis, fancy web fonts or non-web-safe colours.
GitLab’s Tech Stack Applications Diagram and Spreadsheet
https://about.gitlab.com/handbook/business-ops/tech-stack-applications/
It’s neat to see what systems a popular, widely distributed company like GitLab is using. The spreadsheet goes into quite some detail. 另附：Inside GitLab: How we release software patches.
How do I use Infrastructure as Code?
https://circleci.com/blog/how-do-i-iac/
Infrastructure as code (IaC) is the process of managing and provisioning cloud and IT resources via machine readable definition files and is a part of modern continuous integration pipelines. IaC enables organizations to provision, manage, and destroy compute resources using modern DevOps tools. IaC enables this by statically defining and declaring these resources in code, then deploying and dynamically maintaining these resources via code. In this post, I will discuss the benefits of IaC and some of the tooling option currently available along with a brief demonstration on how to use them in hopes of easing the transition to using IaC.
Accelerometer and SoftSKU: Improving hardware platform performance for diverse microservices
https://engineering.fb.com/data-center-engineering/accelerometer-and-softsku/
New strategies to improve the performance of hardware platforms running Facebook’s microservices. SoftSKU is a novel mechanism that tailors an existing server processor to optimize it for a specific microservice without requiring any additional hardware. Accelerometer is an analytical model that predicts gains from these optimizations even before the custom hardware is installed.
First, it was Craigslist, next it’s Zapier
https://kamerontanseli.ghost.io/first-it-was-craiglist-next-its-zapier/
As I delve deeper into the no-code space I see a lot of Zapier, Integromat and Tray.io workflows. Some of these are actually quite complex and require some programming knowledge to understand them (which kind of defeats the point of no-code). As I was looking at some of these workflows, I couldn’t help but think how there will be this eventual shift like with Craiglist where companies will spring up that just focus on certain more complex popular workflows.
Understanding Cost Models
http://justinjaffray.com/understanding-cost-models/
Analytic queries can become complex, horrifically so, in fact, and assessing their costs follows suit. To alleviate this somewhat, we’re going to explore some tools we can use to attempt to travel up the ladder of abstraction for query planners. In doing so, we’re going to try to figure out where the difficulty here lives: is looking at a single query confusing because we have the wrong perspective, or is there some inherent complexity present here?
Make LLVM fast again
https://nikic.github.io/2020/05/10/Make-LLVM-fast-again.html
Conversely, there are some ongoing efforts that might make for large compile-time regressions when they do get enabled, such as the attributor framework, the knowledge retention framework and MemorySSA-based DSE. We’ll see how things look by the time of the LLVM 11 release
新鲜货
Up to 4GB of memory in WebAssembly
https://v8.dev/blog/4gb-wasm-memory
Thanks to recent work in Chrome and Emscripten, you can now use up to 4GB of memory in WebAssembly applications. That’s up from the previous limit of 2GB. It might seem odd that there was ever a limit - after all, no work was needed to allow people to use 512MB or 1GB of memory! - but it turns out that there are some special things happening in the jump from 2GB to 4GB, both in the browser and in the toolchain, which we’ll describe in this post.
Announcing TypeScript 3.9
https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/
For this release our team been has been focusing on performance, polish, and stability. We’ve been working on speeding up the compiler and editing experience, getting rid of friction and papercuts, and reducing bugs and crashes.
Announcing Adobe XD support for Flutter
https://medium.com/flutter/announcing-adobe-xd-support-for-flutter-4b3dd55ff40e
Create in XD and export to working Flutter code. 另附：使用 Web 标准开发动态化 Flutter 应用.
A first look at Unreal Engine 5
https://www.unrealengine.com/en-US/blog/a-first-look-at-unreal-engine-5
We’ve just released a first look at Unreal Engine 5. One of our goals in this next generation is to achieve photorealism on par with movie CG and real life, and put it within practical reach of development teams of all sizes through highly productive tools and content libraries. 另附：MS Flight Simulator 2020 vs Real life, NVIDIA CEO Introduces NVIDIA Ampere Architecture, NVIDIA A100 GPU in News-Packed ‘Kitchen Keynote’.
React Native for Windows + macOS
https://microsoft.github.io/react-native-windows/
React Native for Windows + macOS brings React Native support for the Windows 10 SDK as well as the macOS 10.12 SDK. With this, you can use Javascript to build native Windows apps for all devices supported by Windows 10 including PCs, tablets, 2-in-1s, Xbox, Mixed reality devices, etc., as well as the macOS desktop and laptop ecosystems.
Coming to Chrome: a new way to use tabs
https://www.blog.google/products/chrome/manage-tabs-with-google-chrome/
With a simple right click, you can group your tabs together and label them with a custom name and color. Once the tabs are grouped together, you can move and reorder them on the tab strip.
Blitz
https://github.com/blitz-js/blitz
Blitz is a Rails-like framework for monolithic, full-stack React apps — built on Next.js
Diagram
https://github.com/mingrammer/diagrams
Diagram as Code for prototyping cloud system architectures
GitHub WYSIWYG Rich-Text Editor
https://github.com/ckeditor/github-writer
GitHub Writer is a WYSIWYG rich-text editor for GitHub. The extension is available when creating or commenting on issues, reviews, pull requests, and wikis. It provides all the features available in the GitHub plain-text editor, including Markdown input. For features like tables, it offers a much easier experience in comparison to plain-text Markdown and allows users to be more productive. It is powered by CKEditor 5, a modern JavaScript rich-text editor.
Bootstrap 4.5.0
https://blog.getbootstrap.com/2020/05/12/bootstrap-4-5-0/
Bootstrap v4.5.0 has landed with dozens of bug fixes, some small new features, and some changes to our development. Originally planned as a v4.4.2 patch release, we’ve bumped this to a minor release on account of our new features that help bridge the gap between v4 and our upcoming v5.
Recoil - A state management library for React from facebook
https://recoiljs.org/
https://www.youtube.com/watch?v=fb3cOMFkEzs
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React. 另附：Kea 2.0 - Production Ready State Management for React
React PIXI
https://reactpixi.org/
Write PIXI applications using React declarative style
Next.js 9.4
https://nextjs.org/blog/next-9-4
Fast Refresh, Incremental Static Regeneration (beta)…
fdir V3: A High Performance Directory Crawler Library
https://github.com/thecodrr/fdir
Two months ago it claimed to the fastest Node directory crawler and it’s now supposedly even faster than when we first linked it. Need to scan through directories rapidly either asynchronously or synchronously?
tracer for node.js
https://github.com/baryon/tracer
A powerful and customizable logging library for node.js.
Perfume.js 5.0
https://github.com/Zizzamia/perfume.js
Web performance library for measuring all User-centric performance metrics
Webrecorder.io is a web archiving service to collect and revisit web pages
https://webrecorder.io/
Webrecorder creates an interactive copy of any web page that you browse, including content revealed by your interactions such as playing video and audio, scrolling, clicking buttons, and so forth.
Draw.io VS Code Integration
https://github.com/hediet/vscode-drawio#drawio-vs-code-integration
This extension integrates Draw.io into VS Code. 另附：Introducing MongoDB for VS Code.
Announcing Hyperdrive v10
https://blog.hypercore-protocol.org/posts/announcing-hyperdrive-10/
Hyperdrive is a peer-to-peer filesystem that’s designed to help you share files quickly and safely, directly from your computer. In this post we’ll step through some of the improvements we’ve made in v10, explain how Hyperdrive fits into the broader Hypercore Protocol ecosystem, and show you how to get started using it. This release is only the beginning, and we describe our next steps in the “Looking Forward” section.
Memgraph 1.0: An Enterprise-Ready In-Memory Graph Database
https://memgraph.com/blog/announcing-memgraph-1-0-enterprise-ready-real-time-graph-database
Now approaching 4 years old, Memgraph, a high performance in-memory graph database, has reached v1.0. It’s compatible with the Cypher query language and the Bolt protocol so you can use it from any language that has a Bolt driver. Does ‘enterprise-ready’ mean expensive? Not necessarily. It’s not open source but there is a free ‘community’ licensed version.
What’s Coming in Go 1.15
https://lwn.net/SubscriberLink/820217/47ed80088c03b18d/
https://docs.google.com/presentation/d/1veyF0y6Ynr6AFzd9gXi4foaURlgbMxM-tmB4StDrdAM/edit
In the upcoming 1.15 version, changes to the language specification are basically non-existent as expected; the improvements are in the tooling, the performance of the compiler, and in the standard library.
immudb
https://github.com/codenotary/immudb
immudb is a lightweight, high-speed immutable database for systems and applications. With immmudb you can track changes in sensitive data in your transactional databases and then record those changes permanently in a tamperproof immudb database. This allows you to keep an indelible history of sensitive data, for example debit/credit card transactions.
Game Programming Patterns
http://gameprogrammingpatterns.com/
Game Programming Patterns is a collection of patterns I found in games that make code cleaner, easier to understand, and faster.
设计
How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences
https://medium.com/microsoft-design/how-fluent-ui-unlocks-the-next-generation-of-microsoft-365-experiences-8b24809faf06
Continuing our journey toward a true design-to-code system at scale
Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols
https://www.smashingmagazine.com/2020/05/micro-typography-space-kern-punctuation-marks-symbols/
For hundreds of years, we have been using white space in typography. Today, in 2020, how do we add spacing to punctuation marks and other symbols, and how do we adjust the space on the left and right side in an easy and consistent way? It is actually not as easy and quick as it should be.
Where did it come from? My non-computer Daily UI
https://uxplanet.org/ui-where-did-it-come-from-1-9da086682b1d
Daily UI was created with the user interface of software or computerized devices in mind. In my challenge, I wanted to analyze and reflect on the roots of these elements.
Human-Centered Design in Real Time
https://uxmag.com/articles/human-centered-design-in-real-time
Co-designing emergency response solutions with COVID-19 frontline workers. 另附：Principles of Human-Centered Design- Part II.
产品及其它
If I could bring one thing back to the internet it would be blogs
http://tttthis.com/blog/if-i-could-bring-one-thing-back-to-the-internet-it-would-be-blogs
But they would be the one thing I’d bring back to the internet if I could bring one thing back. They’re the thing I miss the most and the most often. They were the most valuable thing on here, besides freer availability of news, free although low quality video content on YouTube, and I guess some kinds of social media. But blogs are something you can sit down and read and get really into to the point you forget where you even are, and think about how you want to try those things maybe in your life, or just enjoy their writing, and you can read deeper into them into past blog posts, and tune back in later and see what they’ve posted since the last things you read about them.
The most successful developers share more than they take
https://stackoverflow.blog/2020/05/14/the-most-successful-developers-share-more-than-they-take/
After interviewing several developers, a pattern started to become clear: great developers share a lot. This takes different forms for different people, but is very often a blog. But for many top developers, their sharing mindset came before their success, and was the direct cause of it, not the result of it.
读书记：《这就是马云》《近观马云》《穿布鞋的马云》
https://mp.weixin.qq.com/s/Iry4Uwuie_gqaJN8l7EjDg
当我找了一两部清晰率感人的《赢在中国》节目稍微看了看时，哇哦，我错过了什么？马云讲的真是好啊。抱歉我的词藻太少，的确只能用好，很棒，牛逼这样的词来直接表达我的感受。我想我过去是不是对马云有什么误解，因为看了太多他口若悬河跟个大忽悠似的出现在机场以及各种媒体上，要么吹牛逼，要么在装逼，要么耍聪明。加上彼时的我超级盲目自负，于是对马云直接无视了。而现在再来看《赢在中国》，也许是因为我有所经历，所以稍许能够真正感受得到他是在什么样的心态下说什么。越看，越佩服，越感慨。于是带着好奇，找了和马云相关的这几本书看了看，收获颇多，虽然好像晚到了十多年，但对我来说，或许也是最好的、应该的时间点。
– THE END —
