This is a guest post by Jonathan Grupp

Generator-M-Ionic is an open source collection of advanced workflows for building cross-platform HTML5 mobile apps with Ionic. This article gives a quick introduction into the generator’s capabilities and refers to more elaborate resources for those willing to work with it.

As we’re transitioning to the next generation technology stack with Typescript, Angular 2 and Ionic 2, we’re trying to overcome JS fatigue and JS tooling fatigue and bring the development of the different tools closer together. You can help us by joining the discussion!

What’s Generator-M-Ionic for?

Advanced workflows for building rock-solid Ionic apps: develop, prototype, test, build and deliver high quality apps with Yeoman, Gulp, Bower, Angular, Cordova and of course Ionic. All in one sexy generator.

The roots of Generator-M-Ionic reach back more than two years when my team and I (@gruppjo) at M-Way Solutions decided to move our HTML5 mobile app development stack to Angular and Ionic in early 2014. Since then Generator-M-Ionic has grown into a full-fledged collection of development tools for building large-scale enterprise apps with Cordova, Angular and Ionic.

Built on top of the Yeoman Ecosystem with Gulp, Bower and npm, Generator-M-Ionic offers highly efficient workflows for building apps from start to finish by wiring together a complex technology stack and by providing workflows for all important aspects of professional cross-platform HTML5 app development with Cordova, Angular and Ionic.

Here’s a brief overview of Generator-M-Ionic’s capabilities:

Code Generation

• yo m-ionic sets up a fine-tuned project including:
  • worry-free Git integration
  • a properly configured Cordova project
  • an out of the box sample app
  • seamless Sass integration
  • easy to understand file-structure
• sub generators create ready to use components like Angular controllers, templates, services and more

Development Workflows

• gulp watch automatically connects the frontend-stack including Angular, Ionic and all other bower components, stylesheets, your own Angular and Ionic components with your app and watches for changes
• gulp --livereload "run ios" builds an app for your device and watches for changes on your dev machine using Browsersync
• … discover more useful workflows in our Development Introduction

Code Quality

• ESLint together with other JSONLint runs along with all important development tasks
• gulp karma and gulp protractor profit from an out-of-the-box ready-to-use Testing workflow
• these integrate nicely into Continuous Integration, precommit and other hooks with Husky

Continuous Integration

In addition to our CI-ready build and test workflows, injecting Build Vars into your build and other CI features complement a successful Continuous Integration setup with Generator-M-Ionic.

Advanced Workflows

Handling CORS & Proxying issues, managing different sets of App Icons and splash screens, tackling different API endpoints and other things with Environments and much more is part of the Advanced Workflows Section of our Guides.

Ecosystems

Creating things like backends, push services, user management, build infrastructures and others can be hard. Luckily there’s ecosystems like the Ionic Platform, our own enterprise-targeting Relution, which your Generator-M-Ionic project integrates into nicely. Read more.

If that wasn’t enough

… check out our GitHub repository for the full documentation!

Besides that, we recently had the pleasure of publishing a full blog series about Generator-M-Ionic on the Ionic Blog. Give it a go for a more tutorial-like approach of getting to know the full value of Generator-M-Ionic:

• Advanced workflows for building rock-solid Ionic apps. Part 1: Playground
• Advanced workflows for building rock-solid Ionic apps. Part 2: Mountain
• Advanced workflows for building rock-solid Ionic apps. Part 3: Orbit

We’d love to hear your feedback!

Transitioning

With Angular 2 release candidates and Ionic 2 betas now being released almost every week we’re preparing to make our transition in a reasonable and educated fashion.

The Angular 1 & Ionic 1 ecosystem is huge and many companies like ourselves, or organizations who use our generator have a large number of apps and assets written for this stack. Therefore the Angular 1 / Ionic 1 stack will continue to play a major role for a long time to come, before the majority of the market will have made its transition.

Thus it’s especially important for us to provide tools that capitalize on these assets and apps instead of rendering them useless. A smooth transition instead of mindlessly rushing towards the new stack.

For this we need your help.

Spark the discussion

If you like what you’re seeing in our generator you can help us figure out how all of us can build Ionic 2 apps in the future. There’s many open ends and a lot of commotion regarding the whole Angular 2 / Ionic 2 stack. Whether to Browserify or to Webpack, to ES6/7 or to Typescript and whether to CLI or to Yeoman?

There’s a lot of choices contributing to JS fatigue and from a tooling standpoint this isn’t any different.

There is an Angular 2 CLI prototype from the Angular creators and the Ionic 2 CLI from the Ionic creators. Unfortunately both of them are more or less closed systems which drastically complicates building on top of it to suit your own needs. As of now it’s time consuming, partly impossible to get Ionic, Cordova, a proper e2e and unit testing workflow, linting, environments, build vars and many of our other features into each of these tools without forking and largely altering them.

Personally I’m quite intrigued by the flexibility of the FountainJS Generators, which is the next generation of the famous generator-gulp-angular, both created by @zckrs and @Swiip. I hope we can build on top of their architecture. Relying on the Yeoman architecture allows tremendous flexibility and extensibility in their and our project. Unfortunately the Angular 2 CLI and the Ionic 2 CLI don’t use Yeoman and don’t provide easy ways to build on top of their functionality. In fact that’s exactly the same problem we had with Angular 1 and Ionic 1 and is the reason why we started building our generator in the first place.

Get in touch

You can help by joining the discussion, tell us which features of Generator-M-Ionic, the Angular 2 CLI and the Ionic 2 CLI you like and hopefully we can bring development of all of them closer together, getting rid of some of that decision fatigue and bring better tools for all of us.

You can start by commenting on this issue in our repository, or dive deeper into to the corresponding discussion over at the yeoman repo, angular-cli repo or ionic-cli repo.

Let us know what you think and help us build better tools for the next generation of HTML5 mobile app development!

For everything else our GitHub repository and Gitter channel is the way to go!