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.