Where'd my JavaScript go?
by Ryan Edge
Ryan Edge
I build multiplatform applications for Web, Desktop, and Mobile
I ❤️ Flutter and React
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 (
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>
);
}
}Case Study #2: Stencil
Stencil capabilities
- Complexity be gone!
- Framework agnostic
- Borrows from the best
What does the future hold for JavaScript?
Will JavaScript disappear? Probably not.
Keep betting on JavaScript
JavaScript will not die, but it will change.
WebAssembly, Reason, Flutter, oh my!
- Reference variables allow DOM access from WASM, a game-changer
- Reason makes a functional play for your heart
- Flutter tries to put a Dart in every household
Younger me 10 minutes later...
Wrapping up
- Modern frameworks improve our lives
- Next-gen frameworks use compilers for performance, simplicity, and sharing
- The code we write isn't the code we see, and that's OK.
Thanks 🐑
Where'd my JavaScript go?
By Ryan Edge
Where'd my JavaScript go?
"Increasingly, the bytes that get shipped to browsers will bear less and less resemblance to the source code that web developers write." Is this a good thing? What, if anything, do we sacrifice in our pursuit to eke out the most performance and provide rich experiences that are native-like?
