この記事は、Huawei Cloud Community「OpenTiny Component Library Cross-Framework Technology from 0 to 1」から共有されたもので、著者: Huawei Cloud Communityによって選択されました。
Huawei Cloudの技術ライブブロードキャスト「DTSE Tech Talk」の第44回「OpenTinyクロスフレームコンポーネントライブラリをゼロから遊んで、ワンストップフロントエンドの進歩を達成する」では、Huawei Cloudフロントエンド開発DTSEテクノロジーエバンジェリストの莫春輝氏が登壇しました。私たちは、OpenTiny コンポーネント ライブラリ ソリューションの核となる利点と設計コンセプトを開発者と交換し、具体的な実践的な操作を通じて OpenTiny がクロスフレームワーク コンポーネント ライブラリ テクノロジを 0 から 1 まで実装する方法を実証しました。
クロスフレームワーク UI コンポーネントを開発するための 0 から 1 へのステップ
コンポーネント ライブラリのクロスフレーム テクノロジの実装は、Web ページの開発効率とアプリケーションの柔軟性を向上させる非常に重要な方法です。フロントエンド技術の急速な発展に伴い、コンポーネントライブラリやフレームワークの種類も多様化しており、コンポーネントライブラリのクロスフレームワーク技術の導入は、開発ペインポイントの解決や開発コストの削減に大きな意味を持っています。
この実践的な操作の目標は、Vue、React、および Solid フレームワークにわたるボタンのデモを構築し、コンポーネント ライブラリにクロスフレームワーク テクノロジのアプリケーションを実装する方法を示すことです。この演習を通じて、開発者に明確で具体的な実装プロセスを提供し、誰もがこのテクノロジーの実際の応用をよりよく理解できるようにしたいと考えています。
特定のソース コードについては、https: //github.com/opentiny/dtt-cfcを参照してください。
この実践的なプロセスは主に 4 つの部分に分かれています。
1. 初期化プロジェクト
a) pnpm を使用してプロジェクトを管理し、pnpm-workspace.yaml を構成します。
b) プロジェクトの eslint、prettier、git 環境を構成する
2. Vue アプリケーションを作成し、@opentiny/vue-button コンポーネント関連のロジックを追加します。
a) Vue アプリケーションを初期化する
b) Vue コンポーネントと vue-button コンポーネントのアダプテーション層を開発する
c) レンダリングレスに適応した js ファイルを開発する
3. React アプリケーションを作成し、@opentiny/react-button コンポーネント関連のロジックを追加します。
a) React アプリケーションを初期化する
b) React コンポーネントと React-button コンポーネントのアダプテーション層を開発する
c) レンダリングレスに適応した js ファイルを開発する
4. Solid アプリケーションを作成し、@opentiny/solid-button コンポーネント関連のロジックを追加します。
a) Solid アプリケーションを初期化する
b) ソリッド コンポーネントのアダプテーション レイヤーとソリッド ボタン コンポーネントを開発します。
c) レンダリングレスに適応した js ファイルを開発する
TinyVue コンポーネント ライブラリは現在、クロスエンド、クロスフレームワーク、クロスバージョンを実装しています。
Renderless 設計アーキテクチャのおかげで、OpenTiny プロジェクトの TinyVue は、Vue コンポーネント ライブラリとして、フレームワーク全体のコンポーネント ライブラリを実現するだけでなく、Vue 2 / Vue 3 をサポートするだけでなく、PC および PC もサポートするコード セットを実装します。モバイルエンド、マルチトピック仕様により適応可能。実際のアプリケーションでは、開発者は、クロスターミナル (PC、モバイル、時計)、クロスフレームワーク (Vue2、Vue3、React、Solid)、クロステーマ (フォント、色、角丸、アイコンなど)、複数のプロジェクトを開発できます。デザイン仕様 (アイコン、インタラクション、デフォルト構成など)。
下の図は、 OpenTiny のクロスエンド、クロスフレームワーク、クロスバージョン、クロスデザインの仕様例を開始した後のデモンストレーション効果です (具体的なソース コードについては、https: //github.com/opentiny/を参照してください)。クロスフレームワークコンポーネント):
では、なぜ OpenTiny はクロスエンド、クロスフレームワーク、クロスバージョンのコンポーネント ライブラリを実装したいのでしょうか?
現在、業界のコンポーネント ライブラリは一般に、React、Angular、Vue などのさまざまなフロントエンド フレームワークに従って分類されています。または、PC コンポーネント ライブラリ、モバイル コンポーネント ライブラリ、アプレット コンポーネント ライブラリなど、ターゲット端末に応じて。Vue 2 と Vue 3 のバージョンには互換性がないため、Vue 2 のコンポーネント ライブラリ コードは Vue 3 のコンポーネント ライブラリ コードとは異なります。つまり、同じテクノロジ スタックにも異なるバージョンのコンポーネント ライブラリがあります。現在の現状は、コンポーネント ライブラリの開発とコンポーネント ライブラリの使用の両方にとって負担であることは間違いありません。
さらに、Vue 2 / Vue 3 コンポーネント ライブラリの 2 つのセットは、2 つの異なるコード セットに対応しているため、コンポーネントの機能と API が同期していないことは避けられません。開発者が Vue 2 コンポーネント ライブラリから Vue 3 に移行したい場合は、コンポーネント ライブラリを使用すると、一定のコストとリスクに直面することになります。
現在のコンポーネント ライブラリのカテゴリは次のとおりです。
業界の大きな問題点に直面して、TinyVue はコンポーネントとフレームワークを分離する設計コンセプト (Renderless アーキテクチャ) を採用し、Web コンポーネントがクロスエンド、クロステクノロジースタック、クロス UX 仕様をサポートできるようにすることで、開発者だけが一連のコンポーネント ライブラリ コードを開発および維持する必要がある場合、さまざまな端末向けにさまざまなテクノロジー スタックのバージョンを起動できるため、開発およびメンテナンスのコストが削減されます。同時に、ユーザーがこのコンポーネント ライブラリのセットを使用する場合、異なる端末のバージョンや異なるテクノロジ スタックを使用しているにもかかわらず、最下層はコードのセットに基づいているため、API インターフェイスは基本的に同じであるため、ユーザーの学習、使用、移行、アップグレードにかかるコスト。
もちろん、この設計アーキテクチャでは、コンポーネントをレンダリングせずに、ビジネス ロジック指向の開発パラダイムと設計パターンを組み合わせる必要があります。ビジネス ロジック指向の開発パラダイムを単に使用するだけでは、ライフ サイクルのさまざまな段階でもともと分散していた同じビジネス ロジックの部分をまとめることができるだけだからです。非レンダリング コンポーネントの設計パターンを実装する方法は数多くあります。たとえば、React では HOC 高階関数を使用でき、Vue ではscopedSlot スコープ スロットを使用できます。しかし、コンポーネントのビジネス ロジックがますます複雑になると、 、高次関数とスコープ挿入スロットにより、コードの理解と保守が困難になります。したがって、この 2 つを組み合わせることでのみ、クロスターミナルおよびクロスフレームワークに対応した Web コンポーネントを実現できます。
TinyVue は、デバイスの適応、解像度の適応、インタラクションの適応などの課題を完了することで、最終的にはさまざまなフレームワークやさまざまな端末で使用される効果を実現します。それだけでなく、TinyVue は、Vue 2 と Vue 3 について、Vue 2 と Vue 3 の違いを解消し、Vue 2 と Vue 3 の両方のバージョンをサポートするコード セットを実現する、対応するバージョンのアダプターもリリースしました。このように、Vue 2 プロジェクトであっても Vue 3 プロジェクトであっても、コンポーネントの使用方法は同じであり、シームレスな切り替えが実現され、Vue 2 から Vue 3 への移行のコストとリスクが大幅に削減されます。
要約:
OpenTiny は、クロスエンドおよびクロスフレームの UI コンポーネント ライブラリを提供し、PC/モバイル端末などの複数の端末に適応し、Vue2/Vue3/Angular マルチテクノロジー スタックをサポートし、柔軟でスケーラブルなローコード エンジン。これには、テーマ構成システム/中間およびバックエンド テンプレート/CLI コマンド ラインやその他の豊富な効率向上ツールが含まれており、開発者が Web アプリケーションを効率的に開発するのに役立ちます。
もちろん、OpenTinyはファーウェイのクラウドソリューションの重要な部分として、開発者がクラウドネイティブアプリケーションを構築できるようにし、開発者がアプリケーションのパフォーマンスと信頼性を向上させ、アプリケーションの革新と開発を促進するのにも役立ちます。
将来的には、テクノロジーの継続的な開発と応用により、OpenTiny は開発者により便利で効率的なエクスペリエンスを提供し続けます。
クリックしてフォローし、できるだけ早くHuawei Cloudの新しいテクノロジーについて学びましょう~
雷軍氏: Xiaomi の新オペレーティング システム ThePaper OS の正式版がパッケージ化されました Gome App の宝くじページのポップアップ ウィンドウが創設者を侮辱 米 政府が NVIDIA H800 GPU の中国への輸出を制限 Xiaomi ThePaper OS インターフェース マスターが Scratch を使用して RISC-V シミュレータを操作し、正常に実行されました Linux カーネル RustDesk リモート デスクトップ 1.2.3 がリリースされ、Wayland サポートが強化されました Logitech USB レシーバーを取り外した後、Linux カーネルがクラッシュしました DHH の「パッケージング ツール」のシャープ レビュー": フロントエンドはまったくビルドする必要がありません (No Build) JetBrains が技術文書を作成するために Writerside を起動 Node.js 21 用ツールが正式リリース