Web App with dream team; AngularJS, Cordova, Yeoman & Topcoat

I spent some time goggling about the different workflows out there in the web applications development in general, and those ones that will be brought to native mobile apps (using the Cordova/Phonegap platform)  afterwards. The first complexity was to keep up with all the scattered approaches over there; not only every tutorial claims to win the best workflow/ best practise trophy but also the tutorials get outdated so fast after they are released (a time span of 5 months old tutorial is considered.. old!).

Maybe the most terrific answer about this issues is found here!

First approach; Cordova + Web Best Practices

More searching lead me to this gauntface.co.uk, the author (Matt Gaunt; a Developer Advocate for Chrome @ Google) suggested this workflow;

Yeoman-Heart-Cordova


Copyright; gauntface.co.uk

  • Make sure Ruby (gem -v) and Compass (gem install compass) are installed.
  • Create cordova project, add a platform to it
  • Inside the created cordova project, create a new dir called “yeoman” and yo webapp.
  • Copy the  config.xml file from the www directory over to yeoman/app.
  • In the Gruntfile.js, edit the line near yeoman:..  (in the tutorial it says; yeomanConfig but this is outdated too!) Change the dist location  to dist: '../www'
  • Add to the clean task so it can clean directories outside of it’s current directory;   options: {    force: true  }, Then the config.xml file is copied over to the www directory by appending xml to {ico,png,txt,xml}.

Now whenever you run grunt build, it’ll go through the build steps and load the appropriate files into the www directory.

Second approach; PhoneGap+AngularJS

Holly Schinsky ( Developer Evangelist at Adobe) wrote a nice starter app and tutorial devgirl.org. She wrote the article on June 2013 but it got outdated by October! This is a fast evolving era especially with the V8 JavaScript platform Google had introduced. The community gets bigger and so the tools get changed very often;

  • ngMobile has ben renamed to ngTouch.
  • newer version of cordova.

I loved the Topcoat UI Toolkit and will definitly use it for one app i’m working on. The author confirms; This project was written a few months ago so you can refer to a newer version of Cordova… I will get around to updating this as soon as I can with a 3.0 or greater version to make sure it all works.

Third approach; Yeoman, AngularJS & Cordova

Nick Stuart (Senior Software Developer @ Portland Webworks) wrote an intresting workflow at his blog post portlandwebworks.com.

Copyright; portlandwebworks.com


Copyright; portlandwebworks.com

  • Create a directory where to put the Yeoman stuff; md ang-droid\ang-droid-frontend
  • Install Angular yo angular then  bower install --dev actually yo does that for you. Then gruntto check if verything is ok.
  • cd..back to parent dir and cordova create ang-droid Once finished, we should have the following directory layout for everything:
    • +– ang-droid
    •         +– ang-droid //home of our Cordova android app
    •         +– ang-droid-frontend //home for all our html assets
  • The following instructions are missing some steps (this “edgy” tools change a lot, remember?), to fix this
    cd ang-droid  Then create a target platform cordova platforms add android then  cordova build android.
  • Copy the cordova script; copy "platforms\android\assets\www\cordova.js" "..\ang-droid-frontend\app\scripts"
  • Include <script src="scripts/cordova.js"></script> inside “ang-droid-frontend/app/index.html” to be loaded up before the angular scripts.
  • Add a jshint directive in Gruntfile.js to ignore all  '!<%= yeoman.app %>/scripts/cordova.js' errors .
  • Remove the existing Cordova template files (had to correct paths); rd /S "www"
  • The next step is to configure cordova to get the source from our front end app directory by editing  ant.properties. But this is outdated; the  ant.properties doesn’t exist in newer cordova! So i’ll skip this step and use the methode from above (Change the dist location in Gruntfile.js).
  • Same thing like above for the clean task and the config.xml file.
  • This should be all the setup that is required for the android side of things. The other tutorial talks about starting services yo angular:service CordovaReady but I’m done with it, I’ll run grunt build then  cordova run android instead.. Basta!

My workflow!

After testing the different workflows, I can now filter the best parts of each one and address a refined/better one (so far) according to my likeliness. A solid upgradable workflow; that’s what I’m aiming at.

Before digging inside the workflow, I would like to mention why I have chosen each of the technologies on the workflow.

Cordova

Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. I used to build a native app using the Java/Android SDK/Eclipse, but I wanted to play a bit with hybrid apps and benefit from the ability to port my apps to wider mobile platforms.

AngularJS vs jQuery Mobile

I preferred the use of AngularJS (by Google) for many reasons; First I already know and code using the jQuery framework, and I want to learn something new, AngularJS was the perfect candidate. After reading some reviews about it compared to jQM I found many posts complaining about the later. What really got my attention was this short video on AngularJS website, with few lines of code you can do a lot!

Yeoman, Grunt & Bower

I think the yeoman.com introduction says it all; Yeoman 1.0 is more than just a tool. It’s a workflow; a collection of tools and best practices working in harmony to make developing for the web even better.

  • Yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks that you might need for your build.
  • Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib.
  • Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.

Ok! Here we go.. The workflow

  1. After setting up all the necessary tools and insure that everything (Android SDK, Node.js, Paths..) works, I lunch the nod.js command prompt that I configured to use my default app folder.
  2. Setup Cordova;
    1. New Crordova project; cordova create mp com.numediaweb.mp "MarchesPublics"
    2. cd mp
    3. Add a new platform; cordova platforms add android
  3. Generate Yeoman code;
    1. Sub-folder for Yeoman; md yo
    2. cd yo
    3. Generate AngularJS code; yo angular
  4. Further setup;
    1. Copy config.xml; copy "..\www\config.xml" "app"
    2. Edit Gruntfile.js; Add xml in the copy>dist>files>src directive. Set the distribution to the parent www folder and declare in the clean directive options force: true (check above for details)
    3. You may check this article for best practices..
  5. Setup cordova dependencies;
    1. Copy cordova.js; copy "..\platforms\android\assets\www\cordova.js" "app\scripts\"
    2. Include inside app/index.html before angular; <script type="text/javascript" src="scripts/cordova.js"></script> but comment it out when testing in the browser!
  6. Finish;
    1. Check project for errors and build; grunt build
    2. To run the test in a browser, I could use cordova serve android which generates a local server http://127.0.0.1:8000/#/ so I can see the app. But the problem with this approach is the need to build the project each time before previewing the edits; Cordova serves the www folder inside the choosen platform, which not where I’m currently working.. So I’ll use the Grunt way; grunt serve which allows runtime changes view.
      Optionally, Ican use a Chrome extension named  Ripple Emulator (Beta) which is a browser based html5 mobile application development and testing tool.

One Response to “Web App with dream team; AngularJS, Cordova, Yeoman & Topcoat”

  1. Antonio January 17, 2014 at 11:43 am #

    I stumbled upon this post after having spent quite some time with every one of the approaches you mention in the start of the article.
    Yours is the only one that actually got me to a runnable example. Thank you sir!

Leave a Reply


*