First off, the barest bones of the project I wish to create is a wiki engine implemented as a single page web app. I plan on having a set of features available from the get-go with plenty of feature additions down the road.
Basic Features
- page creation (creates both wiki article and discussion forum for that article)
- markup and WYSIWYG ala markitup
- on-the-fly conversion between markup / html / WYSIWYG
- a side bar to quick navigate
- a top toolbar for choosing edit/view
Advanced Features
- configurable side bar to navigate via different method
- configurable toolbar (possibly add markup language of choice)
- tags
- editable todo’s
- drag and drop file uploads and image attachments
The engine would originally consist of the most basic page creation, markup and WYSIWYG editing, and saving. I would eventually like to extend this basic engine with drag and drop image support, file uploads, live data graphs, and a sidebar for customizing views.
I have done a fairly extensive search for a decent project from which to base my project off, but other than TiddlyWiki there does not seem to be any good javascript based wiki engines. I also considered applying Jquery on top of existing wiki engines but I believe I would end up rewriting it eventually anyway (Plus its just more exciting to add the features I want as I go). Either way I have arrived at implementing this beast with a javascript library + framework.
I know that one cannot really compare some of these frameworks against each other as they are very much not apples to apples. I have tried to frame any comparison comments/questions against comparable pieces of the respective frameworks but I am open to being corrected.
So here we go:
Based on my own research and opinions I have narrowed the list down to the items below. I intentionally left out things such as SproutCore, corMVC, YUI, and others as I, in my limited capacity, thought the below items would be a better fit.
My Options
jquery/UI + backbonejs
Overall
From what I’ve read this combination is used and beloved by many and is very flexible and extensible. My major concern is that this combination is simply not the best jumping off point for developing the more desktop oriented UI interface.
UI
While jQueryUI or jqueryTools might be competitive they certainly do not seem to be on-par with the UI capabilities of other frameworks. Specifically they seem to be heavy on the effects but lacking on decent layout slicing support.
javascriptMVC
Overall
JavascriptMVC to me looks like it is essentially jquery + MVC(jqueryMX) extensions, along with a few other apps for documenting(documentJS), functional tests(funcUnit), and code and dependency management(stealJS). Beyond the benefits of the additional module, I think the functional debate really comes down to backbonejs vs. jqueryMX Am I correct on this and has anyone worked with or compared both?
UI
JavascriptMVC adds the MXUI items on top of whatever is available for Jquery so I think at the very least it is a slight win in that category.
knockoutjs
Overall
My thoughts and concerns on this on this are very similar to the jquery + backbone comments. They both seem to offer similar features but just from a different perspective. An oft cited downside is that knockoutjs couples business logic and presentation too tightly with the data-bind’s and that this binding method can break down for complex UI interaction but I would love to hear why that is a non-issue.
- Discussion of backbone vs knockoutJS concepts
- Features of knockoutjs
UI
Blank at the moment
Dojo & ExtJS
Overall
I am going to combine the discussion Dojo and ExtJS because I know the least about them and they seem to play in nearly the same space. Most of the information on stackoverflow about these two seems to be out-of-date. From what I have seen is that they are both large frameworks that are good for desktop caliber app implementation. Dojo had been chided for poor documentation but that seems to be no longer the case. ExtJS of course has the commercial license, but it is really reasonable for what you get and I wouldn’t hold that against it too much. The widgets in ExtJS seem to be somewhat more professionally done than Dojo, but I could certainly be corrected there. I would be interested to hear from anyone who has experience in both.
UI
Dojo has the dijit UI library
ExtJS has UI features but they are not in Ext core. Here’s the documentation and here are their demos
Cappuccino
Overall
And then there is Cappuccino. No CSS, no html, but also it could be tough to use existing javascript libraries. Objective-J doesn’t seem to scary, especially considering that they tout being able to write plain javascript as well. The demos are impressive and seem to closely approach the UI needs for the wiki engine. The cocoa based API is a lot to take in for someone not familiar with it, but maybe it is worth it. I have heard the layout engine is not always easy to work with but a young and possibly disruptive tech like this will certainly have some shortcomings.
UI
Blank at the moment
I apologize for writing so much but hey, at least its not a x vs y vs z question hoping for tons of cheap answers. So what do you think? What should be the basis for my desktop like wiki engine, that will hopefully become more feature rich (read complex) over time?
I would suggest first coming up with specific UI requirements for your project. Which of the frameworks you’ve tried have you taken for a spin?
Personally, I got into ExtJS development because the projects I work on require a lot of customization of controls/widgets. ExtJS has a ton of them right out of the box and can always be extended, combined, or munged into whatever monstrosity your business requires.
ExtJS 4 also allows you to “skin” your UI’s to further customize the look and feel.
If you are new to JavaScript, and are comfortable with Java, you might even look into a server-side solution such as GWT, JSF, or even Vaadin