FEX 技术周刊 - 2018/06/25

业界会议

GMTC2018全球大前端技术大会
https://gmtc.geekbang.org/
前端会议越来越高大上了，在会上 Flutter 宣布了 Release Preview 1 https://www.leiphone.com/news/201806/wLTnCxTerrrMKbxO.html

深阅读

V8 release v6.8
https://v8project.blogspot.com/2018/06/v8-release-68.html
his post provides a preview of some of the highlights in anticipation of the release. In parallel we have reduced the memory consumption of SFIs themselves, removing unnecessary fields or compressing them where possible, and decreased their size by ~25%, with further reductions coming in future releases. In V8 v6.8 you can start using trap-based bounds checking on Linux x64 platforms. Performance improvements: Array destructuring, Object.assign, TypedArray.prototype.sort.

The Cost Of JavaScript - Addy Osmani
https://www.youtube.com/watch?v=63I-mEuSvGA
Addy Osmani explains how and why JavaScript is the most expensive resource your site uses today—especially on mobile. Addy also shares tips for fixing JavaScript performance issues so everything loads quicker. A little discipline can help if you want your site to load and be interactive as soon as possible on mobile. As a result, moving forward, we are sunsetting React Native at Airbnb and reinvesting all of our efforts back into native, 见 Sunsetting React Native. 另附：State of React Native 2018

Github Stars !== Usage: React is still blowing Vue and Angular Away
https://zendev.com/2018/06/19/react-usage-beating-vue-angular.html
By digging into the NPM download statistics, we find that despite the hype around Vue’s skyrocketing github stars, React is still the 800 pound gorilla in the JavaScript framework space. It is about to cross the mammoth 10 million downloads per month, and has been growing at a torrid rate.

Using JavaScript modules on the web
https://developers.google.com/web/fundamentals/primers/modules
JavaScript modules are now supported in all major browsers! This article explains how to use JS modules, how to deploy them responsibly, and how the Chrome team is working to make modules even better in the future.

Picasso 开启大前端的未来
https://tech.meituan.com/picasso_the_future.html
Picasso是大众点评移动研发团队自研的高性能跨平台动态化框架，经过两年多的孕育和发展，目前在美团多个事业群已经实现了大规模的应用。 Picasso源自我们对大前端实践的重新思考，以简洁高效的架构达成高性能的页面渲染目标。在实践中，甚至可以把Native技术向Picasso技术的迁移当做一种性能优化手段；与此同时，Picasso在跨越小程序端和Web端方面的工作已经取得了突破性进展，有望在四端（Android、iOS、H5、微信小程序）统一大前端实践的基础之上，达成高性能大前端实践，同时配合Picasso布局DSL强表达能力和Picasso代码生成技术，可以进一步提升生产力。

SpriteJS —— Canvas动画从未如此简单
https://www.h5jun.com/post/spritejs.html
奇舞团团长月影亲自操刀，360开源又一力作——spriteJS，实现酷炫的数据可视化，让canvas动画制作变得 so easy 实现你的动画梦。SpriteJS是一款由360奇舞团开源的跨终端canvas绘图库，可以基于canvas快速绘制结构化UI、动画和交互效果，并发布到任何拥有canvas环境的平台上（比如浏览器、小程序和node）。

前端开发-领域驱动设计
https://yuque.com/mayiprototeam/gfyt69/oq14ia
随着我们解决的场景越来越专业化和复杂化，大型SPA应用的流行，前端承担的职责越来越多。代码的质量和系统的完整性越来越难把握。很容易导致迭代着迭代着发现代码改不动了。最后只能新起炉灶，重新开发。归根到底在于复杂度的失控，本文会尝试分析其中的问题以及从前端如何应用领域模型开发的角度给出一些建议。

WWDC2018 - 来自一线开发者的技术笔记
https://techblog.toutiao.com/2018/06/19/untitled-49/
感谢头条的同学的分享。

React Native at Airbnb
https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c
In 2016, we took a big bet on React Native. Different teams had a wide range of experiences with React Native. React Native proved to be an incredible tool at times while posing technical and organizational challenges in others. In this series, we provide a detailed account of our experiences with it and what we’re doing next.

How JavaScript works: the internals of Shadow DOM + how to build self-contained components
https://blog.sessionstack.com/how-javascript-works-the-internals-of-shadow-dom-how-to-build-self-contained-components-244331c4de6e
Web Components is a suite of different technologies that allows you to create reusable custom elements.Their functionality is encapsulated away from the rest of your code, and you can utilize them in your web apps. There are 4 Web Component standards: Shadow DOM, HTML Templates, Custom elements, HTML Imports. In this article, we’ll focus on the Shadow DOM.

End-to-end testing Single Page Apps and Node.js APIs with Cucumber.js and Puppeteer
https://medium.com/@anephenix/end-to-end-testing-single-page-apps-and-node-js-apis-with-cucumber-js-and-puppeteer-ad5a519ace0
Single Page Apps are a popular approach to building web applications, but testing them in an end-to-end fashion is not simple; you need to load the backend (potentially a collection of APIs and databases), and make sure that the combination of the SPA and APIs works as expected. The good news is that there is a way to do this, and in this article we will show you how, using a Behaviour-Driven-Development tool called Cucumber.js, and Google’s web browser library Puppeteer. If you develop Node.js web applications and want to use E2E testing for them but don’t know how, then this article is for you.

MySQL High Availability at GitHub
https://githubengineering.com/mysql-high-availability-at-github/
GitHub uses MySQL as its main datastore for all things non-git, and its availability is critical to GitHub’s operation. The site itself, GitHub’s API, authentication and more, all require database access. This post illustrates GitHub’s MySQL high availability and master service discovery solution, which allows us to reliably run a cross-data-center operation, be tolerant of data center isolation, and achieve short outage times on a failure. 另附：Databases in 2018: The State of the Developer Ecosystem

Post Inspector: A Tool to Optimize Content Sharing
https://engineering.linkedin.com/blog/2018/06/post-inspector--a-tool-to-optimize-content-sharing
The Content Ingestion team at LinkedIn primarily focuses on discovering content across the web and ingesting it into the LinkedIn content ecosystem. Not only do we ingest content whenever a member shares a URL, but we also proactively search for interesting content that our members could enjoy. Given the team’s focus, we’ve created a tool—called Post Inspector—for external content providers and internal teams at LinkedIn that provides insight into how we extract metadata so that content providers can easily optimize the sharing experience of their content on the LinkedIn platform.

Growth Engineering at Netflix — Accelerating Innovation
https://medium.com/netflix-techblog/growth-engineering-at-netflix-accelerating-innovation-90eb8e70ce59
The customer experience is remarkably different in each of these cases, but the goal is the same. We seek to offer the best possible signup experience to our prospective members while at the same time, remaining extremely lean, agile and efficient in our implementation of these disparate experiences. Offering an amazing signup experience for thousands of devices in over 190 countries is an incredibly challenging and rewarding task.

Fibonacci Hashing: The Optimization that the World Forgot
https://probablydance.com/2018/06/16/fibonacci-hashing-the-optimization-that-the-world-forgot-or-a-better-alternative-to-integer-modulo/
Hash tables should not be prime number sized and they should not use an integer modulo to map hashes into slots. Fibonacci hashing is just better. Yet somehow nobody is using it and lots of big hash tables (including all the big implementations of std::unordered_map) are much slower than they should be because they don’t use Fibonacci Hashing. So let’s figure this out. 另附：How Ably Efficiently Implemented Consistent Hashing

新鲜货

Hello, Pulumi - Get Code to the Cloud. Faster. Together.
http://joeduffyblog.com/2018/06/18/hello-pulumi/
Pulumi is multi-language, multi-cloud, and fully extensible. On day one, it supports JavaScript, TypeScript, Python, and Go languages, and AWS, Azure, and GCP clouds, in addition to Kubernetes targeting any public, private, or hybrid cloud. Pulumi delivers a single, consistent programming model and set of tools to program and manage any of these environments, supported by a rich ecosystem of reusable packages. Using real languages changes everything.

GitLab 11.0 released with Auto DevOps and License Management
https://about.gitlab.com/2018/06/22/gitlab-11-0-released/
Auto DevOps is a pre-built, fully featured CI/CD pipeline that automates the entire delivery process. It is Generally Available and ready for prime time in GitLab 11.0. Other key features we have released in GitLab 11.0 include License Management to automatically detect licenses of your project’s dependencies; enhanced Security Testing of your code, containers, and dependencies; further Kubernetes integration features; an enhanced Web IDE; enhanced Epic and Roadmap views; Incremental Rollouts; and much more.

Announcing GitHub for Unity 1.0
https://blog.github.com/2018-06-18-announcing-github-for-unity-1.0/
GitHub for Unity is a Unity editor extension that brings Git into Unity 5.6, 2017.x, and 2018.x with an integrated sign-in experience for GitHub users. It introduces two key features for game development teams: support for large files using Git LFS and file locking. These features allow you to manage large assets and critical scene files using Git in the same way that you manage code files, all within Unity.

Announcing Microsoft Research Open Data
https://www.microsoft.com/en-us/research/blog/announcing-microsoft-research-open-data-datasets-by-microsoft-research-now-available-in-the-cloud/
We are excited to launch Microsoft Research Open Data – a new data repository in the cloud dedicated to facilitating collaboration across the global research community. Microsoft Research Open Data, in a single, convenient, cloud-hosted location, offers datasets representing many years of data curation and research efforts by Microsoft that were used in published research studies.

Web Animations in WebKit
https://webkit.org/blog/8343/web-animations-in-webkit/
Over the last 8 months we have been working on adding support for Web Animations, a W3C standard offering Web developers a JavaScript API to create, query and controls animations. While there is work left to do to ship this experimental feature to the Web at large, we feel our implementation has matured enough that, with the release of Safari Technology Preview 59, we can turn Web Animations on by default for our Web developer audience.

W3C Strategic Highlights May 2018
https://www.w3.org/2018/05/w3c-highlights/
This report gives an overview of recent highlights and work of consolidation, optimization, enhancement of the existing landscape, innovation, incubation, research, and the 2018 W3C Road-map for the Web.

GlslEditor
https://github.com/patriciogonzalezvivo/glslEditor
Friendly GLSL Shader editor based on Codemirror compatible with glslViewer (C++/OpenGL ES) and glslCanvas (JS/WebGL). Was originaly develop to work as a embebed editor for The Book of Shaders. But now have grown as a stand alone Web app. Thanks to their compatibility with other apps of this ecosystems like glslViewer that runs in the RaspberryPi directly from console, GlslEditor interact with other projects like OpenFrame.io allowing the user to export the shaders to frames with only one button. The Book of Shaders 这本书很棒，教程典范。

Sails 1.0
https://sailsjs.com/
Sails makes it easy to build custom, enterprise-grade Node.js apps. Build practical, production-ready Node.js apps in a matter of weeks, not months. Sails is the most popular MVC framework for Node.js, designed to emulate the familiar MVC pattern of frameworks like Ruby on Rails, but with support for the requirements of modern apps: data-driven APIs with a scalable, service-oriented architecture.

billboard.js V1.5
https://github.com/naver/billboard.js
billboard.js is a re-usable, easy interface JavaScript chart library, based on D3 v4+.

Material Dashboard
https://github.com/creativetimofficial/material-dashboard
Material Dashboard - Open Source Bootstrap 4 Material Design Admin. 竟然同时 支持 VUE、React、Angular.

React Lifecycle Visualizer
https://github.com/Oblosys/react-lifecycle-visualizer
An npm package (react-lifecycle-visualizer) for tracing & visualizing lifecycle methods of arbitrary React components.

React Final Form
https://github.com/final-form/react-final-form
High performance subscription-based form state management for React.

Gatsby v2 beta launch
https://www.gatsbyjs.org/blog/2018-06-16-announcing-gatsby-v2-beta-launch/
Gatsby : Blazing-fast static site generator for React.

css-doodle
https://css-doodle.com/
A web component for drawing patterns with CSS. 附：中文介绍

Bitsrc
https://bitsrc.io/
Imagine all your components organized on the cloud, made discoverable for your team and synced in all your projects. That’s Bit.

ActorDB - A distributed SQL database
https://github.com/biokoda/actordb
With the scalability of a KV store, while keeping the query capabilities of a relational database. ActorDB is ideal as a server side database for apps. Think of running a large mail service, dropbox, evernote, etc. They all require server side storage for user data, but the vast majority of queries is within a specific user. With many users, the server side database can get very large. Using ActorDB you can keep a full relational database for every user and not be forced into painful scaling strategies that require you to throw away everything that makes relational databases good.

GraalVM - Run Programs Faster Anywhere
https://www.graalvm.org/
GraalVM is a universal virtual machine for running applications written in JavaScript, Python, Ruby, R, JVM-based languages like Java, Scala, Kotlin, and LLVM-based languages such as C and C++. GraalVM removes the isolation between programming languages and enables interoperability in a shared runtime. It can run either standalone or in the context of OpenJDK, Node.js, Oracle Database, or MySQL.

Gravity
https://marcobambini.github.io/gravity/#/README
Gravity is a powerful, dynamically typed, lightweight, embeddable programming language written in C without any external dependencies (except for stdlib). It is a class-based concurrent scripting language with a modern Swift like syntax. Gravity supports procedural programming, object-oriented programming, functional programming and data-driven programming. Thanks to special built-in methods, it can also be used as a prototype-based programming language. Gravity has been developed from scratch for the Creo project in order to offer an easy way to write portable code for the iOS and Android platforms.

设计

Don’t Use The Placeholder Attribute
https://www.smashingmagazine.com/2018/06/placeholder-attribute/
The placeholder attribute contains a surprising amount of issues that prevent it from delivering on what it promises. Let’s clarify why you need to stop using it.

Introducing Inspect: Where the file is the design spec
https://www.goabstract.com/blog/introducing-inspect-where-the-file-is-the-design-spec/
We’re proud to announce Inspect, an easy way for engineers to quickly gather all the information they need to implement any design. Since Inspect is built on top of our versioning system, designers never need to upload the latest version of a file, and engineers no longer have to worry about referencing an outdated design. With Abstract, you always have the latest version at hand—on the web or in the desktop app. 另附：The Ultimate Sketch Resource Archive.

How to scale product design with DesignOps
https://www.invisionapp.com/blog/scale-product-design-designops/
The role of design operations, also known as DesignOps, is becoming more and more important as the fields of design and technology become increasingly integrated. It primarily refers to the practice of developing a more efficient design workflow process in organizations. DesignOps can be defined as a collaboration between design, technology, and engineering teams that streamlines and advances the design workflow process in an organization. 另附：How we use Freehand at InVision、DesignOps: the questions you’re probably asking yourself now

Interface Exploration: Depth and Color
https://blog.marvelapp.com/interface-exploration-depth-color/
Over the last decade, interface design has seen a turn from replication of the physical/material (referred to as skeuomorphism) to a much more flat, abstract aesthetic. While this new visual style appears more appealing, I’ve felt that a sense of intuition and approachability has been lost by discarding some skeuomorphic characteristics. In order to further explore these observations, I endeavored to visualize a future interface that finds a balance between minimalism and physical context, for a future that will further enable people to interact with seamless slabs of glass and simulate tactile buttons.

Using design to make hard life choices
https://blog.prototypr.io/using-design-to-make-hard-life-choices-e660ebedfe3c
When we ask for advice on these tough problems, our friends and family sometimes tell us things like “you’ll just know when things are right” or “find what works for you!” Of course, these just make us feel worse. Eventually we may convince ourselves this is just how things are supposed to be. Life is hard, problems are hard, and others have success because they had the right “blocks” close at hand (which certainly helps, but is rarer than we like to think). Being a little sad about life is normal, right? I think it’s wrong. The biggest parts of your life are not supposed to make you feel bad.

Enhancing Quora’s messaging UX
https://uxdesign.cc/enhancing-quora-messages-ux-2750e5c2a068
Streamlining the process of exchanging messages on world’s largest knowledge sharing platform.

产品及其它

GitHub Education
https://blog.github.com/2018-06-19-announcing-github-education/
Turning today’s students into tomorrow’s technologists with GitHub Education, a free program for schools. GitHub Education includes access to GitHub, an ever-growing suite of developer tools in the Student Developer Pack, workflows for teachers in GitHub Classroom, and training through Campus Experts and Campus Advisors.

Reddit - Introducing the News tab
https://redditblog.com/2018/06/20/introducing-the-news-tab/
The News tab offers a home for content that the community surfaces from communities that frequently share and engage with the news. We began the process of identifying them by first looking at the subreddits where news is sourced and engaged with most.

傅盛：“超级复杂时代”来临，思维成长最重要
https://mp.weixin.qq.com/s?__biz=MjM5NjgzMzkwMQ==&mid=2653646952&idx=1&sn=a198408eccd0085c67c3d32c5cf22c1f
移动互联网的格局战争基本结束，正在变成基础产业，新产业将会崛起。后来，我慢慢意识到——跨界融合、新技术、新应用是未来时代最大的机会。今天有一个非常流行的词汇叫“VUCA时代”，表示当今时代显现出“从复杂到超级复杂”的特征。其实VUCA是四个英语单词的对应：易变性、不确定性、复杂性、模糊性。这四个特性，也是这个时代非常鲜明的写照。这个时代，其实已经不是单一面，而是从复杂到超级复杂的时代。人们越来越焦虑，学习心态变得越来越重要。

微软复兴 - 每一个人到达某一个点时，都应点击刷新
https://mp.weixin.qq.com/s?__biz=MzIxNTAzNzU0Ng==&mid=2654601987&idx=1&sn=e0ab6c7feaaa2a428f94c8d381f02ccb
任何企业最后一定会遭遇成熟期，会陷入到非连续性的窘境，会遭遇到阿喀琉斯之踵。这时，原本帮助企业进步、成长的企业文化，反而成为最限制成长的枷锁。我们把它叫做“企业心智枷锁”。大公司转型非常困难，有没有成功的经验？刷新微软。但是这个案例太难了，要费非常大的力气才能做到。正因为它难，一旦形成之后，非常神奇，而且它的改革者本人是内部的职业经理人。

– THE END –