What Web Framework to use to implement the diff-like UI?

Question

What Web Framework would you use to realize the the interface of the following desktop application that performs side-by-side text comparison. More exactly what is in UI:

document viewer with splitter and highlighting
lazy loading, as documents might be very huge (10Mb each)
left navigation bar with color marks and scrolling window
synchronized scrolling
hotkeys for navigation (e.g. Alt+ArrowDown = next diff)

Please, one framework per answer. Provide pros/cons of the approach.

Note: this question is a split from Vaadin alternative for heavily loaded UI, where the community tried to solve my problems with Vaadin, but I have heard no real analysis.

Screenshot of WinMerge

Downvoting without a comment is not polite. – dma_k Jan 18 '12 at 09:50 — dma_k, Jan 18 '12 at 09:50

score 2 · Accepted Answer · edited Jan 17 '12 at 18:28

2

In your case, you don't have much of a choice. No matter what framework/language/compiler etc you will take, you will be coding a lot of low level stuff. So your weapon of choice will be JavaScript or GWT (the choice depends on what you prefer/have more expirience). But in any case you will be working with DOM itself a lot, using some component framework is out of question, you won't be able to get any performance out of highlevel component framework.

So my suggestion is to use JavaScript (with Google Closure for some common parts), or something else what compiles to JS (GWT, CoffeScript).

edited Jan 17 '12 at 18:28

dma_k

10,431
16
76
128

answered Jan 16 '12 at 21:37

jusio

9,850
1
42
57

Thanks for comment. How GWT will help me here? Do I need to write my own components each time thinking about inter-browser compatibility? – dma_k Jan 17 '12 at 18:10
GWT will give you ability to write code with Java syntax (full IDE support with refactorings, easier to manage large codebases), plus GWT has deferred binding feature which is extremely powerful and very useful for creating browser specific implementations. As for your second question, it depends on what you are doing. Some things can be built using some cross browser component frameworks, some have to be built from scratch. In most cases you don't need to do some low-level coding. – jusio Jan 17 '12 at 19:48

score 1 · Answer 2 · answered Jan 23 '12 at 12:24

I think Wicket can do the trick, using it to reuse the component used to view the two versions of the input. You will have to write a component for each element you describe and write enough Javascript to link things :

Synchronized scrolling
Hotkeys support

Lazy loading can be handled by a Wicket behavior, the trickiest part is the global overview with correct coloring, it will need a good brainstorming session to be really efficient.

Hope it can help...

score 0 · Answer 3 · answered Jan 16 '12 at 17:21

0

For such a application, webapp(inclusive with framework) is not a good candidate. This is typically desktop application!

answered Jan 16 '12 at 17:21

Gilberto

893
1
13
28

Sorry, this is the project requirement which I can't change. I don't believe it can't be done in Web Application. – dma_k Jan 18 '12 at 09:48

What Web Framework to use to implement the diff-like UI?

3 Answers3