7月7日から9日まで東莞で開幕したファーウェイ開発者カンファレンス2023（HDC.Cloud 2023）は、「すべての開発者は偉大である」をテーマに、世界の開発者を対象としており、世界の開発者がアイデアをぶつけ合い、技術を交換し、競争を実践するための技術ホールを創設し、開発者が最新の技術トレンドを十分に理解して把握し、将来の技術革新のためのより広い空間を開くことができるようにする。エンタープライズレベルのフロントエンドコンポーネントライブラリソリューションとしての OpenTiny も、このカンファレンスで正式にリリースされました。
序章：
Huawei Yunlingチームのフロントエンド専門家であるMo Chunhui氏は、このオープンソースプロジェクトの正式リリースのゲストスピーカーとして、エンタープライズレベルのコンポーネントライブラリソリューションとしてOpenTinyがユーザーの問題点や困難をどのように解決できるかを全員に説明しました。
プロジェクトの資料は次のとおりです。
OpenTiny パノラマの導入を通じて、開発者が直面する市場の問題点を徹底的に分析し、ユーザーに対応するソリューションを提供します。エンタープライズ toB ビジネス シナリオ向けに、クロスエンド、クロスフレームワーク、クロスバージョンのコンポーネント ライブラリ、すぐに使える管理システム テンプレート、およびフロントエンド開発のプロセス全体をカバーする CLI ツールを提供します。
TinyVue コンポーネント ライブラリの 9 年間の開発における 3 つの段階の導入を通じて、1,500 を超えるプロジェクトが検証され、3,000 人以上のユーザーの使用により、TinyVue オープン ソース コンポーネント ライブラリのパフォーマンスが安全、安定、信頼できることが完全に検証されました。
TinyVue コンポーネント ライブラリの革新的なアーキテクチャ設計は、現在の業界コンポーネント ライブラリの問題点を解決します。統一された API インターフェイスは、さまざまな端末表示と対話仕様をサポートし、ビジネス ロジック指向の開発パラダイムと非レンダリング コンポーネントの設計モードを組み合わせて、さまざまなテクノロジ スタックとさまざまなバージョンの Vue をサポートします。このアーキテクチャ設計は特許を申請しています。
デモでは、TinyVue が複数のテーマをサポートしていることが紹介され、さまざまなテーマの下でのプロセス コンポーネントの適応効果が示されました。通常はPC側ではライトテーマで表示されますが、大画面ではダークテーマで自動的に適応され、モバイル端末での表示も独特です。この革新的なアーキテクチャにより、コンポーネント開発者の負担が軽減され、コンポーネント ユーザーのコストが削減されます。
ビデオデモでは、一連の TinyVue コードを使用することで、閲覧や ToDo 項目の作成など、PC およびモバイルの対話型インターフェイスをサポートできることが示されています。日付ボックスとドロップダウン ボックスには、デバイスごとに異なるモードがあります。
クラウド サービスに接続するための TinyPro テンプレートの 2 セットを提供します: Vue ベースのミッドバックエンド ビジネス テンプレートと Angular ベースのクラウド サービス コンソール テンプレートです。レイアウト構成、レスポンシブフレームワーク、テーマのカスタマイズなどをサポートし、ワークベンチ、リストページ、フォームページ、サービス概要ページ、サービス購入ページなど、代表的な20ページを提供します。
TinyCLI コマンド ライン ツールは、ユーザーがビジネスを迅速に構築できるようにする一連の開発キットとエンジニアリング プラグインを提供する、ワンストップのフロントエンド エンジニアリング ツールです。プロジェクトの初期化はコマンド 1 つだけで実行できます。このうち、コマンド ライン プラグインは、コード リリースやオンラインなど、特定の単一機能に主に焦点を当てています。
TinyTheme は、さまざまな分野の視覚的なカスタマイズのニーズを満たすオンライン テーマ設定システムです。ユーザーは公式Webサイト上で操作インターフェースをリアルタイムにプレビューし、パーソナライズされたコンポーネントスタイルを展開します。さまざまなテーマが提供されており、テーマごとにボタンの色や境界線、直線や丸い角などが異なります。
上記は OpenTiny の内容です。詳細については、当社の公式 Web サイトをご覧ください。当社の Web サイトは https://opentiny.design です。最後に、どなたでも OpenTiny オープン ソース コミュニティに参加して、エンタープライズ レベルのフロントエンド開発キットを一緒に構築していただけますよう、よろしくお願いいたします。
7 月 8 日から 7 月 9 日までの CodeLabs トレーニング キャンプ:
合宿：
今回、OpenTiny は CodeLabs トレーニング キャンプに参加し、開発者が TinyVue コンポーネント ライブラリを使用して Vue2 から Vue3 へのスムーズな移行を迅速に実現し、実戦の改善に貢献することを目的としています。
2 日間で、合計 10 人の開発者が参加してプロジェクトを正常に完了し、名誉証明書を受け取りました。この過程で、Xiao Lu 氏は「TinyVue プロジェクトのビルド後に移行するのは非常に便利です。数行のコードを変更し、インストールするバージョン番号を変更するだけで、移行は非常にスムーズです。」と述べ、一部の開発者は「このトレーニング キャンプを通じて、Vue2 プロジェクトを Vue3 にアップグレードする方法を学んだだけでなく、OpenTiny を使用してフォームやフォーム ページを作成する方法も学びました。」と述べました。
7 月 8 日のオタクチャレンジ:
チャレンジ：
7 月 8 日、OpenTiny は開発者がスキルと知恵を競うオタク チャレンジも設定しました。
OpenTiny によって設定されたチャレンジのタイトルは次のとおりです。開発者は @vue/repl と OpenTiny コンポーネント (ボタン / 選択 / チェックボックス) を使用して、チャレンジを通じて Playground コード ドリル フィールドを作成します。開発者もこのトピックに非常に興味を持っています。講師の素晴らしい指導と辛抱強い説明、開発者の優れた理解力と卓越した実践スキルにより、ついに最高のテクニカルヒーローが決定しました。
7月8日から7月9日までのブース通信：
ブースの様子：
もちろんブースコミュニケーションの内容は非常に充実しており、フロントエンドの専門家も最前線の開発者と綿密なコミュニケーションやディスカッションを行っています。開発者が直面している問題点や問題点を収集し、現在のフロントエンド開発者の混乱を開発者向けに共有し、近い距離で答えます。
まず、OpenTiny はエンタープライズ レベルのコンポーネント ライブラリ ソリューションであり、主に次の問題を解決します。
- 複数の端末には複数の開発が必要
- 複数のテクノロジースタックにより機能を再利用できない
- フレームワークの大きなバージョンをアップグレードする作業負荷は大きい
- ローコード システムには構成可能なコンポーネントがありません
- コミュニティ管理システムのテンプレートが不足している
次に、コミュニケーションの過程で多くの開発者からの質問がフィードバックされ、それらの質問に対してもブースの専門家が一つ一つ答えていきました。例えば：
1. OpenTiny が Vue2 と Vue3 の両方をサポートする一連のコードを実装できるのはなぜですか?
OpenTiny は Renderless 設計アーキテクチャを採用しています。このアーキテクチャの下では、TinyVue コンポーネントは統一された API インターフェイスを備えています。開発者は 1 つのコードを記述するだけで済み、コンポーネントは PC やモバイルなどの異なる端末の表示をサポートし、異なる UX インタラクション仕様もサポートできます。React フレームワークの Hooks API または Vue フレームワークの Composite API を利用すると、コンポーネントのコア ロジック コードをフロントエンド フレームワークから切り離すことができ、Vue のさまざまなバージョンをサポートしながら、コンポーネント ライブラリ コードのセットを実装することもできます。
2. プロジェクトを元のコンポーネント ライブラリから OpenTiny コンポーネント ライブラリに移行するにはどうすればよいですか?
プロジェクトが OpenTiny コンポーネント ライブラリに移行する場合、段階的な移行方法を採用できますが、プロジェクトの切り替えには一定のコストが必要です。しかし、OpenTiny コンポーネント ライブラリ プロジェクトが Vue2 から Vue3 に移行されると、シンプルかつスムーズな移行が実現され、フロントエンド技術の発展により、OpenTiny は将来に適応し、未来に直面し続けることができます。例えば、現在広く利用されている3つの主流フレームワークに加え、Svelteなどの注目を集める新興フレームワークもあり、特定のビジネスニーズを満たすために将来的にプロジェクトの変革が必要となる場合や、スムーズな移行も可能です。元の Vue2 プロジェクトから OpenTiny コンポーネント ライブラリ プロジェクトを使用するように切り替えたい場合は、最初に構築した元のページの特性と効果を保持したまま、単一のコンポーネントを切り替えることができます。プロジェクト全体の切り替えが完了した後、バージョン番号を変更することで簡単かつスムーズな移行が可能です。
3. プロジェクトで OpenTiny コンポーネント ライブラリを使用した後、古いバージョンから新しいバージョンに更新すると、古い機能の使用に影響しますか?
開発者が独自のコンポーネント ライブラリから OpenTiny コンポーネント ライブラリに切り替えた後のバージョン アップグレードは、以前のバージョンの機能に影響しますか? この問題には、開発者の開発およびビジネス シナリオに基づいて、特定の問題を具体的に分析する必要がありますが、一般に、ビジネスの継続性を確保するために、機能機能に大きな影響を与えることはありません。メジャーバージョンアップの場合、多少の影響はあるかもしれません。
4. 開発者はどうすれば OpenTiny オープン ソース コンポーネント ライブラリ プロジェクトをすぐに始めることができますか?
OpenTiny は、コンポーネント ライブラリの使用を開始するために、開発者の学習コストの削減も常に支援しています。まず、OpenTiny の公式 Web サイトにアクセスして、学習用のヘルプ ドキュメントを参照できます。次に、開発者がすぐに開始できるように定期的にライブ ブロードキャストを共有します。同時に、記事やビデオを通じて開発者がプロジェクトの内容を理解し、プロジェクトを使用できるように支援します。その後、定期的に開発者活動に参加または実施し、カンファレンスを交換して開発者と緊密にコミュニケーションし、開発者の問題点や困難を理解し、開発者が問題を解決できるように支援します。最後に、コミュニティ Q&A サービスもあり、興味のある開発者は参加できます。技術交流グループには、グループ内のさまざまな技術エンジニアがあなたの質問に答えます。
5. OpenTiny コンポーネント ライブラリと競合製品のコンポーネント ライブラリの利点は何ですか?
フロントエンド開発者にとって、新しいプロジェクトを構築する必要がある場合、必然的に独自のビジネス シナリオとビジネス ニーズに従ってテクノロジーを選択することになります。現在市場に出ているコンポーネント ライブラリに関する限り、誰もが独自の利点を持っています。しかし現在、業界のフロントエンド UI コンポーネント ライブラリが、React コンポーネント ライブラリ、Angular コンポーネント ライブラリ、Vue コンポーネント ライブラリのように、フロントエンド フレームワーク Angular、React、Vue に従って分類されていることが一般的であるという問題があります。2 つの分類を組み合わせると、React PC コンポーネント ライブラリ、React Mobile コンポーネント ライブラリ、Angular PC コンポーネント ライブラリ、Angular Mobile コンポーネント ライブラリ、Vue PC コンポーネント ライブラリ、Vue Mobile コンポーネント ライブラリなどに分類できます。さらに、フロントエンド フレームワークである Angular、React、および Vue の大きなバージョンには下位互換性がないため、異なるバージョンは異なるコンポーネント ライブラリに対応します。Vue を例にとると、Vue 2.0 と Vue 3.0 のバージョンには互換性がないため、Vue 2.0 の UI コンポーネント ライブラリ コードは Vue 3.0 のコードとは異なります。つまり、同じテクノロジ スタックにも異なるバージョンの UI コンポーネント ライブラリがあります。上記の各カテゴリーのUIコンポーネントライブラリを1枚の図にまとめましたが、コンポーネントライブラリ利用者の観点から見ると、アプリケーションを開発したい場合は、まず以下のコンポーネントライブラリのいずれかを選択し、そのコンポーネントライブラリを学習して使いこなす必要があり、現状の多端末・多技術スタックコンポーネントライブラリは、ユーザにとって学習負担が大きいことがわかります。
では、OpenTiny はどのようにしてこの問題を解決できるのでしょうか? OpenTiny は、レンダリングを行わない Renderless 設計アーキテクチャを採用しており、コンポーネント ロジック、コンポーネント スタイル、コンポーネント テンプレートの分離という設計コンセプトを通じて、コードの理解と保守を容易にします。
- ロジックとUIの分離：ロジック処理やデータ変換などのタスクを非レンダリングコンポーネントに抽象化することで、焦点を分離し、コードの可読性と保守性を向上させることができます。
- 再利用性の向上: コンポーネントのロジックを複数のシナリオで再利用できます。これらのコンポーネントは、特定の UI コンポーネントやフロントエンド フレームワークに依存せず、インターフェイスとは独立してテストおよび使用できるため、コードの再利用性とテスト容易性が向上します。
- 単一責任原則への準拠: この設計は、各コンポーネントが特定のロジックまたはデータ処理タスクのみを担当する単一責任原則への準拠を奨励します。この設計により、コードがよりモジュール化され、拡張性と保守性が向上し、コンポーネント間の結合が軽減されます。
- テスト容易性の向上: レンダリングレス コンポーネントは UI とは独立してテストされるため、単体テストと統合テストの作成が容易になります。テストは、インターフェイスのレンダリングや対話の詳細に注意を払うことなく、コンポーネントのロジックとデータ変換に集中できるため、テストの効率と信頼性が向上します。
- 開発効率の向上: 開発者は、特定の UI レンダリングの詳細を気にすることなく、ビジネス ロジックとデータ処理に集中できます。これにより、開発効率が向上し、繰り返しのコード記述が軽減され、チームのコラボレーションの可能性も高まります。
もちろん、これらの課題に加えて、マイクロフロントエンド、ローコードなどのフロントエンドの今後の開発動向にもさらに注目していきます。これらのシナリオは、将来的にも継続的に改善および最適化されるため、OpenTiny は現在および将来に適応するのに十分な能力を備えています。同時に、外部の開発者と協力して、より完全な OpenTiny コンポーネント ライブラリ ソリューションを構築し、より充実したオープンソース エコシステムの構築を継続していきます。より多くの開発者に利益をもたらしましょう~
その他の指示
OpenTiny は、PC/モバイルなどの複数の端末に適応し、Vue2/Vue3/Angular マルチテクノロジー スタックをカバーするエンタープライズ レベルのコンポーネント ライブラリ ソリューションであり、テーマ設定システム/ミドルバックグラウンド テンプレート/CLI コマンド ラインなどの効率向上ツールを備えており、開発者が Web アプリケーションを効率的に開発できるように支援します。
主要なハイライト:
- クロスターミナルおよびクロスフレームワーク: Renderless 非レンダリング コンポーネント設計アーキテクチャを使用したコード セットは、Vue2/Vue3、PC/モバイルを同時にサポートし、機能レベルのロジックのカスタマイズと完全なテンプレートの置き換えをサポートし、優れた柔軟性と強力な二次開発機能を備えています。
- 豊富なコンポーネント: PC 側に 80 以上のコンポーネント、モバイル側に 30 以上のコンポーネント (テーブル、ツリー、選択などの高頻度コンポーネントを含み、仮想スクロールが組み込まれており、ビッグ データ シナリオでのスムーズなエクスペリエンスを確保します。業界で一般的なコンポーネントに加えて、分割パネル スプリッター、IpAddress IP アドレス入力ボックス、カレンダー カレンダー、トリミング画像トリミングなど) のいくつかの独自の機能コンポーネントも提供しています。
- 構成可能なコンポーネント: コンポーネントは、ローコード プラットフォームに適したテンプレート モードと構成モードの両方をサポートしています。現在、チームは OpenTiny を内部のローコード プラットフォームに統合し、ローコード プラットフォーム向けに多くの最適化を行っています。
- 完全な周囲のエコロジー: Angular + TypeScript に基づく TinyNG コンポーネント ライブラリを提供し、10 以上の実用的な機能と 20 以上の典型的なページを備えた TinyPro ミッドバックグラウンド テンプレートを提供し、フロントエンド開発のプロセス全体をカバーする TinyCLI エンジニアリング ツールを提供し、強力なオンライン テーマ構成プラットフォーム TinyTheme を提供します OpenTiny オープン ソース コミュニティへの参加へようこそ
。WeChat アシスタントを追加: opentiny-official を追加して共同構築に参加 ~
OpenTiny 公式 Web サイト: https://opentiny.design/
OpenTiny コード ウェアハウス: https://github.com/opentiny/
Vue コンポーネント ライブラリ: https://github.com/opentiny/tiny-vue (スター歓迎)
Angluar コンポーネント ライブラリ: https://github.com/opentiny/ng (スター歓迎)
CLI ツール: https://github ub.com/opentiny/ tiny-cli (ウェルカムスター)