Vue Fes Japan 2018.11.3
デザイン
実装
UX
情報設計
アクセシビリティ
スタイルガイド
...など
コード設計
状態管理
レスポンシブ
アニメーション実装
...など
Dreamweaver デザインビュー
vuegg
Framer X
SFC (.vue ファイル) が実装、かつ、デザイン
長期開発、運用に使える
動的なデザイン
基礎を作り上げる
まずは開発者が使って便利なもの
GUI 完結ではなく、コードと並べて使う
github.com/ktsn/vue-designer
AST
SFC
パーサー
レンダラー
WebSocket
GUI
解析・コード生成
GUI操作
プレビュー上の変更は SFC に反映される
SFC を変更するとプレビューも変わる
TypeScript のみサポート
今はあまりサポートを増やすつもりはない
やりたい人がいればどうぞ
{{ exp }}
v-for
<slot>
...
AST
<VueNode :data="ast" />
描画するだけでなく任意の処理を挟めるようにしたい
D&D で UI 構築
ガイドの表示
ノードの選択
大体は実装済み
意外にエッジケースが多い
Vue のレンダラを使う方法も模索したい
エディター連携
コード解析
...
WebSocket
プレビュー
GUI 操作
...
他のエディターに対応しやすい
デザイナー向けにスタンドアローン版を作るとか
ホストにつないで共同編集するとか
長期開発、運用に使える
動的なデザイン
まずは開発者が便利に使えるツールを開発