Building Modular Mobile/PhoneGap Apps with Backbone.js, RequireJS & Topcoat — Sample App

In my previous post, I discussed the process of building modular applications with Backbone.js and RequireJS, and I shared a new version of my Employee Directory sample application built with Backbone.js, RequireJS, and Twitter Bootstrap.

In this post, I share the Mobile/PhoneGap version of the same application. This application is an example of how to build modular PhoneGap applications with Backbone.js and RequireJS. I also use the new Topcoat CSS library for the application’s mobile skins. You can learn more about Topcoat here.

You can experience the application below:

Click here to run the app in a full browser window.

Application Architecture and RequireJS Benefits

Refer to the previous post mentioned above to learn more about the way the application is architected and the RequireJS benefits.

Source Code

The source code for this sample application is available on GitHub: http://github.com/ccoenraets/directory-backbone-topcoat-require

Because the modules of this application are loaded using XMLHTTPRequest, you will get a cross domain error (Access-Control-Allow-Origin) if you load index.html from the file system (with the file:// protocol). Make sure you load the application from a web server. For example: http://localhost/directory-backbone-bootstrap-require.

If you want to go beyond the in-memory datastore, you can download the REST services in the following repositories:

directory-rest-nodejs (Node.js/MongoDB implementation)
directory-rest-php (PHP implementation)
directory-rest-java (Java implementation coming soon)

27 Responses to Building Modular Mobile/PhoneGap Apps with Backbone.js, RequireJS & Topcoat — Sample App

  1. Scopement June 28, 2013 at 3:50 am #

    Hey!
    i have a question about “Building Modular Mobile/PhoneGap Apps with Backbone.js, RequireJS & Topcoat — Sample App”

    is it correct that all elements of a listview are showing after the input into the searchbox?
    When i start the index.html the listview will be not showing in the browser. If i put some characters into the input field the elements of listviews are displayd.

    • sdf July 20, 2013 at 5:52 am #

      dcfdds

    • erwin October 4, 2013 at 11:50 am #

      I had the same issue, I modified the Home.js to display the list on when initializing :
      added the employee fetch with name empty…

      initialize: function () {
      this.employeeList = new models.EmployeeCollection();
      this.employeeList.fetch({reset: true, data: {name: ”}});
      this.render();
      },

  2. Leonard Zelig July 9, 2013 at 4:17 am #

    Great Work! :)

  3. NickSL July 10, 2013 at 5:07 pm #

    Hi Christophe, Have you been able to reference the cordova.js file and use the phonegap api within this app?

    I am having trouble getting a modular app to render and load properly when using require.js, backbone.js jquery.mobile and cordova.js

    I have seen examples to just include a script reference to cordova.js above the script reference where you initialize require.js. I have also seen examples where people inject cordova with require.js

    Neither solution has worked.

    Do you have an example where you have been able to use the phonegap.api within this app and have tested it on an android or iOS device?

    • Axel Olsson August 5, 2013 at 8:20 am #

      I agree, some input or answers to this would be greatly appreciated.

      I also find the title of the blog post quite misleading. Especially since the linked repository does not contain a PhoneGap/Cordova project. You might want to change the title so that it reflects what you’re showing here, which is: “Building modular mobile web apps with Backbone.js, Require.js and Topcoat”.

      Axel

    • Musk August 29, 2013 at 12:07 pm #

      I have the exact same problem.

  4. David July 14, 2013 at 7:41 am #

    Dear Christophe,

    Thank you very much for this post, by far the most clear and comprehensive I’ve found about developing mobile apps with Backbone.js!

    However, I have a hard time modifying the code to handle different types of transitions (in addition to slide left and right). Not to add the CSS styles needed for these transitions but rather to change the router.js and pageslider.js modules to apply them to my views.

    Could you please explain how you’d handle this problem?

    Thank you very much in advance! Best regards,

    David

  5. jwc July 14, 2013 at 6:52 pm #

    The blog states the application was built using backbone/phonegap and topcoat. Perhaps, I missed it completely but I don’t see any phonegap library being used here? I thought it is a part of this application. What am I missing

  6. Steve Guzman July 17, 2013 at 11:32 pm #

    I really believe you will do much better in the future I appreciate everything you have added to my knowledge base. Admiring the time and effort you put into your blog and detailed information you offer!
    instant storefront

  7. Mike Peer July 19, 2013 at 5:02 pm #

    You’re posts on Flex are being left in the tail end….
    When developing a multi platform systems today,
    is HTML5 using whatever combination of JS
    (JQuery, Mustatche, Bootstrap….) of choice the
    silver bullet?

    What I am asking is, if I develop an
    HTML/JS/CSS3 (View) JAX-RS/Java (Model, Controller)
    application, will I be *eventually* covered for Android, iOS, PC,
    Tablet….

    The browser is dead. Long live the browser question….

    Nick Khamis (PhD)

  8. physical therapy July 22, 2013 at 4:07 pm #

    These are truly impressive ideas in concerning blogging.
    You have touched some pleasant points here.
    Any way keep up wrinting.

  9. Hans Vu July 25, 2013 at 10:07 am #

    Thank you for this interesting post

  10. Enrico August 14, 2013 at 11:47 am #

    Thanks for sharing this. (i think your PHP API has some problems tho)

  11. Brian August 16, 2013 at 12:05 pm #

    It actually works with phonegap. Tested with iOS and Android.

    • Andries September 25, 2013 at 5:34 am #

      Can u make a github from your project? i cant reproduce it… i think im doing something wrong but i cant find out what!
      i would really appreciate the effort!

  12. manoj August 20, 2013 at 8:09 am #

    Thanks.

  13. Stan September 22, 2013 at 9:47 am #

    Hey Christophe,

    Any plans for a Marionette blog entry? It reduces so much of the boilerplate with Backbone alone. Our code base has been reduced by approximately 70% with Marionette.

    Also what are your thoughts on Angular?

  14. Abhas Tandon October 1, 2013 at 3:03 am #

    Thanks a ton for sharing this, Once again perfect timing for my current project.

  15. Rahmathullah M Pulikkal October 9, 2013 at 9:08 am #

    Hi Author,

    I’m facing some difficulties to frame require.js app in to Phonegap.

    I’m getting script error. It seems, its because in Phonegap index.html is being loaded using file protocol, while require.js needs http:// protocol.

    How to resolve this issue? Please help, It would mean a lot.

  16. Brandon Hines October 10, 2013 at 2:03 pm #

    Has the sync options been removed?

  17. Jerry November 4, 2013 at 6:25 pm #

    How to you deal with SEO with one page apps?

  18. Divya January 6, 2014 at 7:27 am #

    Awesome Post…. Great Work…..

  19. patchwork kilim March 24, 2014 at 5:11 am #

    Thanks a ton for sharing this

Trackbacks/Pingbacks

  1. Pure e Topcoat: due nuovi framework CSS da Yahoo e Adobe | Edit - Il blog di HTML.it - July 15, 2013

    [...] vederli in azione potete consultare un interessante tutorial su WebdesignTuts per Pure, e un post di Christophe Coenraets con un progetto funzionante costruito con PhoneGap, Backbone, RequireJS e [...]

  2. Sample Mobile Application with AngularJS | Christophe Coenraets - November 5, 2013

    [...] Employee Directory with Backbone.js, RequireJS, Topcoat and PhoneGap [...]

  3. Browserify Sample Application: with Backbone, jQuery, Handlebars, and Cordova | Christophe Coenraets - January 10, 2014

    [...] an example, I took my existing Employee Directory sample application and replaced the Require.js module implementation with Browserify. The application also uses jQuery [...]

Leave a Reply