Generator-hydra NPM

#Hydra

Hydra is an Angular-Meteor app generator that scaffolds a web application as well as a mobile application by using ionic.

Hydra

#Motivation

Meteor lets you build your application and run it on both the web and mobile with minimal effort. This works well if both your web and mobile interfaces are similar but there are issues if you want two very different applications. The designated web and mobile apps are both in the client folder and it is hard to separate the two.

Hydra divides the application on the javascript, HTML and CSS boundaries. If on a mobile device, the mobile angular module will bootstrap and not the web module and vice versa. The router will also inject the corresponding views. Finally all CSS is scoped by a top level id to avoid leaking styles into the wrong environment.

#Always Mobile

The mobile environment will automatically run when on Cordova but sometimes it's better to develop on the localhost server. Simulators are sometimes slow and early on in development, it might not be the best option. There is a file located at "server/settings.json" and it contains an "AlwaysMobile" key that is self explanatory.

Run the meteor server with the following command to read from it.

meteor run --settings server/settings.json

##Install

generator-hydra

npm install -g generator-hydra

##How does Hydra isolate both the web and mobile environments?

Bootstrap and Ionic CSS are imported into the app.less file and can be scoped to avoid collisions. The html tag will be given an id to trigger the scoped styles.

The Bootstrap and Ionic JS files are both imported from the ionicjs package. All of the javascript included in this package are surrounded and encapsulated in if statements to avoid conflicting with each other.

if(UseMobile){
	\\Ionic Code
}
if(!UseMobile){
	\\Bootstrap Code
}

In fact, all javascript and CSS are encapsulated within conditionals or specialized css.

UseMobile is small package that tells us our environment.

##Generators

There are a number of generators to help scaffold your application. Generators ease your development by taking care of the monotonous tasks for you.

####yo hydra

This sets up the structure for the meteor app.

####yo hydra:controller/directive/service/filter Option: --noguess

This creates a component with component name. If the component name is not given, it will prompt for a name with the current folder name as a placeholder. It guesses the module name by searching the current directory tree for "mobile" or "web". If you want to explicitly input the module name, use the "--noguess" option and it will prompt you.

All generators surround the javascript in an if statement to conditionally activate the code depending on the environment. It's a pain to add this yourself everytime.

####yo hydra:markup Component Name

Creates an html file and a less file with the correct suffixes.

##Installed Packages

email: Send email messages
meteorhacks:npm: Use npm modules with your Meteor App
less: The dynamic stylesheet language
accounts-password: Password support for accounts
matb33:collection-hooks: Extends Mongo.Collection with before/after hooks for insert/update/remove/find/findOne
dburles:collection-helpers: Transform your collections with helpers that you define
cleor41:usemobile: Designed to work with Hydra
cleor41:ionicjs: Namespaced Ionic and Bootstrap JS.
angular: Everything you need to use AngularJS in your Meteor app
angularui:angular-ui-router: angular-ui-router (official): Flexible routing with nested views in AngularJS

##Example

Visit the repository here to check out the scaffolded product.

##Bootstrap and Ionic

Bootstrap V3.3.5 Ionic V1.1.0

Bootstrap and Ionic CSS are loaded in app. Fonts are in the public directory. If the CSS is swapped out for newer CSS files, be sure to update the fonts url inside of the CSS.

All Bootstrap and Ionic javascript need to be encapsulated inside of UseMobile conditionals. On top of that, Ionic has specific dependencies. Therefore this is best suited for a package. Already made one here.

##File Load

Keep in mind, Meteor will still send all of the javascript, HTML and CSS in both environments. Even though it's harder for mobile and web to interact, both are still in the client folder. If this is a huge issue, code can be moved to packages where the load can be controlled. For most apps this isn't a big deal.

##Todo/Wishlist