Personal Movie Database Part 1 - UI Overview (JQuery Mobile AngularJS)

November 10, 2015 by Christoff Truter JavaScript   Angular   Jquery Mobile  

Over the years I've collected quite a number of movies and especially since I got burgled again in 2013 it's getting rather hard to keep track of everything. So I decided to create a little web application to keep track of my surviving collection (source code available for download at the bottom of the post).

I opted to use a bit of a mishmash of JavaScript libraries that I wouldn't normally use together in order to investigate the impact/possibilities of using them in a JQuery Mobile project I recently inherited while I am at it (kill two stones with one bird).

Have a look at my node package file.

{
 "description" : "Personal Movie Database",
 "readme" : "readme.md",
 "version" : "1.0.0",
 "author" : "Christoff Truter <christoff@cstruter.com>",
 "dependencies": {
  "angular" : "1.4.6",
  "jquery" : "2.1.4",
  "jquery-mobile" : "1.4.1",
  "underscore" : "1.8.3",
  "gulp" : "3.9.0",
  "gulp-uglify" : "1.4.2",
  "gulp-uglifycss" : "1.0.4",
  "gulp-concat" : "2.6.0"
 }
}

As a rule of thumb I avoid using JQuery and Angular together in a solution.

• JQuery is predominantly focussed on DOM manipulation / traversal, Angular on the other hand can do all of the above (in a more intuitive structured way) and much much more.
  
  
• JQuery is unaware of Angular's Scope Life Cycle, directives etc which means you need to explicitly write a bunch of code than you wouldn't have needed to otherwise.

Needless to say, there is ample other reasons,  you can read a more comprehensive discussion about it over here.

Nonetheless, here we are (awkwaaard)...

Since I am using JQuery Mobile, I am dependant on JQuery (or alternatively I can rewrite the JQuery Mobile Framework using pure AngularJS, uhhhh, not today), preferably I would have rather used something like Material, or UI Bootstrap, but lets assume this a must-use scenario.

Here is a quick list of possible guidelines (feel free to criticize, it is a work in progress).

1. Provide pre-rendered markup aka data-enhanced="true" when/where possible, thereby avoiding DOM manipulations outside the Angular habitat as much as possible.
   
   
2. Do all your JQuery Mobile DOM manipulations via directives (I created a little module, containing all my JQuery Mobile enhancements for this purpose, making it quite easy if I ever need to reuse this abomination to the Lord).
   
   
3. Avoid using JQuery in your controllers (it's solely there to facilitate JQuery dependent functionality).
   
   

Other points (I am conflicted about).

1. Both JQuery Mobile and AngularJS provides routing functionality, there is unfortunately quite a big contrast in methodologies used, making it a bit tricky. Currently I am using JQuery Mobile's routing mechanism therein avoiding a lot of ugly plumbing.(I am not awfully thrilled about this, ngRoute is vastly superior, I will revisit this point in the near future).
   
   
2. Related to the point above, I "converted" my JQuery Mobile Page events to promises (feels a bit awkward and out of place).
   
   

   // Fires when the page transitions etc finish.
   Helpers.App.Delegate.Init($q).then(function() {

Build Process

You might have noticed the app folder, this contains all the JavaScript source code to run the application, in the root folder there is a batch file called "build.bat".

The batch file will call the node package manager, which resolves all the needed dependencies as specified in the package file, copy static resources to their appropriate folders and kick off my gulp build process.

call npm install
xcopy /S /Y /I ".\node_modules\jquery-mobile\dist\images\*.*" "..\css\images"
call gulp

I've got two build tasks (three if you count the default task) one to concat, minify all my JS resources and another for my CSS resources (like seen below).

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    uglifycss = require('gulp-uglifycss'),
    concat = require('gulp-concat');


gulp.task('minify-js', function () {
    return gulp.src([
   'node_modules/angular/angular.min.js',
   'node_modules/jquery/dist/jquery.min.js',
   'node_modules/jquery-mobile/dist/jquery.mobile.min.js',
   'node_modules/underscore/underscore-min.js',
   'Scripts/Common/Helpers.js',
   'Scripts/Services/*.js',
   'Scripts/Controllers/*.js',
   'Scripts/Modules/*.js',
   'Scripts/config.js']).
  pipe(concat('app.js')).
  pipe(uglify({
            mangle: false
        })).
  pipe(gulp.dest('../js/'));
});


gulp.task('minify-css', function () {
    return gulp.src([
   'node_modules/jquery-mobile/dist/jquery.mobile.min.css', 
   'Styles/Styles.css']).
  pipe(concat('app.css')).
  pipe(uglifycss()).
  pipe(gulp.dest('../css/'));
});


gulp.task('default', ['minify-js', 'minify-css']);

You might have noticed the "mangle: false" property in my minify-js task.

Due to AngularJS's string-dependent dependency injection, when code is minified, dependencies no longer have their proper names and therefore cannot be resolved. There is a variety of ways to fix this, but I opted to use the non-mangling option (beyond the scope of this post).

Services

I make use of three services in the application.

• Facebook Service
  Included via my Facebook Angular module to facilitate my login / security.
  
  
• DB Service
  Local service for saving movies to my database (will discuss this service in greater detail in part 2).
  
  
• OMDB Service
  Fantastic little remotely hosted service provided by Brian Fritz that I use for movie searches etc (will discuss this service in a future post as well)
  
  

Thank you for reading and be sure to download a copy of the app source code below.