SlideShare a Scribd company logo
 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
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
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
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.
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.
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
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
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
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)
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
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.
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
ES6: ES5:
Recourses:
https://www.youtube.com/watch?v=tM_S-pa4xDk
https://undraw.co/
https://storyset.com/
https://www.codingninjas.com/codestudio/library/introduction-to-babel
https://hashnode.com/post/compiling-vs-transpiling-cl0z2hugi0cjhj6nv6pp6a1j3
https://levelup.gitconnected.com/how-is-typescript-transpiled-to-javascript-e4493727bd9c?gi=2e9cc1df3213
https://www.ecma-international.org/
https://www.roxo.ir/what-is-babel
https://medium.com/@mrajaeim/babel-the-key-to-using-the-latest-javascript-features-in-any-environment
https://babeljs.io/repl#?browsers=defaults&build=&builtIns=false&core
https://babeljs.io/
https://www.youtube.com/watch?v=AE-TfB6jGtw&list=PL_euSNU_eLbejfEUD0msUF8xf_Zjz2f8r
https://github.com/jarble/list-of-transpilers
https://www.youtube.com/watch?v=DuSURHrZG6I
https://www.youtube.com/watch?v=p-iiEDtpy6I
https://babeljs.io/repl#
https://carbon.now.sh
https://www.npmjs.com/package/@babel/parser
Thank You
BabelJS, JS functionality, transpilers & browsers
21/05/2023
By ParhamAbolghasemi,

More Related Content

Similar to Babel.pptx

Java script
Java scriptJava script
Java script
19TUIT038KAVIARASUM
 
Busy developer-html5-javaee7
Busy developer-html5-javaee7Busy developer-html5-javaee7
Busy developer-html5-javaee7Geertjan Wielenga
 
A sneak peek into the similarities and differences between java and java script
A sneak peek into the similarities and differences between java and java scriptA sneak peek into the similarities and differences between java and java script
A sneak peek into the similarities and differences between java and java script
AMC Square
 
intoduction to java
intoduction to javaintoduction to java
intoduction to java
SIVASHANKARIRAJAN
 
Simple tweaks to get the most out of your JVM
Simple tweaks to get the most out of your JVMSimple tweaks to get the most out of your JVM
Simple tweaks to get the most out of your JVM
Jamie Coleman
 
javascript 1
javascript 1javascript 1
javascript 1
osman do
 
Simple tweaks to get the most out of your jvm
Simple tweaks to get the most out of your jvmSimple tweaks to get the most out of your jvm
Simple tweaks to get the most out of your jvm
Jamie Coleman
 
ASP.NET Session 1
ASP.NET Session 1ASP.NET Session 1
ASP.NET Session 1Sisir Ghosh
 
2-Lec - History of OOP and Java (1) .ppt
2-Lec - History of OOP and Java  (1) .ppt2-Lec - History of OOP and Java  (1) .ppt
2-Lec - History of OOP and Java (1) .ppt
AqeelAbbas94
 
Eric grover strategies for sharing code with windows 8 and windows phone 8 ...
Eric grover   strategies for sharing code with windows 8 and windows phone 8 ...Eric grover   strategies for sharing code with windows 8 and windows phone 8 ...
Eric grover strategies for sharing code with windows 8 and windows phone 8 ...
Eric Grover
 
Prelims Coverage for Int 213
Prelims Coverage for Int 213Prelims Coverage for Int 213
Prelims Coverage for Int 213Jeph Pedrigal
 
Java performance tuning
Java performance tuningJava performance tuning
Java performance tuning
Jerry Kurian
 
Top 10 IDEs for React.js Developers in 2021
Top 10 IDEs for React.js Developers in 2021Top 10 IDEs for React.js Developers in 2021
Top 10 IDEs for React.js Developers in 2021
WrapPixel
 
Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
Jayanga V. Liyanage
 
InfluxDB 2.0 Client Libraries by Noah Crowley
InfluxDB 2.0 Client Libraries by Noah CrowleyInfluxDB 2.0 Client Libraries by Noah Crowley
InfluxDB 2.0 Client Libraries by Noah Crowley
InfluxData
 
PHP Frameworks & Introduction to CodeIgniter
PHP Frameworks & Introduction to CodeIgniterPHP Frameworks & Introduction to CodeIgniter
PHP Frameworks & Introduction to CodeIgniterJamshid Hashimi
 
.Net overviewrajnish
.Net overviewrajnish.Net overviewrajnish
.Net overviewrajnishRajnish Kalla
 
VivaCore FAQ
VivaCore FAQVivaCore FAQ
VivaCore FAQ
PVS-Studio
 
Onlne Retail Management By Jitendra
Onlne Retail Management By JitendraOnlne Retail Management By Jitendra
Onlne Retail Management By JitendraJitendra
 

Similar to Babel.pptx (20)

Java script
Java scriptJava script
Java script
 
Busy developer-html5-javaee7
Busy developer-html5-javaee7Busy developer-html5-javaee7
Busy developer-html5-javaee7
 
A sneak peek into the similarities and differences between java and java script
A sneak peek into the similarities and differences between java and java scriptA sneak peek into the similarities and differences between java and java script
A sneak peek into the similarities and differences between java and java script
 
intoduction to java
intoduction to javaintoduction to java
intoduction to java
 
Simple tweaks to get the most out of your JVM
Simple tweaks to get the most out of your JVMSimple tweaks to get the most out of your JVM
Simple tweaks to get the most out of your JVM
 
javascript 1
javascript 1javascript 1
javascript 1
 
Simple tweaks to get the most out of your jvm
Simple tweaks to get the most out of your jvmSimple tweaks to get the most out of your jvm
Simple tweaks to get the most out of your jvm
 
ASP.NET Session 1
ASP.NET Session 1ASP.NET Session 1
ASP.NET Session 1
 
Introduction to .net
Introduction to .netIntroduction to .net
Introduction to .net
 
2-Lec - History of OOP and Java (1) .ppt
2-Lec - History of OOP and Java  (1) .ppt2-Lec - History of OOP and Java  (1) .ppt
2-Lec - History of OOP and Java (1) .ppt
 
Eric grover strategies for sharing code with windows 8 and windows phone 8 ...
Eric grover   strategies for sharing code with windows 8 and windows phone 8 ...Eric grover   strategies for sharing code with windows 8 and windows phone 8 ...
Eric grover strategies for sharing code with windows 8 and windows phone 8 ...
 
Prelims Coverage for Int 213
Prelims Coverage for Int 213Prelims Coverage for Int 213
Prelims Coverage for Int 213
 
Java performance tuning
Java performance tuningJava performance tuning
Java performance tuning
 
Top 10 IDEs for React.js Developers in 2021
Top 10 IDEs for React.js Developers in 2021Top 10 IDEs for React.js Developers in 2021
Top 10 IDEs for React.js Developers in 2021
 
Javascript best practices
Javascript best practicesJavascript best practices
Javascript best practices
 
InfluxDB 2.0 Client Libraries by Noah Crowley
InfluxDB 2.0 Client Libraries by Noah CrowleyInfluxDB 2.0 Client Libraries by Noah Crowley
InfluxDB 2.0 Client Libraries by Noah Crowley
 
PHP Frameworks & Introduction to CodeIgniter
PHP Frameworks & Introduction to CodeIgniterPHP Frameworks & Introduction to CodeIgniter
PHP Frameworks & Introduction to CodeIgniter
 
.Net overviewrajnish
.Net overviewrajnish.Net overviewrajnish
.Net overviewrajnish
 
VivaCore FAQ
VivaCore FAQVivaCore FAQ
VivaCore FAQ
 
Onlne Retail Management By Jitendra
Onlne Retail Management By JitendraOnlne Retail Management By Jitendra
Onlne Retail Management By Jitendra
 

Recently uploaded

Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Product School
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
KatiaHIMEUR1
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 

Recently uploaded (20)

Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !Securing your Kubernetes cluster_ a step-by-step guide to success !
Securing your Kubernetes cluster_ a step-by-step guide to success !
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 

Babel.pptx