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
Rust+WebAssemblyでWebアプリは作れるのか
Search
Nobuhito Ibaraki
May 22, 2018
Technology
0
620
Rust+WebAssemblyでWebアプリは作れるのか
Nobuhito Ibaraki
May 22, 2018
Tweet
Share
More Decks by Nobuhito Ibaraki
See All by Nobuhito Ibaraki
ノーコード編集と配信パフォーマンスを両立するコンテンツエディタの開発
niba1122
1
360
フロントエンドの動向 From Google I/O 2018
niba1122
0
3.1k
potatotips_48茨木.pdf
niba1122
0
880
Activityの背景をぼかす
niba1122
2
1.5k
Other Decks in Technology
See All in Technology
Prox Industries株式会社 会社紹介資料
proxindustries
0
190
ECS障害を例に学ぶ、インシデント対応に備えたAIエージェントの育て方 / How to develop AI agents for incident response with ECS outage
iselegant
5
730
StrandsAgentsで構築したAIエージェントにMCP Apps機能を追加してみた
kmiya84377
0
120
#23 Turing × atmaCup 2nd 6th Place Solution + 取り組み方紹介
yumizu
0
130
AIエージェントに必要なのはデータではなく文脈だった/ai-agent-context-graph-mybest
jonnojun
1
560
Cosmos World Foundation Model Platform for Physical AI
takmin
0
1k
"共通化"と"Embed"のブレンドでスケール可能な運用を!M&Aを支えるGENDA SREの実践 / GENDA Tech Talk #3
genda
0
130
私たち準委任PdEは2つのプロダクトに挑戦する ~ソフトウェア、開発支援という”二重”のプロダクトエンジニアリングの実践~ / 20260212 Naoki Takahashi
shift_evolve
PRO
2
300
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
5
1.6k
Exadata Fleet Update
oracle4engineer
PRO
0
1.1k
量子クラウドサービスの裏側 〜Deep Dive into OQTOPUS〜
oqtopus
0
310
なぜ令和の今ゲームボーイを触るのか
kimkim0106
0
110
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
120
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.3k
Music & Morning Musume
bryan
47
7.1k
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Automating Front-end Workflow
addyosmani
1371
200k
Odyssey Design
rkendrick25
PRO
1
510
Done Done
chrislema
186
16k
Ten Tips & Tricks for a 🌱 transition
stuffmc
0
77
What's in a price? How to price your products and services
michaelherold
247
13k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
180
How STYLIGHT went responsive
nonsquared
100
6k
Transcript
Rust+WebAssemblyで Webアプリは作れるのか Meguro.es #15 Nobuhito Ibaraki @niba1122
Rustとは • Mozilla が開発 • 高速 • 安全 • 2016
年、 2017 年の Stack Overflow Developer Survey で「最も愛されて いるプログラミング言語」 で一位 (Wikipedia)
Rustとは • WebAssembly と連携 ◦ WebAssembly への コンパイルをサポート → emscripten
不要 ◦ cargo web で 簡単にビルドできる (https://github.com/kout e/cargo-web)
これだけじゃないんです
強力なマクロ • パターンマッチングを使いながら 自在に構文を拡張可能 • マクロでテンプレートエンジン を作れたりする! (maud とか )
maud (https://maud.lambda.xyz/) マクロ 言語の機能で JSX のような構文拡張が可能
Client Sideを扱う強力な ライブラリ:stdweb • Rust の中に JavaScript 風のマクロを 記述できる •
JavaScript の API を扱う インターフェース (alert とか query selector とか ) 簡単に DOM やイベントを扱える
JSXのような 構文拡張 DOMの 操作 +
Rust+WebAssemblyの フレームワークを作れるのでは?
世界初かもしれない・・・
そう甘くはなかった • 変数のライフタイムとの戦い ( コールバック実行時に変数の 生存を保証させるのが難しい ) • DOM のレンダリングと状態更新は
なんとか出来た • Component や Virtual DOM までは 実装できなかった rju(龍) (https://github.com/niba1122/rju)
自作フレームワークの実装で 四苦八苦している中・・・
yew https://github.com/DenisKolodin/yew/
yewとは • Elm や ReactJS の影響を受けた Rust フレームワーク ( 名前は
Vue.js に似てる? ) • Virtual DOM による差分更新 • Component • HTML ライクな記法 ( ちょっと癖はある )
Model 状態を持つ構造体 これに Renderable や Component トレイトを実装することで コンポーネントとしてレンダリング できる。
Template
Handle Event API Request Update State
Componentの 呼び出し
サンプルアプリ https://github.com/niba1122/rust_app
まとめ • yew を使えば Rust+WebAssembly でインタラクティブなアプリを作れる! • パフォーマンスもいいらしい https://github.com/DenisKolodin/yew/issues/5#issuecomment-354777076 •
JSer が Rust のライブラリをいきなり作るのはハード
Rust+WebAssemblyは • 型安全 • ビルドツール不要 • ハイパフォーマンス の素敵な世界です。 どなたか一緒にRustを書きましょう!
ご清聴ありがとうございました