The MODX Manager interface is a very rich interface: there's right click options all over the place, modal windows are pretty much second nature and dynamic validation and AJAX submissions make it a very interactive experience. The design is easy for clients to understand, yet it offers the power users even more power to do the things they need to do. All of that is powered by a library called ExtJS, developed by Sencha. As a very powerful JavaScript framework it generates virtually everything you see in the MODX manager. A newer version is also used for the MODX Cloud Dashboard.
I've been learning ExtJS since 2010, every since I got interested in MODX Revolution development and extending, bending and plainly hacking the sh*t out of it. Tutorials, lots of code gazing and client projects, and over two years later I feel like I'm comfortable with what it can do and understanding the often cryptic errors. At some point, it starts becoming a source of frustration. And I can boil that frustration down to one sentence..
I love ExtJS for what it does, but I hate the way it does it.
~ Mark Hamstra
ExtJS is a dream
Don't leave yet! At least hear me out on this one. After having spent 2+ years learning ExtJS and its implementation within the Revolution manager, I am convinced it's a developers' dream. I totally understand why it was chosen to power Revolution back in the day.
- Rapid prototyping and interface building. Just define (basically) a big array, and you have a fully functional interface, completely blended in with the rest of the manager.
- Packs a large amount of widgets that are infinitely configurable and customizable.
- Through its object oriented philosophy, you can easily reuse other definitions in an object oriented fashion and save the hard work. Define a widget once, use it everywhere.
- ExtJS makes stuff work and look fancy across browsers.
In a nutshell, ExtJS is an insanely powerful framework that makes fancy stuff easy to achieve. It takes time to learn (and I bet a more senior developer would pick it up much faster than I did), but once you bridged the learning curve you have a lot of power at your fingertips.
ExtJS is a nightmare
- It's obviously a JavaScript framework, and ExtJS builds the interface from JavaScript definitions. There are exceptions where you can take existing DOM elements as basis, but you still need to use (and load) all the JavaScript to use the interface as intended. If an error occurs somewhere, ExtJS tends to decide to show an empty page instead.
- ExtJS builds elements with a shitload (yes, that's a technical term) of divs and tables. Here's an example an actual "Save" button. My guess is that it does that to make it look good cross-browser, but it clutters up the DOM and makes it more difficult to cleanly create a custom theme with crazy inheritance and royal class-soups. Truth be told, this seems improved in ExtJS 4.
- Similar to the previous point, sizes are *very* often defined inline (style="width: 134px;"). This could be helpful, but it isn't one bit if you try to build a more fluid layout.
- The ExtJS learning curve is quite steep. In the context of MODX Revolution, this harms community involvement as the amount of developers improving the core is small, and takes a long time to grow. In a proprietary environment (such as MODX Cloud) this isn't a huge concern as you can invest in training and hire the right people, but I'd argue it is a huge problem in the open source scene.
- The ExtJS licensing has historically been vague, at least in our context.
- ExtJS is slow. Not only does it have to load a few megs would worth of javascript before it can even start building your interface, but it's not particularly fast in doing that in many cases.
Despite being a big proponent of ExtJS for the reasons mentioned earlier, over time I have become more frustrated with the cons of the framework that I believe are doing serious harm to community involvement in Revolution. Learning ExtJS has been a great business decision (it made up probably a good 85% of my freelance work), but as I'm a big community fan I'd rather see something a bit more.. approachable.
The Ideal Framework
So, taken the above considerations, what would be The Ideal Framework for a MODX manager? Here's my personal list of requirements.
- Easy to get started with, plenty of existing documentation and tutorials.
- Easy to extend and capable of Object Oriented paradigms to cut on development time (rapid prototyping) and code duplication.
- Large set of available widgets to build interfaces with, but with a lean core.
- Fast.
- Progressively enhanced so that users with old browsers can still get a proper experience. As it's a backend I'm fine with it requiring JavaScript, but regular HTML and CSS should provide a baselevel experience.
In my mind (and I can hear sighs coming), jQuery fits a large number of those requirements. Getting started with it is easy, documentation and tutorials are everywhere and the amount of widgets (plugins) available for jQuery is enormous. It easily lets you use progressive enhancements paradigms and considering JavaScript itself is an object oriented language, yes that applies to jQuery as well.
Does just sticking jQuery into the manager provide a maintainable product? No; it needs more thought. The manager is big and complex and just filling up a footer with $(document).ready() tags wont make things better than ExtJS. But I do think a properly implemented object oriented "wrapper" could definitely be what MODX needs.
And that's what I started mocking up.
Introducing a jQuery Based Manager
If you follow me on Github, you may have noticed some recent commits to a new alternative-manager branch in my Revolution fork. This contains a Proof of Concept of how I think a jQuery-object-oriented-wrapper-framework could provide a better experience for the MODX Manager.
So far only the manager login and dashboard has been (mostly) converted, but it's a lot of work. Everything that can be represented as plain HTML/CSS is being converted to that, while other bits of HTML are being used to load up widgets based on a "data-role" attribute.
My first impression of this proof of concept is that it would definitely be powerful, lean and extensible enough to replace a heavyweight like ExtJS, without getting stung by the downsides of the framework. So far (at an early state, obviously), my jQuery alternative sure feels smoother and faster than the ExtJS one too. It needs a lot of work, and tearing out ExtJS of the manager sure is more work than just removing the files, but my belief is that in the end it would be worth it.
So now what?
Now.. I want your feedback. What do you think about ExtJS; and my jQuery-based alternative? Would you support (and better yet; help out) an initiative like this, or am I being a pity fool? Do you want to see a demo?
Depending on your feedback, I want to publish a couple blog posts in the coming weeks on some of the decisions I've made so far and what I think the implications of them are.
Just to prevent any rumors: no I was not asked to work on this for my job at MODX, nor does this proof of concept mean that jQuery is what will power MODX in the future. It's me being curious if jQuery could be a practical alternative and at some point a few weeks ago deciding there's only one way to find out..
UPDATE T+45mins: Despite publishing this article at a time where people are either enjoying a nice drink or a comfortable bed, the response (in the comments, on twitter and on skype) has been awesome! Please do keep it going and let me know anything you'd like to know about the jQuery manager in the comments below. I'll try to answer as much questions about that in a follow up post in the next week or so. Of course, feel free to just go ahead and have a look at the JavaScript. I'll also look into making a public demo available.
I must be dreaming^^.... =))... This is exactly what I have been thinking about for a few weeks now (just trying to start and (re)build the manager with cleaner html, css and jQuery)!!!
Your points above are exactly what I'm thinking about the whole extJS stuff, it's powerful for sure, but is it really the best choice? But I'm not a really "good" voice for that because my extJS skills are on a 1 of 100... =/, so if I say "aaaa, I hate extJS, can't change anything in the manager, blabla", my word is worth nothing because I almost know nothing about it coding-wise, so I can just tell the negative sides (like not being able to develop cmp's) without knowing potential good ones. So I'm really happy that you as a big time modx insider are thinking the same (especially about the community involvement) as I do.
Will have a veeery good look at your github fork, try to wrap my head around it and commit whatever I can to make this happen!! I'm sure there would be a crapload of nice Addons from people who (like I'm) are just not able to do them because of extJS (and they know probably jQuery very well from the frontends of their websites)!
Keep up what you're doing! jQuery FTW =D
Glad you're so excited! ;)
Part of the reason I decided to post this is because of the uneven split between people that know ExtJS and those that don't. While it was great for my freelance business being on the right side, something as crucial as an admin panel shouldn't be limited to a few handful of people that have spent a long time mastering ExtJS. I think using jQuery would open up a lot more community involvement, and we can't have enough of that!