FEX 技术周刊 - 2019/04/22

深阅读

Blazingly fast parsing, part 2: lazy parsing
https://v8.dev/blog/preparser
Parsing is the step where source code is turned into an intermediate representation to be consumed by a compiler (in V8, the bytecode compiler Ignition). Parsing and compiling happens on the critical path of web page startup, and not all functions shipped to the browser are immediately needed during startup. Even though developers can delay such code with async and deferred scripts, that’s not always feasible. Additionally, many web pages ship code that’s only used by certain features which may not be accessed by a user at all during any individual run of the page.

A Closer Look at React Memoize Hooks: useRef, useCallback, and useMemo
https://www.codebeast.dev/react-memoize-hooks-useRef-useCallback-useMemo/
The best way to understand what memoize hooks are is to expose ourselves to the problem space which these hooks solve. Starter hooks examples don’t expose these problems. They make hooks look approachable and straightforward— which makes complete sense. The real problem starts to unravel when you use hooks more often. Spend a few more hours if you are a hooks beginner, and you will find yourself in weird pitfalls that you would not have noticed on your first day with React.

Introducing Mozilla WebThings
https://hacks.mozilla.org/2019/04/introducing-mozilla-webthings/ The Mozilla IoT team’s mission is to create a Web of Things implementation which embodies those values and helps drive IoT standards for security, privacy and interoperability. Mozilla WebThings is an open platform for monitoring and controlling devices over the web, including:

• WebThings Gateway – a software distribution for smart home gateways focused on privacy, security and interoperability
• WebThings Framework – a collection of reusable software components to help developers build their own web things 另附，来自 Mozilla 的黑科技：
• Fluent 1.0: a localization system for natural-sounding translations
• Pyodide: Bringing the scientific Python stack to the browser.

User Interfaces You Can Trust With State Machines
https://www.infoq.com/articles/robust-user-interfaces-with-state-machines
In this article, we use this simple online movie search application to explain how using explicit state machines in the modelization and implementation of user interfaces leads to robust, maintainable and testable interfaces. We start by describing the search application and end by presenting the state machine formalism. In this process, we will reveal how the implicit state machine complicated our code and show the advantages of using an explicit state machine instead.

How Do We Really Use Reusable Components?
https://blog.bitsrc.io/do-we-really-use-reusable-components-959a252a0a98
I’ve talked to 30 teams about their reusable components. Here’s what I’ve learned.

前端开发中如何做到领域逻辑的实现不依赖于具体框架
https://www.zhihu.com/question/320409598
《架构整洁之道》以及《A Philosophy of Software Design》等书中以及许多大牛的博客都明示或暗示过在实现领域逻辑时不要基于其他外部依赖进行。但是这一点在前端开发中似乎比较困难：1. 目前主流的框架如 React 和 Vue 提供的状态管理工具 Redux 或者 Vuex 等都规定好了实现领域逻辑的方式；2. 许多逻辑事实上与 View 层的状态强相关而较难剥离；3. 即便从状态管理中强行抽出一个 Service 层，还是会有大量的逻辑分散于 View 层与状态管理框架的流程控制中，而实际的 Service 层（或者更准确一点叫做 Api 层）似乎除了包装了几个常用的函数之外并没有提供更好的抽象。那么是由于目前许多前端页面中的领域逻辑本身比较简单造成了并没有抽象Service的必要，还是 React、Vue 这些框架本身在设计时过于 Opinionated，导致想从中剥离出独立的领域逻辑很困难？

微软重磅发布新语言Bosque，超越结构化编程
https://mp.weixin.qq.com/s/M2wv1DPVsQPIkbaJ2wgQBQ
4 月 18 日，微软正式发布了一种名为 Bosque 的全新编程语言。微软方面介绍说：Bosque 受 TypeScript 启发，是一种超越了结构化编程且没有循环的编程语言，他们认为，这种规范化的编程模型将极大地提高开发人员的生产力，提高软件质量，并使编译器和开发人员工具的开发进入第二个黄金时代。另附：Go 会接替 Java，成为下一个企业级编程语言吗。

再谈使用开源软件搭建数据分析平台
https://zhuanlan.zhihu.com/p/63087723
三年前，我写了这篇博客使用开源软件快速搭建数据分析平台， 当时收到了许多的反馈，有50个点赞和300+的收藏。到现在我还能收到一些关于dataplay2的问题。在过去的三年，开源社区和新技术的发展可谓日新月异，我希望试试利用最新的技术来帮助没有数据科学背景的人也能够轻松的进行数据分析和预测，于是就有了 dataplay3 。

第九期杭州 NodeParty 回顾
https://github.com/NodeParty-China/Node-Party/blob/master/2019-04-13/README.md
共四场主题演讲：

• 第一场：应杲臻，贝贝集团，《Node 调用 dubbo 服务的探索与实践》
• 第二场：杨力，微店，《一套针对传统后端开发人员开箱即用的 Node EE 解决方案 Rockerjs》
• 第三场：陈熙旻，Rokid，《性能优化指北：通用流程和方法》
• 第四场：大猫（陈旭），中兴，《如何深深深度定制编译器才得以将编译时间从几十秒压缩到两三百毫秒？》

脑壳疼的Webpack-tapable
https://juejin.im/post/5cb43b3e5188251b2b20b7ed
tapable是个独立的库，webpack中大量使用了这个库，tapable主要是用来处理事件，解决的问题有点类似EventEmitter，不过功能更加强大。

A horrifying globalThis polyfill in universal JavaScript
https://mathiasbynens.be/notes/globalthis
The globalThis proposal introduces a unified mechanism to access the global this in any JavaScript environment. It sounds like a simple thing to polyfill, but it turns out it’s pretty hard to get right. I didn’t even think it was possible until Toon blew my mind with an unexpected, creative solution.

TDD Changed My Life
https://medium.com/javascript-scene/tdd-changed-my-life-5af0ce099f80
Whenever somebody asks me why they should bother with TDD, I’m reminded of this story — and dozens more like it. One of the primary reasons I switched to TDD is for improved test coverage, which leads to 40%-80% fewer bugs in production. This is my favorite benefit of TDD. It’s like a giant weight lifting off your shoulders. 另附：How to know what to test.

Animating URLs with Javascript and Emojis
http://matthewrayfield.com/articles/animating-urls-with-javascript-and-emojis/
You can use emoji (and other graphical unicode characters) in URLs. And wow is it great. But no one seems to do it. Why? Perhaps emoji are too exotic for normie web platforms to handle? Or maybe they are avoided for fear of angering the SEO gods?

Best practices for optimising video streams on the web
https://www.heartinternet.uk/blog/best-practices-for-optimising-video-streams-on-the-web/
When I think of video streaming, I typically think of Netflix, Amazon or YouTube — the major providers of video on the web today. When I think of “video on the web,” I generally think about pages with a background video, or another fun immersive feature that makes the page engaging. Generally (as a web developer), I assume that these pages use the video tag, not streaming. However, if the top companies delivering video content on the web are streaming their videos – and most other pages are not – is there something that can be learned here? Could streaming video be faster, more efficient, and have a better customer experience?

Choosing the right Node.js Framework: Next, Nuxt, Nest?
https://nodesource.com/blog/next-nuxt-nest
In this blog post, I’m going to examine the differences between three more very popular frameworks: Next, Nuxt, and Nest. These three frameworks are server-side rendering, and they are closely related to React, Vue, and Angular (the three most widely used front-end frameworks), respectively.

How JSON Web Token (JWT) Secures Your API
https://vuejsdevelopers.com/2019/04/15/api-security-jwt-json-web-tokens/
You’ve probably heard that JSON Web Token (JWT) is the current state-of-the-art technology for securing APIs. Like most security topics, it’s important to understand how it works (at least, somewhat) if you’re planning to use it. The problem is that most explanations of JWT are technical and headache inducing. Let’s see if I can explain how JWT can secure your API without crossing your eyes!

White Paper: Thinking differently - the cloud as a value driver
https://blog.scottlogic.com/2019/04/18/cloud-as-a-value-driver.html
One of the greatest technology enablers of the past decade is public cloud. The strategic importance of this has been widely accepted by the industry, however, the prevailing focus on the cloud as a means to reduce costs, is overlooking its greatest capability: agility! The public cloud provides a platform for change, and a foundation for business agility. It allows you to create new services, experiment with new technology, explore SaaS offerings and provide greater user engagement with a rapid time-to-market.

The Web Developer’s Guide to DNS
https://rjzaworski.com/2019/04/the-web-developers-guide-to-dns
Between the zillions of JavaScript bundles, cat videos, and banner ads that are the web, it’s easy to forget that something–in fact, several somethings–have to glue it all together. One of those somethings is the Domain Name System, DNS, which bears the inglorious responsibility of turning a hostnames like pets.com into a machine-friendly IP address.

What is a manifold?
https://bastian.rieck.me/blog/posts/2019/manifold/
In machine learning, the term manifold is thrown around a lot—in fact, there’s even a branch of machine learning dealing with learning the structure of manifolds. Said branch is aptly named manifold learning. Inspired by fantastic visualizations of shapelet mining algorithms, this post aims to give a visual introduction to manifolds that is accessible for non-mathematicians and mathematicians alike.

新鲜货

GitHub Release Radar · March 2019
https://github.blog/2019-04-16-release-radar-march-2019/

Introducing Base Web, Uber’s New Design System for Building Websites in React
https://eng.uber.com/introducing-base-web/
Uber assembled a dedicated design and engineering team to come up with a universal system, which resulted in the Base Web design system. Open sourced in 2018, Base Web is a React component library implementing the Base design language that acts as a device-agnostic foundation for quickly and easily creating web applications.

Razzle - Create server-rendered universal JavaScript applications with no configuration
https://github.com/jaredpalmer/razzle
Universal JavaScript applications are tough to setup. Either you buy into a framework like Next.js or react-server, fork a boilerplate, or set things up yourself. Aiming to fill this void, Razzle is a tool that abstracts all complex configuration needed for SSR into a single dependency–giving you the awesome developer experience of create-react-app, but then leaving the rest of your app’s architectural decisions about frameworks, routing, and data fetching up to you. With this approach, Razzle not only works with React, but also Reason, Elm, Vue, Angular, and most importantly……whatever comes next.

react-jsonschema-form
https://github.com/mozilla-services/react-jsonschema-form
A simple React component capable of building HTML forms out of a JSON schema and using Bootstrap semantics by default.

Spectacle
https://formidable.com/open-source/spectacle/
A React.js based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code.

ReactPlayer
https://github.com/CookPete/react-player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia, Mixcloud, and DailyMotion.

react-pdf
https://github.com/diegomura/react-pdf
Create PDF files using React.

file-type
https://github.com/sindresorhus/file-type
Detect the file type of a Buffer/Uint8Array/ArrayBuffer The file type is detected by checking the magic number of the buffer.

NVK
https://github.com/maierfelix/nvk
his is a low-abstraction Vulkan API with interfaces for JavaScript and TypeScript. Currently the latest supported Vulkan version is 1.1.101, which includes support for e.g. Compute Shaders and NVIDIA’s Real-Time Ray Tracing Pipeline VK_NV_raytracing. 附：Rendering a Triangle with Vulkan and JavaScript.

Nightwatch.js
http://nightwatchjs.org/
Node.js powered End-to-End testing framework. Nightwatch is a complete and integrated solution for end-to-end testing of web applications and websites, and also for Node.js unit and integration testing.

An Overview of Go’s Tooling
https://www.alexedwards.net/blog/an-overview-of-go-tooling
In this post I hope to provide a little background and context about the tools I find most useful, and importantly, explain how they can fit into the workflow of a typical project. I hope it’ll give you a good start if you’re new to Go. The information in this post is written for Go 1.12 and assumes that you’re working on a project which has modules enabled.

Building intelligent systems starts at the database
https://grakn.ai/
Grakn is the knowledge graph engine to organise complex networks of data and making it queryable, by performing knowledge engineering. Rooted in Knowledge Representation and Automated Reasoning, Grakn provides the knowledge foundation for cognitive and intelligent (e.g. AI) systems, by providing an intelligent language for modelling, transactions and analytics. Being a distributed database, Grakn is designed to scale over a network of computers through partitioning and replication.

Panic’s Next Editor
http://www.daemonology.net/hn-daily/2019-04-17.html
Twelve years ago we introduced Coda, the world’s first web development editor. It put the tools you needed to make a web page together in one app, and nobody had ever done that before. But a lot has changed since then. Websites are now more like applications in the way they’re built and run. Deployment is much more complex than an FTP upload. Languages, frameworks, toolchains — and possibilities — have exploded. We had to make a difficult choice: rewrite Coda for this new world, or leave it behind?

Erlang 之父 Joe Armstrong 去世了
https://mp.weixin.qq.com/s/CzrH9330xvWaThc_CqsNtw
Joe Armstrong 他的论文《面对软件错误构建可靠的分布式系统》可以说是必然载入史册，把 erlang 的设计思想一一道来，甚至可以说是其世界观与哲学了：一切皆进程；进程强隔离；进程的生成与销毁都是轻量的操作；消息传递是进程交互的唯一方式；每个进程有唯一的名字；你若知道进程的名字，就可以向他发消息；进程之间不共享资源；错误处理非本地化；进程要么正常跑着，要么马上挂掉；就以上九条的观念，设计出的 erlang 语言，成就了可靠性达到99.9999999%的目前世界上最复杂的 ATM 交换机。附：如何评价 Joe Armstrong 在计算机领域的贡献。

设计

Sketch vs Figma, Adobe XD, And Other UI Design Applications
https://www.smashingmagazine.com/2019/04/sketch-figma-adobe-xd-ui-design-applications/
For a while now, Sketch has been the de facto application of choice for UX and UI designers. But in the last year or two, we have seen many new contenders for the Sketch’s crown. Two of them that have made the biggest strides are Figma and Adobe XD. In this article, I’ll try to summarize my thoughts on how these apps compete with Sketch and what are their unique features.

Design Your Team
https://medium.com/dropbox-design/design-your-team-921656faad25
Introducing the Team Values Toolkit — a new way to design and align on work culture.

Game Design UX Best Practices
https://uxplanet.org/game-design-ux-best-practices-guide-4a3078c32099
What are the best practices for major game mechanics you should implement in your mobile games? Here’s the ultimate guide for game designers with lessons learned from +250 games. 另附：Visual Design Terms Cheat Sheet.

Why Designers Should Understand Code
https://blog.prototypr.io/why-designers-should-understand-code-928d3f01b903
Take note, I do not mean that designers need to be full stack engineers, but I strongly advocate that designers should have a good grasp of some basic technical concepts. This will of course will reduce friction and help your team produce better products always, and ultimately make you much better at your job.

Customer-focused Content: Creating Content People Want and Need
https://www.uxbooth.com/articles/customer-focused-content-creating-content-people-want-and-need/
The world does not need more content. People are overwhelmed with content. Bombarded every day by ads, social posts, feeds, emails, search results, endless information – most of which they don’t want or care about. The harsh reality is most people aren’t interested in your content. Regardless of business or industry, audiences expect engaging, useful content tailored to their needs.

产品及其它

Why software projects take longer than you think – a statistical model
https://erikbern.com/2019/04/15/why-software-projects-take-longer-than-you-think-a-statistical-model.html
Anyone who built software for a while knows that estimating how long something is going to take is hard. It’s hard to come up with an unbiased estimate of how long something will take, when fundamentally the work in itself is about solving something. One pet theory I’ve had for a really long time, is that some of this is really just a statistical artifact.

宿命之战：程序员 VS 产品经理
https://mp.weixin.qq.com/s?__biz=MzIyMjQ0MTU0NA==&mid=2247489005&idx=1&sn=c09a2b06daaa7caad49c457dfdc59b8f
无论对产品经理还是开发来说，在互联网公司生态里，每一次的追逐、围攻都是对双方生存能力的严格检验！每一次抵抗、反击都是对双方软弱、过剩的筛选！另附：程序员才能看懂，看到第18张终于忍不住笑喷了。

格局见终局
https://mp.weixin.qq.com/s/_y8TdGp4LWg5x7yXKrXHGQ
“早早期”项目中，创始人应该讲述一个能够自圆其说的“故事”，这个故事的核心就是“流量池”是否成立。但是创始人的思维模型都是固执的，从这个角度说，我们应该更多观察的是创始人的思维模型是否适应互联网时代的商业规律，而不应该是让他们认可某些原则。即使有了战略的原则，我们依然相信，大量的企业会在战术执行的过程中逐渐走样。原因很简单，精心选定的赛道充满未知，挑战巨大，而“走老路”的诱惑一直存在。即使创始人最初坚定，但依然会有无数的执行者试图用变形的战术磨掉他们的原则，此时，就是考验创始人战略定力的时候了。创业者中真正能够成功的只是凤毛麟角，这才是客观规律。价值观是创始人身上固化的品质，是很难改变的，但却易于观察的，从创始人若干行为的蛛丝马迹上都可以发现。战略素养是创始人身上后天习得的知识和技能，是靠经验累积的，这个方面有就是有，没有就是没有，更好判断。

知识的本质与企业家精神
https://mp.weixin.qq.com/s?__biz=MjM5MTAyNjcyMA==&mid=2656543892&idx=1&sn=161872440e5ce5dd01fbb70013192348
企业家和管理者之间有什么差别？简单说就是他们制定决策所基于的知识不太一样。企业家决策主要靠软知识，管理者决策主要靠硬知识。经济学和大部分管理学里讨论的决策都是基于硬知识的决策：给定目标和可选手段，如何选择特定的手段满足给定的目标。这跟真正的企业家决策相距甚远。真正企业家的决策不是来选择手段满足给定目标，而是寻找可选择的目标和手段本身。企业家精神的高低很大程度上取决于这些选择能力的高低。换句话，管理者是使用工具，企业家是创造工具。管理者是实现目标，企业家是创造目标。

对数据可视化有兴趣的可以阅读由 AntV 带来的 墨者修齐 2019-04-22 · 可视化在多尺寸设备下的兼容性处理、StoryMap、Story Explor

– THE END –