Young Reacts #62 – WebAssembly Summit

I attended the first-ever WebAssembly Summit this week. It had a very distinct feel to it than other more established conferences I have been to. It had a single track and happened on a single day. A lot of contributors/early adopters were in the room, and the speakers geared toward them. I went there to find compelling use cases that could be applied to my day-to-day work, but I wasn’t able to achieve that, which tells me the technology is still in the early adopter phase.

You can find my (messy) note here if you are interested in learning more.

Speakers and organizers


People ❤

How to Give a Killer Presentation

In April, I am giving a talk in front of the largest audience in my experiences so far. It is honestly terrifying, so I will give it my 100%. This guide from Chris Anderson, the TED organizer, says a compelling narrative is the most important.

Software Engineering 🌐

Fire Mario, not Fire Flowers

When we engineers think about solving a problem, our goal should be to make our users awesome (Fire Mario) rather than to create an excellent tool (Fire Flower).

WebAssembly music

The coolest presentation I saw at the WebAssembly Summit. The link will play the synthesized sound purely from code.

GraphQL Server Specification: Mutations

The most essential trait of GraphQL API is backward compatibility. The relay spec is an easy way to future proof the compatibility.

Business 💸

Front Series C Deck

Mathilde Collin has published the deck that raised $59 million for Front, a shared inbox company. Here are Series A deck and Series B deck as well.

HQ Trivia shuts down after acquisition falls through

An online trivia service that was so hot just a couple years ago shut down. I still remember how envious my team was of the service when I was at an online community startup. Consumer-facing services are a tough business.

WebAssembly Summit 2020 Recap

Organizers and Speakers 👏

Website: WebAssembly Summit

Date: Feb 10, 2020

Recording: https://www.youtube.com/watch?v=WZp0sPDvWfw

The event was the first WebAssembly conference. It had a single track and happened on a single day. A lot of contributors/early adopters were in the room and the topics were geared toward them. I went there to find interesting use cases that could be applied to my day-to-day work but I wasn’t able to achieve that.

Here are my notes from the conference. I am no expert with WebAssembly so my notes may be incorrect:

Opening Keynote: WebAssembly: Building a new kind of ecosystem – Lin Clark

  • WebAssembly on Web is portable and secure.
  • WebAssembly on Server may lose security if we are not careful.
  • Currently in Node.js ecosystem, there is no sandbox to secure the system from 3rd party codes
    • Malicious code
      • Example: electron-native-notifier. A Bait and Switch scheme to steal bitcoins
        • Memory access
      • The number of malicious code has doubled from 2017 to 2019
    • Vulnerable code
  • Spinning up a new process as OS does for a library is too expensive
    • Memory issue
    • IPC is hard to deal with
  • Solution (WebAssembly Nanoprocesses):
    • Sandbox
    • Memory model (memory isolation)
    • Interface types: copy from an isolated memory to another memory to pass the data
    • WebAssembly System Interface (capability based security)
    • The missing link
      • How to pass the said capability to the dependencies
  • Nanoprocess isn’t a standard yet. just a convention. ByteCode Alliance works to provide a secure foundation.

References

Shipping Tiny WebAssembly Builds – Alon Zakai

WebAssembly is usually smaller than Javascript because

  • dead code elimination
  • binary format

Has a risk tho:

  • big runtime lib requirements

Tip 1: Compression: GZip or Brotli

Tip 2: wasm-opt will generate a smaller wasm from a wasm via:

  • dead code elimination
  • constant propagation
  • inlining
  • since wasm-opt is running at Link Time Optimization
  • wasm-opt will be run by some tool sets out of the box

Tip 3: size profiling

  • Bloaty
  • Twiggy
  • wasm-opt’s —func-metrics

There is a tradeoff between writing a idiomatic code vs. the smaller binary output

C/C++ Tip (a lot of specific tips):

Rust Tip:

Go Tip:

  • TinyGo vs. the regular runtime size differences

References

Why the #wasmsummit Website isn’t written in Wasm, and what that means for the future of Wasm – Ashley Williams

WebAssembly shouldn’t replace Javascript

How are values prioritized for WebAssembly? The community does not have an explicitly shared vision. We should make it easier for people to use WebAssembly.

Empowering people!

What does WebAssembly want?

  • Marketing does not speak the language of the people it wants to reach

Rust, C++, Javascript, Academia, New Developers all get together

What do people want from WebAssembly?

  • multilanguage support
    • Why? JS doesn’t meet my need
      • Why? performance inconsistencies / don’t understand/like it

What do the above numbers mean?

  1. Javascript has an unwilling monopoly.
  2. Performance is not as large of a concern as you would respect.
  3. A lot of people haven’t tried WASM yet.

History of Programming Language Development

  • 1995 → High-level abstractions (Ruby, Javascript, Java)
  • 2010 → Low-level languages (Go, Rust, WASM)

The demand for speed of computation on Web is growing since Web is the most powerful distribution channel.

Excel and Flash were hugely empowering technologies. WebAssembly should strive to be the same.

References

JavaScriptCore’s new WebAssembly interpreter – Tadeu Zagallo

I didn’t take much note here since this article (https://webkit.org/blog/9329/) can represent the talk very well.

WebAssembly Music – Peter Salomonsen

A talk on generating midi music with WebAssembly implementation. Javascript to write songs and WebAssembly to generate sound. He was able to create an executable out of the Javascript to play the song via terminal.

References

WebAssembly and Internet of Things – Jonathan Beri

What is IoT?

  • Embedded systems
    • Constrained
      • Limited processing power and battery
      • Limited connectivity

In 2017, a runtime for embedded systems did not exist.

A unikernel is a specialized OS for a single application.

Unikraft works to enable building unikernels with ease. Unikraft

WebAssembly on Arduino is now possible thanks to WAMR and WASM3

References

Building a Containerless Future with WebAssembly – Kevin Hoffman

Low-level runtimes: https://github.com/appcypher/awesome-wasm-runtimes

Mid-level runtimes: waPC https://medium.com/@KevinHoffman/introducing-wapc-dc9d8b0c2223 & wasCAP https://docs.rs/wascap/0.3.0/wascap/

High-level runtimes: waSCC https://wascc.dev/

Since webassembly is without container, its code can be updated on the fly without rebooting (dynamically bound).

My Q: Why waSCC is needed when you have the sandbox?

WebAssembly as a <video> polyfill – Brion Vibber

Limitations to wikipedia’s tech stack due to its philosophy. It could only use open/public licenses

Over time, they optimized the polyfill with:

  1. Javascript to WebAssembly
  2. Threaded build
  3. SIMD

References

Closing Keynote: WebAssembly: Expanding the PIE – Ben Smith

This talk felt like a recap of the community for the last 4-5 years. Incrementalism in WebAssembly community enable moving forward at a steady pace

Sep 2015

  • ml-proto (ocaml based) ⇒ WebAssembly reference interpreter
  • v8-native-prototype (binary format) ⇒ becomes WebAssembly binary format
  • a two weeks bet to translate ml-proto to v8-native-prototype: sexpr-wasm ⇒ sexpr-wasm-prototype ⇒ wabt

A modest goal at the time: C++ compile to WebAssembly. WA and JS interop.

APIE has been expanding since its inception:

  • Ability
  • Producer
  • Interop
  • Embedder

Sep 2017

Notable proposals: Garbage Collection, Host bindings

Jun 2018

Notable proposals: Garbage Collection, Reference Types (later became Interface Types), Wasm C API

Aug 2019

Notable proposals: Typed Function References, Type Imports, WASI, Interface Types

Feb 2020,

Notable proposals: Reference Types (Phase 4), GC, Wasm C API, WASI, Interface Types

Young Reacts #61 – Feature Flag Working Group

During my last compensation review, one identified growth area was to expand my impact outside my team and applications. So I started looking for cross-cutting problems, one of which was the lack of a user-based feature flagging solution.

But I couldn’t just go and build the system I wanted since none would buy into my solution. A unilateral decision doesn’t work at Netflix due to our culture of freedom and responsibility. Therefore, most of the cross-cutting problems are solved via working groups, a group of interested people who work together to define needs, recommend a solution, and, possibly, implement the solution.

So I kicked off a working group on feature flags last week. Even though I have seen firsthand how the groups worked together to transition our servers to containers, and to introduce GraphQL, this time is my first attempt at running a working group. It will be a challenging and teaching experience. But I will get through it.

Photo by Perry Grone on Unsplash


People ❤

Where to Start

This article gave me a perspective on how to identify cross-cutting problems. A sequel to this article, Technical Research and Preparation, also suggests a possible path forward.

The 3 Things Employees Really Want: Career, Community, Cause

Facebook surveyed what employees look for from their employers. The three values resonated with me as well. It was good to have my wants organized neatly like this.

Software Engineering 🌐

SwiftCrypto

Swift, a language originally designed by Apple for its UI applications, is now expanding to server applications just as Javascript and Kotlin did. To help with the expansion, Apple announced a library to enable cryptography using Swift on Linux.

Adding special values to types in TypeScript

Once you get used to modeling your data using Typescript, your thinking will become much more precise. This guide comprehensively shows how to represent different kinds of values.

JavaScript Libraries Are Almost Never Updated Once Installed

If it ain’t broke, don’t fix it is taken by heart by many engineers. This statistic shows precisely that.

Business 💸

Introducing Rolling Venture Funds

AngelList created a financial innovation to reduce fund-raising frictions for VCs. Will the new VCs, enabled by the lower barrier to entry, be able to change the VC industry?

Young Reacts #60 – Starting a meetup

I used to organize a monthly meetup for startup managers when I was in Seoul. I loved meeting new people, getting to know how they approached their roles, and exchanging ideas in a safe environment. I enjoyed it every time and now miss it dearly. That is why I planned to organize a similar event this year.

So for the first time, I organized a small gathering with people managers in South Bay this week. The turnout wasn’t large (4 in total), but I felt that it was a good start. The group was small enough to have in-depth discussions. I learned how certain teams at Epic Games, Chan Zuckerberg Initiative, and LinkedIn are organized, and was nudged to read about inwards, outwards, and holistics. I am planning to turn this into a regular event now.

Photo by Ashkan Forouzani on Unsplash


People ❤

High Output Management for (Non-managing) Tech Leads

High Output Management remains to be my favorite business book. One key lesson from the book is that a manager’s output equals the output of the organization under their supervision or influence. I’ve been thinking that the same applies to other types of leaders, such as senior engineers or tech leads, just as this article says.

Data-gather first, manage up second.

I have been disappointed by many managers before for their seeming lack of interest in my development. But this article made me regret not having more candid conversations about their motivations and priorities.

Software Engineering 🌐

The Dev.to Feed Algorithm

I remember my old days at a startup where we tweaked our feed algorithm just a tiny bit to improve our numbers. There wasn’t much science to it. We had a lot of magic numbers, which made me wonder if others did it much better. Dev.to, a developer community, has its code open-sourced, which shows how it generates feeds for its users.

Staggered Animations with CSS Custom Properties

I am still not used to CSS custom properties that their smart usages always amaze me. I would have never thought to use the custom properties to create staggered animations.

Business 💸

Quadratic Payments: A Primer

Whether money is speech or not, the current political systems suffer from elitism and, as a reaction, populism. Quadratic payment, where your nth vote costs you n, is an experiment to reflect people’s preferences more accurately.

Young Reacts #59 – Lab Days

I participated in a two-day Lab Days last week in LA for our colleagues in Animation Studio. The event was like hack days, but different in three aspects: first, we weren’t expected to work days and nights. Second, we didn’t come up with the ideas but were assigned to the projects which had eager stakeholders. Third, we were expected to present a usable product at the demo. (The organizers intentionally named it Lab Days, not Hack days to convey the different expectations)

The second and third differences put a lot of pressure on me. I couldn’t just call it a day because I knew how painful the problem was to the stakeholders. At the same time, the result has to be solid. After our demo, where my stakeholder jumped up and down, I was fried. I didn’t work longer than regular hours, but I was so intensely focused. I don’t believe I can do this every day, but it was fun to understand a problem, ideate a solution together, and create a working prototype in two days.

Photo by Hans Reniers on Unsplash

People ❤

Performing a Project Premortem

This Twitter thread about preventable problems prompted me to read more about premortems. I can now see that people are incentivized to chase after highly-visible projects since it is hard to prove that one is an unsung hero. Premortems look like an excellent way to detect and reward people who discover preventable problems and prevent them.

Software Engineering 

Introducing Yarn 2! 🧶

Yarn, one of the two most popular package managers, has received a major update. As the article describes, a lot has changed, including backward-incompatible features such as Plug’n’play and protocols. I am afraid these won’t work with the existing libraries on npm.

Playwright: Node library to automate Chromium, Firefox and WebKit with a single API

Microsoft announced an exciting evolution of Puppeteer named Playwright. Its APIs are more suitable for testing thanks to setTimeout-free automation, which is a crucial improvement.

Mirage JS: A client-side server to develop, test and prototype your JavaScript app

As UI developers, we are usually at the end of the dependency chain. We always wait for our requirements, designs, and APIs. So I welcome any tool that can remove that dependency. Mirage JS seems to be able to unblock us from backend dependencies and enable more iterations and experiments.

Business 

Building a more private web: A path towards making third party cookies obsolete

Cookies have been integral to track users’ activities across different websites and, thus, enabling advertisements to be more targeted. Google’s Chrome team announced Privacy Sandbox last August to make the technology less invasive. This first step will stop cookies from being sent everywhere.

And other things I read

Young Reacts #58

I joined a meeting this week where we discussed how to handle error states. And it was hands down the best meeting experience. The facilitator sent an agenda long before, took notes of discussions, spared plenty of time to create action items, and shared the summary of the meeting on the same day. It was a rare find even at Netflix. This meeting will be my standard going forward.

Photo by You X Ventures on Unsplash

People ❤

How to manage a program in a product-mode organization

Even in a transparent workplace like Netflix, achieving alignment across different teams is hard. The company and the orgs have a high-level strategy; but each team plans its roadmap autonomously, which often doesn’t consider interdependencies. This article suggests that cross-functional projects call for different organizing methods.

Software Engineering 

Code-wise, cloud-foolish

When I think about lock-ins, I often think about vendor lock-ins, such as AWS or JIRA. But my opensource tech stacks have lock-in effects as well (since I can’t easily change my code), and I should be mindful of it.

Copying data is wasteful, mutating data is dangerous

An enlightening thought that a function interface needs to be immutable, but the internal can use mutation for optimization.

A short Twitter Thread on Typescript type arguments

These couple of tweets explained so much about how Typescript’s type arguments work.

react-error-boundary

A handy library if you want to use hooks and error boundaries at the same time.

Business 

The ‘No Code’ Delusion

No Code is trending in the tech industry at the moment. Engineers are expensive, and products take too long to build. The article reacts to the movement. I liked the parallel between this generation of tools and the old drag-and-drop website editors, which failed to replace all UI engineers.

Young Reacts #57 – What Happens When Your Career Becomes Your Whole Identity

This article, What Happens When Your Career Becomes Your Whole Identity, caught my eyes this week. I’ve always valued work-life balance when I started working. While my professional achievements are significant to me, they never defined me. To some degree, the separation was easy because no one knew of the companies I worked for for the first seven years.

After I started working at Netflix, people who I meet for the first time know of me as a “Netflix engineer.” Who I am is less impressive to them than where I work. At first, I appreciated the new respect and interests my job has brought to me. But now I worry that this prestige would be too hard to let go, especially when I keep measuring myself against my peers and friends.

The article has several recommendations to battle this trapping; I found it most helpful to broaden my perspective to see my career in terms of not my company or title, but skills and greater goals. It will be hard to let go when the time comes. But I hope the article helps me in the future.

Photo by Hunters Race on Unsplash


Software Engineering 🌐

Write tests. Not too many. Mostly integration.

It is an interesting read because I haven’t seen many “real” unit tests in real life. Most teams I worked at chose not to mock/fake things out because of difficulty. But I agree with the premise that the unit tests are useful only in some instances.

What are the differences between the private keyword and private fields in TypeScript?

Private fields (fields that start with #) are part of Class fields proposal, which is at stage 3. This StackOverflow question helped to clarify the differences; the core is that private keywords check at compile-time and private fields check at runtime.

7.8.0 Released: ECMAScript 2020, .mjs configuration files and @babel/cli improvements

Now that null coalescing operators and optional chaining are at stage 4, Babel 7.8 support them by default.

The story of a V8 performance cliff in React · V8

A probably useless, still eye-opening article for UI engineers. I find leaking abstractions fascinating.

Business 💸

State of Startups 2019

This annual survey made me appreciate that startups don’t happen overnight. Looking at the age of the startups, most have been around for more than three years, but yet, most are not profitable.

Enforcing Against Manipulated Media

Facebook, while it won’t remove political ads, will delete manipulated/generated photos or videos (think deepfake). On a related note, a notable Facebook leader Andrew Bosworth posted thoughts on its role in the past and the coming elections.