Where'd my JavaScript go?

by Ryan Edge

Ryan Edge

http://ryanedge.page

I build multiplatform applications for Web, Desktop, and Mobile

I ❤️ Flutter and React

https://slides.com/chimon/where-d-my-javascript-go

What this talk is

Constant change

About TypeScript

What this talk is not

My first IDE

Reading JavaScript today like...

What went wrong?

Browser wars
Dreaded backwards compatibility
Build tools to the rescue!!!

Build tooling: transpilers & compilers

Transpilers compile code to the same level of code or abstraction
Compilers compile code to a lower level code

Increasingly, the bytes that get shipped to browsers will bear less and less resemblance to the source code that web developers write. - Tom Dale

Compilers are not new on the web

Google Web Toolkit (2006)
ClojureScript (2008)
CoffeeScript (2009)

These are just a few examples

Why do we have frameworks?

simplicity
organization
familiarity

Frameworks are not tools for organizing your code, they are tools for organizing your mind - Rich Harris

Can our frameworks be better?

performance
framework fatigue

A React example: setState

class FullName extends React.Component<{}, { fullName }> {
  constructor(props) {
    super(props);
    this.state = { fullName: "Ryan Edge" };
  }

  handleFullNameChange = e => {
    //Wrong, but isn't this what we want to do
    this.state.fullName = e.target.value;

    this.setState({ fullName: e.target.value });
  };

  render() {
    const { fullName } = this.state;

    return (
      <div>
        <h1>{fullName}</h1>
        <input value={fullName} onChange={this.handleFullNameChange} />
      </div>
    );
  }
}

A React example: useState

function FullName() {
  const [fullName, setFullName] = React.useState("Ryan Edge");

  function handleFullNameChange(e) {
    setFullName(e.target.value);
  }

  return (
    <div>
      <h1>{fullName}</h1>
      <input value={fullName} onChange={handleFullNameChange} />
    </div>
  );
}

Virtual DOM

Is awesome
Is fast enough
Is a performance bottleneck

Abstraction leaks

shouldComponentUpdate
React.PureComponent
useMemo
useCallback

Symptoms that your front-end technology is underpowered - Rich Harris

Compilers to the rescue?

What problems do compilers solve?

JavaScript is fast, but it's not predictably fast." - Karl Guertin

writing performant JavaScript code is hard.
writing backward-compatible code is time-consuming.
low-level JavaScript primitives are imperative and complex.

The rise of disappearing frameworks

Frameworks that compile the code you write, without the framework, resulting in a smaller and faster application.

Case Study #1: Svelte

Developed by Rich Harris
Compiles to imperative JavaScript
No Virtual Dom

Case Study #1: Svelte

<script>
	export let fullName = "Ryan Edge";
	$: greeting = `Hello ${fullName}`;

	//We could also just use bind:value
	function handleFullNameChange(e) {
	  fullName = e.target.value;
	}
</script>

<style>
	h1 {
	  color: blue;
	}
</style>

<div>
  <h1>{greeting}!</h1> 
	 <!--We could also just use bind:value  -->
	<input value={fullName} on:input={handleFullNameChange} />
</div>

Case Study #1: Svelte

Svelte capabilities

Truly reactive w/o boilerplate
Magic happens at compile time
Compiler only includes what you need

Case Study #2: Stencil

Developed by Ionic
Compiles to WebComponents

Case Study #2: Stencil

import { h, Component, Prop } from "@stencil/core";

@Component({
  tag: "full-name",
  styles: `
    h1 {
      color: blue;
    }
  `,
  shadow: true
})
class FullNameComponent {
  @Prop({ reflect: true }) fullName: string = "Ryan Edge";

  handleFullNameChange = e => (this.fullName = e.target.value);
  render() {
    const { fullName, handleFullNameChange } = this;
    return (
      <div>
        <h1>{fullName}</h1>
        <input value={fullName} onInput={handleFullNameChange} />
      </div>
    );
  }
}