Where am I wrong about my project and these Javascript Frameworks?

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 + jqueryUI + backbonejs
• knockoutjs
• javascriptMVC
• Dojo
• ExtJS
• Cappuccino

---

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? >> - Features: jupiter's (maker of jMVC) overview of their features >> - Link to jqueryMX

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?

Not sure about your timeline and resources, but when I'm trying to decide between multiple frameworks/environments, I just go ahead and try to quickly build a prototype. Even if it's just one or two major functions, I find that all the research and documentation in the world won't ever match actually trying to build something with the tools. I say take a day with each and see how far you get. That'll give you a pretty good indication of which tools are up to the task and feel most comfortable for you.

[tag:Meteor] is all the rage nowadays (the most starred full-stack JavaScript framework on GitHub and Meteorpedia is a wiki engine written in Meteor.

The launch video will get you hooked by 1:28.

It's agnostic with regards to the UI, and has been tested extensively with Bootstrap and Famo.us. It also generates mobile apps from the same codebase.

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

Your choice of framework might not constrain your UI choices as much as you may be imagining. This recent Henri Bergius article about decoupling content management illustrates the point much better than I could -- and, incidentally, links to a pretty sweet looking pure-JavaScript (framework-independent) in-place content editor.

You are not alone!

VanillaJS and Ampersand .. are great examples of the serious drive for simpler, more modular JavaScript.

There's even a Book about it.

Simplicity is being driven by an under-rated es6 feature: Modules and the SystemJS implementation standard. It even can be used on non-es6 systems.

How cool is that!

I would say you are wrong in your overall choice of candidates as you are omitting Angular and Ember both of which are better suited than any of the other frameworks listed.

Overall, I'd say Angular.js is the framework for this one.

Emphasis on Routing

Much of what you are talking about (several sidebars for navigation, a single page app) are functions of routing, or how the front end interprets the text in your URL navigation bar.

Both Angular.js and Ember have excellent routers that allow you to accomplish everything you require without additional code.

For your benefit, here is a quick breakdown of the features in Angular that can be used to create your single page wiki

The Structure of the Site Itself

Angular has an amazing library called UI router allows you both to create custom navigation and to set up an SEO friendly structure of revealing your content. Multiple views would allow a top toolbar as well.

Ui router tutorial: http://cacodaemon.de/index.php?id=57

WYSIWYG Editor

Angular is built on live two-way binding (when you change something somewhere, it automatically changes everywhere else.) Therefore it comes packaged with a lot of features that work well with this kind of editor. A few good ones have already been made and you only need to implement them.

http://textangular.com/

Graphs and Other Neat Stuff

Angular directives are designed to do things like create Chart components that are reusable. They are not totally different than Wordpress Widgets. Many of these have already been developed and can be dropped into your Angular project.

http://www.sitepoint.com/creating-charting-directives-using-angularjs-d3-js/

Regarding Ember, I do not know much about it so I cannot speak to its particular features.

One suggestion about Backbone, if you decide to use it you should go for Marionnete since it's Backbone but with a better architectural structure and more opinionated ( i personally feel that Backbone doesn't set any guidelines and that's feels like a downside in large apps ).

I worked with it for a few months combining different js libs and doesn't get in your way like other frameworks and the message pipeline is a really good way to connect components through out the app but keep them decouple.

Here you have a great talk that made me decide for it : https://www.youtube.com/watch?v=qWr7x9wk6_c

And here you have a demo prototype that also has the drag and drop element plus other js libs connected. Would love to heard what you think about my code since i have 1.5 years working on web development... i'm still a newbie : https://github.com/Drasky-Vanderhoff/marionette-demo/

About Knockout, is really good if you want interaction with the content you already have and you won't be connecting constantly with the backend. I worked with it for 6 months and i end up needing to use a lot of other js libs for routing; plus i end up repeating a lot of the structures that Backbone and other JS Frameworks end up having. What i will say is that it won't get in your way at all and be a tool rather than a constrain. Also this was almost a year ago so a few things have changed.

One thing, if you find Knockback ( Knockout + Backbone )... avoid it, the documentation is not as good as it should be and it will take you a lot more time to learn it. If you want to go for it make a fast prototype first to see if is what you want.