The cPanel User Interface team has been hard at work these past six months. One of the projects we have been working on, in the shadows of the publicly released features, is an exploration of new technology for cPanel’s User Interface. The next stage in this exploration was to find a replacement for YUI2 and our in-house developed CJT (cPanel JavaScript Tools) library.
We started a skunk works project in Fall 2013 to look at the options available. We wanted a best-of-breed JavaScript library that would make development faster, was more structured, and supported modern development standards. Based on our wish list, we investigated Backbone.js and Angular.js. We wanted to build something with each of these tools and planned on comparing these to our experience with YUI2 in x3 and YUI3 in x4. A small team was put together and a target feature was chosen, cPanel’s MySQL feature.
Why the MySQL feature? It is complex, with a lot of interactions that could give us a well-rounded picture of each framework’s strengths and weaknesses. Some of the things we wanted to understand about each of the frameworks included:
- How does complex data paging, sorting, and filtering work in the frameworks?
- How does one make use of the Model/View/Controller (MVC) application layout?
- What is the learning curve to understand the deep features of each framework?
- What kind of documentation is available for each?
- How active are the developer communities for each?
- How can we build reusable components for each?
The comparison project went well. After three weeks of work, we had a nearly complete implementation of the MySQL feature in Angular.js and one a little less complete in Backbone.js. We were able to try out many advanced features of both frameworks. After looking over both implementations, we selected Angular.js, due to the increased speed of developing under Angular.js and the reduced amount of code needed to write that application.
This lead to the second phase of this technology experiment: finishing up the MySQL Angular.js feature. We spent about two weeks reviewing and improving the feature, solved a few small bugs, and did some testing of the feature.
Now we have reached the final phase of this experimental project: showing off the concept application to some of our clients and seeing what they think.
The new MySQL interface is available for both x3 and Paper Lantern in the test release. We would like our EDGE users and plugin developer community to take a look at the new application development style and related frameworks and provide early feedback. We will consider this feedback when planning future development work on the product and look forward to any input these audiences can provide regarding the direction of this release.
The demonstrative build is available at http://next.cpanel.net. On a test server, you can point your update system to this URL using build 11.43.909.13. More complete instructions are available on cPanel Forums.
This build demonstrates several aspects of our new technology stack, including:
- The use of Bootstrap.css for styling
- The use of Require.js for module dependency loading
- A prototype JavaScript Library to replace CJT
- A modern version of JQUERY and Underscore.js
- A structured application directory layout
- Dynamic loading of UI assets (just in time)
- An alternative application workflow that allows users to focus on one task at a time
- The use of a single-page application design pattern per the Angular.js MVC and Router system
- The MySQL application deployed on the previously mentioned framework
This project is intended for technology demonstration purposes only so please do not deploy this build to production boxes. While fully functional, it has not been performance and security tested or passed through a full Quality Assurance (QA) cycle yet. Though we have made every effort to remove any bugs, the build may not be bug-free at this point. Again, do not install this build on production servers.
This test release includes the original MySQL application alongside the new Angular.js based implementation. You can find the application in both x3 and Paper Lantern.
For those of you that want a quick look, before you go download and install the test build, here are a few sample pages, including “Databases,” “Create Database,” “User List,” and “Create User” views.
While these images provide a brief glimpse into the application styling, we would like you to take a deeper look and examine the mechanics of the new workflows by installing the test build and trying it out for yourself.
We are seeking feedback, from our EDGE users, plugin developers, and other interested parties, regarding the new technology stack and application workflows. Please send your input to newtech@cpanel.net or any of the special audience mailing lists (plugindevs@cpanel.net or edge-users@cpanel.net), or post on cPanel Forums.
—–
Tom Green, Sruthi Sanigarapu, Kevin Thomson
cPanel User Interface Skunk Works Team
