Obviously, there is no a single way to do this. So, I'll tell you the tools I use when have to build a mobile client working with API server app.
Backend:
- Ruby on Rails
- rabl gem (Ruby API Builder Language) is a Rails and Padrino ruby templating system for generating JSON, XML, MessagePack, PList and BSON. With this gem you can:
- Create arbitrary nodes named based on combining data in an object
- Pass arguments to methods and store the result as a child node
- Render partial templates and inherit to reduce code duplication
- Rename or alias attributes to change the name from the model
- Append attributes from a child into a parent node
- Include nodes only if a certain condition has been met
Frontend:
- Cordova: set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript.
- Angularjs (Optional)
- Ionic (If you choose to work with Angular): Free and open source, library of mobile-optimized HTML, CSS and JS components. Built with Sass and optimized for AngularJS. Ionic comes with an AngularJS and Cordova Seed Project example you can use to start your won app.
- angular-restmod (If you choose to work with Angular): Rails inspired REST-API ORM. With this you can have "javascript models" to interact with your Rails API. If you don't want to use this you can use Angular's $http
With Ember you can use ember_phonegap_starter. This is a starter kit to get you up and running with Ember inside a mobile application. This can be dumped inside a PhoneGap wrapper to create an App wrapper for your Ember application. (check out the screencast)
You can use bootstrap-for-ember (examples) to add Twitter Bootstrap 3 to your Ember app.