知りたいこと

• どういう課題を持っているのかを知りたい
• デザイナーとの連携

共通のUIコンポーネント

• 宿題用のアプリと XXX
• デザインシステムの仕組み
  • ボタンのルール
  • 文字のルール
• デザインシステムのチームが直す
• ここに入っていない、野良のコンポーネントも存在する

  • 生徒が勉強するためのチームがいる

  • 自チームじゃないところを変更する時は、コードオーナーにみてもらう

  • デザインシステムやりたかった

  • PJがいっぱいある

    • 10個以上ある
    • ボタンやモバイル向けの無限ローディングなど、みんな使っているやつをまとめようという動きがある
    • リポジトリを分けて管理している
• 変更を加える時のオーナーはいる？
  得に決まっておらず、気づいた人が対応する
  npmのバージョンで管理している
  バグの場合はマイナーバージョンをあげている
  AngularとIonic用のまとめたものを使っている

まとめているというのはない
前まで使っているプロジェクトを引っ張ってくる感じ
業務系アプリなので、あまりスタイルが気にされるということがない

バージョン管理して、使う側の責任で進めるっていうのは、いいなと思った。
このデザインしかIFを提供しませんっていう風にしている。

ボタンとか、プロダクト側で個別に管理したいっていうのはない？
亜種のようなものを許容している。
デザインシステムに乗っ取って、その対応をしたのなら、デザインシステム側を変えて提供する

Angularのバージョンアップの時は、専門のチームがいる
プロダクト開発とは別にアーキテクト専門のチームがいる。
SSOやアプリなど、それぞれ別のチームがいる。

デザインシステムのチームがいる。

今の自分の状況がこんな感じなのかということがわかった。

まとめ
デザインシステム専門のチームで解決するパターン
専用の別リポジトリで切り出して、バージョンで管理
利用者の責任で使う

デザイナーとの連携

• figma使っているがずれる

  • storybookをfigmaからインポートできるプラグインがある。
  • 実装とfigmaが乖離するのに悩んでいる。

• XDで自分で作って、手で書き起こしているので、あまり悩んではいない。

• コンポーネント群の管理をしている

  • ただ、巨大になりすぎて、デザイナーが育たない。結構重いという状態になっている

• 専門チームで分けられたらいいが、人数的に難しい。

• figma上のボタンなどはデザイナーがせっせとやっていて、Angular側はエンジニアがせっせとやっている

• 変わって欲しいところが変わってない。齟齬のようなものが開発とデザイナー間で生まれている。

• デザイナーが増えてチームを分けてから、デザインシステムを意識して変えていった。

• オーナーの熱量も大事

• 人の数はフェーズにもよる

• 時間軸の参考にはなる

まとめ
デザイナーとのコミュニケーションは、専門のチームで進めている
課題に対するオーナーの熱量も大事

AG Gridを利用した、仮想スクロールによる高速テーブル描写

量の多いデータ表示をライブラリ活用でパフォーマンス改善。

ボトルネックの探し方

Chrome DevToolsのPerformanceタブを活用して、パフォーマンスのボトルネックを探す。

時間のかかっている処理をコンポーネントの関数名単位で表示してくれるので、どのコンポーネントがボトルネックになっているかわかる。

独自実装のStore

リファクタ用のストアを作成して、状態管理のリファクタを行う。

• Flux むずい
  • 最近NgXSを使っていて、状態のデバッグにRedux DevToolsを使っている
  • 「Reduxじゃなくても使えるの？」→「なんか使える。 多分AkitaとかそういうFluxライクなやつならだいたい使えるんじゃないかな？」

データのキャッシュ

めちゃくちゃ重いデータをとってくるAPIに対してどうするか？

ページネーションを行う。

あとはフロントエンドでのキャッシュ。

Interceptorでキャッシュしている事例などが挙がった。

Base64のめちゃデカデータと戦ってる話

すべてのデータをBase64で取ってくる戦略を取ったところ、データがめちゃくちゃ重くなって大変な思いをしている。
どうする？

• Base64だと楽だけどサイズ重くなるよね、3倍くらい
• 分割してとってくる？ 文字列だからぶった切れそう
• 圧縮はしてる
• deflate.jsとかでデータ圧縮をするとか…… でもそのへんは結局サーバー側がgz2圧縮とかやってるはずだから、あまり意味はなさそう
• 暗号化(難読化？)したかった
• 画像をそのままとってくるのがサイズ的にはいい