Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An overview of JavaScript and Node.js

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!

Luciano Mammino

June 24, 2020
Tweet

More Decks by Luciano Mammino

Other Decks in Technology

Transcript

  1. An overview of JavaScript and Node.js Luciano Mammino ( )

    @loige June 24, 2020 University Webinar Series 1
  2. Hello, I am Luciano! Principal Software Engineer at FabFitFun fstack.link

    nodejsdp.link Blog: Twitter: GitHub: loige.co @loige @lmammino let's connect! 2
  3. 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
  4. @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
  5. @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
  6. @loige Multi-paradigm: the language supports multiple programming paradigms: Functional Object-oriented

    (through prototypal inheritance) Focus on flexibility and freedom rather than consistency 8
  7. @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
  8. @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
  9. @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
  10. 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
  11. @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
  12. @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
  13. @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
  14. @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
  15. @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
  16. @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
  17. @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
  18. @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
  19. @loige You can always use threads... thread 1 time thread

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

    2 thread 3 But threads are... Complicated Expensive 38
  21. @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
  22. @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!
  23. 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
  24. @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
  25. @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
  26. @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
  27. @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
  28. @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
  29. @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
  30. @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
  31. @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
  32. @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
  33. @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
  34. @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
  35. @loige When is this approach convenient? For I/O heavy applications

    JavaScript was built for the Browser, which is I/O heavy! 57
  36. @loige But why? You just have to schedule async I/O

    and you will get notified when the operation is completed! 59
  37. @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
  38. @loige If you have to do 3 requests... "user" thread

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

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

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

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

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

    time Event loop idle idle idle Simpler code for the user 81
  44. @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
  45. @loige This was a gross simplification... Watch if you want

    to go more in depth! loige.link/event-loop-what-the-heck 83
  46. @loige Since async is so fundamental there are many abstractions

    to handle async flow: callbacks promises async/await events streams async generators! 84
  47. @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
  48. @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
  49. @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
  50. ⚠ 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
  51. @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
  52. @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
  53. 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
  54. 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
  55. 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
  56. 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
  57. THANKS! Thanks to , , , & for reviews and

    feedback! @gbinside @StefanoAbalsamo @PadraigOBrien @mariocasciaro @hernandezlobera @loige loige.link/js-overview 95