Recommended
Recommended
More Related Content
Similar to BabelJS, JS functionality, transpilers & browsers
Similar to BabelJS, JS functionality, transpilers & browsers (20)
Recently uploaded
Recently uploaded (20)
BabelJS, JS functionality, transpilers & browsers
- 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
- 13. ES6: ES5:
- 16. Thank You BabelJS, JS functionality, transpilers & browsers 21/05/2023 By ParhamAbolghasemi,