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
ElmでつくるSVGエディタ
Search
aratama
December 06, 2019
Programming
0
320
ElmでつくるSVGエディタ
2019/12/07 ELMP1 の登壇資料です
https://elm-jp.connpass.com/event/156016/
aratama
December 06, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Ruby Pattern Matching
bkuhlmann
0
940
Deep Dive into React Stream/Serialize
mugi_uno
3
760
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
Ruby GitHub Packages
bkuhlmann
0
650
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
350
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
230
slow types ってなんだろう?
karad
0
180
SIMD Parallel Programming with the Vector API
josepaumard
0
240
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.4k
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
170
Fast JSX: Don't clone props object #28768
yossydev
1
220
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Web Components: a chance to create the future
zenorocha
306
41k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
The Cult of Friendly URLs
andyhume
74
5.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Why Our Code Smells
bkeepers
PRO
331
56k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Transcript
ElmでつくるSVGエディタ Alterinkのつくりかた 2019/12/07 ELMP1 Cubbit 1
自己紹介 • Twitter (@cubbit2) • Qiita (@hiruberuto) • GitHub (@aratama)
名前:Cubbit いちばん好きな言語:PureScript ふだんのお仕事:総務&ひとり情シス 2
今回お話しすること • 最近Elmで作っているモノの紹介 • 言語の基礎/Elmアーキテクチャ • Elmの良かったところ/大丈夫だったところ ◦ 変わり続けるデータ構造 ◦
フリーダムなモジュール分割 • Elmで辛かった/うまくいかなかったところ ◦ 『コンポーネント』とのつきあいかた ◦ エゲツない最適化 • Elmたのしいよ! 3
いまElmで作っている アプリケーションの紹介 Elmで何がつくれる? どこまで作れる? 4
アプリの紹介1 概要 • 名前は Alterink • Elm製のウェブアプリケーション(+Firebase) • Scalable Vector Graphics
(SVG)のエディタ ウェブサイト:https://alterink.app/ リポジトリ:https://github.com/aratama/alterink 5
アプリの紹介2 画面と機能 6
アプリの紹介3 コンセプト • Ad◯be Illustrat◯r/InkScapeなどの代替 • ウェブアプリケーション ◦ ブラウザのSVGレンダラと互換 ◦ マルチプラットフォーム
• データ構造や操作がSVGベース ◦ SVG手書き勢も直感的に使えるエディタ 7
スライド2枚でわかる おさらいElm 8
Elmの言語仕様の特徴 • 静的型付け • 純粋関数型(式がぜんぶ純粋) • カスタム型(代数的データ型) • The Elm
Architecture / 仮想DOM • ポート 9
The Elm Architectureとは update view Msg Cmd 外の世界(生DOM・生JavaScriptの世界) Msg Model
Model データストア Model HTML描画 UIイベント発生! 10 (ポート)
Elmを使ってよかったところ! 大丈夫だったところ! 11
データ構造1 • データ構造を修正すると、修正 はアプリケーション全体に波及 する。データ構造は超大事 • でも、データ構造というものは 変化し続ける…… 12
データ構造2 データ構造の変遷 ①試作段階。 限られた 図形のみ ②SVGの データ構造に 対応 ③編集時に 必要なデータを 付加
→Elmではデータ構造の変更は恐れなくていい! ④最適化 13
モジュール分割1 モジュールをどのようにわけるべきか? Elmを始めた誰もが一度は悩むポイント 14
モジュール分割2 とりあえずの結論: 細かいことは気にするな! Elmは安全な言語なので、 あとで幾らでも安全に直せる。 15
モジュール分割3 べからず集 • 事前に綿密にモジュールの設計を頑張るな • ファイルが大きくなってもあまり気にするな • MVC的に分けるのはやめとけ • 『コンポーネント』にしようとするな 公式ガイド
『Webアプリケーションの構造化』より: 16
モジュール分割4 べし集 • まずはページごとにモジュールを分けよう • 何らかのデータ型とそれに付随する関数とい うまとまりが見つかったら、そこで切り分け てもいい • 『コンポーネント』を作るのではなくて、た だのビューの関数を作ろう
公式ガイド 『Webアプリケーションの構造化』より: 17
しかし肥大化し続ける Msg と update • Msg のヴァリアントの数は 100 以上 •
update の case-of 文も巨大に →分割してもあまりメリットはなく、むしろ 複雑さを増すと判断。単純さを選択 18
Elmでつらかったところ うまくいかなかったところ…… 19
コンポーネント1 欲しかったもの 20 既存のもの simonh1000/elm-colorpicker 欲しかったもの
コンポーネント2 再利用のジレンマ 21 • 複雑な機能ほど、既存のものを流用したい • でも、複雑な機能ほど自分の要求を満たしにくい • 高度にカスタマイズできるコンポーネントは困難 ▶単純なコンポーネントを組み合わせて、 自作せざるを得ないことが多い……
最適化つらいよ1 portにすがりつけ Elmで書かれたXMLパーサが遅すぎ て、SVGファイルの読み込みに時間 がかかりすぎる…… →port越しで DOMParser (強引) 22
最適化つらいよ2 自力でキャッシュ d属性(パスの描画命令)のパースと 結合が遅くてもたつく。数ミリ秒以 内に終わらせたい →属性値を (List Point, String)とい うように元の文字列とパース済みの 値を組にして保持する
23
最適化つらいよ3 仮想DOMがもどかしい SVGの埋め込み画像は巨大な Data URI 。再描画のたびにめっちゃもた つく…… →URL.createObjectURL (強引) 24
まとめ • シンプルで安全な言語仕様が嬉しい • つらいときもあるけど、だいたいなん とかなるよ Elmたのしいよ! 25