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
520
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
71
Building Reactive Microservices with Kotlin & running on Kubernetes
sendilkumarn
0
150
Building Reactive Microservices with JHipster & K8s
sendilkumarn
0
18
Designing High Performance React Applications
sendilkumarn
1
140
Batching, Suspense, and Server Components
sendilkumarn
0
33
DevNexus_Building_with__Zero_Trust_Architecture_Copy.pdf
sendilkumarn
0
55
Lessons Learnt with Visual Testing and Snapshots
sendilkumarn
0
100
Easy Microservices with K8s & Istio
sendilkumarn
0
85
KHipster - Kotlin Hipster
sendilkumarn
0
210
Other Decks in Technology
See All in Technology
ライブラリでしかお目にかかれない珍しい実装
mikanichinose
2
330
AIチャットボット開発への生成AI活用
ryomrt
0
110
GraphRAGを用いたLLMによるパーソナライズド推薦の生成
naveed92
0
190
これまでの計測・開発・デプロイ方法全部見せます! / Findy ISUCON 2024-11-14
tohutohu
3
190
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
Microsoft MVPになる前、なってから/Fukuoka_Tech_Women_Community_1_baba
nina01
0
170
マルチモーダルデータ基盤の課題と観点
neonankiti
1
110
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
2.6k
エンジニアが一生困らない ドキュメント作成の基本
naohiro_nakata
2
140
AWS⼊社という選択肢、⾒えていますか
iwamot
2
1.1k
mikroBus HAT を用いた簡易ベアメタル開発
tarotene
0
260
スクラムチームを立ち上げる〜チーム開発で得られたもの・得られなかったもの〜
ohnoeight
1
280
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
51
4.9k
Designing for Performance
lara
604
68k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Speed Design
sergeychernyshev
24
600
What's new in Ruby 2.0
geeforr
343
31k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
505
140k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
The Language of Interfaces
destraynor
154
24k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
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