Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webpack & WebAssembly
Search
Sendil Kumar N
June 01, 2018
Technology
0
580
Webpack & WebAssembly
Sendil Kumar N
June 01, 2018
Tweet
Share
More Decks by Sendil Kumar N
See All by Sendil Kumar N
[Heapcon-2023] Building High Performance Web Applications
sendilkumarn
0
88
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
190
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
21
Designing High Performance React Applications
sendilkumarn
1
160
Batching, Suspense, and Server Components
sendilkumarn
0
49
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
60
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
120
Easy Microservices with K8s & Istio
sendilkumarn
0
99
KHipster - Kotlin Hipster
sendilkumarn
0
250
Other Decks in Technology
See All in Technology
Frontier Airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
frontierairlineswithflyagent
0
100
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
390
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
20
5.5k
セキュアなAI活用のためのLiteLLMの可能性
tk3fftk
1
590
Data Engineering Study#30 LT資料
tetsuroito
1
520
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
160
地図と生成AI
nakasho
0
550
Expertise as a Service via MCP
yodakeisuke
0
120
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
210
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
そもそも AWS FIS について。なぜ今 FIS のハンズオンなのか?などなど
kazzpapa3
2
110
Ktor + Google Cloud Tasks/PubSub におけるOTel Messaging計装の実践
sansantech
PRO
1
200
Featured
See All Featured
Scaling GitHub
holman
461
140k
KATA
mclloyd
30
14k
A Modern Web Designer's Workflow
chriscoyier
695
190k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Ace a Technical Interview
jacobian
278
23k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Balancing Empowerment & Direction
lara
1
480
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Speed Design
sergeychernyshev
32
1k
Transcript
Webpack @sendilkumarn WebAssembly
Sendil Kumar N • Full stack developer @Xebialabs
Sendil Kumar N • Full stack developer @Xebialabs • Core
dev team member @JHipster
Sendil Kumar N • Full stack developer @Xebialabs • Core
dev team member @JHipster • Team member @webpack
Sendil Kumar N • Full stack developer @Xebialabs • Core
dev team member @JHipster • Team member @webpack • Part of rust-wasm Working Group
Sendil Kumar N • Full stack developer @Xebialabs • Core
dev team member @JHipster • Team member @webpack • Part of rust-wasm Working Group • Big open source lover
Full stack developers?
C++ devs?
None
None
WebAssembly ?
What is WebAssembly?
Binary instruction format 1010110 1010110 1010110 1010110 1010 1010110 1010110
1010110 1010110 1010
stack based machines 1010110 1010110 1010110 1010110 1010 1010110 1010110
1010110 1010110 1010 Binary instruction format for
Most efficient representation of instructions in binary 1010110 1010110 1010110
1010110 1010 1010110 1010110 1010110 1010110 1010
What, well in other words?
Run your native code in web.
Implementation detail for high level languages
Why WebAssembly?
Where “Performance” matters
JavaScript ?
WebAssembly is not a replacement to Javascript
None
❤ We
❤
❤ We
Javascript is fast
Interpreted language Write it Execute it
It is compiled too Write it Execute it Compile it
Optimise it
Then what is the benefit with WebAssembly ?
Where you need “Maintainable Performance”
Wait, What is maintainable performance?
High performance with Maintainable code
Geeky code
Uncertainties
Performance loopholes
Okay, I am writing Javascript for 15 years.
Well, lets test it
Tell me which is having higher performance
A B
A B ✅
Optional args will have an impact on your performance…
Monomorphisation
Memoization
Debug with profiler
Used Webpack?
❤Webpack❤
Okay, isn’t webpack a JS bundler?
Webpack is a bundler for your frontend.
Webpack is a new LLVM Unpopular
It bundles / packs everything that you need
Actually, how your application needs
Actually, how your application needs code-splitting / DCE
WP 4 - announced WebAssembly support.
From WP4.8 we have a better WebAssembly support
WP5 will have even better WebAssembly support
Demo time lets pack and roll with webpack
Demo agenda
Create a Rust project
Use Wasm bindgen to create wasm files + binding JS
files.
Make that rust project into node project
Add web pack + web pack serve to it
Run it…
Enough demo it…
Other mentions
Streaming compilation
WP internals may be / will be in Rust
In future
Garbage collection
Dom Manipulation
JVM devs ?
Kotlin ?
Questions?
Happy Hacking