An overview of JavaScript and Node.js

In this talk, we will discuss JavaScript. Why does JavaScript exist in the first place? What is it useful for? How is it different from other mainstream languages like Java, Python or C? When you should consider using JavaScript (and when you shouldn't). We will also explore JavaScript server-side: Node.js and finally we will discuss when to use JavaScript + Node.js and when not to!

Transcript

1. An overview of JavaScript and Node.js Luciano Mammino ( ) @loige June 24, 2020 University Webinar Series 1
2. Hello, I am Luciano! 2
3. Hello, I am Luciano! Principal Software Engineer at FabFitFun 2
4. Hello, I am Luciano! Principal Software Engineer at FabFitFun nodejsdp.link 2
5. Hello, I am Luciano! Principal Software Engineer at FabFitFun fstack.link nodejsdp.link 2
6. Hello, I am Luciano! Principal Software Engineer at FabFitFun fstack.link nodejsdp.link Blog: Twitter: GitHub: loige.co @loige @lmammino let's connect! 2
7. Hello, I am Luciano! Principal Software Engineer at FabFitFun fstack.link nodejsdp.link Blog: Twitter: GitHub: loige.co @loige @lmammino let's connect! Mentor and co-organizer at NodeSchool Dublin 2
8. loige.link/js-overview 3
9. Agenda What is JavaScript JavaScript strengths What is Node.js Learning Resources Q&A @loige 4
10. What is JavaScript @loige JavaScript is an high-level, interpreted, multi-paradigm, dynamic & loosely-typed programming language 5
11. @loige High-level: the language abstracts many system details (e.g. memory management). Focus on productivity rather than control. int *array = malloc(10 * sizeof(int)); if (array == NULL) { fprintf(stderr, "malloc failed\n"); return -1; } // ... free(array); var arr = [] C (low-level) JavaScript (high-level) 6
12. @loige Interpreted: the source code can be executed directly using an interpreter (there is no compilation step). Focus on portability and productivity rather than performance javac HelloWorld.java java HelloWorld.class node hello-world.js Java (compile) JavaScript (intepreted) 7
13. @loige Multi-paradigm: the language supports multiple programming paradigms: Functional Object-oriented (through prototypal inheritance) Focus on flexibility and freedom rather than consistency 8
14. @loige dynamic: the type of variables does not need to be defined. loosely typed: the type of variables can change over time and different types of variables can be combined (through auto- casting) Focus on productivity rather than safety. 2 a = "Hello" a = 2 b = "Hello" + 2 # TypeError! var a = "Hello" a = 2 var b = 'Hello' + 2 // 'Hello2' python (dynamic, strongly typed) JavaScript (dynamic, loosely typed) 9
15. @loige Brendan Eich (in a suit!) JavaScript was created in 1995 by Brendan Eich to be the scripting language for the Netscape browser. The name JavaScript comes by the fact that Netscape wanted the language to look similar to Java! In 1997 the language specification was standardized and called EcmaScript. (1) (2) 10
16. @loige In the last two decades, JavaScript has effectively revolutionized the web, eventually becoming the standard "de facto" for building dynamic websites and web applications! 11
17. JavaScript strengths Async I/O Ecosystem Universal / Isomorphic web development @loige 12
18. Async I/O @loige In JavaScript, input/output operations (e.g. making an HTTP request) are non-blocking. 13
19. Most languages have blocking I/O by default Let's make an HTTP request in Java @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http 14
20. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http . Output 15
21. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http . Output 16
22. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http . Output 17
23. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http . Output 18
24. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http . Output (Blocking I/O) 19
25. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http <google home page HTML code> Output 20
26. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http <google home page HTML code> Request completed Output 21
27. @loige OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .url("https://google.com") .build(); Response response = client.newCall(request).execute(); System.out.println(response.body().string()); System.out.println("Request completed"); loige.link/java-blocking-http <google home page HTML code> Request completed Output Code executed "in order" 22
28. @loige Is blocking I/O bad? 23
29. @loige Is blocking I/O bad? (it depends...) 24
30. @loige Is your application I/O heavy? 25
31. @loige Is your application I/O heavy? If yes, then blocking I/O might not be optimal! 26
32. @loige If you have to do 3 requests... 27
33. @loige If you have to do 3 requests... Req 1 time 28
34. @loige If you have to do 3 requests... Req 1 time 29
35. @loige If you have to do 3 requests... Req 1 time Req 2 30
36. @loige If you have to do 3 requests... Req 1 time Req 2 31
37. @loige If you have to do 3 requests... Req 1 time Req 2 Req 3 32
38. @loige If you have to do 3 requests... Req 1 time Req 2 Req 3 33
39. @loige You can always use threads... thread 1 time thread 2 thread 3 34
40. @loige You can always use threads... thread 1 time thread 2 thread 3 35
41. @loige You can always use threads... thread 1 time thread 2 thread 3 But threads are... 36
42. @loige You can always use threads... thread 1 time thread 2 thread 3 But threads are... Complicated 37
43. @loige You can always use threads... thread 1 time thread 2 thread 3 But threads are... Complicated Expensive 38
44. @loige You can always use threads... thread 1 time thread 2 thread 3 But threads are... Complicated Expensive Still a lot of idle time per thread! 39
45. @loige You can always use threads... thread 1 time thread 2 thread 3 idle time idle time idle time 40 But threads are... Complicated Expensive Still a lot of idle time per thread!
46. Let's understand JavaScript async I/O with a similar example... @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http 41
47. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http . Output 42
48. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http . Output 43
49. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http . Output request "in the background" 44
50. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) Output request "in the background" not blocking, execution continues... 45
51. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) Output request "in the background" not really completed, still in progress! 46
52. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) Output request completed ⏰ 47
53. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) Output request completed ⏰ Callback function 48
54. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) <google home page HTML code> Output 49
55. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) <google home page HTML code> Output 50
56. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) <google home page HTML code> Output ⚠ Code NOT executed "in order" 51
57. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) <google home page HTML code> Output ⚠ Code NOT executed "in order" ① 52
58. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) <google home page HTML code> Output ⚠ Code NOT executed "in order" ① ② 53
59. @loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http Request completed (?) <google home page HTML code> Output ⚠ Code NOT executed "in order" ① ② ③ 54
60. @loige When is this approach convenient? 55
61. @loige When is this approach convenient? For I/O heavy applications 56
62. @loige When is this approach convenient? For I/O heavy applications JavaScript was built for the Browser, which is I/O heavy! 57
63. @loige But why? 58
64. @loige But why? You just have to schedule async I/O and you will get notified when the operation is completed! 59
65. @loige But why? You just have to schedule async I/O and you will get notified when the operation is completed! No explicit thread creation! In fact, the "user" code runs in a single thread! 60
66. @loige How? 61
67. @loige How? Thanks to the event loop! 62
68. @loige How? Thanks to the event loop! It executes I/O efficiently in the background 63
69. @loige If you have to do 3 requests... 64
70. @loige If you have to do 3 requests... "user" thread time Event loop 65
71. @loige If you have to do 3 requests... "user" thread time Sched. req 1 Event loop 66
72. @loige If you have to do 3 requests... "user" thread time Sched. req 1 Event loop 67
73. @loige If you have to do 3 requests... "user" thread time Event loop Sched. req 2 68
74. @loige If you have to do 3 requests... "user" thread time Event loop Sched. req 2 69
75. @loige If you have to do 3 requests... "user" thread time Event loop Sched. req 3 70
76. @loige If you have to do 3 requests... "user" thread time Event loop Sched. req 3 71
77. @loige If you have to do 3 requests... "user" thread time Event loop idle 72
78. @loige If you have to do 3 requests... "user" thread time Event loop idle req 1 result 73
79. @loige If you have to do 3 requests... "user" thread time Event loop idle 74
80. @loige If you have to do 3 requests... "user" thread time Event loop idle idle 75
81. @loige If you have to do 3 requests... "user" thread time Event loop idle idle req 3 result 76
82. @loige If you have to do 3 requests... "user" thread time Event loop idle idle 77
83. @loige If you have to do 3 requests... "user" thread time Event loop idle idle idle 78
84. @loige If you have to do 3 requests... "user" thread time Event loop idle idle idle req 2 result 79
85. @loige If you have to do 3 requests... "user" thread time Event loop idle idle idle 80
86. @loige If you have to do 3 requests... "user" thread time Event loop idle idle idle Simpler code for the user 81
87. @loige If you have to do 3 requests... "user" thread time Event loop idle idle idle Simpler code for the user idle time only in one thread 82
88. @loige This was a gross simplification... Watch if you want to go more in depth! loige.link/event-loop-what-the-heck 83
89. @loige Since async is so fundamental there are many abstractions to handle async flow: callbacks promises async/await events streams async generators! 84
90. @loige Ecosystem The JavaScript community is one of the most active open source communities! is the biggest repository of modules ( ) More than 1.25 bln modules and growing! ( ) There are modules for the most common needs ( ) npm 1 2 3 85
91. @loige Universal / Isomorphic web development If you use JavaScript & Node.js you can build full stack web applications (frontend + backend) using only one language! Less context-switching Less time spent learning Opportunity to share code between frontend & backend 86
92. @loige Bonus: Javascript is one of the fastest scripting languages Some resources: - - - loige.link/benchmarks-game loige.link/techempower-benchmark loige.link/node-at-paypal 87
93. ⚠ WARNING JavaScript is a pragmatic and beautiful language, but like everything, it's far from perfect and it has many quirks... @loige JavaScript WAT, a short talk by Gary Bernhardt loige.link/js-wat 88
94. @loige Node.js is an open-source, cross-platform, JavaScript runtime environment that executes JavaScript code outside a web browser. What is Node.js 89
95. @loige Created and launched in 2009 by Ryan Dahl to have a way to run JavaScript code outside a browser. npm was launched in the same year. Big companies (Linkedin, Uber, Paypal, Walmart) adopt Node.js early on. In 2015 the Node.js foundation (now OpenJS) is born. ( ) 1 Ryan Dahl (in a T-shirt!) 90
96. Node.js differences Does not run in the browser No access to DOM and many other browser-specific APIs It is not sandboxed as the browser Can interact with the underlying OS (file system, network, syscalls, etc.) Can have bindings to native code (N-API interface) @loige 91
97. Node.js + JavaScript, when? Building for the web Websites, APIs, Servers, Single Page Applications, Bots, etc. Command-line applications and tools Mobile applications ( , , , etc.) Desktop application ( ) Embedded & IoT! ( , ) React Native Ionic NativeScript Electron Espruino Johnny-Five @loige 92
98. Node.js + JavaScript, when not? You don't like the async model You need fine-grained control on memory You have to rely heavily on CPU/GPU rather than I/O You prefer to release native (compiled) applications @loige 93
99. Want to learn more? - a great book :) - mozilla guides - free e-book - interactive code training - Node.js official docs nodejsdesignpatterns.com loige.link/javascript-mdn eloquentjavascript.net freecodecamp.org nodejs.org/api/ @loige 94
100. THANKS! Thanks to , , , & for reviews and feedback! @gbinside @StefanoAbalsamo @PadraigOBrien @mariocasciaro @hernandezlobera @loige loige.link/js-overview 95