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

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

  • Eric Burnley

    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.

  • uniquename

    Absolutely great example!

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

    • Christophe Coenraets

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


    • myself


      – 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

        Is that sarcasm? Let’s hope so :o

  • caricbrown

    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.

  • caricbrown

    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

      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.

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

  • Pingback: Best of JavaScript, HTML & CSS – Week of June 3, 2013 | Flippin' Awesome()

  • Jay

    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.

  • Snehal Patel

    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 ?

  • This is awesome! Thanks

  • Pingback: Building Modular Mobile / PhoneGap Apps with Backbone.js, RequireJS and Topcoat — Sample App | Christophe Coenraets()

  • Federico González Brizzio

    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!

  • Noah

    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?

  • Peter

    Thank you for this very informative sample.

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

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

  • Guy

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

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

  • zeek

    Check out this example of a mobile backbone app

    Inspired by your examples!

    • mrhexin

      which place can we find your source code ?

  • Kane

    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

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

  • Mehmet

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

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


  • Jonata


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

  • 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

  • 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 :)

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

  • jason

    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.

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

  • brainHAx

    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 ?

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

  • robert

    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

  • straight from the source

    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

  • Robert

    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

  • Danielgrant

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

  • goood thanks admins

  • Thanks you admin Ka-ran-lik – Dead ASDa

  • emmanuel

    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.

  • Pingback: PhoneGap with Django Backend | Some Cordova Questions and Answers()

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

  • duka’dan tum sevdiklerine selamlar. duka hepinizi selamliyor!

  • helpful

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

  • Thanks David Mead and geminiimatt

  • hanry

    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.

  • tubidimobi

    Yes , this program is compatible with tubidy mobile

  • Loyal Vending

    This blog is very interesting about Topcoat. UI layer and framework is best to use your mobile web application.

    Please visit my website