Anurag Hazra anuraghazra

Electives

This group is great for people building shared component libraries:

Compound Components

The foundation of all reusable components in React. Once you understand this concept, your components will be able to work in UIs you aren't even thinking about yet.

any: magic, ill-behaved type that acts like a combination of never (the proper [bottom type]) and unknown (the proper [top type])
- Anything except never is assignable to any, and any is assignable to anything at all.
- Identities: any & AnyTypeExpression = any, any | AnyTypeExpression = any
- Key TypeScript feature that allows for [gradual typing].
unknown: proper, well-behaved [top type]
- Anything at all is assignable to unknown. unknown is only assignable to itself (unknown) and any.
- Identities: unknown & AnyTypeExpression = AnyTypeExpression, unknown | AnyTypeExpression = unknown

Prefer over any whenever possible. Anywhere in well-typed code you're tempted to use any, you probably want unknown.

ListBox

Listbox seems to have all of the constraints in one component. Making a decision here is likely to be easily expanded to the rest of the components. It has all the tricky parts we're dealing with right now:

Index based focus management
Children needing their index to render
Parent/sibling component needing props from a sibling
Case for SSR support

AoT Template Extraction

Rather than creating DOM nodes in JavaScript, an AoT system can extract the html, deliver as html, and then only need reference the relevant DOM nodes in JavaScript. This has a number of performance benefits:

It takes advantage of fast parsing of html by the browser and avoids the additional JavaScript bundle size and parsing tax.
Only elements involved in binding need to be managed or even referenced
Faster mechanisms like cloneNode can be used to produce cheaper copies
Like html templates can be consolidated

Based on the current Svelte 3.0 output, it seems well poised to take advantage of this.

Example Collapsible Content

Style 1

_{Click to see more:}

Given the following python code

from pychartjs import BaseChart

class myChart(BaseChart):

A compile-time 4-Bit Virtual Machine implemented in TypeScript's type system. Capable of running a sample 'FizzBuzz' program.

Syntax emits zero JavaScript.

type RESULT = VM<
  [
    ["push", N_1],         // 1
    ["push", False],       // 2
 ["peek", _], // 3

I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.

I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.

"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

Everything I Know About UI Routing

Definitions

Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
1. pathname - The "file/directory" portion of the URL, like invoices/123
2. search - The stuff after ? in a URL like /assignments?showGrades=1.
3. query - A parsed version of search, usually an object but not a standard browser feature.
4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

Simpler Variadic Function Types in TypeScript (part 2): Higher-order Variadic Functions

In part 1 we looked at a technique that allows expressing strongly-typed variadic functions in a way that solves problems with the current most common approach. It reduces code size and repetition, and it scales to any arity.

I mentioned that the technique can also be extended to higher-order variadic functions, such as the typical zipWith. Let’s explore how to do that.

ZipWith Example

As we did in part 1, let’s start with an example, a typical zipWith on arrays.

	// https://github.com/microsoft/TypeScript/blob/ba5e86f1406f39e89d56d4b32fd6ff8de09a0bf3/src/compiler/checker.ts

	// 1. add this line to ln:3

	export const _conditionalTypes: any = {}

	// 2. then replace ln:12303 to ln:12360

	function trackConditionalType() {
	// one time stuff