Creating a web user interface

[doodab]

I need to create a PoC web user interface for a commercial product. At this point it is purely PoC and there is no budget for an expert (I wish there was as I don't have that much interest in picking up a whole new skillset given my medical situation) so it's down to me to hack something together. I've done a bit of research on what constitutes the "state of the art" and it seems I'm looking at a single page application using HTML5, CSS3 and JQuery with Ajax requests to a back end server API (probably JSON formatted although they could be XML) to retrieve the configuration data it needs to work with. Am I basically on the right track there or is this unachievable pie in the sky or otherwise misguided? Should I be looking at additional JS libraries like Backbone & Angular or will these just clutter things up?

Deployment will be as a JEE web application of necessity so server side frameworks like Node, Play framework etc are of no interest to me. The data access API will of course be in a separate module to facilitate reuse from other places, and I'm quite comfortable building this or speccing it up for someone else on the team. I will most likely be using spring as the server side framework (to provide security etc) but I'm not quite sure how the MVC stuff I've used before fits in with the single page app model. Is it going to be the case that server side MVC is completely redundant / irrelevant and everything will be done in JS on the client side talking to the API module directly? Or should the server side controller be talking to the API module? Advice would be appreciated here, or perhaps I will just suck it and see, as I guess it could work either way.

I intend to start by storyboarding the UI, it's only 8-10 different "screens" so hopefully not too much of a major undertaking. I'm basically thinking of a header, a horizontal navigation bar below that which switches between the screens, and the main page below that, possibly with a column on the LHS containing a sub menu where required, and the main content taking up the rest of the space. So pretty standard fare in that regard. In fact I can probably knock that basic structure up without drawing it first.

On the plus side I don't have to worry about supporting very old browsers at this stage, if at all, as the product is an adjunct to another product, and the browser support strategy for the primary product will basically let us get away with saying you have to use Firefox, Safari or IE9+. Customers are used to this and accept it. Having had to deal with netscape, IE differences back in the day I know this should make my life a LOT easier.

On the down side I haven't done any web development for quite a while, and because of cross browser hassles I have tended to stick to "lowest common denominator" when I have. I do have some experience of HTML & CSS having knocked up a few similar but simpler admin / monitoring interfaces using server side MVC frameworks, but I've not used JavaScript very much at all and I know literally nothing of JQuery so that will be a learning curve. I have access to plenty of books & online training for that though so should be OK. On the layout side, I've not used HTML5 yet and although I think I can probably cope with the leap any pointers to good online resources would be helpful as I'm finding a good book hard to find. I will of course check out the W3C. I have used CSS a fair bit with a reset and grid system and I liked the way that worked, it came very naturally. I got that out of a book. Is this still the way to go for layout & design or should I be looking at other techniques these days?

The main complex thing I'm going to need is a tree editor type control for hierarchical data (you know the sort of thing you see for editing properties in IDEs all the time). Does anyone know of a good, configurable one? I would prefer free but could probably justify paying if necessary.

I'm not worried about fancy animations and visual slickness at this stage but I do want to produce something that doesn't go completely to tulip when people resize their browser, works well with standard features like history and the back button, and allows opening multiple screens in multiple tabs if the users want and so on. Something good enough to actually use to administer the product, basically.

Any other advice from CUKs resident web experts greatly appreciated, even if it's just telling me to stick with what I (sort of) know how to do and knock up a conventional multi-page app

TIA.

[jmo21]

As you're almost starting from scratch with the tech it sounds like a framework like twitter bootstrap might help you enormously.

If you really want to learn all that stuff, go ahead, but from your list, you could probably forget about making it a single page app. They're great and all, just trying to reduce the amount of things you have to learn.

[doodab]

If you really want to learn all that stuff, go ahead, but from your list, you could probably forget about making it a single page app. They're great and all, just trying to reduce the amount of things you have to learn.

Yeah I'm thinking that now. If I stick to a multi-page MVC app I should only need to pick up a bit of JavaScript / JQuery & whatever additional bits and bobs I need to do the hierarchical properties editor. That's the main learning curve and it's only one page, the others are all displaying data or simple forms which I know how to do with HTML, CSS & spring MVC. I believe there are some differences in the way HTML5 handles these compared to what I've done before but I expect I can work them out fairly quickly. I don't see CSS3 as a massive learning curve, it's more remembering how setting up the CSS reset and grid works as I've not used it from scratch for a while, although I've done a fair bit of customising the look and feel of the web layer of "niche product" and I' reasonably sure I have an old client project I can rip the guts out of to provide a starting point.

[jmo21]

Yeah I'm thinking that now. If I stick to a multi-page MVC app I should only need to pick up a bit of JavaScript / JQuery & whatever additional bits and bobs I need to do the hierarchical properties editor. That's the main learning curve and it's only one page, the others are all displaying data or simple forms which I know how to do with HTML, CSS & spring MVC. I believe there are some differences in the way HTML5 handles these compared to what I've done before but I expect I can work them out fairly quickly. I don't see CSS3 as a massive learning curve, it's more remembering how setting up the CSS reset and grid works as I've not used it from scratch for a while, although I've done a fair bit of customising the look and feel of the web layer of "niche product" and I' reasonably sure I have an old client project I can rip the guts out of to provide a starting point.

Bootstrap can do all the grid stuff for you, I definetly recommend using it. It's ideal for your purposes.

[minestrone]

I use bootstrap, a lot, you just would not use anything else now other than that, or zurb ( I think there are another couple out there that do similar jobs ). Between that and a struts2/spring/hibernate stack I can knock up stuff in next to no time.

I would really recommend digging into the responsive frameworks, the mobile ready stuff is such an advantage.

[jmo21]

I use bootstrap, a lot, you just would not use anything else now other than that, or zurb ( I think there are another couple out there that do similar jobs ). Between that and a struts2/spring/hibernate stack I can knock up stuff in next to no time.

I would really recommend digging into the responsive frameworks, the mobile ready stuff is such an advantage.

+1 for making your PoC responsive, and bootstrap can also do a lot of that very easily for you. Could be a massive differentiator for a demo if this is to win business?

[doodab]

Bootstrap can do all the grid stuff for you, I definetly recommend using it. It's ideal for your purposes.

I'll check it out.

I've found the old project I was thinking of and the CSS looks fine, (as in the pages look OK, I haven't actually read the CSS yet) and of course it's fairly easy to replace that with something else later to spiff it up a bit. I reckon I will just go with hacking this to start with. It might not be using the latest tech but it's basically the app I need to write, give or take the controller class (which will need to wire into a backend API that doesn't actually exist yet....) and the JSP pages to render the content.

[doodab]

I use bootstrap, a lot, you just would not use anything else now other than that, or zurb ( I think there are another couple out there that do similar jobs ).

From my notes it appears I looked at things called 960.gs and Blueprint before rolling my own simple reset (well, nicking it from a book) & a dozen or so classes for my divs and spans. It's not a complex app by any stretch

The controller needs to tie into the OSGi framework to access our API, rather than hitting a database, so it'll be a JSP, spring, custom API stack. The interface to the API will be a facade class which I'll export from another module as an OSGi service, so the controller will need to look that up and then call the relevant methods to do it's business. It'll be much the same as creating and using a hibernate session or JMS connection (which is what the starting point app does) really, just a different API.

I suppose I could replace the JSP with struts or something else easily enough but it's just something else to learn so I probably won't for now.

[Unix]

If it's a SPA then Angular.js is good.

[doodab]

+1 for making your PoC responsive, and bootstrap can also do a lot of that very easily for you. Could be a massive differentiator for a demo if this is to win business?

It would make demos slicker for sure, but the product sells itself anyway (it's pretty much a done deal that anyone who buys their main product buys this one too) so getting client co to see beyond doing the minimum needed to meet immediate customer requirements and clinch a sale can be difficult sometimes.

What they really need to understand is that without a proper user interface they can't scale the product from a dozen customers to hundreds or more, because we simply won't be able to resource the work that goes with it. At the moment the bulk of the work involved in deploying the product involves editing XML files containing metadata that defines the customers specific applications that run on the product. This requires a lot of specialist knowledge, to the extent that we struggle to hire people who can do it, they face a fairly big learning curve, and we can't easily enable customers to do it themselves, which limits us to a couple of concurrent implementations. We simply can't find the people to do more. Putting a proper front end on it will make life a lot easier and largely solve that problem.