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 が実装、かつ、デザイン
    • 長期開発、運用に使える

    • 動的なデザイン

  • まずは開発者が便利に使えるツールを開発

  • 将来的にはデザイナーも開発者も使用

ktsn/vue-designer

@ktsn

ktsn