これは、Jonathan Grupp によるゲスト投稿です。
Generator-M-Ionic は、Ionic を使用してクロスプラットフォーム HTML5 モバイルアプリを構築するための高度なワークフローのオープンソースコレクションです。この記事では、ジェネレーターの機能の簡単な紹介と、それを使用したい人のためのより詳細なリソースへの言及を示します。
Typescript、Angular 2、および Ionic 2 を使用した次世代テクノロジースタックへの移行を進めているため、JS の疲弊と JS ツール疲労を克服し、さまざまなツールの開発をより密接に結び付けようとしています。議論に参加してご協力ください！
Generator-M-Ionic は何のためにあるのですか？
堅牢な Ionic アプリを構築するための高度なワークフロー：Yeoman、Gulp、Bower、Angular、Cordova、そしてもちろん Ionic を使用して、高品質のアプリを開発、プロトタイプ作成、テスト、構築、および配信します。すべて 1 つのセクシーなジェネレーターで。
Generator-M-Ionic のルーツは、私と私のチーム（@gruppjo）が M-Way Solutions で HTML5 モバイルアプリ開発スタックを Angular と Ionic に移行することを決定した 2014 年初頭にまで遡ります。それ以来、Generator-M-Ionic は、Cordova、Angular、Ionic を使用して大規模なエンタープライズアプリを構築するための、本格的な開発ツールコレクションに成長しました。
Yeoman エコシステムの上に、Gulp、Bower、npm を使用して構築された Generator-M-Ionic は、複雑なテクノロジースタックを配線し、Cordova、Angular、および Ionic を使用したプロフェッショナルなクロスプラットフォーム HTML5 アプリ開発のすべての重要な側面に関するワークフローを提供することにより、最初から最後までアプリを構築するための非常に効率的なワークフローを提供します。
Generator-M-Ionic の機能の簡単な概要を次に示します
コード生成
yo m-ionicは、以下を含む微調整されたプロジェクトを設定します- 心配のない Git 統合
- 適切に構成された Cordova プロジェクト
- すぐに使用できる サンプルアプリ
- シームレスな Sass 統合
- 理解しやすい ファイル構造
- サブジェネレーターは、Angular コントローラー、テンプレート、サービスなど、すぐに使用できるコンポーネントを作成します
開発ワークフロー
gulp watchは、Angular、Ionic、その他すべての Bower コンポーネント、スタイルシート、独自の Angular および Ionic コンポーネントを含むフロントエンドスタックをアプリに自動的に接続し、変更を監視しますgulp --livereload "run ios"は、デバイス用のアプリをビルドし、Browsersync を使用して開発マシンでの変更を監視します- …開発の紹介で、より便利なワークフローを見つけてください
コード品質
- ESLint は、他の JSONLint とともに、すべての重要な開発タスクとともに実行されます
gulp karmaおよびgulp protractorは、すぐに使用できる テストワークフローの恩恵を受けます- これらは、Husky を使用した継続的インテグレーション、プリコミット、その他のフックにうまく統合されます
継続的インテグレーション
CI 対応のビルドおよびテストワークフローに加えて、ビルドに Build Vars を注入し、その他の CI 機能は、Generator-M-Ionic での継続的インテグレーションのセットアップを補完します。
高度なワークフロー
CORS およびプロキシの問題の処理、さまざまな アプリのアイコンとスプラッシュスクリーンの管理、環境を使用したさまざまな API エンドポイントやその他の問題への取り組みは、ガイドの 高度なワークフローセクションの一部です。
エコシステム
バックエンド、プッシュサービス、ユーザー管理、ビルドインフラストラクチャなどの作成は難しい場合があります。幸いなことに、Ionic Platform や、Generator-M-Ionic プロジェクトがうまく統合される当社独自のエンタープライズ向け Relution などのエコシステムがあります。詳しくはこちら。
それだけでは不十分な場合
…完全なドキュメントについては、GitHub リポジトリをご覧ください！
さらに、最近、Ionic Blog で Generator-M-Ionic に関する完全なブログシリーズを公開する機会に恵まれました。Generator-M-Ionic の完全な価値を知るための、よりチュートリアル的なアプローチのために試してみてください
- 堅牢な Ionic アプリを構築するための高度なワークフロー。パート 1：遊び場
- 堅牢な Ionic アプリを構築するための高度なワークフロー。パート 2：山
- 堅牢な Ionic アプリを構築するための高度なワークフロー。パート 3：軌道
フィードバックをお待ちしております！
移行
Angular 2 リリース候補と Ionic 2 ベータ版がほぼ毎週リリースされるようになり、私たちは合理的かつ教育的な方法で移行する準備をしています。
Angular 1 および Ionic 1 エコシステムは巨大であり、私たち自身やジェネレーターを使用している組織などの多くの企業は、このスタック用に作成された多数のアプリとアセットを持っています。したがって、Angular 1 / Ionic 1 スタックは、市場の大部分が移行するまで、今後も長い間、主要な役割を果たし続けるでしょう。
したがって、これらのアセットとアプリを無駄にするのではなく、活用するツールを提供することが特に重要です。新しいスタックにむやみに急ぐのではなく、スムーズな移行を。
このためには、皆様のご協力が必要です。
議論を活発にする
ジェネレーターでご覧になっているものが気に入ったら、将来どのようにすれば全員で Ionic 2 アプリを構築できるかを理解するのに協力できます。Angular 2 / Ionic 2 スタック全体に関して、多くの未解決の問題と多くの混乱があります。Browserify を使用するか Webpack を使用するか、ES6/7 を使用するか Typescript を使用するか、CLI を使用するか Yeoman を使用するか？
JS の疲弊に寄与する多くの選択肢があり、ツール面から見てもこれは変わりません。
Angular の作成者からの Angular 2 CLI プロトタイプと、Ionic の作成者からの Ionic 2 CLI があります。残念ながら、どちらも多かれ少なかれ閉鎖的なシステムであり、独自のニーズに合わせて構築することが非常に複雑になっています。現時点では、Ionic、Cordova、適切な e2e およびユニット テストワークフロー、linting、環境、ビルド変数、およびその他の多くの機能をフォークして大幅に変更することなく、これらのツールに組み込むには時間がかかり、一部は不可能です。
個人的には、有名な generator-gulp-angular の次世代であり、@zckrs と @Swiip によって作成された FountainJS ジェネレーターの柔軟性に非常に興味をそそられます。彼らのアーキテクチャに基づいて構築できることを願っています。Yeoman アーキテクチャに依存することで、彼らのプロジェクトと私たちのプロジェクトで非常に優れた柔軟性と拡張性が可能になります。残念ながら、Angular 2 CLI と Ionic 2 CLI は Yeoman を使用しておらず、その機能に基づいて簡単に構築する方法を提供していません。実際、それはまさに Angular 1 と Ionic 1 で抱えていたのと同じ問題であり、そもそもジェネレーターの構築を開始した理由です。
ご連絡ください
議論に参加することで支援できます。Generator-M-Ionic、Angular 2 CLI、Ionic 2 CLI のどの機能が好きかを教えてください。うまくいけば、それらすべての開発をより密接に結び付けて、意思決定の疲労を取り除き、私たち全員のためにより優れたツールを提供できるでしょう。
リポジトリのこの Issue にコメントするか、Yeoman リポジトリ、angular-cli リポジトリ、または ionic-cli リポジトリでの対応する議論を詳しく調べて開始できます。
ご意見をお聞かせください。次世代の HTML5 モバイルアプリ開発のためのより優れたツールを構築するのにご協力ください！
その他すべてについては、GitHub リポジトリと Gitter チャンネルが最適です！