Tweet
Tweet

Slide 1

Slide 1 text

TypeScript React* * until there’s a newer JS framework

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

ES6 ■ EcmaScript 6 ■ EcmaScript: standard behind JavaScript

Slide 4

Slide 4 text

ES 2015, ES 2016, … Let’s call it JavaScript.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

SystemJS Universal dynamic module loader - loads ES6 modules, AMD, CommonJS and global scripts in the browser and NodeJS.

Slide 7

Slide 7 text

Zzzz ….

Slide 8

Slide 8 text

In short SystemJS makes import statements work.

Slide 9

Slide 9 text

Thou shalt configure Otherwise ...

Slide 10

Slide 10 text

Loading modules import Backbone from 'backbone'; Works when: ■ TypeScript compiler knows what Backbone is ■ SystemJS knows what Backbone is

Slide 11

Slide 11 text

Loading modules ■ Loading modules in ES5 requires tags ■ TypeScript compiles to your preferred loader format ○ AMD ○ UMD ○ CommonJS ○ SystemJS ■ SystemJS is built on top of a polyfill of ES Loader API

Slide 12

Slide 12 text

Transpiled result ■ Own code is imported with a relative path ■ Vendor code is imported with a name

Slide 13

Slide 13 text

SystemJS configuration ■ system.conf.js ■ defaultJSExtensions can be used to rewrite paths ■ Globals like Backbone should be configured

Slide 14

Slide 14 text

Uglify We’re using Uglify to load globals separately, e.g. code splitting.

Slide 15

Slide 15 text

What is TypeScript? An open-source language on top of JavaScript with lots of improvements.

Slide 16

Slide 16 text

Type inference const x = 4; // x must be of type `number`

Slide 17

Slide 17 text

Static type checking const x = 4; const y = “melp”; const add = x + y; // won’t compile

Slide 18

Slide 18 text

Interfaces interface Hodor { says:string; } function printWhat(hodor:Hodor) { console.log(hodor.says); }

Slide 19

Slide 19 text

Extra data types Enums: enum Direction { Up, Down, Left, Right } const x = Direction.Up;

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

What is React? A JavaScript library ■ Created by Facebook ■ Used by Netflix, Instagram, Dropbox ...

Slide 22

Slide 22 text

Virtual DOM Only update what’s actually changed.

Slide 23

Slide 23 text

Component based Build UI’s made of tiny reusable parts.

Slide 24

Slide 24 text

Controlled dataflow Components can only affect their children.

Slide 25

Slide 25 text

Isomorphic rendering Render HTML on both the server and client.

Slide 26

Slide 26 text

Stateless components Components without a class. const Button = (props) => { return ( {props.children} ) } export { Button }

Slide 27

Slide 27 text

Functional Renders the same HTML given the same properties. ■ Predictable ■ Testable

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

CSS in JS One file that contains HTML, JS and CSS.

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Cool stuff ■ React Native Mobile apps ■ React + ElectronJS Desktop apps like Slack ■ Rebass UI Component Library

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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