Frontend London - Technical terms I didn’t understand, then decided to find out.

Sometimes I got a bit lost when reading things online … people would drop certain technical terms in conversations and I would have little idea what they meant … I, with my colleagues collected these terms. And we came up with this list.

Transcript

2. TECHNICAL TERMS I DID NOT UNDERSTAND THEN DECIDED TO FIND OUT ▶ PUSH START Nikhil Verma - MagicLab
3. NIKHIL VERMA Title : Core Team Lead Company : MagicLab Twitter : @NikhilVerma
6. cardinality control flow metaprogramming algebraic subtyping call tree constraint solver dependency injection dynamic scoping generics
7. Today we’ll talk about • inversion of control • type soundness • leaky abstractions 7
8. inversion of control
9. 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);
10. 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
11. example of inversion of control callbacks! 11
12. callbacks /* 1 */ getUser(user => { /* 3 */ alert(user.name); }); function getUser(callback) { /* 2 */ fetch('/user') .then(data => data.json()) .then(callback); } 12
13. example of inversion of control dependency injection 13
14. no dependency injected import api from './api'; export class Session { loginUser() { api.loginUser().then(this.doSomething); } } 14
15. dependency injection export class Session { constructor(api) { super(); this.api = api; } loginUser() { this.api.loginUser().then(this.doSomething); } } 15
16. 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
17. example of inversion of control React Component 17
18. no dependency injected import BackButton from './BackButton'; function NavigationBar({ hasBack }) { return ( <div> { hasBack ? <BackButton /> : null } {/* rest of the implementation */} </div> ); } //////////////////////////////// <NavigationBar hasBack={true} /> 18
19. dependency injected function NavigationBar({ leftSlot }) { return ( <div> { leftSlot ? leftSlot : null } {/* rest of the implementation */} </div> ); } //////////////////////////////// import BackButton from './BackButton'; <NavigationBar leftSlot={<BackButton />} /> 19
20. dependency injected import BackButton from ‘./BackButton'; <NavigationBar leftSlot={<BackButton />} /> 20
21. dependency injected import CloseButton from ‘./CloseButton'; <NavigationBar leftSlot={<CloseButton />} /> 21
22. dependency injected import TestButton from ‘./TestButton'; <NavigationBar leftSlot={<TestButton />} /> 22
23. So what does it mean for you? Inversion of control techniques can make your code: • Modular • Testable • Reusable • Flexible 23
24. type soundness
25. What is type soundness ? Type soundness is the guarantee of a language that “any given type will always be the same at runtime” 25
26. TypeScript - not sound function addInteger(arr: Array<string|number>): Array<string|number> { return arr.concat(3); } const strings: Array<string> = ['foo', 'bar']; // TS will allow this addInteger(strings); TS Playground 26
27. 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
28. Why would any typed language want to be unsound? 28
29. Soundness isn’t always the end-goal https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals 29
30. Soundness vs Unsoundness 30
31. Soundness vs Completeness 31
32. 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
33. leaky abstractions
34. LEAKY ABSTRACTION When you are exposed to the implementation details of an abstraction: “you can see through the facade” 34
35. Your computer
39. Adding numbers
40. // 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
41. 41 console.log(0.1 + 0.2); // 0.30000000000000004
42. 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
43. 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
44. 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
45. Talk Over @NikhilVerma