rutha - past, present and what's next

Origins

The fact that rutha is based in Hapi and Angular is a weird story. A while ago I worked for Admios who back then had a outsourcing service to a Santa Barbara cloud computing brokerage startup (or a grown up one at least).

The fashion trends back then was Backbone, so we build from zero to one a whole framework using Backbone, Underscore and Grunt, with Bootstrap as CSS theme and NodeJS running the boilerplate.

I had probably the best time building and using all these new things. Then Angular showed up. 

Don't you call this a regular jam

I'm gonna rock this land

I'm gonna take this itty bitty world by storm

And I'm just getting warm

 - Mama Said Knock You Out - LL Cool J

Being this a team focused on value, we might had tried to sell our boilerplate with workshops or presentations. But Angular was being supported by Google and in the end time to market is the rule in most places.

By the end of outsourcing gig, our 2 years tech baby was already "legacy".

One of the engineers went to another place and we tried to get the code open source but it never got traction. At least we tried.

In the meantime, I started using Express and Angular to learn what the fuss was all about. I think I figure out I needed a mentor so I asked my good friend Edgar to teach me. It worked. And it was like taking the pill to the rabbit hole.

Ah roomie zoom zim, I'm off to be wed

To Rhymealinda I remember umm, when we first met

In eighty-two back in school used to play up all the fools

 - 4 better or 4 worse - The Pharcyde

And I kind of disliked Express. It was like Sinatra all over again, spend time finding out good, community supported gems to get a good, web boilerplate. Somehow I stumble upon Hapi and remembered my good old days of ASP.NET. Comparing what I'd in Express vs what (in theory) could be accomplished, I was stuck. And the journey to rule them all Hapi and Angular began.

Present

With 100 commits and version stuck at 1.0.0, we have over 20 likes and over 300 page views, I can say the idea that started around August 2014 has worked. Currently, we have 3 projects using it and hopefully more. Our time to market has been reduced and developers can focus on Hapi and Angular and forget about tooling.

What's Next

Our roadmap will focus on pragmatism over bleeding edge patterns and trends, with two exceptions: ES6 and Angular 2.

Things we are considering and would like feedback

• Client side modules: We might moved to all npm, it depends on how easy is to get ES6 with angular.
• API CLI: For Hapi APIs, is something I see useful.
• John Papa/Todd Motto ng conventions CLI
• Sample apps
• Mobile First: Is very likely we'll take a NativeScript or Kendo UI Mobile approach. 

Thanks

Rogelio Morrell and rutha team

rutha - A Hapi and Angular boilerplate stack

Introduction

Rutha is a simple, one of many, Hapi boilerplate stack that  uses AngularJS as default client side technology. The basic premise is that it contains npm modules that handles the Grunt tasks, Mongo migrations (yes we are MEAN oriented) and system utils. Plus one forthcoming Vagrant / Ansible based deployment repo.

Rutha Modules

rutha-utils (npm: rutha-utils, github: molekilla/rutha-utils)

Based on my experience with Express, I'm using nconf and winston for configuration and logging management. Additionally, rutha-utils/mongoose binds the Mongoose schemas and events. This module keeps the boilerplate at a minimum but at the same time lets you decide which dependencies will be linked with the internal Hapi controllers. Look here for more details: https://github.com/molekilla/rutha/blob/master/ui/lib/hapi/index.js#L1-L63

rutha-grunt-mongo-migrations 

(npm: rutha-grunt-mongo-migrations, github: molekilla/rutha-grunt-mongo-migrations)

Runs a shell script for mongo-migrate. An optional module for those using Mongo. It might even be possible to add it as a set of npm scripts, but works for the use case required. Look here for more details: https://github.com/molekilla/rutha-grunt-mongo-migrations/blob/master/grunt/shell.js

rutha-grunt-tasks-service 

(npm: rutha-grunt-tasks-service, github: molekilla/rutha-grunt-tasks-service)

Groups all service layer tasks. Separates having all grunt tasks inside rutha and allows for decoupling (rutha might use a newer version than a cloned repo). Because service doesn't required client side madness, it contains a really simple set of task flows.

• grunt serve: Runs concurrent
• grunt spec: Runs jshint and jasmine 2.0 specs
• grunt coverage: Runs jshint, cleans previous coverage and runs Istanbul js code coverage
• grunt auditpkg: Checks module security
• grunt docs: Runs jsdoc3

rutha-grunt-tasks-ui 

(npm: rutha-grunt-tasks-ui, github: molekilla/rutha-grunt-tasks-ui)

Groups all UI related tasks. This is where the magic happens for the client side part. It handles both developer and build / deployment environment.

grunt autosync

This never got traction so it will be deprecated in 1.0

grunt serve

The tasks are:

• preprocess: Runs any grunt-preprocess template found in any client side HTML. Will not process any server side HTML. For that use Hapi.
• ngtemplates: Runs grunt-angular-templates. Takes the output in dist/html and generates a templates.js
• concat: Concat files
• ngannotate: Takes care of Angular Depedency Injection tagging. Uses grunt-ng-annotate.
• uglify: Does a uglify run and generates sourcemaps.
• bower_concat: Concats bower dependencies
• wiredep: For serving files, we recommend bower_concat, but wiredep is still an option.
• copy: Copies images in src/img and any inside src/css
• cssmin: Minifies bower CSS and src/css
• concurrent: Runs concurrent

grunt spec

The tasks are:

• preprocess: Runs any grunt-preprocess template found in any client side HTML. Will not process any server side HTML. For that use Hapi.
• jshint: Runs jshint
• jasmine_node: Runs Jasmine 2.0 Hapi Specs
• ngtemplates: Runs grunt-angular-templates. Takes the output in dist/html and generates a templates.js
• wiredep: Generates a list of dependencies for Karma.
• karma: Runs Karma

grunt build

The tasks are:

• preprocess: Runs any grunt-preprocess template found in any client side HTML. Will not process any server side HTML. For that use Hapi.
• ngtemplates: Runs grunt-angular-templates. Takes the output in dist/html and generates a templates.js
• copy: Copies images in src/img and any inside src/css
• bower_concat: Concats bower dependencies
• copy: Copies views and front end code (those required)
• concat: Concat files
• ngannotate: Takes care of Angular Depedency Injection tagging. Uses grunt-ng-annotate.
• uglify: Does a uglify run with no sourcemaps.
• cssmin: Minifies bower CSS and src/css
• compress: Zip files

There are other tasks, but these are the ones you'll use almost daily.

rutha_deploy (github: molekilla/rutha_deploy)

This will help you test your apps locally inside a Vagrant VM. Because the provisioning is Ansible based, you will be able to deploy to any cloud (AWS, Azure, DigitalOcean, etc)

rutha (github: molekilla/rutha)

rutha is then the main repo. At the top level you have a travis.yml and a package.json with a set of npm scripts that actually runs both service and UI specs to satisfy Travis or any CI package.

Service

The folder structure is as follow

• config: Add your JSON config by NODE_ENV name. Example: production.json will be read by an environment variable NODE_ENV=production
• lib: Contains the service business logic
• hapi/index.js: Important to know that it contains the REST documentation Swagger API. For production release, we recommend to remove this plugin.
• controllers: hapi based plugins.
• migrations: mongo-migrate migrations
• models: Mongoose schemas
• spec: Jasmine 2.0 specs

UI

The folder structure is as follow

• config: Add your JSON config by NODE_ENV name. Example: production.json will be read by an environment variable NODE_ENV=production
• lib: Contains the service business logic
• hapi/index.js: Handles server side pages and security.
• controllers: hapi based plugins.
• migrations: mongo-migrate migrations
• views: Hapi views
• partials: Hapi partials
• spec: Jasmine 2.0 specs

Up Next

Next post we'll show how to start with Hapi and some basics of how to create APIs and Views.

Rogelio Morrell