FEX 技术周刊 - 2018/08/27
深阅读
Liftoff: a new baseline compiler for WebAssembly in V8
https://v8project.blogspot.com/2018/08/liftoff.html
V8 v6.9 includes Liftoff, a new baseline compiler for WebAssembly. Liftoff is now enabled by default on desktop systems. This article details the motivation to add another compilation tier and describes the implementation and performance of Liftoff.
Web Performance Made Easy: Google I/O 2018 edition
https://developers.google.com/web/updates/2018/08/web-performance-made-easy
We’ve been pretty busy over the past year trying to figure out how to make the Web faster and more performant. This led to new tools, approaches and libraries that we’d like share with you in this article. In the first part, we’ll show you some optimization techniques we used in practice when developing The Oodles Theater app. In the second part, we’ll talk about our experiments with predictive loading and the new Guess.js initiative. 另附：Custom site performance reports with the CrUX Dashboard.
Internet Native Applications
https://blog.cloudflare.com/internet-native-applications/
No single technology defines Internet Native Applications. However, I believe the combination of: A rapidly increasing percentage of requests serviced directly from the Edge under 10ms; Near-native speed code on the browser, powered by WebAssembly; Improved Internet protocols like QUIC and HTTP/2. 另附：How Cloudflare protects customers from cache poisoning
Implementing single file Web Components
https://medium.com/content-uneditable/implementing-single-file-web-components-22adeaa0cd17
Probably everyone who knows the Vue framework also heard about its single file components. This super simple idea allows web developers to define the entire code of a component in one file. It’s such a useful solution that an initiative to include this mechanism in browsers has already appeared. However, it seems quite dead as, unfortunately, no progress has been made since August 2017. Nevertheless, looking into this topic and trying to make single file components work in the browsers using the technologies already available was interesting enough to write an article about it!
Apps That Work Natively on the Web and Mobile
https://blog.angular.io/apps-that-work-natively-on-the-web-and-mobile-9b26852495e7
We’re happy to announce an exciting new way to build web and mobile apps with Angular and NativeScript. First, some background: since the beginning of Angular, you could use NativeScript with Angular to build mobile apps.
从红芯事件聊聊浏览器内核（一）
https://juejin.im/post/5b798b0ff265da432e75bd88
通过泄漏的 IE2 和 IE 5.5 源码了解
深入理解JSCore
https://tech.meituan.com/deep_understanding_of_jscore.html
动态化作为移动客户端技术的一个重要分支，一直是业界积极探索的方向。目前业界流行的动态化方案，如Facebook的React Native，阿里巴巴的Weex都采用了前端系的DSL方案，而它们在iOS系统上能够顺利的运行，都离不开一个背后的功臣：JavaScriptCore（以下简称JSCore），它建立起了Objective-C（以下简称OC）和JavaScript（以下简称JS）两门语言之间沟通的桥梁。无论是这些流行的动态化方案，还是WebView Hybrid方案，亦或是之前广泛流行的JSPatch，JSCore都在其中发挥了举足轻重的作用。作为一名iOS开发工程师，了解JSCore已经逐渐成为了必备技能之一。另附：WMRouter：美团外卖Android开源路由框架
唯品会的Service Mesh三年进化史
http://calvin1978.blogcn.com/?p=1779
唯品会的服务化体系OSP(Open Service Platform) 在三年前就走上了ServiceMesh的路，每种架构风格，由于各司不同的历史因果，现实状况，以及对采纳新架构的诉求和希望，都会有不同的实现路线。我们的SM在实战中一点点演化而来，与 Istio由谷歌IBM的超级架构师们画出来的架构也有不同之处。希望通过分享我们的演进过程，能给各司里同样在往SM演进中的架构师们一个参考。
WebAssembly vs. the world. Should you use WebAssembly?
https://blog.sqreen.io/webassembly-performance/
WebAssembly is known for its speed capabilities and this article will put it to the test to better understand what are the best applications to start using WebAssembly today. We will compare the performance of WebAssembly with C/C++, Rust, and TypeScript. Will WebAssembly kill JavaScript? Maybe not just yet. 另附：Windows 2000 in the Browser via WebAssembly、Windows 95 in Electron.
Advanced effects with CSS background blend modes
https://blog.logrocket.com/advanced-effects-with-css-background-blend-modes-4b750198522a
This article will focus on background-blend-mode, the property with the most widespread support, and how you can use it today to create eye-catching backgrounds and photo effects for your website that once were only possible in Photoshop.
Async data loading in React
https://medium.com/@ghengeveld/async-data-loading-in-react-94661e23cd3d
The common place to perform data fetching in a React component is in the componentDidMount lifecycle method. Just run fetch and use setState to store the result. This is simple enough (and very effective) but leaves a lot to be desired. What about showing some sort of loading indicator? What about error handling? In practice you’ll want to enhance your fetch with a bunch of metadata. You should also consider promise cancellation on unmount, as well as deal with race conditions between consecutive fetches (FiFo).
Behind the scenes of my latest book on JavaScript
http://2ality.com/2018/08/impatient-js.html
This blog post takes you behind the scenes of my latest book, “JavaScript for impatient programmers” (which I’ll henceforth abbreviate as “Impatient JS”). It describes: How I chose what to write about; My techniques for explaining topics; Tools I used for creating ebooks and other artifacts; How I unit-tested the code shown in the book and in its quizzes.
Web Reading Mode: The non-standard rendering mode
https://www.ctrl.blog/entry/browser-reading-mode-parsers
All the leading web browsers, except for Google Chrome, include a separate “reading mode” that extracts the main content from pages, reformats it to be more readable, and hides distractions like advertisements, comments, and even page navigation. This separate rendering mode isn’t governed by any standards and as such it behave differently from web browser to web browser. So what is a web developer to do to properly support this distinctly separate and non-standard rendering mode? This article is part one in a series on web reading mode and reading mode parsers. The article is broken up into multiple parts as each part is written for a slightly different audience.
Small Assets without the Headache
https://elm-lang.org/blog/small-assets-without-the-headache
If you want faster page loads, you want smaller assets. But it feels quite complicated to get small assets with JavaScript. Should I switch from React to Preact? Do I have tree shaking set up properly? Will my dependencies even work with tree shaking? Do I need to do something special with my dependencies now? And will code splitting help as well? How does that work? It feels overwhelming even talking about it! Elm 0.19 makes our assets really small without the headache. A bunch of projects have implemented this “RealWorld App” that is a decent size application.
GraphQL Server Tutorial with Apollo Server and Express
https://www.robinwieruch.de/graphql-apollo-server-tutorial/
In the following, you are going to implement the server-side of such architecture by using GraphQL and Apollo Server. Whereas GraphQL is only the query language which got implemented as reference implementation in JavaScript by Facebook, Apollo Server builds up on top of it to simplify building GraphQL servers in JavaScript. 另附：graphqurl - curl for GraphQL
First steps with TensorFlow.js
https://aralroca.com/2018/08/24/first-steps-with-tensorflow-js/
Nevertheless, we don’t need a deep knowledge about machine learning to use some existing models. We can use some libraries like Keras, Tensorflow or TensorFlow.js. We are going to see here how to create basic AI models and use more sophisticated models with TensorFlow.js. Although it’s not required a deep knowledge, we are going to explain few concepts.
Serverless Best Practices
https://medium.com/@PaulDJohnston/serverless-best-practices-b3c97d551535
And remember that best practices are not “the only practices”. Best practices rely on a set of underlying assumptions. If those assumptions don’t fit your use case, then those best practices may not fit. 另附：Why Serverless Is Being Adopted at a Faster Rate than Expected、Jolie - The first language for Microservices、Microservices From a Startup Perspective.
How to extract a data-rich service from a monolith
https://martinfowler.com/articles/extract-data-rich-service.html
When breaking monoliths into smaller services, the hardest part is actually breaking up the data that lives in the database of the monolith. In this article, I will be talking about a pattern, which is a series of steps, for extracting a data-rich service from a monolith while causing minimum disruption to the service consumers.
Coding with Clarity: Part II
https://alistapart.com/article/coding-with-clarity-part-ii
As any developer who works with other developers can attest, if code is unclear, problems occur. In Part I of this series, I went over some principles to improve clarity in our code to prevent problems that can arise from unclear code. As our apps get larger, clarity becomes even more important, and we need to take extra care to ensure that our code is easy to read, understand, and modify or extend. This article discusses some more-advanced principles related to object-oriented programming (OOP) to improve clarity in larger apps.
Don’t Do This in Production
https://stephenmann.io/post/dont-do-this-in-production/
This blog is about building production ready applications. It will do this from every aspect: from infrastructure automation, to testing, to design, to debugging, to documentation, to development process, to security. Every post will stand on its own feet, ready to use in the real world – ready to use in production.
The Future of Notebooks: Lessons from JupyterCon
http://willcrichton.net/notes/lessons-from-jupytercon/
Over the last two days at JupyterCon, I saw a lot of exciting ideas about the future of Jupyter notebooks. I’ve already written about my own ideas—Jupyter for debugging, Jupyter for prototyping interactions—but in this note, I want to highlight the major trends I saw in the JupyterCon presentations. 另附：Highlights from JupyterCon、Scheduling Notebooks at Netflix.
新鲜货
中国首届React开发者大会 & 第四届 FEDAY 会议资料
https://react.w3ctech.com/?from=timeline#schedule
https://mp.weixin.qq.com/s?__biz=MzA5NTM2MTEzNw==&mid=2736712821&idx=1&sn=8bb2eb1ec0b9da6349fadd27b1aabd23
另附：React Rally 大会 演讲视频
More Than A Billion Downloads of Node.js
https://medium.com/@nodejs/more-than-a-billion-downloads-of-node-js-952a8a98eb42
The application platform known as Node.js surpassed one billion downloads and is now officially a part of the three comma club. 另附：Three new features to help our users protect themselves.
GitLab 11.2 released with live preview in the Web IDE and Android project import
https://about.gitlab.com/2018/08/22/gitlab-11-2-released/
We are super excited to deliver new features with 11.2 that will help you get started and iterate faster. Today we deliver enhancements to the Web IDE, support for manifest files to import Android projects, and enable custom project templates.
Introducing Ghost 2.0
https://blog.ghost.org/2-0/
A powerful new editor, multi-language support, custom homepages, dynamic routes, custom structures and much more. 另附：Hugo 0.47: Adds minification of rendered output, but is mostly a massive bug fix release.
The Book “Computer Networks: A Systems Approach” is now open source
https://github.com/SystemsApproach/book
This site contains source text for Computer Networks: A Systems Approach, now available under terms of the Creative Commons (CC BY 4.0) license. The community is invited to contribute corrections, improvements, updates, and new material under the same terms. Like many open source software projects, this one has been seeded with once restricted content: the 5th edition of Peterson and Davie, copyrighted by Elsevier. Our hope is that open sourcing this material will both make it widely available and serve as an attractor for new content: updating what’s already there, expanding it to cover new topics, and augmenting the text with additional teaching collateral.
Bing.com runs on .NET Core 2.1
https://blogs.msdn.microsoft.com/dotnet/2018/08/20/bing-com-runs-on-net-core-2-1/
Our production data resonates with the significant performance improvements in .NET Core 2.1 (as compared to both .NET Core 2.0 and .NET Framework 4.7.2). The graph below tracks our internal server latency over the last few months. The Y axis is the latency (actual values omitted), and the final precipitous drop (on June 2) is the deployment of .NET Core 2.1! That is a 34% improvement, all thanks to the hard work of the .NET community!
FASTER: A Fast Key-Value Store From Microsoft Research
https://github.com/Microsoft/FASTER
Available in both C# and C++ versions, FASTER uses a unique ‘hybrid record log’ design that combines a traditional persistent log with in-place updates, to shape the memory working set and retain performance. 附：论文.
WorkerDOM
https://github.com/ampproject/worker-dom
可以在 worker 里使用 DOM 的 api
Layui
https://github.com/sentsin/layui/
返璞归真：身处在前端社区的繁荣之下，我们都在有意或无意地追逐。而 layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。双面体验：拥有双面的不仅是人生，还有 layui。一面极简，一面丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信手拈来的承诺。一切本应如此，简而全，双重体验。
svg-3d-builder
https://github.com/captainwz/svg-3d-builder
This framework aims at creating 3d models with SVG and to provide a concise API. It is purely developed with concepts of two-dimensions. One of its essential implementations is Bezier in both curve and surface. It is one thing to describe them with mathematic equations, but another thing to illustrate them with computer graphics.
Fitty, Snugly text resizing
https://github.com/rikschennink/fitty
Scales up (or down) text so it fits perfectly to its parent container. Ideal for flexible and responsive websites. 另附：A Pure CSS Textured Neon Text Effect.
Immer
https://github.com/mweststrate/immer
Create the next immutable state tree by simply modifying the current tree.
Johnny-Five v1.0
http://johnny-five.io/news/v1_0/
Johnny-Five is the JavaScript Robotics & IoT Platform. Released by Bocoup in 2012, Johnny-Five is maintained by a community of passionate software developers and hardware engineers. Over 75 developers have made contributions towards building a robust, extensible and composable ecosystem.
Ajax
https://github.com/fdaciuk/ajax
Ajax module in Vanilla JS. You can use this module with AMD, CommonJS or just like a method of window object!
Stimulus 1.1 Released
https://github.com/stimulusjs/stimulus/releases/tag/v1.1.0
Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all. Instead, it’s designed to augment your HTML with just enough behavior to make it shine.
NeutralinoJs
https://github.com/neutralinojs/neutralinojs
NeutralinoJs is a portable and lightweight framework which lets you to develop apps with native functions that can run inside web browsers. In electron and NWjs you have to install NodeJs and hundreds of dependency libraries. Embedded Chromium and Node creates large overhead and makes even simple apps like “hello world” considerable in size. Neutralino offers a solution for this issue.
webview
https://github.com/zserge/webview
A tiny cross-platform webview library for C/C++/Golang to build modern cross-platform GUIs. Also, there are Rust bindings, Python bindings, Nim bindings, Haskell and C# bindings available. 附一个基于它的作品：Create a simple cross-platform desktop game with Go.
Home Assistant
https://www.home-assistant.io/
Open source home automation that puts local control and privacy first. Powered by a worldwide community of tinkerers and DIY enthusiasts. Perfect to run on a Raspberry Pi or a local server.
Pyodide
https://github.com/iodide-project/pyodide
The Python scientific stack, compiled to WebAssembly. It provides transparent conversion of objects between Javascript and Python. When inside a browser, this means Python has full access to the Web APIs.
PyPy.js
https://pypyjs.org/
PyPy.js is an experiment in building a fast and compliant python environment for the web. It uses the PyPy python interpreter, compiled for the web via emscripten, with a custom JIT backend that emits asm.js code at runtime.
Redis will remain BSD licensed
http://antirez.com/news/120
Today a page about the new Common Clause license in the Redis Labs web site was interpreted as if Redis itself switched license. This is not the case, Redis is, and will remain, BSD licensed. 另附：The Commons Clause will destroy open source, It’s Time for the Open Source Community to Get Real、ESR - Unix != open source.
设计
前馈：让功能找到用户；让用户体验美好「自然交互 1」
https://zhuanlan.zhihu.com/p/41952711
在人机交互过程中，如何促使人和机/系统在合适场景、合适时间和合适用户上发生交互，是非常重要的课题。但当下数字设备的人机交互中，却存在很大的矛盾，主要来源于以下两点：在物理世界中，一个设备所拥有的功能是存在一定物理极限的，像瑞士军刀一样具备几十种功能的产品已是特例；在数字世界中，功能增长却没有明确的天花板，再加上能无缝访问互联网的设备，基本提供无限多的功能，例如：打开支付宝，享受成千上万种服务；与 50 年前相比，在如今信息爆炸的时代，人们每天接触的信息量早已跃升好几个量级，然而我们的认知能力却与 50 年前无异，甚至和几百年前的人类没有本质差异。
所以，人类认知进化的龟速，远远跟不上信息爆炸的光速。前馈：以设计的方式解决这对日益严重的矛盾，通过自然的人机交互，改变以往「让用户找到功能」的老路，我们探索「让功能找到用户」的新路。
Experience Is Everything – The Ultimate UX Guide
https://www.toptal.com/designers/ux/the-ultimate-ux-guide
User experience (UX) design experts have a deep understanding of design, technology, and human psychology. What makes a product great? What keeps people coming back? What drives them away? A well-thought-out UX design process, spearheaded by a seasoned UX professional, will help you strike the right balance and keep users coming back for more.
Design is not Science, Art or Engineering
https://uxdesign.cc/design-is-not-science-art-or-engineering-5e8d2f499494
What the hell is design? The following is a list of summary from some books I read, with my understanding. Bibliography is at the end.
Here’s everything I’ve learned from designing 10,000+ UI screens as a lead product designer
https://medium.com/ux-power-tools/heres-everything-i-ve-learned-from-designing-10-000-ui-screens-as-a-lead-product-designer-7d2810bee810
I learned all of this from amazing designers like you, fantastic mentors, and lots of trial and error. If you learn something from this article, share it with another designer. 另附：The laws of simplicity.
UX Design Trends For 2018
https://www.lollypop.design/blog/2018/august/ux-design-trends-for-2018/
With all that said, we can’t be more thrilled to announce that this year gave birth to UX 2.0! It’s brand new and is a better version of yesteryear’s UX. UX 2.0 comes with a number of new trends that can provide a frictionless experience, smarter personalization, and technology such as augmented reality, virtual reality, and voice assistance.
Mindful Design • Part 1
https://blog.prototypr.io/mindful-design-part-1-b0f6282c455a
In these Mindful Design series (yes, there will be more than one article) I will be exploring how mindfulness principles can be applied in a designer’s workflow.
产品及其它
This AI is bad at drawing but will try anyways
http://aiweirdness.com/post/177091486527/this-ai-is-bad-at-drawing-but-will-try-anyways
There was a paper recently where a research team trained a machine learning algorithm (a GAN they called AttnGAN) to generate pictures based on written descriptions. It’s like Visual Chatbot in reverse. When it was just trained to generate pictures of birds, it did pretty well, actually.
Intro to Augur
https://litepaper.com/resources/intro-to-augur
Augur is a predictions market built on ETHEREUM. Its entire premise is to create a decentralized hub where users can collectively bet on what the future might look like. Currently, prediction industries - like the stock market or weather forecasting - rely on small groups of experts. In Augur’s vision, it wants to let anyone have a go at guessing what tomorrow brings. 另附： What Do You Believe Now That You Didn’t Five Years Ago? Centralized Wins. Decentralized Loses.
巨头布局下的编程教育生态
http://www.geekpark.net/news/232238
8 月 17 日，由教育部主办，Google、清华大学等承办中美青年创客大赛落下帷幕，参赛的大学生们「各显神通」，获奖的诸多作品都以人工智能为底色，有能识别水质，有的能监测糖尿病患者状态。无独有偶，8 月 12 日索尼中国发布了与索尼可编程教育机器人 KOOV 配合使用的教材及教育者资源包，并已在 11 所小学试讲。索尼中国把编程教育的下一步布局瞄准了小学生。目前，除了颇受资本青睐的编程猫、小码王等创业型教育公司在这个新赛道上开疆拓土外，索尼、谷歌等行业巨头们也开始纷纷布局。
创业、艺术家和量子物理
https://mp.weixin.qq.com/s?__biz=MzUyMDQ5NzI5Mg==&mid=2247498476&idx=1&sn=d16c77c1e91bea434bd781ec5166648b
“科学和艺术在山脚下分开行走，最后在美学的山顶相遇。”这该是怎样一种奇景？作者综述了创业、艺术家、与量子物理，提炼出了一些通达各个领域的，关于“美”的底层规律，很是新颖奇特。
– THE END –
