How to separate development of client-side web UI and the server side

Question

Hi all,

I'm in the process of providing a Web UI as an alternative to our current desktop UI for our C/S enterprise application.

When developing the client-side in our desktop version, UI developers could connect to any server so they only needed the client-side environment.

When developing a Web UI (Client-side JavaScript in the browser), we are bound by the browser's "Same origin policy" so the UI must talk to the same server from which the UI code is downloaded.

As far as I see it till now, the development scenario for the UI guys is:

1. Developer installs server on local machine and runs it.
2. Developer edits the HTML+JS+CSS files on local installation.
3. Developer has to reinstall/update server on local machine each time there's a need to test UI code against new server behaviour.

This does not seem too comfortable, at least compared to our previous C/S style development.

Are there any other ways you can suggest to that will not require UI developers from installing and updating server side components on their development machine ? Or anything else related that can simplify the development process ?

Thanks :-)

---

Editing in some clarifications:

• I'm mostly interested in the aspects of UI coding, not UI design.
• I need a lot of server interaction - getting data from RESTful web services, which are developed in parrallel - hence the need to have an up-to-date server

Answer 1

Develop on a shared server, but depending on the size of the team.. that's challeging with respect to version control.

Or deploy automatically generated virtual machines with nightly builds, so the devs don't have to install, but always use a recent version.

In the case of UI developers depending on a common REST server, the UI development can be done on the local machine and the REST service should be on a central server. When changes are made to the REST service these should be deployed to the central server (when stable), so all developers can use the newest version (this also helps with testdata).

Answer 2

Hi,

You haven't specified the development platform.

As far as pure HTML/JS/CSS is concerned, you don't need a server. The UI developer can fine tune UI components locally.

The moment you want to talk/integrate to Server (via AJAX, JSP, ASP...) then you need to connect a development server as now your changes have to be served by Server.

Most of UI fine tuning can also be done from Firebug

In our office when changes to styling are required we save the page as a local copy and send it to the UI designer, he makes his changes and we integrate them. So the UI designer don't have to maintain a development environment.

Answer 3

JSONP lets you work around the same-origin problem (with server support) -- check it out! If the front-end-in-the-browser developers are using a good framework suc as jQuery or (my favorite) Dojo, JSONP should be no harder for them than plain JSON.

Answer 4

Hmm, I actually didn't really get any information on what kind of technology you're using. If - with UI Developers - you mean designers, which have to take care about the CSS, layout etc, then we do it the same as lud0h said. We (developers) send the UI designers a copy of the server-side produced HTML pages. They then edit the HTML pages according to accessibility guidelines, CSS and layout and send us back the outcome of their work. We use their HTML pages then for integrating them in our web applications.

If you don't just mean tuning CSS, but also to write JavaScript / Ajax functionality you HAVE to use a server with which you're communicating. As you said, normally this is done by having a local environment which is similar to the server-one. In .Net Visual Studio '08 provides an internal webserver, alternatively you have to install IIS locally. In Java environments you have to install Tomcat and related technologies. In my eyes this is a must. What you have to have is

• Versioning system (CVS, SVN,...) where developers commit regularly (minutes/hours)
• local environments where developers checkout the source from the repository and develop
• Test server where you deploy on a daily basis (could be like daily builds) in order to test your running product

I guess this should be what a professional development environment should consist of. The difference to C/S application development is that web UI and web-client code are not that separable as a Client UI in C/S environment from the server-side. Unless you develop with technologies like GWT or Silverlight which are quite similar to C/S, just running inside the browser, but communicating over RPC calls or web services.

//Edit: What I nearly forgot. Don't do something like developing on the server directly, meaning that all of the developers access the server's filesystem where the code, UI etc. lies!!

Answer 5

You could try using a proxy on the developer's machine where some paths redirect to the server and some paths redirect to local folders.

Answer 6

You can use CORS. a new technique just like Ajax, but with ability to make calls on other domains. so you will need only one UI on one server. think this can help you.