JS Developer, You should know it

Transcript

1. @JohnathanSUP JS Developer, You should know it Discovery of a new fashionable framework : Vanilla.js JS 201
2. Johnathan MEUNIER @JohnathanSUP JohnMeunier Software engineer Full Stack JS @AXA www.johnathan.fr - www.lilleweb.fr
5. @JohnathanSUP You should know it Discover new practices Want to do things by yourself Understand how works what you use everyday
7. @JohnathanSUP You should know it Object Array Function #fp Others One more thing
8. @JohnathanSUP {Object}
9. @JohnathanSUP keys const object1 = { a: 'somestring', b: 42, c: false }; console.log(Object.keys(object1)); !// [‘a’, ‘b’, ‘c’]; {Object}
10. @JohnathanSUP values const obj = { a: 'somestring', b: 42, c: false }; console.log(Object.values(obj)); !// [‘something’, 42, false]; {Object}
11. @JohnathanSUP values const percentages = { "BA1" : 5, "BA1A" : 45, "BA3": 20 } const values = Object.values(percentages); totalPercentage = (values) !=> Object.values(values).reduce(_sum, 0); console.log(totalPercentage(percentages)); !// 70 {Object}
12. @JohnathanSUP entries const object1 = { a: 'some', b: 42, c: false }; console.log(Object.entries(object1)); !// [[‘a’, ‘some’], [‘b’, 42], [‘c’, false]]; {Object}
13. @JohnathanSUP [Array]
14. @JohnathanSUP forEach const myArr = [1, 2, 3, 4, 5]; myArr.forEach((val) !=> { console.log(val); !// 1, 2, 3, 4, 5 }); [Array]
15. @JohnathanSUP forEach const fruits = ['apple', 'orange', 'banana', 'raspberry']; fruits.forEach((fruit) !=> { console.log(fruit); !// apple, orange, banana, raspberry }); [Array]
16. @JohnathanSUP forEach const myArr = [1, 2, 3, 4, 5]; const lol = myArr.forEach((val) !=> { console.log(val); return val; }); console.log(lol); !// undefined [Array]
17. @JohnathanSUP map const myArr = [1, 2, 3, 4, 5]; const square = myArr.map(val !=> Math.pow(val, 2)); console.log(square); !// [1, 4, 9, 16, 25]; [Array]
18. @JohnathanSUP filter const myArr = [1, 2, 3, 4, 5]; const square = myArr.filter(val !=> val % 2 !!=== 0); console.log(square); !// [2, 4] [Array]
19. @JohnathanSUP reduce const fruits = ['apple', 'orange', 'banana', 'raspberry']; const salad = fruits.reduce((acc, curr) !=> `${acc} ${curr}`); console.log(salad); !// apple orange banana raspberry [Array]
20. @JohnathanSUP reduce const possibilities = { "cmi": "CMI", "generalContractor": "Contractant général" }; const activityCategory = ['Contractant général']; const transformedValues = Object.keys(possibilities) .reduce((acc, possibility) !=> { acc[possibility] = activityCategory.includes(possibilities[possibility]); return acc; }, {}); console.log(transformedValues); !// {cmi: false, generalContractor: true} [Array]
21. @JohnathanSUP find const objects = [ {"id": "activity1", "desc": "description of my first activity", "type": "main"}, {"id": "activity2", "desc": "description of my second activity", "type": "sub"}, {"id": "activity3", "desc": "description of my third activity", "type": "sub"}, ]; const firstActivityDesc = objects.find(obj !=> obj.id !!=== "activity2").desc; console.log(firstActivityDesc); !//description of my second activity [Array]
22. @JohnathanSUP some const objects = [ {"id": "activity1", "desc": "description of my first activity", "type": "main"}, {"id": "activity2", "desc": "description of my second activity", "type": "sub"}, {"id": "activity3", "desc": "description of my third activity", "type": "sub"}, ]; const isPresent = objects.some(({id}) !=> id !!=== "activity2"); console.log(isPresent); !// true [Array]
23. @JohnathanSUP some const objects = [ {"id": "activity1", "desc": "description of my first activity", "type": "main"}, {"id": "activity2", "desc": "description of my second activity", "type": "sub"}, {"id": "activity3", "desc": "description of my third activity", "type": "sub"}, ]; const isPresent = objects.some(({id}) !=> id !!=== "activity4"); console.log(isPresent); !// false [Array]
24. @JohnathanSUP Sort [Array] const items = [ { name: "Edward", value: 21 }, { name: "Sharpe", value: 37 }, { name: "And", value: 45 }, { name: "The", value: -12 }, { name: "Magnetic", value: 13 }, { name: "Zeros", value: 37 } ]; items.sort((a, b) !=> a.value - b.value ); console.log(items); [ { name: 'The', value: -12 }, { name: 'Magnetic', value: 13 }, { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'Zeros', value: 37 }, { name: 'And', value: 45 } ]
25. @JohnathanSUP Sort [Array] const items = [ { name: "Edward", value: 21 }, { name: "Sharpe", value: 37 }, { name: "And", value: 45 }, { name: "The", value: -12 }, { name: "Magnetic", value: 13 }, { name: "Zeros", value: 37 } ]; items.sort((a, b) !=> a.name.length - b.name.length ); console.log(items); [ { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Zeros', value: 37 }, { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'Magnetic', value: 13 } ]
26. @JohnathanSUP function() #fp
27. @JohnathanSUP • No side effects • Its result depends only on his parameters pure function()
28. @JohnathanSUP pure const addSeven = x !=> x + 7; function()
29. @JohnathanSUP pure const logAddSeven = x !=> { console.log(x + 7); return x + 7; }; function()
30. @JohnathanSUP pure valueToAdd = 7; addAValue = x !=> x + valueToAdd; function()
31. @JohnathanSUP pure addAValue(8); !// 15 addAValue(8); !// 17 ??? function()
32. @JohnathanSUP pure addAValue = (x, y) !=> x + y; function()
33. @JohnathanSUP pure addXDay = x !=> new Date().getDate() + x; addXDay(1); function()
34. @JohnathanSUP pure addXDay = (date, x) !=> date.getDate() + x; addXDay(new Date(), 1); function()
35. @JohnathanSUP • Immutability • Pragmatic • Simplify test pure function()
36. @JohnathanSUP currying function() There is a way to reduce functions of more than one argument to functions of one argument, a way called currying after Haskell B. Curry*
37. @JohnathanSUP currying add = (n, m) !=> (n + m) curryedAdd = n !=> ( m !=> add(n, m) ) addSeven = curryedAdd(7) addSeven(35) !// 42 function()
38. @JohnathanSUP currying add = (n, m) !=> n + m curryedAdd = (n) !=> ( (m) !=> add(n, m) ) addOne = curryedAdd(1) values = [1, 2, 3, 4, 5, 6, 7, 8, 9]; addedValues = values.map(add); !//[ 1, 3, 5, 7, 9, 11, 13, 15, 17 ] addedOneValues = values.map(addOne); !//[ 2, 3, 4, 5, 6, 7, 8, 9, 10 ] function()
39. @JohnathanSUP Hight Order Function add = (a, b) !=> a + b makeSafe = fn !=> (!!...args) !=> { if (args.some(arg !=> Number(arg) !!!== arg)) return NaN; return fn(…args); } safeAdd = makeSafe(add); safeAdd(1, 2) !// 3 safeAdd(1, null); !// NaN safeAdd(1, "2"); !// NaN function()
40. @JohnathanSUP Hight Order Function add = (a, b) !=> a + b; withLog = fn !=> (!!...args) !=> { console.log(`${fn.name}(${args.join(', ')}) = ${fn(!!...args)}`); return fn(!!...args); } logAdd = withLog(add); logAdd(3,1); !// add(3, 1) = 4 !// 4 function()
41. @JohnathanSUP (.O{the}rs[])
42. @JohnathanSUP label var i, j; boucle1: for (i = 0; i < 3; i!++) { boucle2: for (j = 0; j < 3; j!++) { if (i !!=== 1 !&& j !!=== 1) { continue boucle1; } else { console.log("i = " + i + ", j = " + j); } } } (.O{the}rs[])
43. @JohnathanSUP label let i, j; boucle1: for (i = 0; i < 3; i!++) { boucle2: for (j = 0; j < 3; j!++) { if (i !!=== 1 !&& j !!=== 1) { continue boucle1; } else { console.log(`i = ${i}, j = ${j}`); } } } (.O{the}rs[]) !// We will have !// i = 0, j = 0 !// i = 0, j = 1 !// i = 0, j = 2 !// i = 1, j = 0 !// i = 2, j = 0 !// i = 2, j = 1 !// i = 2, j = 2 !// Without !// i = 1 !// j = 1 !// i = 1 !// j = 2
44. @JohnathanSUP block var x = 1; { var x = 2; } console.log(x); !// logs 2 (.O{the}rs[])
45. @JohnathanSUP block let x = 1; { let x = 2; } console.log(x); !// logs 1 (.O{the}rs[])
46. @JohnathanSUP block const c = 1; { const c = 2; } console.log(c); !// logs 1 and does not throw SyntaxError!!... (.O{the}rs[])
47. @JohnathanSUP block foo('outside'); !// TypeError: foo is not a function { function foo(location) { console.log('foo is called ' + location); } foo('inside'); !// works correctly and logs 'foo is called inside' } (.O{the}rs[])
48. @JohnathanSUP fetch fetch('https:!//swapi.co/api/people/1/') .then((response) !=> response.json()) .then((res) !=> { console.log(res); }); (.O{the}rs[])
49. @JohnathanSUP label fetch('https:!//swapi.co/api/ people/1/') .then(function (response) { return response.json(); }) .then(function (res) { console.log(res); }); (.O{the}rs[]) { "name": "Luke Skywalker", "height": "172", "mass": "77", "hair_color": "blond", "skin_color": "fair", "eye_color": "blue", "birth_year": "19BBY", "gender": "male", "homeworld": "https:!//swapi.co/api/planets/ 1/", "films": [ "https:!//swapi.co/api/films/2/", "https:!//swapi.co/api/films/6/", "https:!//swapi.co/api/films/3/", "https:!//swapi.co/api/films/1/", "https:!//swapi.co/api/films/7/" ], …
50. @JohnathanSUP promise (.O{the}rs[])
51. @JohnathanSUP promise var pro1 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom1 finished'); }, 500); }) var pro2 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom2 finished'); }, 1000); }); var pro3 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom3 finished'); }, 300); }) var pro4 = new Promise((resolve, reject) !=> { reject('prom4 failed'); }) pro1.then(data !=> void console.log(data)) pro2.then(data !=> void console.log(data)) pro3.then(data !=> void console.log(data)) pro4.then(data !=> void console.log(data)) (.O{the}rs[])
52. @JohnathanSUP promise (.O{the}rs[])
53. @JohnathanSUP promise.all var pro1 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom1 finished'); }, 500); }) var pro2 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom2 finished'); }, 1000); }); var pro3 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom3 finished'); }, 300); }) pro1.then(data !=> void console.log(data)) pro2.then(data !=> void console.log(data)) pro3.then(data !=> void console.log(data)) Promise.all([pro1, pro2, pro3]).then(values !=> { console.log(values); }); (.O{the}rs[])
54. @JohnathanSUP promise.all (.O{the}rs[])
55. @JohnathanSUP promise.all var pro1 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom1 finished'); }, 500); }) var pro2 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom2 finished'); }, 1000); }); var pro3 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom3 finished'); }, 300); }) var pro4 = new Promise((resolve, reject) !=> { reject('prom4 failed'); }) pro1.then(data !=> void console.log(data)) pro2.then(data !=> void console.log(data)) pro3.then(data !=> void console.log(data)) pro4.then(data !=> void console.log(data)) Promise.all([pro1, pro2, pro3, pro4]) .then(values !=> { console.log(values); }); (.O{the}rs[])
56. @JohnathanSUP promise.all (.O{the}rs[])
57. @JohnathanSUP promise.race var pro1 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom1 finished'); }, 500); }) var pro2 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom2 finished'); }, 1000); }); var pro3 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom3 finished'); }, 300); }) pro1.then(data !=> void console.log(data)) pro2.then(data !=> void console.log(data)) pro3.then(data !=> void console.log(data)) Promise.race([pro1, pro2, pro3]) .then(values !=> { console.log(`race : ${values}`); }); (.O{the}rs[])
58. @JohnathanSUP promise.race (.O{the}rs[])
59. @JohnathanSUP promise.race var pro1 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom1 finished'); }, 500); }) var pro2 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom2 finished'); }, 1000); }); var pro3 = new Promise((resolve, reject) !=> { setTimeout(() !=> { resolve('prom3 finished'); }, 300); }) var pro4 = new Promise((resolve, reject) !=> { reject(‘prom4 failed'); }) pro1.then(data !=> void console.log(data)) pro2.then(data !=> void console.log(data)) pro3.then(data !=> void console.log(data)) pro4.then(data !=> void console.log(data)) Promise.race([pro1, pro2, pro3, pro4]) .then(values !=> { console.log(values); }); (.O{the}rs[])
60. @JohnathanSUP promise.race (.O{the}rs[])
61. @JohnathanSUP ternary add = (a, b) !=> a + b makeSafe = fun !=> (!!...args) !=> args.some(arg !=> Number(arg) !!!== arg) ? NaN : fun(!!...args) safeAdd = makeSafe(add); safeAdd(1, 2) !// 3 safeAdd(1, null); !// NaN safeAdd(1, "2"); !// NaN (.O{the}rs[])
62. @JohnathanSUP && var myBool = true; if(myBool){ console.log(‘ok'); !// ok } (.O{the}rs[])
63. @JohnathanSUP && var myBool = true; myBool !&& console.log(‘ok’); !// ok (.O{the}rs[])
64. @JohnathanSUP && var myBool = false; myBool !&& console.log('ok'); (.O{the}rs[])
65. @JohnathanSUP && var myBool = [‘val1'].length; myBool !&& console.log(‘ok’); !// ok (.O{the}rs[])
66. @JohnathanSUP && var myBool = [].length; myBool !&& console.log(‘ok’); (.O{the}rs[])
67. @JohnathanSUP && var myBool = [].length; var state = myBool !&& 'ok'; console.log(state); !// 0 (.O{the}rs[])
68. @JohnathanSUP && var myBool = ['val1'].length; var state = myBool !&& 'ok'; console.log(state); !// ok (.O{the}rs[])
69. @JohnathanSUP && with JSX for example function Mailbox(props) { const {unrdMsgs} = props; return ( <div> <h1>Hello!!</h1> {unrdMsgs.length > 0 !&& <h2> You have {unrdMsgs.length} unread messages. !</h2> } !</div> ); } const messages = ['React', 'Re: React', 'Re:Re: React’]; ReactDOM.render( <Mailbox unrdMsgs={messages} !/>, document.getElementById('root') ); (.O{the}rs[])
70. @JohnathanSUP || var myBool = ['val1'].length; var state = myBool !|| 'ok'; console.log(state); !// 1 (.O{the}rs[])
71. @JohnathanSUP || var myBool = [].length; var state = myBool !|| 'ok'; console.log(state); !// ok (.O{the}rs[])
72. @JohnathanSUP void const changeCtx = (state) !=> void state !&& addToRisk('toto'); (.O{the}rs[])
73. @JohnathanSUP One more thing …
74. @JohnathanSUP Console.group() var activities = [ {"id": "activity1", "desc": "description of my first activity", "type": "main"}, {"id": "activity2", "desc": "description of my second activity", "type": "sub"}, {"id": "activity3", "desc": "description of my third activity", "type": "sub"}, ]; console.warn('!!### START Loop'); activities.forEach(({id, desc, type}) !=> { console.group(); console.log(id); console.log(desc); console.log(type); console.groupEnd(); }); console.warn('!!### END Loop'); Dev tools
75. @JohnathanSUP Console.group() console.warn('!!### START Loop'); activities.forEach(({id, desc, type}) !=> { console.group(); console.log(id); console.log(desc); console.log(type); console.groupEnd(); }); console.warn('!!### END Loop'); Dev tools
76. @JohnathanSUP Console.group() Dev tools
77. @JohnathanSUP Console.table() Dev tools
78. @JohnathanSUP Console.table() Dev tools
79. @JohnathanSUP Console.table() Dev tools
80. @JohnathanSUP Console.table() Dev tools
81. @JohnathanSUP Console.time() Dev tools
82. @JohnathanSUP Screen step by step Google Chrome
83. @JohnathanSUP Store & Copy Google Chrome
84. @JohnathanSUP Live Expressions Google Chrome
85. @JohnathanSUP Usefull links • vanilla-js.com • developer.mozilla.org/fr • lilleweb.fr • thenounproject.com/giuditta.gentile • What's New In DevTools (Chrome 70)
86. @JohnathanSUP You should know it Discovery of a new fashionable framework : Vanilla.js Thank you !