web-dev-qa-db-ja.com

Bootstrap vs ReactのマテリアルUI?

私は自分のプロジェクトで両方を使用していましたが、時々bootstrapコンポーネント内でMaterial UIコンポーネントを使用する必要があり、UIが期待どおりに表示されます。両方がグリッドを使用しており、曲げることができるのに理由はありますか?

14
Kleo

私は冗長になる傾向があるので、ここに簡潔な答えを載せます。

結論:

両方を使用するのが悪いと言った人は、彼らの意見を表明するだけかもしれません。 @ user3770494は非常に良い点を示しましたが、その点は、ビルドサイズについては有効かつ真実ですが、アプリケーションのスコープに依存します。ファイバーネットワークローカルにいる全員を含むオフィス内アプリケーションの場合は、とにかくすべてメモリにキャッシュされますが...(あなたが私を知っているわけではありません)リアルタイム(最新)の更新を必要とする世界中のモバイル(非常に低いデバイス)、デスクトップ、およびその他のデバイスで実行する100万人のユーザーアプリケーションと、24時間年中無休の10000人のアクティブユーザーによる動的コンテンツのストリーミング。

すべての真実-それが生でも死でもないなら-私は両方を使うと言います-そしてまたあなた自身をします。個人的な成長のために「単一のソリューションにコミットする」よりも、1つ以上のことを理解する経験の方が優れています。


この読書の残りはオプションです-どういたしまして:)

私は個人的に本番アプリケーションで両方を使用しました(両方で、独立して)...私もすべてゼロからやりました...(CSSは、私がしている仕事の中で一番好きではない部分です-幸運なことに、私はそれが得意な同僚がいます)ここに私の考えがあります:

警告:私は冗長になる傾向があります。

免責事項:

フォームよりも機能が好きな人として、フォームは、クライアントが微妙な小さな変更について尋ねるのが面倒な後付けです。できる限り「各オプションがどのように感じているか」についての私の意見を残そうとしています。

また、私が作っている現在の選択であなたの質問を見ています-ReactJS/create-react-appを使用してタッチスクリーン組み込みシステム用の「デモ」プロジェクトを作成しています-だから私は半ダースのモックを展開しますデモ用のプログラムは、実際には正確に何も行いません(CCscanner、バーコードスキャナー、gps、webcam統合、そのような楽しいもの)。だから、私はこのために私がただコミットするだけの簡単なものを研究しています。「退屈して、楽しみのためにpi3b + boardを手に入れたからです」。

回答:

  • 時間、献身、リソースがあれば、それらを一緒に混ぜても何も問題はありません。ただし、時間/コスト/メリットについて考える必要があります。エンドユーザーを幸せにするためのDIY完全に自分でホイールを作り直していますが、ブーストラップスタイルなどをいつでも取り入れることができます。

  • 固有のリスクは、両方を使用する場合、「どちらも」それらを「混在」させないことを確認することです。その場合、どちらか一方のバージョンを変更しようとすると常に問題が発生します。

  • 私は多くのMaterialUIが好きですが、正直なところ、いくつかのものがどのように見えるかは嫌いです(デフォルトではスタイルが賢明です)-機能的にはブートストラップよりも好きですが、同時に、MaterialUIs Reactプログラミングスタイル(CSSを嫌う純粋主義者として、しかしそれがどれほど重要であるかを知っています-これまでになく!importantを使用しなければならないことは、大きな大きな大きなnononononononononononです)。私自身の好みよりも良くも悪くもありますが、それについてのいくつかの事は本当に私をいらいらさせます(たとえそれらが正当な理由で行われたとしても)。

  • Bootstrapには、使用する選択肢がたくさんあります-見た目が好きで、ReactJSで遊ぶのが好きです-しかし、reactstrapとreact-bootstrapの違いがありますこのデモ用に私がやっています)。

  • ごく最近(本番プロジェクトの場合)、1つだけに固執しようとしていますが、通常は機能よりも機能の良いシステムを作成しています。そのため、UI要素についてはあまり気にしません。見た目を悪くするのではなく、使用方法についてです。ですから、仕事を簡単にするためだけに1つだけを使い続けます。また、元のスタイルが気に入らない場合は、通常は自分でスタイルをオーバーライドします。しかし、「両方を使用するのは悪い形です」という理由で、私は1つに固執しません。実際には、帯域幅が問題ではない場合、つまり両方を使用することは品質ですが、実際に使用する帯域の一部のみを使用します。

(一度使用したものが$ .ajaxだけだったときに、誰かが一度jQueryを完全にインポートしたことに気づきました(それでもたくさんですが、それでも)...私は...それはやり過ぎではないのですか?!)両方を使用し、物事をスリムに保ちたい場合は、コンパイル時に使用しているものだけをインポートするようにしてください。 Python的に私は言っています-モジュールからimport *を使用しないでください(Javascriptでそれを概念として表現します-webpack/gulp/whomeverはあなたのために大部分を処理する必要があります)。 ES6/7スタイルのJavascriptを使用していると仮定します。

7
o43

私は最近このシナリオに遭遇し、特定のタスクのために両方を使用することを選択しました。レスポンシブWebアプリであるため、Bootstrap=ウィジェットのレイアウトとマテリアルUIに使用するのが最も理にかなっています(個人的な好みです)。

3
user.io

両方を使用すると、プロダクションjsサイズが増加します。

マテリアルUiとbootstrap=はどちらもコンポーネントにボタンなどの基本的なスタイルを提供するため、いずれかを選択します。

ブートストラップグリッドは、構造のみに使用することも、フレックスで使用することもできます。

2
m.rohail.akram