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)

  • 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

      dcfdds

    • erwin

      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();
      },

  • Leonard Zelig

    Great Work! :)

  • NickSL

    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

      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

      I have the exact same problem.

  • David

    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

  • jwc

    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

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

  • Pingback: Pure e Topcoat: due nuovi framework CSS da Yahoo e Adobe | Edit - Il blog di HTML.it()

  • 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

  • Mike Peer

    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)

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

  • Hans Vu

    Thank you for this interesting post

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

  • Brian

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

    • Andries

      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!

  • manoj

    Thanks.

  • Stan

    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?

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

  • Rahmathullah M Pulikkal

    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.

  • Has the sync options been removed?

  • Jerry

    How to you deal with SEO with one page apps?

  • Pingback: Sample Mobile Application with AngularJS | Christophe Coenraets()

  • Awesome Post…. Great Work…..

  • Pingback: Browserify Sample Application: with Backbone, jQuery, Handlebars, and Cordova | Christophe Coenraets()

  • Thanks a ton for sharing this

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

  • asdad

    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.
    https://www.facebook.com/spywareforcellphone

  • Jordan Baczuk

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

    http://phonegap.com/blog/2013/11/12/lxjs-workshop/

  • robert

    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

  • Robert

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

  • Danielgrant

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

  • No Escape Trailer

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

  • Hi,

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

    Nice work done.

    Thanks,

  • Danielgrant

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

  • goood thanks admins

  • Thanks yo u admin coe aets

  • ali khan

    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. http://www.tikatoshop.it

  • DGHGYDF YFDFD

    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

  • ali khan

    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

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

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

  • very nice to blog

  • kobra dukayi salicam uzerinize.

  • thanx

  • cok iyi admincik

  • tsk admin bey

  • very nice to blog

  • kirgin cicekler

  • zerra mek babi gum hak

  • magazalara ozel bu admin bey

  • gardas beni duyuyon mu?

  • zamsung galaksi yedi bana geldi

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

  • Jennie Howser

    MPGH Serial Games can be extremely useful if you use it wisely, and no player can stand a chance against you as long you use this amazing

css.php