An overview of JavaScript and Node.js

Slide 1

Slide 1 text

An overview of JavaScript and Node.js Luciano Mammino ( ) @loige June 24, 2020 University Webinar Series 1

Slide 2

Slide 2 text

Hello, I am Luciano! 2

Slide 3

Slide 3 text

Hello, I am Luciano! Principal Software Engineer at FabFitFun 2

Slide 4

Slide 4 text

Hello, I am Luciano! Principal Software Engineer at FabFitFun nodejsdp.link 2

Slide 5

Slide 5 text

Hello, I am Luciano! Principal Software Engineer at FabFitFun fstack.link nodejsdp.link 2

Slide 6

Slide 6 text

Hello, I am Luciano! Principal Software Engineer at FabFitFun fstack.link nodejsdp.link Blog: Twitter: GitHub: loige.co @loige @lmammino let's connect! 2

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

loige.link/js-overview 3

Slide 9

Slide 9 text

Agenda What is JavaScript JavaScript strengths What is Node.js Learning Resources Q&A @loige 4

Slide 10

Slide 10 text

What is JavaScript @loige JavaScript is an high-level, interpreted, multi-paradigm, dynamic & loosely-typed programming language 5

Slide 11

Slide 11 text

@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

Slide 12

Slide 12 text

@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

Slide 13

Slide 13 text

@loige Multi-paradigm: the language supports multiple programming paradigms: Functional Object-oriented (through prototypal inheritance) Focus on ﬂexibility and freedom rather than consistency 8

Slide 14

Slide 14 text

@loige dynamic: the type of variables does not need to be deﬁned. loosely typed: the type of variables can change over time and diﬀerent 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

Slide 15

Slide 15 text

@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 speciﬁcation was standardized and called EcmaScript. (1) (2) 10

Slide 16

Slide 16 text

@loige In the last two decades, JavaScript has eﬀectively revolutionized the web, eventually becoming the standard "de facto" for building dynamic websites and web applications! 11

Slide 17

Slide 17 text

JavaScript strengths Async I/O Ecosystem Universal / Isomorphic web development @loige 12

Slide 18

Slide 18 text

Async I/O @loige In JavaScript, input/output operations (e.g. making an HTTP request) are non-blocking. 13

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

@loige Is blocking I/O bad? 23

Slide 29

Slide 29 text

@loige Is blocking I/O bad? (it depends...) 24

Slide 30

Slide 30 text

@loige Is your application I/O heavy? 25

Slide 31

Slide 31 text

@loige Is your application I/O heavy? If yes, then blocking I/O might not be optimal! 26

Slide 32

Slide 32 text

@loige If you have to do 3 requests... 27

Slide 33

Slide 33 text

@loige If you have to do 3 requests... Req 1 time 28

Slide 34

Slide 34 text

@loige If you have to do 3 requests... Req 1 time 29

Slide 35

Slide 35 text

@loige If you have to do 3 requests... Req 1 time Req 2 30

Slide 36

Slide 36 text

@loige If you have to do 3 requests... Req 1 time Req 2 31

Slide 37

Slide 37 text

@loige If you have to do 3 requests... Req 1 time Req 2 Req 3 32

Slide 38

Slide 38 text

@loige If you have to do 3 requests... Req 1 time Req 2 Req 3 33

Slide 39

Slide 39 text

@loige You can always use threads... thread 1 time thread 2 thread 3 34

Slide 40

Slide 40 text

@loige You can always use threads... thread 1 time thread 2 thread 3 35

Slide 41

Slide 41 text

@loige You can always use threads... thread 1 time thread 2 thread 3 But threads are... 36

Slide 42

Slide 42 text

@loige You can always use threads... thread 1 time thread 2 thread 3 But threads are... Complicated 37

Slide 43

Slide 43 text

@loige You can always use threads... thread 1 time thread 2 thread 3 But threads are... Complicated Expensive 38

Slide 44

Slide 44 text

@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

Slide 45

Slide 45 text

@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!

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

@loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http . Output 42

Slide 48

Slide 48 text

@loige request.get('https://google.com').end( (err, resp) => { console.log(resp.text) } ) console.log('Request completed (?)') loige.link/js-async-http . Output 43

Slide 49

Slide 49 text

@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

Slide 50

Slide 50 text

@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

Slide 51

Slide 51 text

Slide 52

Slide 52 text

Slide 53

Slide 53 text

Slide 54

Slide 54 text

@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 49

Slide 55

Slide 55 text

@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 50

Slide 56

Slide 56 text

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

@loige When is this approach convenient? 55

Slide 61

Slide 61 text

@loige When is this approach convenient? For I/O heavy applications 56

Slide 62

Slide 62 text

@loige When is this approach convenient? For I/O heavy applications JavaScript was built for the Browser, which is I/O heavy! 57

Slide 63

Slide 63 text

@loige But why? 58

Slide 64

Slide 64 text

@loige But why? You just have to schedule async I/O and you will get notiﬁed when the operation is completed! 59

Slide 65

Slide 65 text

@loige But why? You just have to schedule async I/O and you will get notiﬁed when the operation is completed! No explicit thread creation! In fact, the "user" code runs in a single thread! 60

Slide 66

Slide 66 text

@loige How? 61

Slide 67

Slide 67 text

@loige How? Thanks to the event loop! 62

Slide 68

Slide 68 text

@loige How? Thanks to the event loop! It executes I/O eﬃciently in the background 63

Slide 69

Slide 69 text

@loige If you have to do 3 requests... 64

Slide 70

Slide 70 text

@loige If you have to do 3 requests... "user" thread time Event loop 65

Slide 71

Slide 71 text

@loige If you have to do 3 requests... "user" thread time Sched. req 1 Event loop 66

Slide 72

Slide 72 text

@loige If you have to do 3 requests... "user" thread time Sched. req 1 Event loop 67

Slide 73

Slide 73 text

@loige If you have to do 3 requests... "user" thread time Event loop Sched. req 2 68

Slide 74

Slide 74 text

@loige If you have to do 3 requests... "user" thread time Event loop Sched. req 2 69

Slide 75

Slide 75 text

@loige If you have to do 3 requests... "user" thread time Event loop Sched. req 3 70

Slide 76

Slide 76 text

@loige If you have to do 3 requests... "user" thread time Event loop Sched. req 3 71

Slide 77

Slide 77 text

@loige If you have to do 3 requests... "user" thread time Event loop idle 72

Slide 78

Slide 78 text

@loige If you have to do 3 requests... "user" thread time Event loop idle req 1 result 73

Slide 79

Slide 79 text

@loige If you have to do 3 requests... "user" thread time Event loop idle 74

Slide 80

Slide 80 text

@loige If you have to do 3 requests... "user" thread time Event loop idle idle 75

Slide 81

Slide 81 text

@loige If you have to do 3 requests... "user" thread time Event loop idle idle req 3 result 76

Slide 82

Slide 82 text

@loige If you have to do 3 requests... "user" thread time Event loop idle idle 77

Slide 83

Slide 83 text

@loige If you have to do 3 requests... "user" thread time Event loop idle idle idle 78

Slide 84

Slide 84 text

@loige If you have to do 3 requests... "user" thread time Event loop idle idle idle req 2 result 79

Slide 85

Slide 85 text

@loige If you have to do 3 requests... "user" thread time Event loop idle idle idle 80

Slide 86

Slide 86 text

@loige If you have to do 3 requests... "user" thread time Event loop idle idle idle Simpler code for the user 81

Slide 87

Slide 87 text

@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

Slide 88

Slide 88 text

@loige This was a gross simpliﬁcation... Watch if you want to go more in depth! loige.link/event-loop-what-the-heck 83

Slide 89

Slide 89 text

@loige Since async is so fundamental there are many abstractions to handle async ﬂow: callbacks promises async/await events streams async generators! 84

Slide 90

Slide 90 text

@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

Slide 91

Slide 91 text

@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

Slide 92

Slide 92 text

@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

Slide 93

Slide 93 text

⚠ 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

Slide 94

Slide 94 text

@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

Slide 95

Slide 95 text

@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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Node.js + JavaScript, when not? You don't like the async model You need ﬁne-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

Slide 99

Slide 99 text

Want to learn more? - a great book :) - mozilla guides - free e-book - interactive code training - Node.js oﬃcial docs nodejsdesignpatterns.com loige.link/javascript-mdn eloquentjavascript.net freecodecamp.org nodejs.org/api/ @loige 94

Slide 100

Slide 100 text

THANKS! Thanks to , , , & for reviews and feedback! @gbinside @StefanoAbalsamo @PadraigOBrien @mariocasciaro @hernandezlobera @loige loige.link/js-overview 95