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

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.

620ecdb7215ec072617bfd7f75c98760?s=128

Nikhil Verma

January 30, 2020
Tweet

Transcript

  1. None
  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
  4. None
  5. None
  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

  36. 36

  37. 37

  38. 38

  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