トップ 10 H5 フロントエンド フレームワーク_html/css_WEB-ITnose

編集者の紹介

長年フロントエンドに留まり、極度の怠け者である攻城戦戦士として、私は有名なものから同僚に非常によく知られたものまで、数多くのフロントエンド フレームワークを読んできました。本当はフレームワークの紹介を15～20個あげたかったのですが、先輩数人に記事作成のコツを聞いたら容赦なく叩かれたので、ここではフレームワークを10個だけ取り出して煮込みます。簡単に紹介すると大きな鍋です。

Bootstrap

まず、Bootstrap について話しましょう。最初に言及されるか、これがあることは想像できたかもしれません (笑)、これが Bootstrap の威力であり、フレームワークを安定させる利点であると感じています。私が初めて道教コミュニティに入ったとき、私は自分が成長するために、コード内のどんな文字でも自分で入力することに決めていました。そうしないと負けてしまいます。その結果、周り​​のゲイの友達に誘われてBootstrapの旅が始まりました。 もちろん、私はデザイン+フロントエンドの才能があるのですが、神は私にPSとさまざまなデザインツールを使用することだけを許可しませんでした。私もデザインの女の子たちに似ていると思ったので、女の子の前でかっこよく見えるものを作ることができるのがBootstrapを選んだ理由の1つでした。とても美しいのでイライラしてしまいますが、幸いなことにバージョンごとに大きな変更が加えられるため、自分が作成した Web サイトが多くの Web サイトと競合すると感じることはありません。 Bootstrap の使用法は非常に簡単なので (これは Bootstrap の作者が無数の包囲戦を読み、その苦痛を理解した結果かもしれません)、小規模なフロントエンドであっても学習コストをほとんどかけずにすぐに使い始めることができます。

公式 Web サイト: http://getbootstrap.com/

Github: https://github.com/twbs/bootstrap/

著者: MarkOtto と Jacob Thornton

スター: 93,112

要約: Bootstrap の最大の利点は人気があるということは、問題があれば多くの人が解決に協力してくれるということです。また、インターフェースが比較的調和していて使いやすいということです。最新の V4 バージョンでも FlexBox レイアウトのサポートが開始されていることがわかります。これは非常に優れたアップグレード エクスペリエンスです。欠点は、クラスの名前付けが十分にセマンティックではなく、さまざまな略語があることです。そのため、私は最近ハイブリッド APP を統合し始めましたが、フレームワークを選択するときはそれが最初の選択肢でした。 PC で作業していたときに、ハイブリッドな右クリック属性を開発し始めたときに、Bootstrap が非常に小さかったため、別のフレームワークを選択する必要がありました。

AmazeUI

2 つ目は、Cloud Adaptation が正式にガール UI と呼ぶものです。私が初めてこれを使用したのは、ある時、細部にこだわるのが大好きなデザイナーに出会ったときでした。私は彼女を何千ものブーイングで賞賛し、その後彼女のアイデアに基づいてメソッドを冷静に探し始め、最終的に AmazeUI フレームワークを見つけました (怠け者だと言われても構いません)。公式の言葉によれば、「コミュニティのオープンソース プロジェクトに基づいて構築されている」とのことで、小さな画面から大きな画面までモバイルを第一に考え、最終的にはモバイル インターネットのトレンドに適応するためにすべての画面への適応を実現するクロススクリーン フロントエンド フレームワークです。 。」しかし実際には、クロススクリーン適応と国内ブラウザの互換性に関する技術的問題を解決できると主張しているため、私はこれが気に入っているだけです。

公式ウェブサイト: http://amazeui.org/

Github: https://github.com/amazeui/amazeui

会社: Cloud Adaptation

スター: 6710

概要: AmazeUI は一般に、より多くの要素を追加しています。中国市場の特性に沿ったフレームワークは、クロススクリーンと適応を適切に処理し、さまざまなキーボードの互換性と適応に取り組む時間外労働者の数を減らすために、一般的に使用される一連の Web コンポーネントを準備しています。このフレームワークは中国語の組版を最適化し、中国の主流ブラウザと互換性があり、軽量で、デスクトップだけでなくモバイル端末にも適しています。ただし、AmazeUI の全体的なドキュメントが少し多すぎると感じます。言い換えれば、それは何でもないと思いますが、そうします。決して大きな声では言わないでください（笑）、個人的にはコードやUIに目立った点はあまりないと感じています。

FrozenUI

3つ目はFrozenUIです。しばらくの間、QQが急に大きくなったのを見て、その後、QQカスタマーサービスもHTMLハイブリッド開発を使用しており、QQメンバーのフロントエンドがFrozenUIを使用していることがわかりました。そしてこのフレームワークはオープンソースなので、嬉しくて心の中では耐えられず、3回、5回、2回と試してみましたが、基本的なスタイルの効果はシンプルで、色も新鮮でした。比較的活発なコミュニティがあるため、コンポーネントは比較的豊富です。

Github: https://github.com/frozenui/frozenui

公式ウェブサイト: http://frozenui.github.io/

著者: QQVIPFDTeam

スター: 1,067

概要: FrozenUI を何かで使用する場合APICloud のようなものです。これを使用してハイブリッド APP を作成したり、ネイティブの七面鳥を使用してフロントエンド開発用のアプリケーションにネストしたりすると、とてもクールに感じます。このフレームワークは Android2.3 以降、iOS 4.0 以降と互換性があり、またはそれを使用することもできます。 Web アプリを作成するのも素晴らしい選択肢ですが、WeChat に配置する場合は、これよりも適した WeUI フレームワークが第一の選択肢になります。 UI レベルでデメリットがわかります。 QQ メンバーのフロントエンドで?

ウィーウィ

4 つ目は、FrozenUI に似た、比較的具体的なフレームワークです。公式 Web サイトさえありません。 gitHubIssues は言うまでもなく非常にシンプルでサイズも小さいですが、小さな作品ではありますが、評判は十分です。このフレームワークは 23 年 1 月 16 日にリリースされて以来、ユーザーに吐き出す場所がないというわけではありませんが、みんな git に走りました (笑)。

Github: https://github.com/weui/weui

デモ: http://weui.github.io/weui/

スター: 7,129

概要: WeChat によって設計されたこのデモのセットを読んだ後デザインチーム、言うまでもなく、WeChatのパブリックになりたい場合は、これが最初の選択肢でなければなりません。このフレームワークの欠点を一言で言えば、フレームワーク自体がおそらくユーザーが WeChat 以外のシナリオで使用できるようにすることを考慮していないことです。

SUI

「SUI は、ブートストラップに基づいて開発されたフロントエンド コンポーネント ライブラリです。また、一連のデザイン仕様でもあります。SUI を介して、非常に便利に美しいページをデザインおよび実装できます。」確かに、自分の脳細胞を節約するには、退屈な公式広告を直接引用する方が良いでしょう (囧...) もちろん、広告にあるように、以前に Bootstrap を使用したことがある場合は、簡単に SUI に切り替えることができます。フロントエンドの敗者にとってタオバオの利益となる。

Github: https://github.com/sdc-alibaba/sui

公式ウェブサイト: http://suit.taabao.org/suit/docs/index.html

Star: 120

AUI

Sixth 1 つ目は、最近登場したばかりの AUI です。著者は、これが APICloud 開発者向けに特別に設計された UI フレームワークであると主張していますが、実際には、モバイル フロントエンド開発における多くの一般的な問題を解決し、主にハイブリッド開発を指向した CSS フレームワークです。作者はかなり傲慢なようで、あらゆる場所でさまざまな高度な CSS3 を使用しているため、これらの CSS3 の互換性を確認する必要もあります。期待に応え、互換性の高い物件を選択しました。このフレームワークには、チャット インターフェイスやカウント リストなどのコンポーネントも用意されており、頭を悩ませていた多くの複雑な問題が解決されました。レイアウトを取得して直接使用できるようになりました。

Github: https://github.com/liulangnan/aui

公式ウェブサイト: http://www.auicss.com/

作者: 放浪者

スター: 92

要約: このフレームワークは非常に重要です私にとっての利点の 1 つは、純粋な CSS フレームワークを使用したことがあり、複雑な効果でなければ、自分で純粋な CSS フレームワークを変更して、その効果を実現できることです。様々なアニメーション効果、効率性、品質などを考慮してこのCSSフレームワークを選びました。私がいつも不満に思っているのは、このフレームワークのドキュメントが非常に優れており、優れていると言われていることです。

MUI

私は以前は Android システムを使用していましたが、その後、IOS を見て、iOS に夢中になることに決めました。なぜなら、Apple がシステムを調整するたびに、なぜこんなにも気に入っているのかわかりません。デザインが足りなかったので、特に IOS システムを模倣しましたが、うまくできませんでした。私がこのフレームワークに惹かれたのは、もちろん、その UI が主に IOS で設計されていることです。 、Android の独特な UI スタイルも補完します。また、MUI は、APP の開発に使用するとユーザーの流暢性も向上すると公式に主張しており、一定期間それを理解して使用しようとします。

公式 Web サイト: http://dev.dcloud.net.cn/mui/

Github: https://github.com/dcloudio/mui

スター: 2,450

概要: 前述したように、このフレームワークは2つの主要なシステムを参考にしてUIコンポーネントをカプセル化するのはあまり良くありません。これはアプリケーション開発のスムーズさに関して、私が特に懸念している点でもあり、これがH5の現状の欠点であることは確かにわかっていますが、見てみました。公式ウェブサイトの説明では、まだ期待して試して改善できるかどうかを確認してください。しかし、実際にはフレームワーク自体ではなく、Webviewの助けを借りて改善する必要があります。

SemanticUI

私がこのフレームワークに出会ったのは、Bootstrap がきっかけでした。SemanticUI が github で公開されるとすぐに、多くの開発者の注目を集め、多くの人が比較しました。良いか悪いかにかかわらず、2 つを批判したり賞賛したりすることはできません。他人の 3 つまたは 4 つの文に基づいて評価を開始することはできません。実際に使ってみると、UI は Bootstrap とあまり変わらないと感じます。 、しかし、コードの命名基準は大きく異なりますが、SemanticUIが何か違うことをしたいだけだとは思いません、その命名はすべて複合的な方法で行われ、それを使用するときのクラス名は非常に離散的です。展開または追加するクラスの名前がそのクラス名と競合しないように注意する必要があります。

公式 Web サイト: http://www.semantic-ui.cn/

Github: https://github.com/semantic-org/semantic-ui/

Foundation

Foundation はフレームワークのベテランとみなされますこのフレームワークは初期に登場したと言われており、現在でも非常に人気があります。Bootstrap 開発の難しさを懸念する場合は、事前定義された UI 要素を使用する場合でも、Foundation の使用を検討できます。他の Web サイトとの競合 公式担当者が述べたように、Web サイトは類似しすぎているため、開発者はより柔軟なフレームワーク エクスペリエンスを得ることができます。

公式ウェブサイト: http://foundation.zurb.com/

Github: https://github.com/zurb/foundation-sites

スター: 22,736

Pure

いつも最後、私もあなたと同じくらい上手です (~￣▽￣)~), 私は管理システムに取り組んでいたときにこのフレームワークに出会い、フレームワークが小さいため、そしてそれを使用することにしました。余計なものが一切入っていない純粋な CSS なので、他のフレームワークと組み合わせてすぐに使用するのが簡単です。

公式ウェブサイト: http://purecss.io/

Github: https://github.com/yahoo/pure/

スター: 13,592

導入が完了したので、おそらくわかるはずですつまり、ニーズを満たした上で特定のフレームワークを選択するということです。したがって、優れたフレームワークと特に優れたフレームワークに違いはなく、自分のニーズが何であるか、そしてそのフレームワークが自分に適しているかどうかのみを判断できます。いろいろなフレームワークの使い方はどれも大体同じで、他のフレームワークを使えば簡単に始められると思います。