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:

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)

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

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

    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 #


    • 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: ”}});

  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 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”.


    • 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,


  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

    • asdad June 4, 2014 at 12:22 pm #

      This is actually the kind of information I have been trying to find. Thank you for writing this information.

  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,

    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 #


  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

  20. accurank tracker May 21, 2014 at 10:17 pm #

    Hello everybody, here every one is sharing these kinds of experience,
    thus it’s fastidious to read this weblog, and I used to go
    to see this blog everyday.

  21. asdad June 7, 2014 at 6:08 am #

    I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much.

  22. Jordan Baczuk June 27, 2014 at 5:07 pm #

    Yeah Cristophe is good. He has some good videos too:

  23. robert December 4, 2014 at 7:00 am #

    Getting visitors for all the products and the webpages listed with the help of paid visitors is not possible. But with the help of marketing of web page with the methods of efficient SEO, site will show all the webpages listed. address

  24. Robert January 6, 2015 at 7:03 am #

    Then again, you have the choice of simply gathering those prospective content in a directory where they will wait for your personal review. serruriers

  25. Danielgrant March 11, 2015 at 4:01 am #

    Then again, you have the choice of simply gathering those prospective content in a directory where they will wait for your personal review. Google

  26. No Escape Trailer March 12, 2015 at 4:43 am #

    This may, or may perhaps not, bring about obtained confidence and higher look for engine positions. No Escape Trailer

  27. Tahir Alvi March 25, 2015 at 12:20 pm #


    I was really looking an article where some sample code available with backbone.js.

    Nice work done.


  28. Danielgrant April 28, 2015 at 2:39 am #

    Select a regional SEO organization that maximizes your public networking content/updates. he has a good point

  29. sohbet May 6, 2015 at 4:08 pm #

    goood thanks admins

  30. mynet chat May 6, 2015 at 5:57 pm #

    Thanks yo u admin coe aets

  31. ali khan May 9, 2015 at 12:11 pm #

    The truth is, there are many of western functions wanting to create a fast ‘buck’ out of the ones that are basically unacquainted with the ‘black art’ procedure of SEO or Look for Motor Optimization.

  32. DGHGYDF YFDFD May 14, 2015 at 10:20 am #

    Nearly take my life, until a friend of mine introduce me to one Dr called udogun i never knew the man was so powerful until i got there by myself. gemmes

  33. ali khan May 15, 2015 at 7:46 am #

    Internet marketers can rely on weblink developing solutions Indian to get the job done in an experienced manner. Apart from excellent seo, weblink developing has various other advantages that dramatically improve your online earnings. reddit upvotes

  34. sohbet October 21, 2015 at 2:17 pm #

    Internet marketers can rely on weblink developing solutions Indian to get the job done in an experienced manner.

  35. forma imalatı November 18, 2015 at 3:00 am #

    Ткани, которые мы используем в нашей форме; Первый класс микро-блокировки; Flex-форме, антибактериальный, имеет термо-баланс, и сразу же сушки. Это дает вам свободу, чтобы переместить трикотажные изделия футбола в матче; Он предназначен стильный достаточно, чтобы носить на ежедневной основе. Наши модели выпускаются в двух типах, как мои специальных трикотажных изделий и другой цифровой распечатать.
      Его высокая производство нашей компании, мы используем спортивные носки продукты: хлопок, хлопок, полиэстер, нейлон и лайкра. Она включает в себя антибактериальны.

  36. sohbet December 8, 2015 at 2:50 pm #

    very nice to blog

  37. sohbet December 8, 2015 at 5:30 pm #

    kobra dukayi salicam uzerinize.

  38. oyun oyna December 10, 2015 at 6:56 pm #


  39. askerlik şubesi March 5, 2016 at 12:56 pm #

    cok iyi admincik

  40. java indir March 5, 2016 at 12:57 pm #

    tsk admin bey

  41. radyo dinle March 5, 2016 at 12:58 pm #

    very nice to blog

  42. sohbet odalari April 8, 2016 at 3:49 pm #

    kirgin cicekler

  43. sohbet odalari April 8, 2016 at 3:52 pm #

    zerra mek babi gum hak

  44. çet April 8, 2016 at 4:03 pm #

    magazalara ozel bu admin bey

  45. şifresiz sohbet April 8, 2016 at 4:03 pm #

    gardas beni duyuyon mu?

  46. adana sohbet April 8, 2016 at 4:04 pm #

    zamsung galaksi yedi bana geldi

  47. çelik raf May 3, 2016 at 9:46 am #

    I can’t get this to work on Adnroid 4.0+
    Is it compatible?


  1. Pure e Topcoat: due nuovi framework CSS da Yahoo e Adobe | Edit - Il blog di - 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