Vue Designer: デザインと実装の統合
Vue Fes Japan 2018.11.3
@ktsn (katashin)
Software Engineer at ClassDo
Vue Designer: デザインと実装の統合
Web アプリ・サイト開発
デザイン
実装
UX
情報設計
アクセシビリティ
スタイルガイド
...など
コード設計
状態管理
レスポンシブ
アニメーション実装
...など
デザイナー
開発者
デザインと実装が分かれる問題
みんなが解決しようとしている
Dreamweaver デザインビュー
vuegg
Framer X
ほしいデザインツール
SFC (.vue ファイル) が実装、かつ、デザイン
長期開発、運用に使える
動的なデザイン
直近の目標
基礎を作り上げる
まずは開発者が使って便利なもの
GUI 完結ではなく、コードと並べて使う
Vue Designer
github.com/ktsn/vue-designer
AST
SFC
パーサー
サーバー
クライアント
レンダラー
WebSocket
GUI
解析・コード生成
GUI操作
SFC が唯一のデータ
プレビュー上の変更は SFC に反映される
SFC を変更するとプレビューも変わる
実際のコードがデータ
開発の任意のフェーズで使える
プレビュー上でデザイン
デザインが動的
SFC の静的解析
vue-eslint-parser
@babel/parser
postcss
AST
- プレビューのレンダリング
- 意味解析
- props / data
- あたってるスタイル
- import してるコンポーネント
- GUI 上の操作との対応付
- コード編集・生成
プリプロセッサ
TypeScript のみサポート
今はあまりサポートを増やすつもりはない
やりたい人がいればどうぞ
Vue のレンダラの再実装
{{ exp }}
v-for
<slot>
...
AST
<VueNode :data="ast" />
なぜ再実装したか
描画するだけでなく任意の処理を挟めるようにしたい
D&D で UI 構築
ガイドの表示
ノードの選択
実装してどうだったか
大体は実装済み
意外にエッジケースが多い
Vue のレンダラを使う方法も模索したい
サーバー / クライアント
エディター連携
コード解析
...
WebSocket
サーバー
プレビュー
GUI 操作
...
クライアント
当時の VSCode の WebView が
想定してない使い方だったため
他のエディターに対応しやすい
デザイナー向けにスタンドアローン版を作るとか
ホストにつないで共同編集するとか
メリット
デバッグ時も楽
- 普通のブラウザで動作確認できる
- 開発ツールが使える
- Chrome devtool
- Vue devtool
v1.0.0 までの展望
開発者が使って便利なものにする
Preview tool of SFC
Chrome devtools on VSCode
Layouting tool
アイデア
npm install
element-ui
vuetify
vuesax
quasar-framework
とするだけでデザインで使える
デザイナーと開発者が
GitHub で同じコードを編集
コンポーネントカタログの
自動生成
まとめ
- デザインと実装が分かれることによる問題
- デザインと実装を統合したい
- SFC が実装、かつ、デザイン
-
長期開発、運用に使える
-
動的なデザイン
-
まずは開発者が便利に使えるツールを開発
- 将来的にはデザイナーも開発者も使用
