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
47
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
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
200
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
6.8k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.6k
Model Mondays S2E03: SLMs & Reasoning
nitya
0
350
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
7
5.1k
KiCadでPad on Viaの基板作ってみた
iotengineer22
0
290
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
230
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
100
プライベートクラウドでの効率的な証明書配布戦略 / Efficient Certificate Distribution Strategy in Private Cloud
lycorptech_jp
PRO
0
110
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
1
6.3k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
GitHub's CSS Performance
jonrohan
1031
460k
Facilitating Awesome Meetings
lara
54
6.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
4 Signs Your Business is Dying
shpigford
184
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
How GitHub (no longer) Works
holman
314
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.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