Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Babel.pptx
1. JavaScript functionality in browsers
Transpiler meaning, comparing with compilers
Browsers world
Compiling process in the browsers
BABELJS
Parham Abolghasemi
parhamab17@gmail.com
21/05/2023
2. TranspilerVsCompiler
A type of translator that takes piece of source code from a
programming language as input & convert it to another
programming language or another version of the origin
language.
• Compatibility
• Easy debugging
• Better refactoring
• Keeping the code structure
3. Transpiler’s Example
There are many different types of transpilers that each one of them has a
goal based on target language & usage.
Python
Js2Py, Pythonizer,Gotopy
Go
Godzilla,Gython
C#
JavaSharp,Sharpify, Py2Cs
4. European computer manufacturer’s association
Ecma International is an industry association dedicated to the
standardization of information and communication systems
Ecma is driven by industry members to meet their needs, providing a healthy
competitive landscape based on differentiation of products and services rather
than technology models, generating confidence among vendors and users of new
technology.
5. BrowsersWorld
Browser Engine | Rendering Engine
Turn HTML/CSS files into a graphics
page (rendering)
01. JavaScript Engine
Reads the JavaScript code &
communicate with the browser runtime
enviroment
02.
6. 1. Enter theURL
2. Check the database resource
3. Get the HTML/CSS files to process
4. Parse the files separately
5. Do the same scenario forCSS
6. Attach styles to the HTML file
7. Rendering process to display theUI
7. JavaScript
Code
AST Compiler
parser interpreter
Define by the
programmer A kind of tree that each
nodes indicates an order
/ phrase
Compile process
Read the code &
familiar with the
syntax
Interprets the
codes line by line &
save the results
JavaScript Engine
8. What Happens InThe
Background
Code execution process
01
02
Writing The Code
• What programmer have written in a file.
• Human readable.
• The code is ready to parse now!
Parsing
• Reads the code
• Know the JavaScript rules & syntax
9. 03
04
Abstract Syntax Tree
Interpreter
• A type of Data Structure
• A tree which each node indicates a phrase
or an order
• Separate the code based on types, vars,
functions, etc.
• Codes interprets line by line
• Codes run
• Save the results in the storage (Heap &
Stack)
10. V8 JS Engine
1. freeand open-sourceJavaScript and
WebAssemblyengine
3.Compilethe wholecodebefore
interpret it & then run the code
2.All the web browsers switchedto
interpreter modeafterV8 release
4. New technologyin JavaScript
5. Finishes a compilation then run the
code
7.Compile& execution is doneat the same
time.
6.JIT compilation technology
8.Two compilersfor codeoptimization
11. Babel JS
Babel is a freeand open-sourceJavaScript transpiler that is mainlyused
to convert ECMAScript 2015+codeinto backwards-compatible
JavaScript codethat can be run by olderJavaScript engines.
It allowsweb developersto takeadvantage of the newest features of
the language.
12. Advantages
• Supports all JS new features
• Can be used in any browser
• Compatible with popular techs such as React
JS,TS,Gulp,Webpack
Disadvantages
• When Babel JS code is transpiled, the syntax is
changed, making the code more difficult to
understand when it is released in production
• When compared to the original code, the transpiled
code is larger
