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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Nobuhito Ibaraki
May 22, 2018
Technology
640
0
Share
Rust+WebAssemblyでWebアプリは作れるのか
Nobuhito Ibaraki
May 22, 2018
More Decks by Nobuhito Ibaraki
See All by Nobuhito Ibaraki
ノーコード編集と配信パフォーマンスを両立するコンテンツエディタの開発
niba1122
1
380
フロントエンドの動向 From Google I/O 2018
niba1122
0
3.2k
potatotips_48茨木.pdf
niba1122
0
900
Activityの背景をぼかす
niba1122
2
1.5k
Other Decks in Technology
See All in Technology
Diagnosing performance problems without the guesswork
elenatanasoiu
0
150
Dynamic Workersについて
yusukebe
2
570
ルールやカスタム機能、どう使う?理想の出力を引き出すために今知りたいIBM Bob 5つの機能
muehara
1
310
新規ゲーム開発におけるAI駆動開発のリアル
202409e2
0
2k
トークン数だけでは測れない — Claude Code 組織展開の効果検証から学んだこと
makikub
0
110
TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する
shuta13
0
340
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
4
1.8k
Gradle×GitHub_ActionsでCI時間を約50%短縮 ジョブ分割の設計と落とし穴 / Cutting CI Time by ~50% with Gradle and GitHub Actions: Job-Splitting Design and Pitfalls
takatty
0
610
Spring Boot における AOT Cache 活用テクニックと 起動時間改善事例
ntt_dsol_java
0
200
Oracle AI Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
6
1.5k
AIを「創る」と「使う」の循環 — HRテックが実践するリアルなAI組織実装
taketo957
0
1k
20260528_生成AIを専属DSに_Howの次にすべきことを考える
doradora09
PRO
0
280
Featured
See All Featured
What does AI have to do with Human Rights?
axbom
PRO
1
2.2k
Scaling GitHub
holman
464
140k
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
160
Code Review Best Practice
trishagee
74
20k
Context Engineering - Making Every Token Count
addyosmani
9
930
The SEO identity crisis: Don't let AI make you average
varn
0
480
A Modern Web Designer's Workflow
chriscoyier
698
190k
Git: the NoSQL Database
bkeepers
PRO
432
67k
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
RailsConf 2023
tenderlove
30
1.5k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
220
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
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を書きましょう!
ご清聴ありがとうございました