Developing websites with same API as mobile

Question

I'm only familiar with native mobile development, not web development, so forgive my naïvety.

An API for a mobile app would usually involves requesting via POST or GET data from an API. The data would be returned as JSON. For the sake of this example, imagine the API is a simple one powered by Sinatra / Ruby, which would be consumed by both the mobile and website.

What are the options for website development using the same paradigm - with the web front-end getting it's data from the same JSON endpoints as the mobile app?

I've heard the names AngularJS and Backbone.js thrown around, though perhaps Sinatra is enough? I would prefer not to use PHP.

I would prefer a lightweight solution. If possible, I would like it to be able to update pages when the model changes, though I'm guessing this would depend on backend API changes.

Answer 1

You will get the biggest bang for your buck if your service and UI tiers are completely separate. And by that I mean, design your services without a particular UI in mind, because doing so gives you the maximum reuse for them. I would recommend a RESTful, web based service implementation because they give a great amount of flexibility for UI integration. There are literally legions of libraries now that are capable of consuming data from such services.

I am not a Ruby developer, but here is a simplistic web service implementation in Sinatra:

require 'rubygems'
require 'sinatra'
require 'lib/posts'

post '/posts'
    post = Post.create! params
    redirect "/posts/#{post.id}"
do

get 'posts/:id' do
    @post = Post.find(params[:id])
    erb :post
end

Attribution: Lightweight Webservices with Sinatra and RESTClient.

Note that the actual language/platform used for the service implementation is irrelevant, as long as its RESTful, and returns data that clients can easily consume. Once you have that setup, then designing a web app vs a mobile app becomes a matter of choosing an appropriate integration library:

• HTML(5)/CSS/Javascript. One of the more robust options, as it can be used to implement both mobile and web applications. The three mentioned techs form the core of the new Web 2.0 architecture, and various frameworks exist: Angular.js, Ext.js, Backbone.js, Knockout.js, and even jQuery Mobile or Bootstrap. This is by far the most common way to integrate web service API's with web applications, currently. Note that in some cases you can even get away with just designing a web site, then using it as the basis for your mobile app (via an iOS UIWebView/Android WebView, for example).
• Middle Tier Proxy: You would go this route if you wanted to void Ajax in the browser (for security purposes, or to avoid XSS issues). The proxy could be written in any language (Java, PHP, Ruby, Perl), and would be responsible for consuming your web services and generating dynamic HTML for your UI.

As a real world example, my current project has a large number of RESTFul web-services built out using Java EE/JAX-RS running on clustered JBoss servers. The services return JSON by default, but can also generate XML, and are accessed from:

• Various internal and external web applications built using Ext.js
• iOS applications using a combination of AFNetworking/RestKit/NSURLConnection
• Android applications using Jersey REST Client

The exact same services are used by multiple different platforms/UI's, with no changes required on the service side. Which is what I believe you are trying to accomplish.