Es build presentation
Download as PPTX, PDF0 likes70 views
Esbuild is an extremely fast JavaScript bundler. It works as both a compiler and transpiler, taking JavaScript source code as input and producing bundled output files. Traditionally, JavaScript modules had issues with installability, being scoped, and importability between modules. This led the JavaScript community to develop solutions like CommonJS, namespaces, module wrapping, and bundlers like Browserify, Webpack, Rollup, and Esbuild which address these issues by allowing code reuse through imports and exports. Esbuild is highlighted as a very fast bundler due to benchmark tests showing its faster performance compared to alternatives. The presentation demonstrates how to use Esbuild to bundle JavaScript code.
![● Compiler:
Is an umbrella term to describe a program that takes source
code written in one language and produce a (or many) output file
in some other language. In practice we mostly use this term to
describe a compiler such as gcc which takes in C code as input
and produces a binary executable (machine code) as output.
● Transpilers:
are also known as source-to-source compilers. So in
essence they are a subset of compilers which take in a source
code file and convert it to another source code file in some other
language or a different version of the same language that has a
similar level of abstraction. This output still has to go through a
compiler or interpreter to be able to run on the machine.
Recap about Compiling and Transpilling
(1)CPU-level (Binary)
(2)machine code
(3)assembly code
(4)[C/C++, JVM/bytecode]
(5)[JavaScript, Python]](https://image.slidesharecdn.com/esbuildpresentation-210304024519/85/Es-build-presentation-3-320.jpg)
Es build presentation
- 1. ESBUILD An extremely fast JavaScript bundler Presented by Abi Hannah
- 2. What is Esbuild? An extremely fast JavaScript bundler (Transpiller)
- 3. ● Compiler: Is an umbrella term to describe a program that takes source code written in one language and produce a (or many) output file in some other language. In practice we mostly use this term to describe a compiler such as gcc which takes in C code as input and produces a binary executable (machine code) as output. ● Transpilers: are also known as source-to-source compilers. So in essence they are a subset of compilers which take in a source code file and convert it to another source code file in some other language or a different version of the same language that has a similar level of abstraction. This output still has to go through a compiler or interpreter to be able to run on the machine. Recap about Compiling and Transpilling (1)CPU-level (Binary) (2)machine code (3)assembly code (4)[C/C++, JVM/bytecode] (5)[JavaScript, Python]
- 4. Summarize of what is being the trigger of modular nowadays A Javascript Story How we do it in the old days. The solution that comes up from Js Community Summarize Reason The Vanilla way The Answer
- 5. The Vanilla Way 01 The solution that comes up from Js Community
- 6. “This is how we usually install our dependency, in the old days.”
- 7. “This is the module pattern.” “The problem is declaring every var in highest order js will make it globally accessible by the lower order.”
- 8. “We could access utils freely, because it is defined in the global scope. If you have another module / library that named utils, they would have conflicted against each other.”
- 9. Summarize Reason 02 Summarize of what is being the trigger of modular nowadays
- 10. Is because Javascript Community thinking and grinding How to achieve: ● Installability - the ability to install easily ● Scopable - the ability of having clearly defined scoped/scaled within modules ● Importability - the ability to import modules freely without worry The Reason why the modular today!
- 11. The Answer 03 Summarize of what is being the trigger of modular nowadays
- 12. ● CommonJS It allows your JavaScript code to require and export other JavaScript modules. ● Namespace ● Wrap module wrap each module with a function to create a scope for each module ● Bower ● Browserify ● Webpack ● Rollup ● Esbuild Solutions that pops up ● CDN ● Node.js (NPM) {the problem not stop here} Importability Scopable Installability
- 13. And here come the NODE. Node.js is a runtime to run javascript on the server. Node Package Manager. What is this NODE? Then what is NPM?
- 14. What is Bundler? ● Bower ● Browserify ● Webpack ● Rollup ● Esbuild
- 15. A PICTURE IS WORTH A THOUSAND WORDS
- 16. Why Esbuild? BACK TO ESBUILD AND HOW TO USE IT
- 17. ITS CRAZY FAST!
- 18. … BENCHMARK TEST RESULT!
- 19. How to use Esbuild Lets Try It a bit
- 20. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik. Is there anyone who want to share something? mrivan7799@gmail.com Thanks! Please keep this slide for attribution.