how to implement browser based web application using already existed spring MVC framework

Question

We are going to implement the browser based mobile application. we have the web application that running on Spring MVC, we need to use the same business logic and need to reimplement the front end using HTML5,CSS3 and jquery Mobile.

please tell me the steps for how to start and what tools may useful. I am new to this kind of project.

Answer 1

There are many things you need to follow. For the sake of understanding, let's assume your site's url is whackedup.com.

Build a front end for your server side but choose wisely!

You'll have to build up a responsive/mobile ready front end for your server side code. You could expose the functionality of your web app using web services which use the REST API. This way your code wont be replicated. But, you should be careful as to what you need to include in your mobile app. Include the features which absolutely essential. Other features acn be accessed from Web app anyway. As a wise person once said, "its not hard to add new features to something, its the decision to omit is what makes it hard".

Mobile Frameworks which can be considered :

Disclaimer : This is entirely my preference, don't castrate me for not liking other frameworks. And I'm calling these are frameworks so that it'll be easier to address them. I know they're not frameworks.

You'll need a framework to make things easier for you when it comes to mobile development. Yes, you could use good ol' HTML5 but that'll take a toll on your DEV time to build visual components to use in your app (like carousels, sliders, etc). So its usually advisable to go with a framework and you'll invariably end up using one of the following :

1. Twitter's BootStrap
2. jQuery Mobile
3. Sencha Touch

Bootstrap would be your numero #1 choice if you want to build desktop sites which adapt to mobile screens. I'd personally use jQuery Mobile, because:

1. It relies on jQuery
2. It's got awesome docs. Really, they're fantastic.
3. Its responsive, meaning it'll work on tablets and phones alike.
4. It supports a plethora of devices.

Places where you'll find good resources for jQM:

1. Stack overflow's jquery-mobile tag (Also try the jqm tag)
2. jQuery's learning center & the demo center for jQM
3. Here's a sample app at noupe which you could try to get the hang of it.

This said, it's always better to learn jQuery Mobile at its site itself, because they always tend to teach the latest version of jQM.

Redirect to mobile site

After you're done building your app in the framework of your choice, you'll have to redirect users who use whackedup.com from their mobile. This is done by using a useragent. According to wikipedia,

a user agent is software (a software agent) that is acting on behalf of a user.

This will tell you the device/browser from which the user has logged on to the website. This can be accessed by the navigator.userAgent method in JS. Here's a demo. Typically for an Androind device, the useragent would look like below:

Mozilla/5.0 (Linux; Android 4.0.3; HTC One X Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19

Using this info, you could find out if the device is an Android device/iOS device based on this :

navigator.userAgent.indexOf("Android") != -1 //will return true if accessed on an android device

This way, you could put this as a condition for an if loop and do the redirection, maybe to m.whackedup.com. For a complete list of userAgents, check this list.

Using caching to improve performance

To improve performance, you could use localStorage to store the data in the cache of the browser and not make a server call to get that data again. This is a good resource to learn abt the localStorage API.

Hope this helped!

Edit - Answers to your questions

Q1 : you suggested jqueryMobile is the alternative for HTML5 (really confused, jquery is for validation and it is just javascipt)

A HTML5 isnt a markup lanugauge like HTML4. It's just a component provider. It provides components like Canvas (a literal flash alternative) and many types of <input> tags and API's like localStorage. You'll find that using HTML5 alone for building a mobile app is difficult. No one says its not possible, but its cumbersome. jQuery Mobile isn't an alternative to HTML5, it builds on HTML5 to make it better.

That said, your notion that jQuery Mobile only gives you the JS is wrong. Though jQuery is a JavaScript Library, its younger sibling jQuery Mobile is also a visual library. jQuery Mobile provides a lot of css along with JavaScript, so styling becomes easier for you.

Summary :

1. jQuery Mobile is not an alternative to HTML5, jQM enhances the components provided by HTML5. Please visit this site to see for yourself.
2. jQuery Mobile isn't just JavaScript, its also a visual library, which you could theme for your needs.

Q2 : our spring mvc is project is not used any annotations or there is no REST API. so are you suggesting change the code to support REST API?

A Its not necessary, but I was really giving a suggestion to make your code adapt to both the situations, i.e., for a Web app and a mobile app. Else, you'll be duplicating your code in both your environments, which is bad. If both your web app and mobile app files are going to reside together (in the same project), your mobile app and web app could share your spring MVC code base.

Summary

1. I was merely suggesting that you could use services with REST API.
2. If your mobile app and web app are going to be the same, its always nicer to reuse your Web app's server side code than recreating it for mobile. That way you dont repeat yourself.