Sample Mobile / PhoneGap Application with Backbone.js and Topcoat

In this post, I’m excited to share my first sample application built with Topcoat.

Topcoat is a CSS library — a set of customizable styles for mobile components — that you can use to build polished, clean and fast mobile web apps. Topcoat has a desktop profile as well. Because Topcoat focuses exclusively on the UI layer and doesn’t overlap with the other layers of your application, you can build your application the way you want, with the framework you want, or no framework at all. Another thing that sets Topcoat apart, is that it’s built on the “Performance First” idea. You can take a look at the performance testing infrastructure here.

In this post, I use Backbone.js as the architectural framework and Topcoat as the UI toolkit to build my Employee Directory reference application.

You can experience the application below:

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

Source Code

The source code for this sample application is available on GitHub:


  • There is much more to Topcoat than what I’m showing in this sample app: many more components, two standard themes (dark and light), the ability to customize the styles (using Stylus) to create your own theme, etc. For more information, check out the style guide in the Topcoat repo.
  • It’s still very early development.
  • You can help by filing bugs or contributing to the project.

Additional Resources

49 Responses to Sample Mobile / PhoneGap Application with Backbone.js and Topcoat

  1. @lukemcneice June 4, 2013 at 12:43 pm #

    Great example of a performant hybrid app. Should add this to your github page:

  2. Eric Burnley June 4, 2013 at 1:25 pm #

    Awesome, I’ve been wanting to do a test app with Topcoat. Even over the pipe, it’s nice and quick. Just a note, but you probably know- there’s an overflow scrolling issue in Android 2.3.x stock browser & Dolphin. Firefox mobile works fine. Filed an issue on the github. Overthrow ( might be a good polyfill. Thanks for sharing the code.

    Thanks a lot for your Adobe MAX videos- really good helpful architectural practices.

  3. uniquename June 5, 2013 at 7:09 pm #

    Absolutely great example!

    One question, is there a reason, why you use jquery and not zepto?

    • Christophe Coenraets June 10, 2013 at 11:32 am #

      No real reason here, except that I’m hosting it as a web app for traditional browser delivery here.


    • myself June 27, 2013 at 2:03 pm #


      – querying Google for “jquery” gives approx. 80.200.000 pages

      – querying Google for “zepto” gives approx. 1.510.000 pages

      That’s why the author made the unheard of decision to use jQuery over zepto.

      Because everyone heard about jQuery and nobody heard about zepto.

      • Ricardo Torres June 27, 2013 at 8:55 pm #

        Is that sarcasm? Let’s hope so :o

  4. caricbrown June 5, 2013 at 11:23 pm #

    Hey Christophe,

    Any idea why this project and the similar one for Ratchet dont display correctly on a Samsung Galaxy S running Android 2.3.5?

    The issues are with the back image in the header (does not display in TopCoat and is messed up in Racthet), and I cant scroll when content is too large for the screen. The only way I can get all the content to fit on the screen is to use target-densitydpi=device-dpi.

    If I dont everything is cut off on the right and the bottom of the screen.

    All I did was create a new PhoneGap 2.6.0 project and copy in your code, and launch it on my phone. No joy.

  5. caricbrown June 7, 2013 at 1:24 am #

    Well, I think I answered my own question, Andorid 2.3.5 does not support overflow or .svg. So far I have tried “Overthrow.js” which works, but is very chunky. iscroll.js, does not want to play nice with the exisiting code for some reason as it does not allow you to scroll to the bottom of any list an stay there, it keeps bouncing back to the top. Any ideas how to prevent that?

    • Christophe Coenraets June 10, 2013 at 11:39 am #

      I think that because Ratchet is aimed at iOS devices, it’s probably not too surprising that some things don’t work on Android. I assume they only test on iOS.
      Topcoat targets all these platforms, but because it’s still early, I had to add my own code to it. For example, I added some basic styles for list scrolling that I didn’t test on all devices. These things will continue to be added to Topcoat and will be tested on all platforms.

  6. sydney arborist June 9, 2013 at 12:50 pm #

    Looking like a great application to all smartphone users. Great write up really.Keep it up…

  7. Jay June 10, 2013 at 9:36 pm #

    Wow, this is great, thanks so much. It’s especially nice and helpful to see TopCoat integrated right in — I can see myself updating Topcoat as it’s availble.

    I had one question — I noticed you have uploaded a example. This example is backbone.js, and’s javascript sdk is based on backbone.js. I have found some documetation on how to convert a backbone.js app to a example, but with this post being so new (and likely the freshest example online of how to build an app), if this post was tweaked to cover as well it would be so helpful. My brother has been learning more from this blog and the Max 2013 video you did than several books and online courses combined. Having a solidified, simply built but flexible architecture is so valuable. Thanks for doing this, it really makes getting started with PhoneGap so much more productive.

    If I get a chance to get the Backbone.js converted to Parse I’ll be sure to ping here in case you’d like to reference it.

  8. Snehal Patel June 11, 2013 at 6:15 am #

    This is an awesome example, i’m pretty new to the world of Hybrid app-Phonegap thing, would u be able to point me how does one go about ajaxifying this ?

  9. Ryan LeTulle June 13, 2013 at 10:32 am #

    This is awesome! Thanks

  10. Federico González Brizzio July 7, 2013 at 4:43 am #

    Hi Christophe,

    I packaged this app with Phonegap Build and made test with some phones:
    – scroll don’t works on oldies
    – if you type some name, later you can’t modify (app hang)

    Ideas? Thanks!

  11. Noah July 8, 2013 at 9:12 am #

    Hi Christophe,

    Could you please elaborate where exactly phonegap is being used in this app? I don’t see any cordova related files and folders, nor do I see the required www folder within which all the phonegap code is contained.

    Is it really created with Phonegap? Or is there a way to plug it into phonegap?

  12. Peter July 25, 2013 at 10:12 am #

    Thank you for this very informative sample.

  13. sydney arborist July 26, 2013 at 1:58 pm #

    Smartphone applications are really very helpful and making task easier to all businessmen.One can perform all important task while roaming across globe.

  14. Remedial Massage July 26, 2013 at 2:01 pm #

    Superb submit and fantastic blog, I like type of this type kind of interesting articles keeping it u. I am really loving the theme/type of the site.

  15. Guy July 28, 2013 at 6:30 am #

    From looking at the code in github I don’t see any specific configuration of PhoneGap? Am I missing anything?

  16. vending machines companies July 30, 2013 at 1:01 pm #

    Great to know about more smartphone helpful applications.Keep updating alike…

  17. zeek October 14, 2013 at 4:12 am #

    Check out this example of a mobile backbone app

    Inspired by your examples!

    • mrhexin January 12, 2014 at 10:41 pm #

      which place can we find your source code ?

  18. Kane November 5, 2013 at 1:45 am #

    I am having a few issues using topcoat UI range sliders. I am unable to “slide” them when using the mobile touch screen. Do you have any advice on how to fix this? Android 2.3 + Phonegap + = unslidable range sliders…

    Thank you,


    • Mehmet December 24, 2013 at 2:56 pm #

      Have you tried this combination on a big mobile application project? How is its performance?

  19. Mehmet December 24, 2013 at 2:57 pm #

    Have you tried this combination on a big mobile application project? How is its performance?

  20. Armando January 27, 2014 at 10:57 am #

    Always enjoy your articles, very reliable and detailed.
    I’m looking for a resource for PhoneGap themes, can you recommend one?


  21. Jonata March 25, 2014 at 11:55 pm #


    How I emulate this sample? Cordova? I get source, but I can’t use: cordova emulate ios
    Help me please…

  22. rando April 5, 2014 at 12:00 pm #

    i have compile your code become .apk for android. When i use on galaxy note this run perfectly but when i try to my galaxy y duos it cant be scroll? any help, thanks

  23. Pooya May 5, 2014 at 5:01 pm #

    I was looking for UI-only CSS library with performance in mind. I looked and tested everything over internet. Best performance I experienced was ChocolateChip, but it forces me to use jQuery which I prefer Zepto if I want to use any framework like that. I’m also bounded to backbone cause there’s just too much to load in app and there’s too much to get with REST and save offline in Storage.

    Anyway… I wanted to say thank you cause I saw your post by accident and it’s almost 1:00 am here and I want to make a demo app for my presentation tomorrow and I haven’t had decided which UI to use till now :) funny I never faced topcoat while googling.

    There’s also good articles related to phonegap and backbone here in your blog. Good reads :)

    • Robert June 24, 2014 at 9:41 pm #

      Actually, you could use jQuery 2.1.0. It’s quite a bit smaller since they dropped support in it for IE6-8. It’s also somewhat faster than jQuery 1.x. In contrast, Zepto, although small, is really terrible in performance, besides having quite a few bugs and incompatibilities with jQuery-specific plugins, etc. Depending on what you’re doing, Zepto can be from 30% to 50% slower than jQuery. Small size is not everything.

  24. jason June 17, 2014 at 2:31 am #

    I’am working on a mobile app that with phone gap 3.4, backbone1.1.2, requirejs 2.1.11.
    But I don’t know hot to import phonegap 3.4 into requirejs. My js can’t call navigation.notification.alert.
    cloud you please help me. If you have a example of it. Could please send the link to my email( very thanks.

  25. Minecraft giftcode generator July 16, 2014 at 3:39 pm #

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
    You definitely know what youre talking about, why throw away your intelligence on just posting
    videos to your site when you could be giving us something
    enlightening to read?

  26. brainHAx September 18, 2014 at 6:00 pm #

    hi ,

    nice work :)

    i just tested it out with 5000 random words and the app is very very slow on Samsung galaxy s3.

    i thought backbone.js might make the things faster….

    any clue about this ?

  27. Massage Therapy North Shore November 6, 2014 at 8:25 pm #

    Thanks for this article. I will share this with my developers who produce our remedial massage client management software which has a mobile phone component to it.

  28. robert December 4, 2014 at 6:56 am #

    The process which helps in enhancing overdue organic outcomes of a web page in primary google such as Google, Google, google etc is called efficient SEO. blog here

  29. straight from the source December 10, 2014 at 6:00 am #

    Achieving a high level of success with material promotion needs using the right strategy. There are several key problems that need serious consideration before composing any material. straight from the source

  30. Robert January 6, 2015 at 6:59 am #

    If you improve the procedure, you will end up with a lot of junk on your weblogs, some of which will not even correspond with the person topics of your weblogs. serrurier paris

  31. Danielgrant April 22, 2015 at 2:12 am #

    They use three methods to accomplish this: the “natural” technique, “organic” technique, and the “algorithmic” technique. anonymous

  32. sohbet May 6, 2015 at 4:09 pm #

    goood thanks admins

  33. mynet chat May 6, 2015 at 5:52 pm #

    Thanks you admin Ka-ran-lik – Dead ASDa

  34. emmanuel May 6, 2015 at 7:13 pm #

    tubidy you’re using the phone and music data wandering freely on the internet of a video circulating on the internet, and to a system that ease your download tr various applications.

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

    Fabrics we use in our form; The first-class micro-interlock; flex-fit, anti-bacterial, it has a thermo-balance, and immediately drying. This gives you the freedom to move your soccer jerseys of the match; It is designed stylish enough to be worn on a daily basis. Our models are produced in two types as my special jerseys and other digital printed.
    His highest production of our company, we use the sport socks products: cotton, cotton, polyester, nylon and lycra. It includes anti-bacterial.

  36. sohbet December 8, 2015 at 8:30 pm #

    duka’dan tum sevdiklerine selamlar. duka hepinizi selamliyor!

  37. helpful February 23, 2016 at 4:55 am #

    His highest production of our company, we use the sport socks products: cotton, cotton, polyester, nylon and lycra. It includes anti-bacterial. curvy bust

  38. çelik raf May 3, 2016 at 9:48 am #

    Thanks David Mead and geminiimatt

  39. hanry May 3, 2016 at 12:46 pm #

    Tubidy video search system is adapted to a kind of music phones. Today, located in one of the most popular applications on the recent practice among the tubidy music. Every day thousands of visitors who practice the day to day more and more visitors are witnessing the rise. This practice increases the Fenomenlig especially helping in the best way the download of all videos that have been watched on YouTube. You can download the iOS and easy way to practice your Android device and the application tubidy advantageous side in no time without loss can start to make the best of it.


  1. Best of JavaScript, HTML & CSS – Week of June 3, 2013 | Flippin' Awesome - June 10, 2013

    […] Christophe Coenraets converts his sample Backbone mobile app to use Topcoat CSS library for its UI layer. Sample Mobile / PhoneGap Application with Backbone.js and Topcoat […]

  2. Building Modular Mobile / PhoneGap Apps with Backbone.js, RequireJS and Topcoat — Sample App | Christophe Coenraets - June 27, 2013

    […] 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. […]

  3. PhoneGap with Django Backend | Some Cordova Questions and Answers - July 11, 2015

    […] and fetch the data from the Django backend with XHR requests in JSON format. There are lots of examples available in the […]

Leave a Reply