React and Type Systems

In the present talk, I discuss the use of various type systems in the context of Front End web development in general, and React-based systems in particular. While I am giving a brief overview of the debate within the JavaScript community concerning the perceived merits and drawbacks of introducing types to the language, the main focus of the presentation will be an aspect I've dubbed "ecological", whose main concern is viability and stability of rich distributed ecosystems of reusable components.

Transcript

1. REACT AND TYPE SYSTEMS Jiří Tobíšek, Wix.com
2. What? Types? This is JavaScript!
3. var a = [1,2,3]; _.map(a, x => 2 * x);
4. var a = [1,2,3]; _.map(a, x => 2 * x); // [2, 4, 6]
5. var a = { a: 1, b: 2, c: 3 } _.map(a, x => 2 * x);
6. var a = { a: 1, b: 2, c: 3 }; _.map(a, x => 2 * x); // [2, 4, 6]
7. var a = null; _.map(a, x => 2 * x);
8. var a = null; _.map(a, x => 2 * x); // []
9. var a = 666; _.map(a, x => 2 * x);
10. var a = 666; _.map(a, x => 2 * x); // []
11. var a = "Weakly typed..."; _.map(a, x => 2 * x);
12. var a = "Weakly typed..."; _.map(a, x => 2 * x); // [NaN, NaN, NaN, NaN, NaN, NaN, 0, NaN, NaN, NaN, NaN, NaN, NaN, NaN, NaN]
13. JavaScript does have types. Boolean Number String Object Null Undefined It doesn’t have a type system.
14. Introduction of more complex type systems to JavaScript Heated Debate
15. Douglas Crockford: "Sweetness, but at a price. It is not a price I am willing to pay."
16. Types as a Language of Contracts
17. Design By Contract Bertrand Meyer Eiffel Programming Language
18. Contract An agreement between the supplier and the client of a piece of code (component, API call, class, function).
19. JavaScript’s ecosystem driven by small, reusable & composable modules
20. JavaScript’s ecosystem Your code is a patchwork of other people’s code
21. JavaScript’s ecosystem Glued together by contracts. It is important to detect broken contracts.
22. Reusable React Component Case Study
23. Reusable React Component DancingMonkey.jsx
24. var DancingMonkey = React.createClass({ getInitialState() { return { tempo: this.props.initialTempo; }; } render() { return ( <svg:animated-monkey> <svg:paw speed={this.state.tempo}/> </svg:animated-monkey> ); } });
25. DancingMonkey.jsx: The Contract Natural Language “To enjoy the core feature of our DancingMonkey component, render it, while specifying its initial tempo as number of bps…” ReactDOM.render(<DancingMonkey initialTempo={200} />, container);
26. Meanwhile…
27. Meanwhile… DancingMonkey 2.0 has been released! …with breaking changes.
28. var DancingMonkey = React.createClass({ tempos: { "allegretto": 120, "prestissimo": 200 } getInitialState() { var initialTempo = this.props.initialTempo; return { tempo: this.tempos[initialTempo] }; } ... });
30. DancingMonkey.jsx: The Contract Getting Defensive…
31. var DancingMonkey = React.createClass({ … getInitialState() { var initialTempo = this.props.initialTempo; if(!typeof initialTempo === "string") { throw new Error("Must be a string!"); } return { tempo: this.tempos[initialTempo] }; } … });
32. DancingMonkey.jsx: The Contract Type Guards ‣ bound to a scope ‣ in dev-mode ‣ invariants
33. function mergeIntoWithNoDuplicateKeys(one, two) { invariant( one && two && typeof one === 'object' && typeof two === ‘object', 'mergeIntoWithNoDuplicateKeys(): Cannot merge…’ ); for (var key in two) { ...
34. DancingMonkey.jsx: The Contract React’s PropTypes var DancingMonkey = React.createClass({ propTypes: { "initialTempo": React.PropTypes.string }, ... });
35. DancingMonkey.jsx: The Contract React’s PropTypes var DancingMonkey = React.createClass({ propTypes: { "initialTempo": React.PropTypes.string.isRequired }, ... });
36. DancingMonkey.jsx: The Contract React’s PropTypes var DancingMonkey = React.createClass({ propTypes: { "initialTempo": React.PropTypes.oneOf([ "allegretto", ”prestissimo” ]) }
37. DancingMonkey.jsx: The Contract React’s PropTypes React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.oneOf([ "allegretto", “prestissimo" ]), myCustomPropValidator ])
38. DancingMonkey.jsx: The Contract React’s PropTypes Simple and flexible Runtime only
39. DancingMonkey.jsx: The Contract Static (Compile-Time) Analysis var message: string = "Not a rocket science."
40. DancingMonkey.jsx: The Contract Static (Compile-Time) Analysis var message: string = "Not a rocket science." var count: number = message;
41. DancingMonkey.jsx: The Contract Static (Compile-Time) Analysis var message = "Not a rocket science." var count: number = message;
42. TypeScript Complete language and toolset ‣ transpiler ‣ type checker ‣ code intelligence (“Language Services”) https://github.com/Microsoft/TypeScript
43. TypeScript Anders Hejlsberg a core contributor!
44. ‣ superset of JavaScript ‣ no runtime ‣ emits clean JavaScript TypeScript
45. ‣ ECMAScript 6 ‣ transient type annotations TypeScript
46. function tempoNameToBpm(name: string): number { var tempo: number = tempos[name]; if(tempo === undefined) { return 120; } else { return tempo; } }
47. function tempoNameToBpm(name: string): number { var tempo: number = tempos[name]; if(tempo === undefined) { return 120; } else { return tempo; } }
48. function tempoNameToBpm(name) { var tempo = tempos[name]; if(tempo === undefined) { return 120; } else { return tempo; } }
49. Rich type system: ‣ classes & interfaces ‣ enums ‣ union & intersection types ‣ generics TypeScript
50. var DancingMonkey = React.createClass({ ... });
51. /// <ref path=“../../typings/react/react.d.ts"> class DancingMonkey extends React.Component<Props, State> { ... }
52. function createFactory<P>( type: string ): DOMFactory<P>; function createFactory<P>( type: ClassicComponentClass<P> ): ClassicFactory<P>; function createElement<P>( type: string, props?: P, ...children: ReactNode[] ): DOMElement<P>;
53. interface Props { initialTempo?: string; } interface State { tempo: number; }
54. type Tempo = 'allegretto' | 'prestissimo'; interface Props { initialTempo?: Tempo }
55. function render() { return <DancingMonkey initialTempo="allegretto" /> }
56. function render() { return <DancingMonkey initialTempo={120} /> } Type 'number' is not assignable to type '"allegretto" | "prestissimo"'.
57. Flow ‣ Developed by Facebook ‣ Syntax compatible with TypeScript https://github.com/facebook/flow
58. // @flow interface Props { initialTempo: 'allegretto' | 'prestissimo' } interface State { tempo: number; } class DancingMonkey extends React.Component<Props, Props, State> { static defaultProps: Props = { initialTempo: 'allegretto' }; state: State; ... }
59. // @flow interface Props { initialTempo: 'allegretto' | 'prestissimo' } interface State { tempo: number; } class DancingMonkey extends React.Component<Props, Props, State> { static defaultProps: Props = { initialTempo: 'allegretto' }; state: State; ... }
60. Flow ‣ No built-in transpiler ‣ Sophisticated code analysis https://github.com/facebook/flow
61. type Tempo = 'allegretto' | 'prestissimo'; interface Props { initialTempo?: Tempo } class DancingMonkey extends React.Component<Props, State> { getInitialState(): State { var initialTempo = this.props.initialTempo; return { tempo: this.tempos[initialTempo] }; } });
62. Flow ‣ No built-in transpiler ‣ Sophisticated code analysis https://github.com/facebook/flow
63. So what’s the difference? TypeScript vs Flow TypeScript: Annotating dynamic language Flow: Uncovering implicit types
64. So what’s the difference? TypeScript vs Flow Flow: Baked-in support for React
65. So what’s the difference? TypeScript vs Flow TypeScript: implemented in TypeScript! Flow: implemented in OCaml :-(
66. So, Should I Employ A Type System?
67. var DancingMonkey = React.createClass({ getInitialState() { var initialTempo = this.props.initialTempo; return { tempo: this.tempos[initialTempo] }; } ... });
68. type Tempo = 'allegretto' | 'prestissimo'; interface Props { initialTempo?: Tempo } class DancingMonkey extends React.Component<Props, State> { getInitialState(): State { var initialTempo = this.props.initialTempo; return { tempo: this.tempos[initialTempo] }; } });
69. So, Should I Employ A Type System? Is your codebase large & complex?
70. So, Should I Employ A Type System? Are you are creating a living part of a larger ecosystem?
71. So, Should I Employ A Type System? Local expressiveness vs Collective viability
72. Thank You! Jiří Tobíšek jiri@wix.com @yeri_0 speakerdeck.com/tobisek/react-and-type-systems