フロントエンドUIコンポーネントライブラリの適切な使用方法

私が現在の商用プロジェクトに取り組んだとき、VUETIFYをVueのコンポーネントライブラリとして使っていることに気づきました.jsアプリ.
技術的な負債の負荷が解決し、Vuetifyの実装はそれらの1つだけだった.
最初に、我々はバージョンをアップグレードする必要がありました-それはV 1にありました.2020年7月に終了した.はい、V 2.Xには多くの変更があります.
正しくVuetifyを使用していないため、この更新プログラムは数週間かかった.
しかし、アップグレード後だけでなく、実装をリファクタリング、我々は任意の破壊更新プログラムを滑らかにするための方法を発見した数時間トップ.
閉じるこの動画はお気に入りから削除されています.ここでの例はVuetifyにありますが、その背後の理論はすべてのコンポーネントライブラリに適用されます.

我々の実装における最大の問題
正直に言うと、私はこれらの図書館が嫌いだ.私は、ちょうどゼロからすべてをするのが好きです.しかし、私は多分ちょうど純粋なHTML/CSS/JS狂です.
それでも、何度もやった後、そのプロセスはとてもなめらかでシンプルです.そして、外部の依存関係からのどんな圧力なしででも、あなたはコードの完全な制御をします.
しかし、最初は選択肢がなかった.我々のアプリは大規模な、それはVuetifyを使用して、我々はそれをアップグレードする必要があります.私たちは多くのコンポーネントを使用しますv-btn , v-dialog , v-checkbox , v-select , など
使いましょうv-btn 例として.
最近の任意のWebアプリケーションと同様に、我々のアプリは多くのボタンがあります.それらを実装するために、我々はちょうどVuetifyの(または他のライブラリの)ドキュメントをチェックし、魔法を明らかにする必要があります.
ああ、クール.したがって、初期設定の後にする必要があります.

<v-btn>Some text</v-btn>

そして、それはすべての特典とボタンをレンダリング!
しかし、私はその背景色を変えて、それを丸くしたいです.もう一度医者をチェックさせてください.驚くべきことなので、こうする必要があります.

<v-btn
  color="#232323"
  rounded
>
  Some text
</v-btn>

そして、私はCSSなしで私のスタイルのボタンを得ることができます!
私もいくつかの他の場所でボタンが必要ですが、それは少し異なるスタイルになります.レットミーレンダリング<v-btn …props /> 再び.
このコンポーネントを使用するアプリケーションの多くの場所があります.前回チェックしたのは423でした.
それはVuetifyがV - BTNのために変化を壊すことでアップデートを出すならば、我々はアプリの上で423の場所でその実現を変えなければならないでしょう.
しかし、我々はちょうどボタンを使用しません.そのコンポーネントの多くを使用しますcodebaseの上の3200 +時間.
Vuetifyのこの歴史的なバージョンを更新するには、手動で各コンポーネントを更新する必要があります.
そしてもちろん、我々はすべてをテストする必要がありました.だからこそ、私たちは数週間かかったし、会社の多くのお金の地獄のコストです.

第1課v - btnを一度だけ使う
うーん、それはどうですか.私はアプリでボタンを使用して423の場所を持って、なぜ私は1つだけでそれを許可していますか?
このパターンを使用するには、コンポーネントを作成します.それを呼びましょうapp-btn .
そのコンポーネントでは、レンダリングされますv-btn . それはあなたがそれを見つけることができるCodeBaseの唯一の場所です.app-btn そのスタイルを操作する多くの小道具を受け入れる.ボタンのバージョンについては、デザイナーに同意した後、変換することができますapp-btn 小道具v-btn 小道具
簡単にするために、2つのスタイルに同意したとしましょう.primary and secondary .primary ボタンのスタイルは、青色の背景色をしています.secondary 透明な背景があります.
あなたならばapp-btn 小道具としてプライマリを得るcolor="blue" to v-btn .
あなたならばapp-btn 柱として二次を得ます、あなたは通りますtext to v-btn .
なぜそんなことをするのですか.
さて、もしVuetifyがどんな変化をもたらすのかv-btn そして、名前を変えましょうcolor to background-color , or text to flat , あなたは1つの場所だけでリファクタリングする必要があります.
これで数週間は節約できます.
私はあなたもあなたのアプリケーションのテストを書くと仮定します.データのテスト属性を使用しますか?彼らの配置は時々Vuetifyアップグレード時に変更されます.
つまり、テストのリファクタリングも同様です.
それは予想外のバグの負荷を意味する.

ボーナス:一貫性
チェックしましょうv-btn API.現在、それは47の異なる小道具を受け入れます.そのうちのいくつかはブール値、いくつかの数、いくつかの文字列です.
それはあなたがそれらのすべてを組み合わせることにより、ボタンの数百、数千の異なるスタイルを持つことができることを意味します.
しかし、あなたはそれをしたくない-あなたのアプリがひどい見て!
あなたはちょうどいくつかのボタンのバリアントを持っているし、それです.
使用によってapp-btn ‘s限られた小道具は、正確にそれを達成することができます.あなたはそれらのすべての47を必要としない.

レッスン2 .無駄なコンポーネント
私は、ライブラリ内のコンポーネントのいくつかは非常に有用であることができます-特に、HTML/CSSの知識をたくさん持っていない場合に同意します.
ダイアログの実装はトリッキーです.
あなたの何人かは、この1つで私に同意しません-しかし、多くの構成要素はちょうどナンセンスです.v-flex はdiv with display: flex; . 純粋なCSS/SCSSとHTMLでそれを正確に書くだけで、それは簡単でありませんか?
そうすることで、Webのコアを学ぶ.フロントエンドフレームワークとライブラリが置き換えられ、毎日更新されます.
レースを維持するには、一般的にHTML/CSS/JSとWebについての基本を知る必要があります.そのように、あなたは信じられないほど速く適応します.v-flex APIを忘れます.しかし、あなたのCSSの知識はありません.
V - flex APIを覚えていないでください.CSSを覚えておいてください.display: flex; and justify-content: space-between; あなたの問題の多くを解決します.
これらの2つの単純な行は、コンポーネントライブラリのマジックの背後に隠されたままにしないでください.

不思議な利点
リファクタリング後、私たちはVuetifyの周りにラップ10カスタムコンポーネントがあります.
それはVuetify何かを変更する場合、我々は10の場所だけで更新を行う必要があることを意味します!
アップグレードの時間は数週間からわずか数時間、またはさらに短くなっています.
それに加えて、我々はここでは“本物の”知識に焦点を当て、ブラウザの基本.それは、毎日変化するフロントエンドの世界でとても重要です.
私は、この記事は、数週間または数ヶ月のリファクタリング保存されます願っています.
それは意味がある場合、あなたはそこに任意のライブラリにこの知識を適用することができます.
CodeBase全体で同じパッケージをインポートしないでください.あなたは外部の依存地獄で終わるでしょう.
彼らがかなり単純であるならば、それらのパッケージさえ使わないでください.あなた自身でそれをして、何年もあなたと共にいる何かを学んでください.
だけでなく、数ヶ月のため、別の破壊的な変化があるまで.