使いやすくて美しい、Tencent のオープンソース フロントエンド フレームワークを 2 つお勧めします。

今日は、Tencent の 2 つのオープンソース フロントエンド フレームワーク、つまり wijie (無制限) と Omi をお勧めします。

wijie (無制限)

Unbounded micro-frontend は、Web Components + iframe をベースとしたマイクロ フロントエンド フレームワークで、低コスト、高速、ネイティブ分離、強力な機能などの一連の利点を備えています。

8fac2d11e5945ed0efb6cbec0f7d684a.png

Web コンポーネントは、ブラウザによってネイティブにサポートされているコンポーネント パッケージング テクノロジであり、要素間のスタイルを効果的に分離できます。iframe は、サブアプリケーションにネイティブの分離された実行環境を提供できます。自己構築サンドボックス iframe と比較して、独立したウィンドウとドキュメント、履歴を提供します。 、そして場所を外界からより適切に切り離すことができます。

アンバウンドマイクロフロントエンドはWebコンポーネント+iframeのサンドボックスモードを採用しており、ネイティブ分離の実現を前提として上記の問題を比較的うまく解決しています。

特性

  • 低価格

    • メインアプリケーションの使用コストが低い

    • サブアプリケーションの適応コストが低い

  • 高速

    • サブアプリの最初の画面が開く速度が速い

    • サブアプリは高速に動作します

  • ネイティブ分離

    • CSS スタイルは Web コンポーネントを通じて厳密にネイティブに分離できます

    • js は iframe 内で実行され、厳密なネイティブ分離を実現します。

  • 強力な

    • サブアプリケーションのキープアライブをサポート

    • サブアプリケーションのネストをサポート

    • 複数のアプリケーションのアクティベーションのサポート

    • アプリケーション共有のサポート

    • 分散型通信のサポート

    • ライフサイクルフックのサポート

    • プラグインシステムをサポート

    • サポート Vite フレームワーク

オープンソース プロジェクトのアドレス: https://github.com/Tencent/wjie

Omi は、フロントエンドのクロスフレームワーク、クロスプラットフォームのフレームワークです。

245d12e80ae899819aed305c1f16ce7f.png

特性

  • クロスフレームワーク、どのフレームワークでも Omi カスタム要素を使用可能

  • デスクトップ、モバイル、アプレット全体のソリューションを提供

  • 小型で高性能

  • シャドウ/ライトドムをベースにしたデザイン

  • ブラウザの開発トレンドとAPIの設計コンセプトに沿った

  • Web コンポーネント + JSX/TSX を 1 つのフレームワークに統合 Omi

  • JSX/TSX は、最高の開発エクスペリエンス (スマート プロンプト)、最小の文法ノイズ、およびチューリング完全性を備えた UI 表現です。テンプレート エンジンは不完全で、テンプレート文字列は完全ですが、文法ノイズが多すぎます。

  • Facebook React と Web コンポーネントの利点を比較すると、Omi はそれぞれの利点を組み合わせて、開発者が好きな方法を選択できるようにします。

  • Shadow/Light DOM と Virtual DOM が統合されており、Omi は仮想 DOM と実際の Shadow DOM の両方を使用して、ビューの更新をより正確かつ高速に行います。

  • 部分 CSS (Shadow DOM) に最適なソリューションであるコミュニティは、部分 CSS 用に多くのフレームワークとライブラリを提案しました (js または json を使用して、Radium、jsxstyle、react-style などのスタイルを記述します。webpack とバインドして、一意の className ファイル名、クラス名、ハッシュ値 (CSS モジュール、Vue など)、および実行時にスコープ指定された atrr を挿入する方法はすべてハック テクノロジであり、Shadow DOM スタイルが最も完璧なソリューションです。

  • カスタム要素にフレンドリーで、文字列 '0' または 'false' を介して false を渡し、以下を介して任意の複合型を渡します。および Omi.$

  • 750 画面幅に基づいて rpx 単位をサポートするように CSS が強化されました。

このプロジェクトでは、Omi が作成した MVP アーキテクチャを備えた Snake ゲーム、Omi ピアノ、Markdown で生成された静的 Web サイト ドキュメントなど、20 近くの例も示されています。

934fdf593c64463c4ea12591058618fa.jpeg

オープンソース プロジェクトのアドレス: https://github.com/Tencent/omi

------

質の高い技術交流グループを作りました、優秀な人たちと一緒にいると自分も優秀になります、今すぐクリックしてグループに参加し、共に成長する喜びを感じてください。さらに、最近転職したい場合は、1 年前に 2 週間かけて大きな工場からの対面経験を集めました。フェスティバル後に転職する予定がある場合は、ここをクリックして獲得できます

推奨読書

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・

こんにちは、私はプログラマーの DD で、Alibaba Cloud の MVP、Tencent Cloud の TVP として 10 年間ベテランドライバーを開発してきました。一般的な開発からアーキテクト、そしてパートナーまで。その過程で、私が最も深く感じているのは、私たちは学び続け、フロンティアに注意を払わなければならないということです。忍耐強く、より考え、不平不満を少なくし、一生懸命働くことができれば、コーナーで追い越すのは簡単です。だから、私が今やっていることをやるには遅すぎるかどうかは聞かないでください。何かについて楽観的である場合は、希望が見えたときだけ耐えるのではなく、希望が見えるまで耐えなければなりません。信じてください、あなたがそれを続ける限り、あなたは今よりも良くなるでしょう!まだ方向性が決まっていない場合は、まず私に従ってください。コーナーリングや追い越しのための資本を蓄積するのに役立つ最先端の情報をここで頻繁に共有します。

Supongo que te gusta

Origin blog.csdn.net/j3T9Z7H/article/details/131136637
Recomendado
Clasificación