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: http://github.com/ccoenraets/directory-backbone-topcoat

Notes

  • 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

35 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: http://macbuildserver.com/github/opensource/

  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 (http://filamentgroup.github.io/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 #

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

      Christophe

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

      @uniquename:

      - 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 #

      @Caricbrown,
      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.
      Christophe

  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 parse.com example. This example is backbone.js, and parse.com’s javascript sdk is based on backbone.js. I have found some documetation on how to convert a backbone.js app to a Parse.com 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 Parse.com 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 http://m.jsonline.com/brewcity/

    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 + Topcoat.io = unslidable range sliders…

    Thank you,

    Kane

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

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

    Armando

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

    Chris,

    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( zmoxga@gmail.com) 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 ?
    thanks

Trackbacks/Pingbacks

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

Leave a Reply

css.php