React and TypeScript

A small talk my colleague Joppe (http://apestaartje.info/) and I gave at a development clinic for my colleagues at Zicht Online.

It explains a bit about TypeScript and React.

Transcript

1. TypeScript React* * until there’s a newer JS framework
3. ES6 ▪ EcmaScript 6 ▪ EcmaScript: standard behind JavaScript
4. ES 2015, ES 2016, … Let’s call it JavaScript.
5. Transpiling ▪ ES5 works in all modern browsers ▪ Previously Babel, now TypeScript ◦ Backed by big organisation and community ◦ Cleaner code ◦ Typed programming ▪ All JavaScript = valid TypeScript
6. SystemJS Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS.
7. Zzzz ….
8. In short SystemJS makes import statements work.
9. Thou shalt configure Otherwise ...
10. Loading modules import Backbone from 'backbone'; Works when: ▪ TypeScript compiler knows what Backbone is ▪ SystemJS knows what Backbone is
11. Loading modules ▪ Loading modules in ES5 requires <script> tags ▪ TypeScript compiles to your preferred loader format ◦ AMD ◦ UMD ◦ CommonJS ◦ SystemJS ▪ SystemJS is built on top of a polyfill of ES Loader API
12. Transpiled result ▪ Own code is imported with a relative path ▪ Vendor code is imported with a name
13. SystemJS configuration ▪ system.conf.js ▪ defaultJSExtensions can be used to rewrite paths ▪ Globals like Backbone should be configured
14. Uglify We’re using Uglify to load globals separately, e.g. code splitting.
15. What is TypeScript? An open-source language on top of JavaScript with lots of improvements.
16. Type inference const x = 4; // x must be of type `number`
17. Static type checking const x = 4; const y = “melp”; const add = x + y; // won’t compile
18. Interfaces interface Hodor { says:string; } function printWhat(hodor:Hodor) { console.log(hodor.says); }
19. Extra data types Enums: enum Direction { Up, Down, Left, Right } const x = Direction.Up;
20. Extra data types Tuples: type Data:[string, number]; const x:Data = [‘hodor’, 666]; Type Data2:[string, number]; const y:Data2 = [666, ‘hodor’]; // won’t compile
21. What is React? A JavaScript library ▪ Created by Facebook ▪ Used by Netflix, Instagram, Dropbox ...
22. Virtual DOM Only update what’s actually changed.
23. Component based Build UI’s made of tiny reusable parts.
24. Controlled dataflow Components can only affect their children.
25. Isomorphic rendering Render HTML on both the server and client.
26. Stateless components Components without a class. const Button = (props) => { return ( <button type={props.type}>{props.children}</button> ) } export { Button }
27. Functional Renders the same HTML given the same properties. ▪ Predictable ▪ Testable
28. Separation Separates behaviour and UI. ▪ State can be managed by other parts of the app, like a component or Flux/Redux. ▪ It’s easy to build UI libraries.
29. CSS in JS One file that contains HTML, JS and CSS.
30. cxs import cxsAtomic from 'cxs' const styles = { padding: 16, color: 'tomato', ':hover': { color: 'orangered' }, '@media (min-width: 40em)': { padding: 32 } } cxsAtomic(styles) // p-16 c-tomato -hover-c-orangered _zsp35u
31. Cool stuff ▪ React Native Mobile apps ▪ React + ElectronJS Desktop apps like Slack ▪ Rebass UI Component Library
32. React reading ▪ https://github.com/timarney/react-faq A collection of links to help answer your questions about React ▪ https://reactforbeginners.com/ Online video course ▪ https://github.com/enaqx/awesome-react A collection of awesome things regarding React ecosystem
33. TypeScript reading ▪ https://www.typescript-weekly.com/ Weekly newsletter with TypeScript links ▪ https://github.com/dzharii/awesome-typescr ipt A collection of awesome TypeScript resources for client-side and server-side development