How JavaScript Works

This presentation is provided with the information about how JavaScript works behind the scene

Transcript

1. HOW JAVASCRIPT WORKS INSIDE THE JAVASCRIPT RUNTIME
2. SO… what is JavaScript?
3. why does JavaScript become so popular right now?
4. Github Language Stats 2018
5. Variations
8. Variations (ES6)
9. Variations (TypeScript)
10. Variations (CoffeeScript)
12. Variations (JavaScript)
13. how JavaScript works?
14. The JavaScript Engine
15. The Runtime
16. The Call Stack
17. The Call Stack Each entry in the Call Stack is called a Stack Frame.
18. The Call Stack (The Stack Trace)
19. The Call Stack (The Stack Trace) LIFO (Last In First Out)
20. The Call Stack (The Stack Trace) How About This?
21. The Call Stack (The Stack Trace)
22. Fun Fact: JavaScript is Single Thread & Synchronous
23. Concurrency & the Event Loop
24. What happens when you have function calls in the Call Stack that take a huge amount of time in order to be processed?
26. V8 — open source, developed by Google, written in C++ Rhino — managed by the Mozilla Foundation, open source, developed entirely in Java SpiderMonkey — the first JavaScript engine, which back in the days powered Netscape Navigator, and today powers Firefox JavaScriptCore — open source, marketed as Nitro and developed by Apple for Safari KJS — KDE’s engine originally developed by Harri Porten for the KDE project’s Konqueror web browser Chakra (JScript9) — Internet Explorer Chakra (JavaScript) — Microsoft Edge Nashorn, open source as part of OpenJDK, written by Oracle Java Languages and Tool Group JerryScript — is a lightweight engine for the Internet of Things. JavaScript Engines (JavaScript Engines)
27. Inside The V8 Engine V8 used to have two compilers full-codegen — a simple and very fast compiler that produced simple and relatively slow machine code. Crankshaft — a more complex (Just-In-Time) optimizing compiler that produced highly- optimized code.
28. Event loop and the rise of Async programming
29. Building Blocks The most common block unit is the function.
30. Building Blocks A simple way of “waiting” for an asynchronous function to return its result is to use a function called callback:
31. Can i make Synchronous AJAX Request?
32. Building Blocks If you make a synchronous Ajax request, the UI of your JavaScript app will be blocked  Users won’t be able to click, enter data, navigate, or scroll.
33. Building Blocks
34. Building Blocks
35. JavaScript Runtime
36. What is Event Loop? The Event Loop has one simple job to monitor the Call Stack and the Callback Queue. If the Call Stack is empty, it will take the first event from the queue and will push it to the Call Stack, which effectively runs it.
37. How This Block of Codes Will Be Executed?
39. How setTimeout works? It’s important to note that setTimeout(…) doesn’t automatically put your callback on the event loop queue. It sets up a timer. When the timer expires, the environment places your callback into the event loop, so that some future tick will pick it up and execute it.
40. How setTimeout works? That doesn’t mean that myCallback will be executed in 1,000 ms but rather that, in 1,000 ms, myCallback will be added to the queue. The queue, however, might have other events that have been added earlier — your callback will have to wait.
41. Callbacks
42. Nested Callbacks? This kind of code is often called a callback hell.
43. Promise
44. Promise
45. ES8 Async/Await
46. Async/Await
47. how to write optimized JavaScript?
48. Clean Code VS
49. Error Handling VS
50. Conditional VS
51. thank you :) let’s keep in touch @riskteria rizky@ottencoffee.co.id