Part 1: Ember.js + Sails.js + PostgreSQL - An end-to-end technology-chain that enables rapid web application development in a RESTful fashion

Goal

Intention behind chaining technologies like Ember.js + Sails.js + PostgreSQL is to foster the below best practices in our end-to-end web application development (i.e. both client-side & server-side development).

Best Practices

Ember.js goodies [Client-side]

• Single-Page Application (SPA) on the client-side for improved user-experience
• MVC pattern that structure’s + manage’s interaction between the client-side software artifacts
• Convention-Over-Configuration to achieve productivity & understandability during development/maintenance phases

Sails.js goodies [Server-side]

• RESTful architectural style for piping CRUD operation between client-side calls & server-side persisted datasets
• Convention-Over-Configuration to achieve productivity & understandability during development/maintenance phases

PostgreSQL goodies [Server-side]

• ORDBMS, so as to harness its technological maturity & operational performance

By focusing on the above goodies, our goal in this blog-post is to primarily showcase technical details on how to chain such technologies together and at the same time introduce you to the rapid web application development that are highly maintainable.

Table of contents

• Goal
  • Best Practices
• Table of contents
• Prerequisites
• Ember.js
  • Bootstrapping
  • Additional JS libraries
  • Ember Inspector
• Sails.js
  • Bootstrapping
  • PostgreSQL: Create a new database
  • Adding Domain Model+Controller
  • Adoc testing CRUD-actions
• Source Code
• Conclusion
  • What’s next?

Prerequisites

NOTE: Pre-installation of the following software is a must

• Node.js & its NPM package manager
  
  • Bower npm package installed globally [sudo npm install -g bower]
  • Mimosa npm package installed globally [sudo npm install -g mimosa]
  • Sails.js npm package installed globally [sudo npm install -g sails]
• PostgreSQL object-relational DBMS
• Web-bowser i.e. latest Firefox or Google Chrome

Ember.js

Bootstrapping

My preferred way to bootstrap an Ember.js project is by using the ‘ember-peepcode’ seed. I primarily use this ‘ember-peepcode’ seed to bootstrap ember SPA app, because it takes into account the Emer.js framework’s best practices & at the same time it offers all my favourite HTML5 tooling:

• CoffeeScript as the primary application development language
• Mimosa as the build tool
• Jade html template including emblem & hbs
• Stylesheets written in stylus/less/sass/css
• Locks on to Ember-Model rather then Ember-Data
• Testing environment
• Bower as the dependency manager

Now, let’s fire-up the above mentioned seed:

$ mkdir my-webapp
$ cd my-webapp
$ mimosa skel:new ember-peepcode
$ npm install
$ bower install

NOTE: When you run the ‘bower install’ command, if you get asked the below question, then your answer should be ‘!2’:

Unable to find a suitable version for ember, please choose one:
1) ember#~1.0 which resolved to 1.0.1 and is required by ember-model#0.0.11
2) ember#1.5.0 which resolved to 1.5.0 and is required by ember-mimosa-peepcode

Prefix the choice with ! to persist it to bower.json

[?] Answer: !2

Now, run the mimosa server with this command:

$ mimosa watch -s

Now, test the running sample SPA app by visit the following url in your favourite web-browser:

http://localhost:3000

Additional JS libraries

Now, let’s add the following JS libraries as dependencies to our SPA app:

• Twitter bootstrap
• Sails.js data adapter

Run the below two commands, so that the Bower can fetch dependencies & auto-magically install them for us:

$ bower install bootstrap --save
$ bower install ember-data-sails-adapter#1.0.1 --save

NOTE: When you run the ‘bower install ember-data-sails-adapter#1.0.1 –save’ command, if you get asked the below question, then your answer should be ‘!3’:

Unable to find a suitable version for ember, please choose one:
1) ember#~1.0.0 which resolved to 1.0.1 and is required by ember-data-sails-adapter#1.0.1
2) ember#~1.0 which resolved to 1.0.1 and is required by ember-model#0.0.11
3) ember#1.5.0 which resolved to 1.5.0 and is required by ember-mimosa-peepcode
4) ember#>= 1.0.0 which resolved to 1.5.0 and is required by ember-data#1.0.0-beta.8

Prefix the choice with ! to persist it to bower.json

[?] Answer: !3

Now, let’s include the above installed JS libraries in our SPA app. This is done by referencing the below listed files in ‘/assest/index.html.jade’:

link(rel='stylesheet', href='stylesheets/vendor/bower-assets//bootstrap/bootstrap.css')
script(src='javascripts/vendor/bower-assets/bootstrap/bootstrap.js')
script(src='javascripts/vendor/bower-assets/ember-data/ember-data.js')
script(src='javascripts/vendor/bower-assets/ember-data-sails-adapter/ember-data-sails-adapter.js')

Ember Inspector

Within the comfort of your web-browser, the Ember Inspector enables us to debug Ember specific entities, such as View Tree, Routes, Data, Promises, Render Performances, among others. For more information regarding Ember Inspector visit it’s Github repository.

You may install this Ember Inspector, which is available as a Add-on/Extension for your specific web-browser:

• Firefox’s Ember Inspector add-on can be found here
• Chrome’s Ember Inspector extension can be found here

Sails.js

Bootstrapping

Now, bootstrap a Sails.js project:

$ sails new colours-restful-api
$ cd colours-restful-api
$ sails lift --verbose

Note: The running sails server can be accessed on the following URL:
http://localhost:1337

PostgreSQL: Create a new database

Create a new PostgreSQL database for the purpose of this project. Name this database as:

test_db

Adding Domain Model+Controller

Now, let’s add a model + controller called ‘colours’. This will provide a RESTful interface for a colours entity:

$ sails generate colours

Now, enable CORS on all routes in the file ‘/config/cors.js’ as follows:

Note: This will enable cross-site calls

allRoutes: true

Now, install the PostgreSQL sails adapter. This adapter is an npm package, which is directly installed into your current project:

$ npm install sails-postgresql

Now, add the below postgreSQL configuration in the file ‘/config/adapters.js’:

'default': 'postgresql',

postgresql: {
    module: 'sails-postgresql',
    database: 'test_db',
    host: 'localhost',
    user: 'postgres',
    password: 'xxxx',
    port: 5432,
    pool: false,
    ssl: false
  }

Now, add the following two properties to the above created colours model, which is located in ‘/api/models/Colours.js’:

attributes: {
    name: 'string',
    symbol: 'string'
}

Now, kill the running sails server & restart it by firing-up the sails server with the below command:

$ sails lift --verbose

Note: To directly view the colours model’s JSON dataset, visit this URL:
http://localhost:1337/colours

Adoc testing CRUD-actions

Now, you are ready to conduct the below CRUD-action tests, within the comfort of your web-browser:

Note: This kind of testing implicitly tests the generated blueprint-shortcuts-routes

Find all colours:

 http://localhost:1337/colours

Create + Update colours:

 http://localhost:1337/colours/create?name=Red

 http://localhost:1337/colours/update?id=1&symbol=STOP

 http://localhost:1337/colours/create?name=Yellow

 http://localhost:1337/colours/update?id=2&symbol=GET SET

 http://localhost:1337/colours/create?name=Green

 http://localhost:1337/colours/update?id=3&symbol=Go

 http://localhost:1337/colours/create?name=Orange

 http://localhost:1337/colours/update?id=4&symbol=GET SET

 http://localhost:1337/colours/create?name=orange

Delete a colour:

 http://localhost:1337/colours/destroy?id=5

Conditional find:

 http://localhost:1337/colours?where={%22symbol%22:%22GET%20SET%22}&sort=name%20desc&limit=1

Source Code

You can view both the projects source code in its entirety, here’s the bitbucket repository:

• Client-side (Ember.js project)
• Server-side (Sails.js project)

Conclusion

What we have seen so far, is how to independently bootstrap client-side & server-side projects. Also, we conducted some basic adhoc testing on these projects. Therefore, what we have is:

1. A SPA app built using Ember.js framework.

2. A RESTful API built-up with help of Sails.js framework, which incorporate’s PostgreSQL as the ORDBMS.

This has give us the foundation & a jump start, to built required feature-set from now on. Feature-set such as, engaging user-experience on the client-side and comprehensive CRUD services in a data-centric/distributed fashion on the server-side. All these are achieved under the umbrella of good-practices & ease-of-maintenance. Thus, helping the app development to face upto ever changing requirements of the real-world.

Nonetheless, at present our client-side implementation doesn’t talk or consume services provided by server-side any how! This implementation is what’s expected next…

What’s next?

We will continue on the present foundation in the next blog-post and demonstrate the SPA app (i.e. client-side) feature-implementation, which invokes CRUD operations on the RESTful API (i.e. server-side).