[メモ] 進化するフロントエンド2021 -4プロダクトから学ぶSPA/PWAの技術と実践−

気になったことだけメモしておく
6/21 19:00 ~ 20:30 at Zoom
https://techplay.jp/event/819708

noteのフロントエンドApp分割

Web Componentsによる共通コンポーネントを検討してたが、SSRできないし、一方Stencil.jsはバンドルサイズ重い。
そこで（本番はまだらしいが）Svelte使ってるとこある。コード見る限りVue.jsでSvelteのComponent呼び出したりしてた

ビジュアルコラボレーションSaaS「Strap」 同時編集の実装と価値創出

株式会社グッドパッチ
2020年に公開したホワイトボードツール。カスタマージャーニーマップとかKPTとかそういう系のテンプレが最初からあって使うこともできる。

PixiJSというWebグラフィックスライブラリを使っている。解決できない問題もあったりして、pixi-cjk作ったりした

複数人同時編集などの課題解決のため、データ構造の問題を都度アップデートで解決していった話がメインだった（気がする

STUDIOのデザインエディタ設計

Firebase使ってる（Strapと同じ）。
エディタは編集に、ライブプレビューは反映に。

デザインエディタの構造について
レイヤーは上からハンドル→スクリーン・レンダラー（ズーム）→キャンバス。
・STUDIOはHTMLが最終成果物なのでレンダリングにはDOM (not canvas) を使っている。
・border 100,000px (!?): ブラウザ標準のスクロールを使っている、script走らない。ブラウザバックを防ぐ！！
・STUDIOのズームイン・アウト: Vue.jsのstateを書き換えずに直接styleのtransformを編集
　・ズームイン・アウト中は枠が消えていて、終わった後確定していた
・グリッドはcanvas

Blueprint機能のデモ
APIが返す配列に複数要素が対応できるので、オブジェクト1個のtitleとdescriptionなど構造を1つ設定すると他に反映できる