TECHNICAL TERMS
I DID NOT UNDERSTAND
THEN DECIDED TO FIND OUT
▶ PUSH START
Nikhil Verma - MagicLab
Slide 3
Slide 3 text
NIKHIL VERMA
Title : Core Team Lead
Company : MagicLab
Twitter : @NikhilVerma
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
cardinality
control flow
metaprogramming
algebraic subtyping
call tree
constraint solver
dependency injection
dynamic scoping
generics
Slide 7
Slide 7 text
Today we’ll talk about
• inversion of control
• type soundness
• leaky abstractions
7
Slide 8
Slide 8 text
inversion of control
Slide 9
Slide 9 text
Control flow
Order in which individual statements, instructions
or function calls of a program are executed.
https://en.wikipedia.org/wiki/Control_flow
9
/* 1 */ const name = 'Nikhil';
/* 2 */ const split = name.split('');
/* 3 */ const eman = split.reverse().join('');
/* 4 */ alert(name);
Slide 10
Slide 10 text
inversion of control
normal control flow - “I’ll execute before you”
inversion of control - “I’ll execute after you”
https://en.wikipedia.org/wiki/Inversion_of_control
10
dependency injection
// Easier to mock API
import mockApi from './mockApi';
const session = new Session(mockApi);
session.loginUser();
// Easier to reuse
import myCustomAPI from './myCustomAPI';
const session = new Session(myCustomAPI);
session.loginUser();
16
Slide 17
Slide 17 text
example of inversion of control
React Component
17
Slide 18
Slide 18 text
no dependency injected
import BackButton from './BackButton';
function NavigationBar({ hasBack }) {
return (
{ hasBack ? : null }
{/* rest of the implementation */}
);
}
////////////////////////////////
18
Slide 19
Slide 19 text
dependency injected
function NavigationBar({ leftSlot }) {
return (
{ leftSlot ? leftSlot : null }
{/* rest of the implementation */}
);
}
////////////////////////////////
import BackButton from './BackButton';
} />
19
Slide 20
Slide 20 text
dependency injected
import BackButton from ‘./BackButton';
} />
20
Slide 21
Slide 21 text
dependency injected
import CloseButton from ‘./CloseButton';
} />
21
Slide 22
Slide 22 text
dependency injected
import TestButton from ‘./TestButton';
} />
22
Slide 23
Slide 23 text
So what does it mean for you?
Inversion of control techniques can make your
code:
• Modular
• Testable
• Reusable
• Flexible
23
Slide 24
Slide 24 text
type soundness
Slide 25
Slide 25 text
What is type soundness ?
Type soundness is the guarantee of a language
that “any given type will always be the same at
runtime”
25
Slide 26
Slide 26 text
TypeScript - not sound
function addInteger(arr: Array):
Array {
return arr.concat(3);
}
const strings: Array = ['foo', 'bar'];
// TS will allow this
addInteger(strings);
TS Playground
26
Slide 27
Slide 27 text
Reason - sound
let addInteger =
(arr) => Array.append(arr, [| 4 |]);
let strings: array(string) = [| "foo", "bar" |];
/* Reason won't allow this */
addInteger(strings);
ReasonML Playground
27
Slide 28
Slide 28 text
Why would any typed
language want to be
unsound?
28
Slide 29
Slide 29 text
Soundness isn’t always the end-goal
https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals
29
Slide 30
Slide 30 text
Soundness vs Unsoundness
30
Slide 31
Slide 31 text
Soundness vs Completeness
31
Slide 32
Slide 32 text
https://en.wikipedia.org/wiki/Soundness
https://en.wikipedia.org/wiki/Completeness_(logic)
https://news.ycombinator.com/item?id=16780068 32
Soundness Completeness
“Any code that can be typed is
valid”
“Any code that is valid can be
typed”
Rigidity Flexibility
If the code compiles it will not
fail at runtime
If the code compiles it can fail
at runtime
Slide 33
Slide 33 text
leaky abstractions
Slide 34
Slide 34 text
LEAKY ABSTRACTION
When you are exposed to the implementation
details of an abstraction: “you can see through
the facade”
34
Slide 35
Slide 35 text
Your computer
Slide 36
Slide 36 text
36
Slide 37
Slide 37 text
37
Slide 38
Slide 38 text
38
Slide 39
Slide 39 text
Adding numbers
Slide 40
Slide 40 text
// this is true
0.1 + 0.1 === 0.2;
// this is false
0.1 + 0.2 === 0.3;
console.log(0.1 + 0.2);
// 0.30000000000000004
40
https://twitter.com/ireaderinokun/status/1207396643978534913
Slide 41
Slide 41 text
41
console.log(0.1 + 0.2);
// 0.30000000000000004
Slide 42
Slide 42 text
What I learnt
INVERSION OF CONTROL
"reverse the order of execution”
TYPE SOUNDNESS
“a type will remain the same at runtime”
LEAKY ABSTRACTIONS
“see through the facade”
42
Slide 43
Slide 43 text
How DID I LEARN
1. Started with Wikipedia
2. Googled for articles or blog posts
3. Find out experts in the field and read about
what they say
4. Searched Twitter/Hacker News for those terms
and followed the discussion thread
5. Rinse and Repeat
43
Slide 44
Slide 44 text
BONUS!!!
https://twitter.com/Lady_Ada_King/status/1222487025531703296
const items = { a: 1, b: 2, c: 3 };
loop1: for (const i in items) {
for (const j in items) {
if (j === "b") {
continue loop1;
}
console.log(i, j);
}
}
44