「デザインツールをつくりなおす話」

Vue.js Tokyo v-meetup #8

甲斐 啓真

@keimakai1993

CPO @ STUDIO Inc.

甲斐 啓真

UI Designer

Interaction Designer

Frontend Engineer

@keimakai1993

「STUDIO」知っている人🖐

コードを書かないでWebサイトが作れる、

Webデザインプラットフォーム

ユーザー数、約2万人

海外ユーザー比率、約50%

Product Hunt 1位

Editor

Publish

LivePreview

1年前の  Vue.js Tokyo v-meetup #4

「Vueでデザインツールを作った話」

1年前はほとんど一人でフロント作ってた

フロントエンドエンジニアが増えた!!

※副業も含む

「デザインツールをつくりなおす話」

開発中のプロトタイプも見せます!

※つぶやいても問題ないです。

平成最後の夏

Team STUDIOは、千葉に集結していた。

Team STUDIOは、千葉に集結していた。

Team STUDIOは、千葉に集結していた。

STUDIOを約1ヶ月かけて、

大規模改修をすることが決定した。

今回のタイミングで機能的に新しくなるのは、

主に以下の2つ

コンポーネント化

三代目D&D

しかし、

Vue1系の時から2年半続く既存のコードを

増築する限界を感じ、

つくりなおすことになった。

主な負債の例①

Vue.js 2以降無くなった、

$dispatch$broadcast に対応するための、

event hub の通知が飛び回ってる

主な負債の例②

参照渡しされたオブジェクトの深い部分を、

コンポーネント内で直接書き換えてる。

 

=> どのコンポーネントが書き換えた分からない

view.style.border = '1px solid #000'

主な負債の例③

所々に混ざる、jQuery + jQuery UI

jquery-uiの、draggable、resizeableは

UIライブラリとして極めて良く出来ていて、

今までのSTUDIOを作る上でとても助けられました。

主な負債の例④

ドラッグ&ドロップの部分を、

誰も触りたがらない

コンポーネント化

Vueコンポーネントはよく使うが、

コンポーネントという機能はどう作るのか。

コンポーネントとは何か?

Sketch: Symbol

Figma: Component

Vue: Vue Component (.vue )

共通パーツ

雑に解釈すると、

上書きできる

override or props

コンポーネントのイメージ

FigmaのComponentを使用

別の解釈

UIパーツは必ず何かしらのデータと紐づく

りんご

"りんご"というstringのデータ

  というimageのデータ

別の解釈

コンポーネントは必ずオブジェクトと

紐付けられるのでは?

現在開発中のコンポーネント機能の紹介

今まで通りに

ボックス(≒ element)を組み合わせて

パーツを作成

⌘ + K でコンポーネント化

データが増えると自動的に繰り返し

v-for="data in datas"

ネストしたデータにも対応

開発中の最新版のデモ

三代目 D&D

現在のD&Dは二代目

「使い方に癖がある」などとよく言われる

=> 直感に反する挙動をする事がある

ボックス内に入れようと思ったら逃げる

よろしくない挙動①

左のボックスの下に置けない

よろしくない挙動②

なぜ発生するか?

ボックスモデルに準拠したレイアウトモデル

基本的にflex-boxのレイアウトを採用

二代目D&Dの設計がイケてない

というよりは、

イケてるD&Dを開発中!!

三代目D&D

開発中の最新版のデモ

おわりに

「インフラ・バックエンドエンジニア」

STUDIOでは、Vue.js が好きな

募集しています

kubernetes・Larabel(Lumen)

ご清聴ありがとうございました。