User Interface Technology Stack - Research and Development Feedback

[cPanelTomGreen]

We just released a User Interface Technology Preview to next.cpanel.net. Below is the email that went out with the release. Please note this is an unsupported release and is intended to show off some ideas we are considering for specific User Interface Technology changes to the product and get feedback from our users and developers on our platform. DO NOT USE ON PRODUCTION SERVERS!!!

====================================================================
Technology Preview (cPanel MySQL feature using modern tools and technology):
====================================================================
We have been experimenting with new UI technologies over the last half year, as well as with new workflows and styling standards for our applications. This release includes a technology demonstration we are considering for new applications in our products.

Included in this release is an alternative implementation of the cPanel MySQL feature. This alternate MySQL interface uses a new application workflow strategy where users are focused on a single primary task. The application uses the single page application architecture with resource loading from the server on demand as needed. We are using Twitter Bootstrap CSS as a basis for the visual styles and Angular.js as the JavaScript library. We also developed a lightweight application development framework to replace CJT for the application. Resource loading is handled by Require.js.

The new MySQL interface is available for both x3 and Paper Lantern. 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 as we are considering these for all of our future development work on the product. We look forward to any input these audiences could provide regarding the directions we are demonstrating in this release.

Goals achieved:
================
* Alternative application workflows for new users to cPanel.
* Simplified and consistent styles with a more modern look and feel.
* Improved testability of the applications UI code.
* New modern markup (HTML5) and JavaScript libraries (Angular.js, Underscore, Require.js, JQUERY).
* Simpler, more modular, and easily reusable JavaScript components.

What kind of feedback we are seeking?
===================================
1) Your feedback about the revised application workflow.
2) Your feedback about the usage of Bootstrap.css in the application.
3) Comments or questions about the new technologies demonstrated in the application. (Angular.js, Require.js, Single Page Application Layouts)
4) Bugs or other issues you find in the application.

Where should I send my feedback?
==============================
Mailing list options:
[email protected]
[email protected]
[email protected]

Forums:
http://forums.cpanel.net/f8/user-in...ack-research-development-feedback-399602.html


Know Issues
===========
* The password generator has not been implemented in the new MySQL interfaces.
* The ground work was laid for a responsive application including use of a CSS grid, but we didn't implement or test the mobile support yet.
* Minor animation glitch before you create the first database.
* The application has undergone only a limited amount of testing relating to functionality and represents a proof of concept. It was only tested on the latest versions of Firefox and Chrome. Users of other browsers may experience problems we have not identified at this stage.

How can I access this developer build?
===============================

**************************************************************************************
***
*** DO NOT USE THIS ON A PRODUCTION MACHINE, THERE IS NO WAY TO DOWNGRADE TO
*** 11.40 / 11.41 / 11.42 / 11.43 / 11.44.
*** IF YOU ARE DOING THIS ON A TEST VM TAKE A SNAPSHOT FIRST SO YOU CAN ROLLBACK.
*** INSTALLING THESE BUILDS IN PRODUCTION WILL VOID ALL SUPPORT CONTRACTS
*** CPANEL SUPPORT CANNOT PROVIDE ANY ASSISTANCE WITH PRE-RELEASE DEVELOPER BUILDS
*** PLEASE REPORT ALL ISSUES WITH THESE BUILDS TO YOUR DEVELOPMENT CONTACT
*** DO NOT CONTACT CPANEL SUPPORT FOR HELP WITH PRE-RELEASE DEVELOPER BUILDS
***
**************************************************************************************

3rd-party Developer pre-release access instructions
=========================================================
To access this developer test build.

1) Point to the test build:
# echo "HTTPUPDATE=next.cpanel.net" > /etc/cpsources.conf
# echo "CPANEL=11.43.909.13" >> /etc/cpupdate.conf

2) Update
# /scripts/upcp

How do I try out the prototype MySQL feature?
===============================================
1) Log into WHM and create an account with access to MySQL. Set the theme for the account to either x3 or Paper Lantern depending on which theme you prefer.

2) Log into cPanel with the account you just created.

3) Click the "New MySQL® Databases" icon in the database section.

Note: The application is available in both the x3 and Paper Lantern themes.

**************************************************************************************
***
*** DO NOT USE THIS ON A PRODUCTION MACHINE, THERE IS NO WAY TO DOWNGRADE TO
*** 11.40 / 11.41 / 11.42 / 11.43 / 11.44.
*** IF YOU ARE DOING THIS ON A TEST VM TAKE A SNAPSHOT FIRST SO YOU CAN ROLLBACK.
*** INSTALLING THESE BUILDS IN PRODUCTION WILL VOID ALL SUPPORT CONTRACTS
*** CPANEL SUPPORT CANNOT PROVIDE ANY ASSISTANCE WITH PRE-RELEASE DEVELOPER BUILDS
*** PLEASE REPORT ALL ISSUES WITH THESE BUILDS TO YOUR DEVELOPMENT CONTACT
*** DO NOT CONTACT CPANEL SUPPORT FOR HELP WITH PRE-RELEASE DEVELOPER BUILDS
***
**************************************************************************************

 

[cPanelTomGreen]

For those of you looking for some pictures of the new UI's there is now a blog article up as well with some screen shots.

UI Technology Preview: MySQL Feature Using Modern Tools and Technology | cPanel Blog

 

[JamesOakley]

My first UI observation is that I thought it wasn't working.

I clicked on the "New MySQL" link, and the page loaded. It just showed

MySQL Databases

MySQL Databases allow you to store lots of information in an easy to access manner. The databases themselves are not easily read by humans. MySQL databases are required by many web applications including some bulletin boards, content management systems, and others. To use a database, you'll need to create it. Only MySQL Users (different than mail or other users) that have privileges to access a database can read from or write to that database.

and the page footer.

Then, after a pause, a list of the databases on the account appeared.

I hit refresh, to see if the delay was just for the first time the page is loaded, but it was just the same.

So I hit refresh again, and timed the pause - just under 4 seconds. That's long enough to make you think you've clicked on the wrong link on the cPanel account homescreen, so that you click "back" to see what you should have clicked.

On the upside, I like the layout, and look forward to experimenting with it some more.

 

[JamesOakley]

OK: Things I really like:

Assigning a user to a database now lets the user assign specific permissions in the same screen. I like the fact that you can get to "assign user to database" from either the users or the databases view - that will help people find that. I like the fact that, when managing a database, you can "add new user" and create the user at the same time as granting it permission to that database.

One thing that concerns me (knowing where new users get stuck trying to use the existing X3 UI): When you go to the new databases page, you now only see "databases" with no mention of "users" (apart from the presence of a tab at the top of the screen, that they may not notice). Someone trying to set up something like Wordpress for the first time may know that they need to create a database, but not even realise that they need to create a user. The "create database" button doesn't then go on to invite the user to assign MySQL users to their newly created database. I could easily see the end-user missing that entirely, and doing something like putting their cPanel login credentials in the Wordpress installation wizard or config file.

Compare that to X3. For all there could be too much on one page, at least you can clearly see three sections - databases, users, assigning users to databases, which draws the end-user through the process of setting up the three in turn. The new UI layout doesn't seem to mirror the process that someone goes through as they use those screens.

 

[cPanelTomGreen]

My first UI observation is that I thought it wasn't working.

I clicked on the "New MySQL" link, and the page loaded. It just showed


and the page footer.

Then, after a pause, a list of the databases on the account appeared.

I hit refresh, to see if the delay was just for the first time the page is loaded, but it was just the same.

So I hit refresh again, and timed the pause - just under 4 seconds. That's long enough to make you think you've clicked on the wrong link on the cPanel account homescreen, so that you click "back" to see what you should have clicked.

On the upside, I like the layout, and look forward to experimenting with it some more.

Ill take a look at the load performance a little more. We didn't get to the optimization stage, but if thats your first impression, I want to check into the issue... it should load quicker since all the data is available at page load time.

 

[cPanelTomGreen]

I like the idea of giving users the option to add a user after creating the database.

Also, we considered porting the wizard process to this system as well, which is want I think you are really asking for... time constraint on the experimental project kept us from doing that at the time, but Ill keep your ideas in a list of enhancements we will consider for this feature.

 

[cPanelTomGreen]

Just a quick note: We have pulled this build from our distribution servers temporary due to an issue and will be releasing a new build in a few days with a resolution.