2018.08.20 - V8 Embedded builtins

Title: 2018.08.20 – V8 Embedded Builtins

Industry Conferences

China’s First React DEV Conf & FEDAY 2018
https://fequan.com/2018/ | https://react.w3ctech.com/ – Feel free to watch; looking forward to the conference materials.

In‑Depth Reading

Who Left Open The Cookie Jar?
https://wholeftopenthecookiejar.eu/
As browsers have become enormously complex, certain edge cases may have been overlooked, or the interplay of specific features may produce unwanted side effects. In our research we built a framework to verify whether all imposed cookie‑ and request‑policies are correctly applied (to be released soon). Worryingly, we found that most mechanisms could be circumvented: for every ad‑blocking and anti‑tracking extension we discovered at least one technique that bypasses the policies. For the technical details, we invite you to read our paper, which was presented at USENIX Security ’18 (https://www.usenix.org/conference/usenixsecurity18).

Embedded Builtins
https://v8project.blogspot.com/2018/08/embedded-builtins.html
V8 built‑in functions (builtins) consume memory in every V8 instance. The number of builtins, their average size, and the number of V8 instances per Chrome tab have been growing significantly. This blog post describes how we reduced the median V8 heap size per website by 19 % over the past year.

JavaScript Engine Fundamentals: Optimizing Prototypes
https://mathiasbynens.be/notes/prototypes
This article covers key fundamentals common to all JavaScript engines—not just V8, the engine the authors (Benedikt and Mathias) work on. As a JavaScript developer, a deeper understanding of engine internals helps you reason about your code’s performance characteristics.

Keep Betting on JavaScript by Kyle Simpson
https://www.youtube.com/watch?v=lDLQA6lQSFg
“Always bet on JavaScript” celebrates JS’s history of naysayers who predicted it would never keep up with modern development demands—turns out those were bad bets. It’s safe to say JS no longer needs to prove itself; it has arrived.

Principles of Modern Application Development
https://www.nginx.com/blog/principles-of-modern-application-development/
These principles can be summed up as: keep it small, design for the developer, and make it networked. Following them lets you build robust, complex applications that can be delivered quickly and securely, scaled easily, and extended simply.

The 10:1 Rule of Writing and Programming
https://www.ybrikman.com/writing/2018/08/12/the-10-to-1-rule-of-writing-and-programming/
Given my limited data set, I can only draw a few preliminary conclusions: the ratio of “raw material” to “finished product” in a book is roughly 10 : 1. Keep this in mind the next time an editor asks for a timeline! If you want to write a 300‑page book, you’ll probably need to write about 3,000 pages. Similarly, the ratio of “code churn” to “lines of code” in mature, non‑trivial software is also at least 10 : 1. Keep this in mind the next time a manager or client asks for an estimate! To build a 10,000‑line app, expect to write roughly 100,000 lines. I call this the 10:1 rule of writing and programming: good software and good writing require that, on average, every line is rewritten at least ten times.

Front‑End Second Half: Building Cross‑Framework UI Libraries
https://www.phodal.com/blog/build-cross-framework-ui-library/
A cross‑framework UI library can run unchanged on React, Angular, Vue, and other frameworks.

Micro‑Frontends: Design Philosophy and Early Practices
https://zhuanlan.zhihu.com/p/41879781
Microservices and micro‑frontends both aim to break a monolithic application into multiple independently runnable, developable, deployable, and maintainable services or apps, satisfying fast‑changing business needs and distributed multi‑team development. As Conway’s Law states, the architecture of a system mirrors the communication structure of the organization that designs it; thus micro‑services and micro‑frontends involve not only technical changes but also shifts in organization and communication.

Talking About Degree Units on the Web
https://www.w3cplus.com/css/understanding-degrees-on-the-web.html
In the physical world, degrees are almost exclusively used to measure angles. They play a similarly popular role on the Web, applying to many scenarios we encounter. Fortunately, there are many parallels between real‑world and virtual degrees, so this article introduces the basics of degrees on the Web and then dives into some finer details.

A Chat on Front‑End Performance: Breaking Through React Bottlenecks
https://zhuanlan.zhihu.com/p/42032897
Performance has always been a crucial topic in front‑end development. As the front‑end’s capabilities expand—from web games to complex single‑page apps, from Node.js services to WebVR/AR and data visualizations—engineers constantly push limits. Some performance problems are solved easily; others become formidable barriers. So, what do we really mean when we talk about performance? What characteristics do React‑based apps have in this regard? This article analyzes front‑end performance from the browser and JavaScript engine perspectives, and explores innovative React techniques that fully leverage browser capabilities to break through limitations.

Insights into Video Super‑Powers – Playing with FLV
https://techblog.toutiao.com/2018/08/13/untitled-52/
FLV stands for Flash Video, a format originally created for Flash players. Its simple, clear structure was designed to solve the problem of large SWF files that were unsuitable for web playback. As Flash faded, the native <video> tag stopped supporting FLV, and the focus shifted to MP4 or HLS. However, with the rise of live streaming, FLV has experienced a resurgence.

Simple Internationalization of React Apps
https://itnext.io/simple-internationalization-of-react-apps-34b3bda95725
react-intl remains the de‑facto standard for i18n in React apps. Even though it hasn’t been maintained for about a year, the community is strong enough that it’s still popular, and new independent tools keep appearing. I’d like to introduce an alternative i18n solution I’ve been working on for the past year and a half—jsLingui (https://github.com/lingui/js-lingui). Its low‑level API is very similar to react-intl to ease migration, but it offers a completely different developer experience on top.

Creating a Chrome Extension in 2018: The Good, the Bad, and the Meh
https://checklyhq.com/blog/2018/08/creating-a-chrome-extension-in-2018-the-good-the-bad-and-the-meh/
We shipped an initial version of Puppeteer Recorder (https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda), a Chrome extension that records your browser interactions and generates a Puppeteer script. It turns out Chrome‑extension development is almost like regular web development, but with a quirky dash of quasi‑embedded development mixed in. This post walks you through the development lifecycle of an extension and lists some architectural gotchas. The source code is on GitHub.

Browser Painting and Considerations for Web Performance
https://css-tricks.com/browser-painting-and-considerations-for-web-performance/
In this article I focus on the last stage: painting. All those steps together constitute a lot of work for a browser, not only on page load but any time the DOM (or CSSOM) changes. That’s why many developers mitigate the cost by using a front‑end framework such as React, which—among many other advantages—can heavily optimize DOM changes to avoid unnecessary recalculations or renders.

Creating the “Perfect” CSS System
https://medium.com/gusto-design/creating-the-perfect-css-system-fa38f5bcdd9e
A high‑level guide for designers and developers who write CSS but want a more strategic approach to building medium‑to‑large‑scale CSS systems.

(content truncated)

---

Originally written by Ping Xia (平侠) and published in Chinese on Web技术周刊 (Web Tech Weekly). Translated and adapted for DriftSeas with permission.