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
91
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
190
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
23
Designing High Performance React Applications
sendilkumarn
1
170
Batching, Suspense, and Server Components
sendilkumarn
0
52
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
63
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
120
Easy Microservices with K8s & Istio
sendilkumarn
0
99
KHipster - Kotlin Hipster
sendilkumarn
0
260
Other Decks in Technology
See All in Technology
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
600
モバイルアプリ研修
recruitengineers
PRO
2
220
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
380
OpenAPIから画面生成に挑戦した話
koinunopochi
0
150
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
180
モダンフロントエンド 開発研修
recruitengineers
PRO
2
260
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
5
660
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
1
140
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
570
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
2
4.5k
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
280
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
A designer walks into a library…
pauljervisheath
207
24k
Rails Girls Zürich Keynote
gr2m
95
14k
Thoughts on Productivity
jonyablonski
69
4.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Facilitating Awesome Meetings
lara
55
6.5k
Site-Speed That Sticks
csswizardry
10
780
Optimizing for Happiness
mojombo
379
70k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Practical Orchestrator
shlominoach
190
11k
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