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.

Answer 2

One option, since you're familiar with native development I assume you're fine with java then I would suggest you use DropWizard for your API development which will serve up the JSON via a RESTful endpoint.

The webite is exactly the same process as you would do in a mobile app except you code in web dev languages.

Send a request the API. Get a JSON response. Parse the JSON to an object. Create a UI representation of the object using HTML, CSS, etc. Display the UI respresentation.

All you need to do is decide on which language you want to use to make the POST/GET - PHP, Ajax or some other language of your choice.

Answer 3

In my experience, when I'm developing a multi-platform app I try to make my code and algorithms as reausable as I can. So, when I prepare an API (with PHP and MySQL for example) I use the same data retrieving format for all platforms. Both, mobile projects and web projects can read and send data via JSON or XML, so I think there's no matter with that.

Although if you centralize all the database connections on your API, you will reduce the number of connections (and errors) in high degree.

You can see a running example on Foursquare.

Answer 4

From what i understand you are looking for a lightweight web development framework that is easy to learn and build dynamic websites.

Based on your requirement that the web front-end should be able to make a HTTP GET/POST request to fetch JSON data from an API. The following options are the best for you:

1. HTML + AJAX (for very simple dynamic websites)
2. PHP + AJAX (for more complicated websites)

The GET/POST request is made as an AJAX call using a JS library eg jQuery. Additionally, jQuery provides function to parse the JSON response.

So essentially you need to learn PHP & jQuery both of which are very popular and easy to use and have a huge community support behind them.

Answer 5

AngularJS does work really well for single-page type apps, feeding off web services. It has a quite a bit steeper learning curve than jQuery ajax call (imo), so depending on your needs it might make more sense to create your app with jQuery.

Other JS MVC frameworks (knockout, ember.js) might have similar functionality regarding getting data from JSON sources, but I'm not really familiar with them, so you can take a look and decide.

Otherwise you just create a starting html page, and start the ajax calls to services once its loaded.

Answer 6

In my "past life" I used to be a Web Developer (for 10 years), now I'm a full-time Mobile Developer (since 2.5 years ago) and I've created both Android and iOS Apps using SOAP or REST APIs.

On the Web I like to work with JQuery and JQuery-UI. JQuery have really neat and easy ways to get JSON data from SOAP or REST Web Services to populate grids, forms, controls that show progress while waiting for a response, etc. Check out: http://api.jquery.com/jQuery.getJSON/

I'm currently working on an iOS App with REST operations and JSON data, the Web Dev Team is building a backend Website using backbone.js and JSON-REST operations to connect the fron-end with the same backend I talk to from iOS via JSON-REST. I know they use backbone.js's parse (to read JSON), collection.toJSON() (to convert to JSON) and Model sync methods (more at http://backbonejs.org/ ) a lot.

So... I agree with the others, as long as you can get JSON from REST you can use the same methods on your Web and Mobile Apps.

And here is a nice blog article about doing your RESTful API server the right way: http://blog.mugunthkumar.com/articles/restful-api-server-doing-it-the-right-way-part-1/ .

Good luck!

Answer 7

There are two major approaches to develop web application by consuming web services (JSON contents)

• Pure HTML based approach : In this model, you don't need any server side script such as PHP, JSP, and ASP.Net etc. Your JSON based REST service will be consumed by JavaScript and render the data into HTML components. The programing model is now more popular and application will be smooth and behave like a desktop application. There are lot of frameworks that will help you to achieve this goal. They are already mentioned in the previous answers such as Angular.js, Ext.js, Backbone.js, Knockout.js, DoJo, Bootstrap. Even some of this framework support data binding with UI components and server side JSON based rest services. Don't require any coding to consume REST service and render UI components. It will be automatically done via this client framework. Example DoJo

• HTML and server side script : In this approach you need to use any server side scripting language such as PHP, JSP,JSF and framework like RoR, Django etc to achieve this goal. As it involves other scripting language and framework therefore it has learning curve with compare to HTML and JS based approach.

In summary I would recommend to start with the first approach.

Answer 8

Since you already have your api's built on top of Ruby, consider Ruby on Rails. I am a C#/iOS developer and never looked into Ruby on Rails until recently. It's a great language with great ease and flexibility. For more information look into this link http://railsinstaller.org/ .

It gives you a greater flexibility of implementing jQuery and other javascript based libraries as well.

You can work with Sqlite, MySql and PostgreSQl databases.