Infragistics のデザインからコードまでのソリューションの説明

この記事では、インフラジスティックスのローコード/ノーコードの設計からコードまでのソリューションのコア コンポーネントとモデルについて説明し、3 つの異なる規模の組織を簡単に分類して、アプリ開発サイクルと、App Builder設計からコードまでのすべてを効率化する方法について理解を深めます。私の目的は、このような設計からコードまでのソリューションが Web アプリの設計と開発をどのように改革するか、そしてそれがすべてのプロセスに不可欠な理由を具体的に理解していただくことです。

コード設計とは何ですか?

簡単に言うと、設計からコード作成とは、ソフトウェア アプリケーションを設計段階からソフトウェア実装に移行するプロセスです。このプロセスでは通常、複数のチーム間での引き継ぎが行われます。

デザイン・ツー・コードツールとは

名詞

ウェブ アプリケーションの設計および開発プラットフォームは、チームをまとめ、引き継ぎを排除し、ウェブ アプリケーションの設計および開発プロセスのすべてのフェーズを合理化するための単一の真実のソースとして機能します。

私はアプリ開発アクセラレータをこのように定義します。

時間節約ツールの必要性が高まっており、さまざまな分野 (フィンテック、臨床研究、IT、健康、旅行、物流) の企業が、それらをビジネスに不可欠なソリューションとして認識し、実装し始めています。そのため、App Builderなどのイノベーションが登場し、Web アプリの設計と開発を大幅に進歩させ、改良しています。

さあ、始めましょう。

さまざまな規模の企業がWebアプリを構築する方法

このプロセスは簡単にまとめると次のようになります。アプリケーションを構築する場合は、まずアプリとしてまとめる設計から始めます。個人開発者や小規模な組織では、設計者と開発者は同一人物である場合が多く、また同一人物であることが多いため、その設計に基づいて Web アプリケーションを開発するのは、やはり開発者自身です。作成したものに満足したら、それを再び設計と照らし合わせます。それを見て、「すべて問題ないようです。すべてテストしました」と言ってから、デプロイします。これで、この Web アプリケーションが稼働します。

簡単ですよね？でもちょっと待ってください。

このプロセスは、いくつかのサブフェーズを含む設計、開発、展開フェーズで構成されており、最大 5 人 (通常は開発者) と最大 1 人の設計者で構成される個々の開発者/小規模ショップ組織で一般的です。

比較対象として中規模組織を見てみると、従業員数は約 250 人ですが、もちろん全員が開発者というわけではありません。

営業、マーケティング、専属デザインチームなど、さまざまな部門があります。各部門は自社用に、または請負業者としてアプリを構築し、他の企業や外部プロジェクトのニーズに応えます。アプリ開発プロセスはほぼ同じですが、中間ステップがいくつかあります。

次に、大規模な組織の場合ですが、ここでのアプリ開発プロセスは次のようになります。

より多くのステップ、より多くの承認、そして設計、開発、承認、展開の各ステップに関与するより多くの関係者。通常、チームはさまざまな媒体、プラットフォーム、アプリ、さらには国やタイムゾーンを越えて協力する必要があります。組織がワイヤーフレーム、ビューデザイン、画面デザインを作成し、最終的に実際の Web アプリを提供するために使用するソフトウェアにはさまざまな種類があります。

また、このタイプの組織にはより多くの要件が課されており、アプリは内部の目的や使用のために構築されることがよくあります。システム インテグレーターは大規模組織のカテゴリに分類されますが、主に他の組織向けの大規模なアプリを構築しています。

これらの組織を見ると、ソフトウェアを構築するために通常行われる手順に大きな違いはありません。プロセスを複雑にしているのは、コラボレーション サイクルとハンドオフの数です。ここで、チームがコラボレーションする際の最大の課題の 1 つが、通常、あまりにも多くの媒体を介してコラボレーションを行うことです。電子メールには Outlook、ビデオ通話には Teams、タスクには GitHub、Web ツールを使用します。また、Visual Studio Online または TFs git、ベクター グラフィック デザイン プラットフォーム、および他のすべてのツールに加えて混在するチーム コラボレーション フレームワークもあります。これは非常に多くのことです。そして、ツールとソフトウェア製品の間で調整を行うと、通常、多くの摩擦が生じます。

当社のソリューションは、設計と開発のオペレーションだけでなく、コラボレーション プロセスも考慮しています。まず、ローコード/ノーコードのApp Builderを統合した設計システムから始めて、UX、製品管理、製品開発を調整します。

App Builderの概要

App Builder Web アプリケーション配信のための完全なローコード マルチユーザー エクスペリエンスを備え、運用の調整、緊密なコラボレーション、製品レベル (DesignOps) での継続的なイノベーションを可能にするローコード プラットフォームです。

• エンタープライズUXおよび製品提供チームがUX、製品管理、製品開発間の互換性を運用できるようにします。
• SketchとFigmaデザインファイルをサポート
• 企業チーム全体で唯一の真実の情報源として機能し、関係者とのコラボレーションを促進します。
• 詳細な分析と画像ベースのプロトタイピングによるユーザーテストを可能にする

Infragistics のデザインからコードまでのソリューションのコア部分

UI キット– サードパーティのデザインツールの実装

​UIキットは、すべてのテクノロジーに対してまったく同じデザイン システムに従います。つまり、デザイナーは好みに応じてツールを切り替えることもでき (たとえば、SketchからFigmaへ)、特定のツール用に当社が提供するシンボルを使用してデザインを継続することもできます。

• デザイナーが使用するツールに関係なく、デザイナーをターゲットにして支援し、App Builderと統合しながら好みのツールで作業できるようにすることで、摩擦を軽減します。
• プラットフォームの実装に依存しない、UIコンポーネントの真実のソースとして機能する
• SketchとFigma用のアダプタもあり、UIキットシンボルの背後にあるメタデータを利用して、デザインされた画面をApp Builderに取り込み、実際のコンポーネントの観点から視覚化します。

UI コンポーネント –フレームワーク固有の再利用可能なコンポーネント実装

それらの動作、外観、および操作感は、デザイン システムによって決まります。

• フレームワーク間での概念の再利用性
• すべての新しいコンポーネントはApp Builderプラットフォームで利用可能になります
• ​Angular、Blazor、Web Componentsのコントロール

共通アプリモデル– システムの中心

フレームワークに依存しない方法でアプリケーションを記述できます。

• アプリケーションの構造、ビュー、インタラクションを定義する方法を抽象化する
• 異なるテクノロジーで同じアプリを使用できるようになります
• デザインを取得し、それをApp Builderが理解できるようにし、Angular、Blazor、またはWeb Components (Reactまだ進行中) のコード生成を可能にします。
• テクノロジー間で共通するパターンを定義する
• UIキット、App Builder、またはその他のサードパーティプラグイン上のデザインツールパーサーによって生成される

App Builder– デザインからコードまでのソリューションの最高峰

簡単に言うと、App Builder、ローコード/ノーコード方式で、視覚的にアプリを設計し、Angular、Blazor、またはWeb Components (Reactも近日登場) に対してアプリのコードを生成できるプラットフォームです。すべてがドラッグ アンド ドロップで、真の WYSIWYG 開発エクスペリエンスを実現します。ツールボックスにはコンポーネントがあり、さまざまな種類のビュー レイアウトから選択でき、ビュー間のナビゲーション/構造も用意されています。

• 自分で書いたコードと同じかそれ以上の品質でアプリを起動するためのコードを生成する時間節約ツールとして機能します。
• すぐに使えるプロジェクトテンプレート、またはすでに完成したFigma、Sketch、Adobe XDのデザインファイルから、アプリをゼロから作成できます。
• アプリ開発サイクルのどの段階でも参加できる開発者、デザイナー、プロジェクトマネージャー、関係者間のコラボレーションを促進する、唯一の真実のソースとして機能します。
• パーサー（UIキットから提供されるメタデータ）を介して共通アプリケーションモデルを消費し、デザインサーフェスを通じてそれを生成します。
• ​継続的な機能強化と機能追加

弊社のクライアントの 1 社は、次のように述べています。

「私の経験では、App Builderすると、完全に機能するアプリ フレームワークを作成するときに 70% 以上の時間を節約できます。デザイナー、顧客、その他の関係者とのコラボレーションが大幅に加速され、大幅に最適化されます。

最終的なアプリで使用される UI コンポーネントとスタイルを使用してアプリケーションを簡単に作成し、事前にプログラミングすることなくインタラクティブに表示できることは、顧客の要件を実現する上で非常に大きな利点となります。

App Builderによって生成されたAngularアプリは、Angular CLI で作成されたアプリケーションと違いはなく、通常のワークフローで完了できます。」

コードのプレビューと生成

Code Gen は、Common App Model を使用し、アプリケーション用のフレームワーク固有のコードを生成するサービスです。

• 抽象的なアプリモデルから、アプリケーション内のUIコンポーネントを実装する特定の製品への移行を理解する
• 一般的なアプリケーションパターン（ルーティング、動作、遷移）を理解する
• フレームワーク固有のリポジ トリ構造を作成する
• 生成されたアプリケーションを新しいGitHubリポジトリにデプロイできます
• 既存のGitHubリポジトリにPR更新できるか
• 将来的には、生成されたアプリケーションのビルドとAzureデプロイを開始できるようになります。
• コードビューをオンに切り替えて、実行中のアプリケーションと並べて表示できます。
• ​AngularまたはBlazorコード生成があります

GitHub 統合

App Builderを通じて、GitHub 統合を有効にしました。これにより、作業中のプロジェクトをデザイン サーフェイスから GitHub リポジトリに同期し、対象プラットフォームで実際に生成されたコードを保存できるようになりました。

• デザインから生成されたコードは、新しいユーザーリポジトリとしてGitHubに直接アップロードできます。
• 関連するGitHubリポジトリのデザインの更新は、App Builderを通じてプルリクエストとして開始できます。
• App Builder、生成されたアプリケーションをAzureに直接デプロイします。
• コードジェネレーターは、デプロイメントとCI用のGitHubアクションymlを作成します。

IT 業界にいると、現在 Web アプリを組み立てる方法に影響を与えるエージェント、プロセス、要因が絶えず変化し、複雑化していることにすぐに気付くでしょう。

がある：

フュージョン チーム、個々の開発者、シングル プレイヤー デザイナー、利害関係者、PM、UX ライター、マーケティング担当者、ユーザビリティ テスター、特定の要件を持つクライアント、慣れ親しんだ速度、機能性、包括性に欠けるソフトウェア開発をすぐに破棄できるデジタルに精通した消費者。

アイデア創出フェーズ、設計、引き継ぎ、コーディング、POC、反復、テスト、展開、マーケティングなど。

時間の圧縮、動的な作業環境、優先順位の変化、デジタル変革、さまざまなチャネルにわたるコミュニケーションの分散。

複雑すぎるし、時間がかかりすぎるので、自動化やツール化が本当に必要だと思われます。

このため、App Builderような設計と開発の「改革者」が登場し、DesignOps と DevOps を高速化し、市場投入までの時間を約 80% 増加させて、最新の Web アプリケーションの作成方法を改善しています。