Christina Zenzes & Anna Backs: How not to JavaScript

How not to JavaScript – Anleitung zum Unglücklich sein (30 min)

Du hast ein Problem oder eine Idee und denkst darüber nach, das mit JavaScript zu lösen? Wir können dir zeigen, wie du das Projekt zu einer möglichst schmerzhaften und umständlichen Erfahrung machst! Wir haben alle unsere Fehler und Schwachstellen aus allen möglichen JavaScript-Projekten gesammelt und zu einem tollen Projekt zusammengeführt. Aber keine Sorge, wir haben überlebt und wollen nun mit dir teilen, was du besser nicht tun solltest...

Christina Zenzes

Christina Zenzes ist als Consultant und Software Developer bei der codecentric AG tätig. Ihre Leidenschaft gilt React, CSS, Clean Code und Testen (ja, wirklich!). Neben dem Schreiben von funktionellem JavaScript-Code liebt sie es, Pflanzen auf ihrem Balkon zu züchten, Katzen zu streicheln und gutes Essen.

Anna Backs

Anna Backs arbeitet als APM Consultant für die codecentric AG. Wenn sie nicht gerade mit ihrem Hund draußen unterwegs oder in der Welt von Shadowrun vertieft ist, dann ist sie wahrscheinlich damit beschäftigt, etwas in Java oder JavaScript zu bauen. Kaffee, gute Geschichten und neue Dinge zu lernen gehören zu ihren Vorlieben.

Transcript

1. ANLEITUNG ZUM UNGLÜCKLICHSEIN @merelyChristina & @merelyAnna 1 How not to JavaScript
2. Wer sind wir? ANNA 2 merelyChristina CHRISTINA merelyAnna
3. AGENDA 3 Idee oder
 Problem JavaScript Glücklich :D
4. AGENDA 4 Idee oder
 Problem JavaScript Unglücklich :(
6. PARADIGMEN & KONZEPTE 6
7. Warum macht mich das unglücklich? 7 Aufwendig zu Pflegen Fehleranfällig
8. Was sollte ich vermeiden? 8 Learning by doing Konzepte verstehen
9. DEPENDENCY MANAGEMENT 9
10. Warum macht mich das unglücklich? 10 Woher gedownloadet? Welche Version? Legitime Quelle? Weitere Abhängigkeiten? Mehrere Projekte?
11. Warum macht mich das unglücklich? 11 Messy Aufwand
12. Was sollte ich vermeiden? 12 Tool Aufwand
13. FRAMEWORKS & LIBRARIES 13
14. FRAMEWORKS & LIBRARIES 14 awesome.js super.js magic.js amazing.js super_saiyaijn.js
15. 15 Arbeit & Aufwand Keiner will damit arbeiten Warum macht mich das unglücklich?
16. 16 Was sollte ich vermeiden?
17. 17 Frameworks & Libraries … …ordentlich nutzen Was sollte ich vermeiden?
18. TOOLS 18
19. 19 Kein Codecheck Codequalität Unterschiedliche Codestyles F Warum macht mich das unglücklich?
20. 20 Tests Linting Codestyle Was sollte ich vermeiden?
21. EINE DATEI 21
22. EINE DATEI 22
23. EINE DATEI - FÜR ALLES! 23
24. 24 Unübersichtlich Schwer zu testen Warum macht mich das unglücklich?
25. 25 Was sollte ich vermeiden?
26. 26 CompOne CompTwo Was sollte ich vermeiden?
27. 27 Dateien & Ordner View <-> Funktionalität Was sollte ich vermeiden?
29. 29 THIS
30. 30 Warum macht mich das unglücklich? class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion();
31. 31 Warum macht mich das unglücklich? class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); Error: Uncaught [TypeError: this.thinking is not a function]
32. answerQuestion() { thinking.call(this); … } 32 Warum macht mich das unglücklich? class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); This = ExecutionContext
33. 33 Warum macht mich das unglücklich? class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); This = ExecutionContext setTimeout(callback, timeout) { //timer callback(); }
34. 34 Warum macht mich das unglücklich? class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); This = ExecutionContext setTimeout(callback, timeout) { //timer callback.call(this); }
35. 35 Warum macht mich das unglücklich? class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); This = ExecutionContext return setTimeout( this.answerQuestion, 2000 );
36. 36 Warum macht mich das unglücklich? class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); This = ExecutionContext return setTimeout.call( window, this.answerQuestion, 2000 );
37. 37 class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); Binding return setTimeout(this.answerQuestion.bind(this), 2000); Was sollte ich vermeiden?
38. 38 class SadPerson { saySomething(text) { console.log(text); } thinking() { console.log("..."); } answerQuestion() { this.thinking(); this.saySomething("I’m sad because of this"); } askQuestion() { return setTimeout(this.answerQuestion, 2000); } } const sadPerson = new SadPerson(); await sadPerson.askQuestion(); return setTimeout(() => this.answerQuestion(), 2000); Arrow Function Was sollte ich vermeiden?
39. 39 Waiting on js app with long time synchronous operations ASYNC / SYNC
40. Warum macht mich das unglücklich? 40 const reallyLongRunningMethod = () =>{//do something long}; const shortRunnnigMethod = () => {//do something short} reallyLongRunningMethod(); shortRunnnigMethod(); EventLoop Global reallyLong RunningMethode do something long
41. Warum macht mich das unglücklich? 41 const reallyLongRunningMethod = () =>{//do something long}; const shortRunnnigMethod = () => {//do something short} reallyLongRunningMethod(); shortRunnnigMethod(); EventLoop Global
42. Warum macht mich das unglücklich? 42 const reallyLongRunningMethod = () =>{//do something long}; const shortRunnnigMethod = () => {//do something short} reallyLongRunningMethod(); shortRunnnigMethod(); EventLoop Global reallyLong RunningMethode do something long short RunningMethod do something short
43. 43 EventLoop global short RunningMethod const reallyLongRunningMethod = callback => { setTimeout(callback, 2000); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod(() => console.log("long")); shortRunnnigMethod(); browser api Was sollte ich vermeiden? reallyLong RunningMethod
44. 44 EventLoop global short RunningMethod do something short const reallyLongRunningMethod = callback => { setTimeout(callback, 2000); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod(() => console.log("long")); shortRunnnigMethod(); browser api Was sollte ich vermeiden?
45. 45 EventLoop global const reallyLongRunningMethod = callback => { setTimeout(callback, 2000); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod(() => console.log("long")); shortRunnnigMethod(); queue callback browser api Was sollte ich vermeiden?
46. 46 EventLoop global do something short const reallyLongRunningMethod = callback => { setTimeout(callback, 2000); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod(() => console.log("long")); shortRunnnigMethod(); queue callback console.log Was sollte ich vermeiden?
47. 47 stack global reallyLong RunningMethod short RunningMethod browser api const reallyLongRunningMethod = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 2000) ); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod() .then(text => console.log(text)); shortRunnnigMethod(); task queue Was sollte ich vermeiden?
48. 48 stack global reallyLong RunningMethod browser api const reallyLongRunningMethod = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 2000) ); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod() .then(text => console.log(text)); shortRunnnigMethod(); Was sollte ich vermeiden?
49. 49 stack global micro task queue callback browser api const reallyLongRunningMethod = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 2000) ); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod() .then(text => console.log(text)); shortRunnnigMethod(); task queue Was sollte ich vermeiden?
50. 50 stack global do something short micro task queue callback console.log const reallyLongRunningMethod = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 2000) ); }; const shortRunnnigMethod = () => { console.log("short"); }; reallyLongRunningMethod() .then(text => console.log(text)); shortRunnnigMethod(); task queue Was sollte ich vermeiden?
51. callback hell 51 & promise hell
52. 52 const getTextLineFromFile = callback => { setTimeout(() => { callback("long"); }, 1000); }; const formatText = (text, callback) => { setTimeout(() => { callback(`formatedText${text}`); }, 1000); }; const sendText = (text, callback) => { setTimeout(() => { callback("response text"); }, 1000); return; }; const printText = (text, callback) => { console.log(text); callback(text); }; getTextLineFromFile(text => formatText(text, text => sendText(text, text => formatText(text, text => printText(text)) ) ) ); Warum macht mich das unglücklich?
53. 53 const getTextLineFromFile = callback => { setTimeout(() => { callback("long"); }, 1000); }; const formatText = (text, callback) => { setTimeout(() => { callback(`formatedText${text}`); }, 1000); }; const sendText = (text, callback) => { setTimeout(() => { callback("response text"); }, 1000); return; }; const printText = (text, callback) => { console.log(text); callback(text); }; getTextLineFromFile(text => formatText(text, text => sendText(text, text => formatText(text, text => printText(text)) ) ) ); Warum macht mich das unglücklich?
54. 54 const getTextLineFromFile = callback => { setTimeout(() => { callback("long"); }, 1000); }; const formatText = (text, callback) => { setTimeout(() => { callback(`formatedText${text}`); }, 1000); }; const sendText = (text, callback) => { setTimeout(() => { callback("response text"); }, 1000); return; }; const printText = (text, callback) => { console.log(text); callback(text); }; const getTextLineFromFile = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 1000) ); }; const formatText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve(`formatedText${text}`), 1000) ); }; const sendText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve("response text"), 1000) ); }; const printText = text => { return new Promise((resolve, reject) => { console.log("print Text", text); resolve(); }); }; Promises Warum macht mich das unglücklich?
55. 55 const getTextLineFromFile = callback => { setTimeout(() => { callback("long"); }, 1000); }; const formatText = (text, callback) => { setTimeout(() => { callback(`formatedText${text}`); }, 1000); }; const sendText = (text, callback) => { setTimeout(() => { callback("response text"); }, 1000); return; }; const printText = (text, callback) => { console.log(text); callback(text); }; const getTextLineFromFile = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 1000) ); }; const formatText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve(`formatedText${text}`), 1000) ); }; const sendText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve("response text"), 1000) ); }; const printText = text => { return new Promise((resolve, reject) => { console.log("print Text", text); resolve(); }); }; getTextLineFromFile().then(text => formatText(text).then(text => sendText(text).then(text => formatText(text).then(text => { return printText(text) .then(() => done()); }) ) ) ); Warum macht mich das unglücklich?
56. 56 const getTextLineFromFile = callback => { setTimeout(() => { callback("long"); }, 1000); }; const formatText = (text, callback) => { setTimeout(() => { callback(`formatedText${text}`); }, 1000); }; const sendText = (text, callback) => { setTimeout(() => { callback("response text"); }, 1000); return; }; const printText = (text, callback) => { console.log(text); callback(text); }; const getTextLineFromFile = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 1000) ); }; const formatText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve(`formatedText${text}`), 1000) ); }; const sendText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve("response text"), 1000) ); }; const printText = text => { return new Promise((resolve, reject) => { console.log("print Text", text); resolve(); }); }; getTextLineFromFile().then(text => formatText(text).then(text => sendText(text).then(text => formatText(text).then(text => { return printText(text) .then(() => done()); }) ) ) ); Warum macht mich das unglücklich?
57. 57 const getTextLineFromFile = () => { return new Promise((resolve, reject) => setTimeout(() => resolve("long"), 1000) ); }; const formatText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve(`formatedText${text}`), 1000) ); }; const sendText = text => { return new Promise((resolve, reject) => setTimeout(() => resolve("response text"), 1000) ); }; const printText = text => { return new Promise((resolve, reject) => { console.log("print Text", text); resolve(); }); }; getTextLineFromFile().then(text => formatText(text).then(text => sendText(text).then(text => formatText(text).then(text => { return printText(text) .then(() => done()); }) ) ) ); getTextLineFromFile() .then(formatText) .then(sendText) .then(formatText) .then(printText) .then(() => done()); Was sollte ich vermeiden?
59. 59 0.2 + 0.7 === 0.899999999 X 0.9 Warum macht mich das unglücklich?
60. 60 0 Vorkommastelle = 0 Warum macht mich das unglücklich?
61. 61 0.2 0 * 2 = 0.4 0.4 > 1 ? 1 : 0 0 Warum macht mich das unglücklich?
62. 62 0.2 0 * 2 = 0.4 0.4 * 2 = 0.8 0 0.8 * 2 = 1.6 1 0.4 > 1 ? 1 : 0 If > 1, then -1 0 Warum macht mich das unglücklich?
63. 63 0.2 0 * 2 = 0.4 0.4 * 2 = 0.8 0 0.8 * 2 = 1.6 1 (1.6 -1) * 2 = 1.2 1 (1.2 -1) * 2 = 0.4 0 0.4 > 1 ? 1 : 0 If > 1, then -1 0 or …? 0.00110 Warum macht mich das unglücklich?
64. 64 value * 100 /100 Math.round Was sollte ich vermeiden?
66. 66 Typecasting Kein Typecasting false ToNumber(„1“) === ToNumber(true) „1“ == true „1“ === true Warum macht mich das unglücklich?
67. 67 Typecasting Kein Typecasting false 1 === 1 true „1“ == true „1“ === true Warum macht mich das unglücklich?
68. 68 Wenig & nur einfache Vergleiche schreiben Typecasting im Hinterkopf behalten Jobwechsel Was sollte ich vermeiden?
70. Fazit? 70
71. Dieser Vortrag beruht auf wahren Begebenheiten. 71
72. MUHAHAHA (ENDE) 72
73. merelyChristina CHRISTINA FRAGEN? 73 Sprich uns an! :) ANNA merelyAnna