├── README.md ├── demos ├── dataNormalization.js ├── memoization.js ├── tree.js └── tree.test.js ├── index.html ├── main.js ├── package-lock.json ├── package.json └── talk ├── Provider.js ├── assets ├── graph-1.jpg ├── tree-1.jpg └── what-if-i-told-you.jpg ├── constants.js ├── deck.mdx ├── layouts └── BigCenter.js └── theme.js /README.md: -------------------------------------------------------------------------------- 1 | # Learning Backwards 2 | ## Learning Computer Science Through the Lens of React 3 | 4 | As someone without a degree in computer science and had to learn some of its concepts through an education of hard knocks and failed interviews, I thought it would be interesting to talk about the intersection of React concepts and computer science concepts. 5 | 6 | I have focused on a few topics for this talk, though you could easily go further with each one or find other intersections altogether. They are: 7 | 8 | * Big O Notation 9 | * Data Normalization 10 | * Memoization 11 | * Trees 12 | 13 | Hope you enjoy the talk and the rest of [Byteconf](https://byteconf.com/) 14 | 15 | -------------------------------------------------------------------------------- /demos/dataNormalization.js: -------------------------------------------------------------------------------- 1 | const normalizeByID = arr => 2 | arr.reduce((acc, cur) => { 3 | acc[cur.id] = cur 4 | return acc 5 | }, {}) 6 | 7 | const beings = [ 8 | { id: 1, name: 'Kyle' }, 9 | { id: 2, name: 'Anna' }, 10 | { id: 3, name: 'Krios' }, 11 | { id: 4, name: 'Tali' } 12 | ] 13 | 14 | const beingsByID = normalizeByID(beings) 15 | 16 | console.log(beingsByID) 17 | -------------------------------------------------------------------------------- /demos/memoization.js: -------------------------------------------------------------------------------- 1 | const memoize = fn => { 2 | const cache = {} 3 | 4 | return (...args) => { 5 | const stringifiedArgs = args.join('') 6 | 7 | if (cache[stringifiedArgs]) { 8 | console.log('From cache: ', cache[stringifiedArgs]) 9 | return cache[stringifiedArgs] 10 | } 11 | 12 | const result = fn(...args) 13 | cache[stringifiedArgs] = result 14 | 15 | console.log(result) 16 | console.log(cache) 17 | return result 18 | } 19 | } 20 | 21 | const add = (x, y) => x + y 22 | const memoAdd = memoize(add) 23 | 24 | memoAdd(1, 2) // 3 25 | memoAdd(2, 1) // 3 26 | memoAdd(1, 2) // From cache: 3 27 | -------------------------------------------------------------------------------- /demos/tree.js: -------------------------------------------------------------------------------- 1 | class Node { 2 | constructor(value) { 3 | this.value = value 4 | this.children = [] 5 | } 6 | 7 | addChild(value) { 8 | const node = new Node(value) 9 | this.children.push(node) 10 | return node 11 | } 12 | 13 | removeChild(index) { 14 | this.children.splice(index, 1) 15 | } 16 | } 17 | 18 | class Tree { 19 | constructor(value) { 20 | this.root = new Node(value) 21 | } 22 | } 23 | 24 | const areIdenticalNodes = (node1, node2) => { 25 | if ( 26 | node1.value !== node2.value || 27 | node1.children.length !== node2.children.length 28 | ) { 29 | return false 30 | } 31 | 32 | return node1.children.every((child, index) => 33 | areIdenticalNodes(child, node2.children[index]) 34 | ) 35 | } 36 | 37 | module.exports = { 38 | areIdenticalNodes, 39 | Node, 40 | Tree 41 | } 42 | -------------------------------------------------------------------------------- /demos/tree.test.js: -------------------------------------------------------------------------------- 1 | const { areIdenticalNodes, Node, Tree } = require('./tree') 2 | 3 | describe('Tree', () => { 4 | it('new Tree', () => { 5 | const tree = new Tree('foo') 6 | 7 | expect(tree.root.value).toEqual('foo') 8 | expect(tree.root.children.length).toEqual(0) 9 | }) 10 | }) 11 | 12 | describe('Node', () => { 13 | it('new node', () => { 14 | const node = new Node('foo') 15 | 16 | expect(node.value).toEqual('foo') 17 | expect(node.children.length).toEqual(0) 18 | }) 19 | 20 | it('addChild', () => { 21 | const node = new Node('foo') 22 | const child = node.addChild('bar') 23 | 24 | expect(node.children.length).toEqual(1) 25 | expect(node.children[0].value).toEqual('bar') 26 | }) 27 | 28 | it('removeChild', () => { 29 | const node = new Node('foo') 30 | const child = node.addChild('bar') 31 | node.removeChild(0) 32 | 33 | expect(node.children.length).toEqual(0) 34 | }) 35 | }) 36 | 37 | describe('areIdenticalNodes', () => { 38 | it('same value, no children', () => { 39 | const t1 = new Tree('foo') 40 | const t2 = new Tree('foo') 41 | 42 | expect(areIdenticalNodes(t1.root, t2.root)).toEqual(true) 43 | }) 44 | 45 | it('same value, same children', () => { 46 | const t1 = new Tree('foo') 47 | const t2 = new Tree('foo') 48 | 49 | t1.root.addChild('bar') 50 | t2.root.addChild('bar') 51 | 52 | expect(areIdenticalNodes(t1.root, t2.root)).toEqual(true) 53 | }) 54 | 55 | it('same value, same children length, diff children', () => { 56 | const t1 = new Tree('foo') 57 | const t2 = new Tree('foo') 58 | 59 | t1.root.addChild('bar') 60 | t2.root.addChild('baz') 61 | 62 | expect(areIdenticalNodes(t1.root, t2.root)).toEqual(false) 63 | }) 64 | 65 | it('same value, diff children length', () => { 66 | const t1 = new Tree('foo') 67 | const t2 = new Tree('foo') 68 | 69 | t1.root.addChild('bar') 70 | t1.root.addChild('baz') 71 | t2.root.addChild('bar') 72 | 73 | expect(areIdenticalNodes(t1.root, t2.root)).toEqual(false) 74 | }) 75 | 76 | it('grandchild level', () => { 77 | const t1 = new Tree('foo') 78 | const t2 = new Tree('foo') 79 | 80 | const c1 = t1.root.addChild('bar') 81 | const c2 = t2.root.addChild('bar') 82 | 83 | c1.addChild('baz') 84 | c2.addChild('baz') 85 | 86 | expect(areIdenticalNodes(t1.root, t2.root)).toEqual(true) 87 | }) 88 | }) 89 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Learning Backwards: Learning Computer Science Through the Lens of React 41 | 42 | 43 |

Learning Backwards

Learning Computer Science Through the Lens of React

About Me

Do I Need to Learn Computer Science?

¯\_(ツ)_/¯

Story Time

Indulge me in a brief anecdote, please.

Probably At Some Point

Learning some computer science won't hurt your career. It augments your day-to-day working knowledge.

It also can help you pass technical interviews more often.

Hopefully, better jobs => better life.

Big O Notation

How Bad Can My Code Be?

What is Big O Notation?

"Big O Notation" is a standard way of describing the worst-case performance of an algorithm in regards to time and/or space.

Ok... But What's An Algorithm?

Good question!

An algorithm is a procedure for solving a problem. That's it. Nothing scary. It's a step-by-step way of going from start to finish.

O(1)

const foo = () => 'foo'
 44 | 
 45 | const first = arr => arr[0]
 46 | 
 47 | const prop = (key, obj) => obj[key]
 48 |

O(N)

const arr = [1, 2, 3, 4, 5]
 49 | 
 50 | arr.forEach()
 51 | arr.map()
 52 | arr.find()
 53 | arr.reduce()
 54 |

O(N^2)

const arr = [1, 2, 3, 4, 5]
 55 | 
 56 | const twoDArray = arr.map(n => arr.map(m => m * n))
 57 | console.log(twoDArray)
 58 | // [[1, 2, 3, 4, 5],
 59 | //  [2, 4, 6, 8, 10],
 60 | //  [3, 6, 9, 12, 15],
 61 | //  [4, 8, 12, 16, 20],
 62 | //  [5, 10, 15, 20, 25]]
 63 |

O(2^N)

const fib = n => {
 64 |   if (n < 2) {
 65 |     return 1
 66 |   }
 67 | 
 68 |   return fib(n - 1) + fib(n - 2)
 69 | }
 70 |

O(log N)

const binarySearch = (value, tree) => {
 71 |   const { left, right, value: rootValue } = tree.root
 72 | 
 73 |   return value === rootValue
 74 |     ? root
 75 |     : value < rootValue
 76 |       ? binarySearch(value, left)
 77 |       : binarySearch(value, right)
 78 | }
 79 |

Tips to Remember

  • Drop Coefficients
  • Look for the Loops
  • Divide and Conquer When Possible

How Does This Impact React Apps

  • Don't worry about needing to map/filter/reduce a few times (unless N is very big)
  • Don't block the thread with big calculations, handle asynchronously
  • Use the right data structure for the job

Data Normalization

Or the Art of Making Tradeoffs

Knowing What We Know...

We now recognize that certain data structures might be better suited for a task than others. One typical problem are finds on lists. How can we overcome this?

By Turning Our Arrays Into Objects!!!

// Create a normalizing function for IDs
 80 | 
 81 | const normalizeByID = arr => arr.reduce((acc, cur) => {
 82 |   acc[cur.id] = cur
 83 |   return acc
 84 | }, {})
 85 |

Live Coding Time!!!

Kinda. Live for me. Taped for you.

const list = [
 86 |   { id: 1, name: 'Kyle' },
 87 |   { id: 2, name: 'Anna' },
 88 |   { id: 3, name: 'Krios' },
 89 |   { id: 4, name: 'Tali' }
 90 | ]
 91 | 
 92 | console.log(normalizeByID(list))
 93 | // {
 94 | //   '1': { id: 1, name: 'Kyle' },
 95 | //   '2': { id: 2, name: 'Anna' },
 96 | //   '3': { id: 3, name: 'Krios' },
 97 | //   '4': { id: 4, name: 'Tali' }
 98 | // }
 99 |

What Did We Do?

We traded space for time.

We changed finding an item by ID from of O(n) to O(1).

How I Stumbled Upon Normalizing Redux State

Memoization

No, That's Not a Typo

What is memoization?

Memoization is the use of a cache within a function to store previously calculated results for retrieval. We trade space for the time cost of recalculating the result again.

const memo = fn => {
100 |   const cache = {}
101 | 
102 |   return (...args) => {
103 |     const stringifiedArgs = args.join('')
104 | 
105 |     if (cache[stringifiedArgs]) {
106 |       return cache[stringifiedArgs]
107 |     }
108 | 
109 |     const result = fn(...args)
110 |     cache[stringifiedArgs] = result
111 |     return result
112 |   }
113 | }
114 |

How does this work?

  • memo accepts a function as an argument
  • Returns a new function accepting any number of arguments
  • Stringifies those arguments to use as a key for the cache
  • If the result is in the cache, return it, otherwise calculate it
  • Cache the result and return it

Live Coding Time!!!

Kinda. Live for me. Taped for you.

How Might We Use This In React?

  • Reselect uses memoization for faster state updates
  • Any pure function can be memoized, including SFCs
  • Complex states can be extracted from components and put into memoized reducers

Trees

The bane of JS interviews and why React works so damn well

What is a tree?

A tree is a graph data structure comprised of nodes with any number of children and no cycles.

Umm... what's a graph? And what's a cycle?

A graph is a data structure made up of nodes with "edges" between them. A cycle is when several nodes all point to one another.

A tree only has parent and child nodes, with no child nodes pointing to other child nodes.

The DOM and VDOM are Trees!!!

Every website* in the world is a tree data structure

*I haven't visited them all, so don't quote me on this 😝
<html>
115 |   <head>
116 |     <title>Learning Backwards</title>
117 |   </head>
118 |   <body>
119 |     <p>Ain't it <strong>awesome</strong> learning backwards!</p>
120 |   </body>
121 | </html>
122 | 
{
123 |   value: html,
124 |   children: [
125 |     { value: head, children: [
126 |       { value: title, children: ['Learning Backwards'] }
127 |     ]},
128 |     { value: body, children: [
129 |       { value: p, children: [
130 |         "Ain't it ",
131 |         { value: strong, children: ['awesome'] },
132 |         ' learning backwards!'
133 |       ]}
134 |     ]}
135 |   ]
136 | }
137 | 
React.createElement('html', {}, [
138 |   React.createElement('head', {}, [
139 |     React.createElement('title', {}, [
140 |       'Learning Backwards'
141 |     ])
142 |   ]),
143 |   React.createElement('body', {}, [
144 |     React.creactElement('p', {}, [
145 |       "Ain't it ",
146 |       React.createElement('strong', {}, [
147 |         'awesome'
148 |       ]),
149 |       ' learning backwards!'
150 |     ])
151 |   ])
152 | ])
153 |

Live Coding Time!!!

Kinda. Live for me. Taped for you.

Binary Tree Traversal - In Order

const inOrderTraversal = visit => treeRoot => {
154 |   inOrderTraversal(visit)(treeRoot.left)
155 |   visit(treeRoot)
156 |   inOrderTraversal(visit)(treeRoot.right)
157 | }
158 |

Binary Tree Traversal - Pre Order

const inOrderTraversal = visit => treeRoot => {
159 |   visit(treeRoot)
160 |   inOrderTraversal(visit)(treeRoot.left)
161 |   inOrderTraversal(visit)(treeRoot.right)
162 | }
163 |

Binary Tree Traversal - Post Order

const inOrderTraversal = visit => treeRoot => {
164 |   inOrderTraversal(visit)(treeRoot.left)
165 |   inOrderTraversal(visit)(treeRoot.right)
166 |   visit(treeRoot)
167 | }
168 |

How might this help us in React?

  • Debugging
  • Optimizing Renders
  • Recursive functions for React elements
  • Compound Components

Takeaways!

aka Kyle's pre-conclusion ramblings 😝

Thank You!!!

Byteconf for hosting and you for listening!

@kyleshevlin
169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "learning-backwards", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build:talk": "mdx-deck build ./talk/deck.mdx -d ./", 8 | "talk": "mdx-deck ./talk/deck.mdx", 9 | "test": "jest" 10 | }, 11 | "author": "Kyle Shevlin (http://kyleshevlin.com/)", 12 | "license": "MIT", 13 | "devDependencies": { 14 | "jest": "^23.5.0", 15 | "mdx-deck": "^1.7.0", 16 | "react-edges": "^1.0.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /talk/Provider.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from 'react' 2 | import { COLORS } from './constants' 3 | import Edges from 'react-edges' 4 | 5 | class Provider extends Component { 6 | handleHashChange = index => { 7 | window.location.hash = index 8 | } 9 | 10 | render() { 11 | return ( 12 | ( 15 | 16 | {Array(length) 17 | .fill() 18 | .map((_, i) => ( 19 | { 22 | this.handleHashChange(i) 23 | }} 24 | style={{ 25 | borderRadius: '50%', 26 | backgroundColor: COLORS.white, 27 | cursor: 'pointer', 28 | display: 'inline-block', 29 | width: 10, 30 | height: 10, 31 | margin: 3, 32 | opacity: i <= index ? 0.75 : 0.25 33 | }} 34 | /> 35 | ))} 36 | 37 | )} 38 | bottomRight={() => ( 39 | 43 | 44 | 45 | 49 | 50 | {' '} 51 | @kyleshevlin 52 | 53 | )} 54 | /> 55 | ) 56 | } 57 | } 58 | 59 | export default Provider 60 | -------------------------------------------------------------------------------- /talk/assets/graph-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyleshevlin/learning-backwards/e11bf3116006d3f902f0b0c0d3c1bf139d4fb7dd/talk/assets/graph-1.jpg -------------------------------------------------------------------------------- /talk/assets/tree-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyleshevlin/learning-backwards/e11bf3116006d3f902f0b0c0d3c1bf139d4fb7dd/talk/assets/tree-1.jpg -------------------------------------------------------------------------------- /talk/assets/what-if-i-told-you.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kyleshevlin/learning-backwards/e11bf3116006d3f902f0b0c0d3c1bf139d4fb7dd/talk/assets/what-if-i-told-you.jpg -------------------------------------------------------------------------------- /talk/constants.js: -------------------------------------------------------------------------------- 1 | export const COLORS = { 2 | purple: '#43214F', 3 | pink: '#F94560', 4 | yellow: '#FFCF3F', 5 | white: '#F3FCF0', 6 | black: '#1F271B' 7 | } 8 | -------------------------------------------------------------------------------- /talk/deck.mdx: -------------------------------------------------------------------------------- 1 | export { default as theme } from './theme' 2 | import { Head, Image } from 'mdx-deck' 3 | import { FullScreenCode } from 'mdx-deck/layouts' 4 | import BigCenter from './layouts/bigCenter' 5 | 6 | 7 | Learning Backwards: Learning Computer Science Through the Lens of React 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | # Learning Backwards 17 | ## Learning Computer Science Through the Lens of React 18 | 19 | --- 20 | 21 | ## About Me 22 | 23 | * JavaScript Engineer, currently funemployed 24 | * Host of [Second Career Devs](https://secondcareerdevs.com) podcast 25 | * [egghead.io instructor](https://egghead.io/instructors/kyle-shevlin) 26 | * Occasional [Twitch Streamer](https://www.twitch.tv/kyleshevlin) 27 | 28 | --- 29 | 30 | # Do I Need to Learn Computer Science? 31 | 32 | --- 33 | export default BigCenter 34 | 35 | `¯\\_(ツ)_/¯` 36 | 37 | --- 38 | 39 | # Story Time 40 | 41 | Indulge me in a brief anecdote, please. 42 | 43 | ```notes 44 | Started interviewing at bigger companies and had a rude awakening. I knew how to put divs on a website, but didn't really have any software engineering knowledge. Didn't have any clue about data structures and algorithms. Realized that learning this was going to be important for my growth and career. 45 | ``` 46 | 47 | --- 48 | 49 | ## Probably At Some Point 50 | 51 | Learning some computer science won't hurt your career. It augments your day-to-day working knowledge. 52 | 53 | It also can help you pass technical interviews more often. 54 | 55 | Hopefully, better jobs => better life. 56 | 57 | --- 58 | 59 | # Big O Notation 60 | ## How Bad Can My Code Be? 61 | 62 | --- 63 | 64 | ## What is Big O Notation? 65 | 66 | "Big O Notation" is a standard way of describing the worst-case performance of an algorithm in regards to time and/or space. 67 | 68 | --- 69 | 70 | ## Ok... But What's An Algorithm? 71 | 72 | Good question! 73 | 74 | An algorithm is a procedure for solving a problem. That's it. Nothing scary. It's a step-by-step way of going from start to finish. 75 | 76 | --- 77 | 78 | ## O(1) 79 | 80 | ```javascript 81 | const foo = () => 'foo' 82 | 83 | const first = arr => arr[0] 84 | 85 | const prop = (key, obj) => obj[key] 86 | ``` 87 | 88 | --- 89 | 90 | ## O(N) 91 | 92 | ```javascript 93 | const arr = [1, 2, 3, 4, 5] 94 | 95 | arr.forEach() 96 | arr.map() 97 | arr.find() 98 | arr.reduce() 99 | ``` 100 | 101 | --- 102 | 103 | ## O(N^2) 104 | 105 | ```javascript 106 | const arr = [1, 2, 3, 4, 5] 107 | 108 | const twoDArray = arr.map(n => arr.map(m => m * n)) 109 | console.log(twoDArray) 110 | // [[1, 2, 3, 4, 5], 111 | // [2, 4, 6, 8, 10], 112 | // [3, 6, 9, 12, 15], 113 | // [4, 8, 12, 16, 20], 114 | // [5, 10, 15, 20, 25]] 115 | ``` 116 | 117 | --- 118 | 119 | ## O(2^N) 120 | 121 | ```javascript 122 | const fib = n => { 123 | if (n < 2) { 124 | return 1 125 | } 126 | 127 | return fib(n - 1) + fib(n - 2) 128 | } 129 | 130 | --- 131 | 132 | ## O(log N) 133 | 134 | ```javascript 135 | const binarySearch = (value, tree) => { 136 | const { left, right, value: rootValue } = tree.root 137 | 138 | return value === rootValue 139 | ? root 140 | : value < rootValue 141 | ? binarySearch(value, left) 142 | : binarySearch(value, right) 143 | } 144 | ``` 145 | 146 | --- 147 | 148 | ## Tips to Remember 149 | 150 | * Drop Coefficients 151 | * Look for the Loops 152 | * Divide and Conquer When Possible 153 | 154 | --- 155 | 156 | ## How Does This Impact React Apps 157 | 158 | * Don't worry about needing to map/filter/reduce a few times (unless N is _very_ big) 159 | * Don't block the thread with big calculations, handle asynchronously 160 | * Use the right data structure for the job 161 | 162 | --- 163 | 164 | # Data Normalization 165 | ## Or the Art of Making Tradeoffs 166 | 167 | --- 168 | 169 | ## Knowing What We Know... 170 | 171 | We now recognize that certain data structures might be better suited for a task than others. One typical problem are `find`s on lists. How can we overcome this? 172 | 173 | --- 174 | 175 | ## By Turning Our Arrays Into Objects!!! 176 | 177 | ```javascript 178 | // Create a normalizing function for IDs 179 | 180 | const normalizeByID = arr => arr.reduce((acc, cur) => { 181 | acc[cur.id] = cur 182 | return acc 183 | }, {}) 184 | ``` 185 | 186 | --- 187 | 188 | # Live Coding Time!!! 189 | ## Kinda. Live for me. Taped for you. 190 | 191 | --- 192 | 193 | export default FullScreenCode 194 | 195 | ```javascript 196 | const list = [ 197 | { id: 1, name: 'Kyle' }, 198 | { id: 2, name: 'Anna' }, 199 | { id: 3, name: 'Krios' }, 200 | { id: 4, name: 'Tali' } 201 | ] 202 | 203 | console.log(normalizeByID(list)) 204 | // { 205 | // '1': { id: 1, name: 'Kyle' }, 206 | // '2': { id: 2, name: 'Anna' }, 207 | // '3': { id: 3, name: 'Krios' }, 208 | // '4': { id: 4, name: 'Tali' } 209 | // } 210 | ``` 211 | 212 | --- 213 | 214 | ## What Did We Do? 215 | 216 | We traded space for time. 217 | 218 | We changed finding an item by ID from of O(n) to O(1). 219 | 220 | [How I Stumbled Upon Normalizing Redux State](https://kyleshevlin.com/how-i-stumbled-upon-normalizing-redux-state/) 221 | 222 | --- 223 | 224 | # Memoization 225 | ## No, That's Not a Typo 226 | 227 | --- 228 | 229 | ## What is memoization? 230 | 231 | Memoization is the use of a cache within a function to store previously calculated results for retrieval. We trade space for the time cost of recalculating the result again. 232 | 233 | --- 234 | export default FullScreenCode 235 | 236 | ```javascript 237 | const memo = fn => { 238 | const cache = {} 239 | 240 | return (...args) => { 241 | const stringifiedArgs = args.join('') 242 | 243 | if (cache[stringifiedArgs]) { 244 | return cache[stringifiedArgs] 245 | } 246 | 247 | const result = fn(...args) 248 | cache[stringifiedArgs] = result 249 | return result 250 | } 251 | } 252 | ``` 253 | 254 | --- 255 | 256 | ## How does this work? 257 | 258 | * `memo` accepts a function as an argument 259 | * Returns a new function accepting any number of arguments 260 | * Stringifies those arguments to use as a key for the cache 261 | * If the result is in the cache, return it, otherwise calculate it 262 | * Cache the result and return it 263 | 264 | --- 265 | 266 | # Live Coding Time!!! 267 | ## Kinda. Live for me. Taped for you. 268 | 269 | --- 270 | 271 | ## How Might We Use This In React? 272 | 273 | * `Reselect` uses memoization for faster state updates 274 | * Any pure function can be memoized, including SFCs 275 | * Complex states can be extracted from components and put into memoized reducers 276 | 277 | --- 278 | 279 | # Trees 280 | ## The bane of JS interviews and why React works so damn well 281 | 282 | --- 283 | 284 | ## What is a tree? 285 | 286 | A tree is a graph data structure comprised of nodes with any number of children and no cycles. 287 | 288 | --- 289 | 290 | ## Umm... what's a graph? And what's a cycle? 291 | 292 | A graph is a data structure made up of nodes with "edges" between them. A cycle is when several nodes all point to one another. 293 | 294 | A tree only has parent and child nodes, with no child nodes pointing to other child nodes. 295 | 296 | --- 297 | 298 | export default BigCenter 299 | 300 | ![](https://kyleshevlin.com/wp-content/uploads/2018/08/graph-1.jpg) 301 | 302 | --- 303 | 304 | export default BigCenter 305 | 306 | ![](https://kyleshevlin.com/wp-content/uploads/2018/08/tree-1.jpg) 307 | 308 | --- 309 | 310 | 311 | 312 | --- 313 | 314 | ## The DOM and VDOM are Trees!!! 315 | 316 | Every website* in the world is a tree data structure 317 | 318 | *I haven't visited them all, so don't quote me on this 😝 319 | 320 | --- 321 | 322 | export default FullScreenCode 323 | 324 | ```html 325 | 326 | 327 | Learning Backwards 328 | 329 | 330 |

Ain't it awesome learning backwards!

331 | 332 | 333 | ``` 334 | 335 | --- 336 | 337 | export default FullScreenCode 338 | 339 | ```javascript 340 | { 341 | value: html, 342 | children: [ 343 | { value: head, children: [ 344 | { value: title, children: ['Learning Backwards'] } 345 | ]}, 346 | { value: body, children: [ 347 | { value: p, children: [ 348 | "Ain't it ", 349 | { value: strong, children: ['awesome'] }, 350 | ' learning backwards!' 351 | ]} 352 | ]} 353 | ] 354 | } 355 | ``` 356 | 357 | --- 358 | 359 | export default FullScreenCode 360 | 361 | ```javascript 362 | React.createElement('html', {}, [ 363 | React.createElement('head', {}, [ 364 | React.createElement('title', {}, [ 365 | 'Learning Backwards' 366 | ]) 367 | ]), 368 | React.createElement('body', {}, [ 369 | React.creactElement('p', {}, [ 370 | "Ain't it ", 371 | React.createElement('strong', {}, [ 372 | 'awesome' 373 | ]), 374 | ' learning backwards!' 375 | ]) 376 | ]) 377 | ]) 378 | ``` 379 | 380 | --- 381 | 382 | # Live Coding Time!!! 383 | ## Kinda. Live for me. Taped for you. 384 | 385 | --- 386 | 387 | ## Binary Tree Traversal - In Order 388 | 389 | ```javascript 390 | const inOrderTraversal = visit => treeRoot => { 391 | inOrderTraversal(visit)(treeRoot.left) 392 | visit(treeRoot) 393 | inOrderTraversal(visit)(treeRoot.right) 394 | } 395 | ``` 396 | 397 | --- 398 | 399 | ## Binary Tree Traversal - Pre Order 400 | 401 | ```javascript 402 | const inOrderTraversal = visit => treeRoot => { 403 | visit(treeRoot) 404 | inOrderTraversal(visit)(treeRoot.left) 405 | inOrderTraversal(visit)(treeRoot.right) 406 | } 407 | ``` 408 | 409 | --- 410 | 411 | ## Binary Tree Traversal - Post Order 412 | 413 | ```javascript 414 | const inOrderTraversal = visit => treeRoot => { 415 | inOrderTraversal(visit)(treeRoot.left) 416 | inOrderTraversal(visit)(treeRoot.right) 417 | visit(treeRoot) 418 | } 419 | ``` 420 | 421 | --- 422 | 423 | ## How might this help us in React? 424 | 425 | - Debugging 426 | - Optimizing Renders 427 | - Recursive functions for React elements 428 | - Compound Components 429 | 430 | --- 431 | 432 | # Takeaways! 433 | ## aka Kyle's pre-conclusion ramblings 😝 434 | 435 | --- 436 | 437 | ## Resources 438 | 439 | * [Big O Cheat Sheet](http://bigocheatsheet.com/) 440 | * [Four Semesters of CS in Six Hours](https://btholt.github.io/four-semesters-of-cs/) 441 | * [Four Semesters of CS in Six Hours - Part 2](https://btholt.github.io/four-semesters-of-cs-part-two/) 442 | * [Cracking the Coding Interview](https://www.amazon.com/Cracking-Coding-Interview-Programming-Questions/dp/0984782850) 443 | 444 | --- 445 | 446 | # Thank You!!! 447 | ## Byteconf for hosting and you for listening! 448 | 449 | --- 450 | 451 | # Find me on... 452 | 453 | - [Twitter](https://twitter.com/kyleshevlin) 454 | - [egghead](https://egghead.io/instructors/kyle-shevlin) 455 | - [Twitch](https://www.twitch.tv/kyleshevlin) 456 | - [My Newsletter](https://buttondown.email/kyleshevlin) 457 | - [Github](https://github.com/kyleshevlin) 458 | -------------------------------------------------------------------------------- /talk/layouts/BigCenter.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default ({ children }) => ( 4 |
14 | {children} 15 |
16 | ) 17 | -------------------------------------------------------------------------------- /talk/theme.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { swiss as theme } from 'mdx-deck/themes' 3 | import { COLORS } from './constants' 4 | import Provider from './Provider' 5 | import tomorrow from 'react-syntax-highlighter/styles/prism/tomorrow' 6 | 7 | const h1ShadowDistance = 4 8 | const h2ShadowDistance = 2 9 | 10 | export default { 11 | ...theme, 12 | prism: { 13 | style: tomorrow 14 | }, 15 | colors: { 16 | background: COLORS.purple, 17 | link: COLORS.yellow, 18 | text: COLORS.white 19 | }, 20 | font: 'Open Sans, sans-serif', 21 | weights: [300], 22 | h1: { 23 | fontFamily: 'Bungee', 24 | fontSize: '4.5em', 25 | lineHeight: 1, 26 | color: COLORS.pink, 27 | textShadow: ` 28 | ${h1ShadowDistance}px ${h1ShadowDistance}px ${COLORS.purple}, 29 | ${h1ShadowDistance * 2}px ${h1ShadowDistance * 2}px ${COLORS.yellow} 30 | ` 31 | }, 32 | h2: { 33 | fontFamily: 'Bungee', 34 | fontSize: '2.35em', 35 | lineHeight: 1, 36 | textShadow: ` 37 | ${h2ShadowDistance}px ${h2ShadowDistance}px ${COLORS.purple}, 38 | ${h2ShadowDistance * 2}px ${h2ShadowDistance * 2}px ${COLORS.pink} 39 | ` 40 | }, 41 | Provider 42 | } 43 | --------------------------------------------------------------------------------