{"id":19252,"date":"2014-04-16T08:00:56","date_gmt":"2014-04-16T14:00:56","guid":{"rendered":"http:\/\/blog.cpanel.net\/?p=19252"},"modified":"2014-04-16T08:00:56","modified_gmt":"2014-04-16T14:00:56","slug":"ui-technology-preview-mysql-feature-using-modern-tools-and-technology","status":"publish","type":"post","link":"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/","title":{"rendered":"UI Technology Preview: MySQL Feature Using Modern Tools and Technology"},"content":{"rendered":"<p>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\u2019s 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.<\/p>\n<p><!--more--><br \/>\nWe 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\u2019s MySQL feature.<\/p>\n<p>Why the MySQL feature? It is complex, with a lot of interactions that could give us a well-rounded picture of each framework\u2019s strengths and weaknesses. Some of the things we wanted to understand about each of the frameworks included:<\/p>\n<ul>\n<li>How does complex data paging, sorting, and filtering work in the frameworks?<\/li>\n<li>How does one make use of the Model\/View\/Controller (MVC) application layout?<\/li>\n<li>What is the learning curve to understand the deep features of each framework?<\/li>\n<li>What kind of documentation is available for each?<\/li>\n<li>How active are the developer communities for each?<\/li>\n<li>How can we build reusable components for each?<\/li>\n<\/ul>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>The demonstrative build is available at <a title=\"http:\/\/next.cpanel.net\" href=\"http:\/\/next.cpanel.net\" target=\"_blank\" rel=\"noopener\">http:\/\/next.cpanel.net<\/a>. 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 <a title=\"cPanel Forums\" href=\"http:\/\/forums.cpanel.net\/f8\/user-interface-technology-stack-research-development-feedback-399602.html\" target=\"_blank\" rel=\"noopener\">cPanel Forums<\/a>.<\/p>\n<p>This build demonstrates several aspects of our new technology stack, including:<\/p>\n<ul>\n<li>The use of Bootstrap.css for styling<\/li>\n<li>The use of Require.js for module dependency loading<\/li>\n<li>A prototype JavaScript Library to replace CJT<\/li>\n<li>A modern version of JQUERY and Underscore.js<\/li>\n<li>A structured application directory layout<\/li>\n<li>Dynamic loading of UI assets (just in time)<\/li>\n<li>An alternative application workflow that allows users to focus on one task at a time<\/li>\n<li>The use of a single-page application design pattern per the Angular.js MVC and Router system<\/li>\n<li>The MySQL application deployed on the previously mentioned framework<\/li>\n<\/ul>\n<p>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, <strong><em>do not<\/em> install this build on production servers<\/strong>.<\/p>\n<p>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.<\/p>\n<figure id=\"attachment_19362\" aria-describedby=\"caption-attachment-19362\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165437.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-19362 \" title=\"MySQL application using Angular.js (X3)\" alt=\"\" src=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165437-300x113.png\" width=\"300\" height=\"113\" \/><\/a><figcaption id=\"caption-attachment-19362\" class=\"wp-caption-text\">MySQL application using Angular.js (X3)<\/figcaption><\/figure>\n<figure id=\"attachment_19372\" aria-describedby=\"caption-attachment-19372\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165600.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-19372 \" title=\"MySQL application using Angular.js (Paper Lantern)\" alt=\"\" src=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165600-300x159.png\" width=\"300\" height=\"159\" \/><\/a><figcaption id=\"caption-attachment-19372\" class=\"wp-caption-text\">MySQL application using Angular.js (Paper Lantern)<\/figcaption><\/figure>\n<p>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 &#8220;Databases,&#8221; &#8220;Create Database,&#8221; &#8220;User List,&#8221; and &#8220;Create User&#8221; views.<\/p>\n<figure id=\"attachment_19382\" aria-describedby=\"caption-attachment-19382\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165527.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-19382 \" title=\"MySQL application using Angular.js - &quot;Databases&quot;\" alt=\"\" src=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165527-800x302.png\" width=\"640\" height=\"241\" \/><\/a><figcaption id=\"caption-attachment-19382\" class=\"wp-caption-text\">MySQL application using Angular.js &#8211; &#8220;Databases&#8221;<\/figcaption><\/figure>\n<figure id=\"attachment_19422\" aria-describedby=\"caption-attachment-19422\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165736.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-19422 \" title=\"MySQL application using Angular.js - &quot;Create Database&quot;\" alt=\"\" src=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165736-800x277.png\" width=\"640\" height=\"221\" \/><\/a><figcaption id=\"caption-attachment-19422\" class=\"wp-caption-text\">MySQL application using Angular.js &#8211; &#8220;Create Database&#8221;<\/figcaption><\/figure>\n<figure id=\"attachment_19432\" aria-describedby=\"caption-attachment-19432\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165753.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-19432 \" title=\"MySQL application using Angular.js - &quot;User List&quot;\" alt=\"\" src=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165753-800x291.png\" width=\"640\" height=\"232\" \/><\/a><figcaption id=\"caption-attachment-19432\" class=\"wp-caption-text\">MySQL application using Angular.js &#8211; &#8220;User List&#8221;<\/figcaption><\/figure>\n<figure id=\"attachment_19442\" aria-describedby=\"caption-attachment-19442\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165851.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-19442 \" title=\"MySQL application using Angular.js - &quot;Create User&quot;\" alt=\"\" src=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165851-800x387.png\" width=\"640\" height=\"309\" \/><\/a><figcaption id=\"caption-attachment-19442\" class=\"wp-caption-text\">MySQL application using Angular.js &#8211; &#8220;Create User&#8221;<\/figcaption><\/figure>\n<p>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.<\/p>\n<p>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 <a title=\"newtech@cpanel.net\" href=\"mailto:newtech@cpanel.net\" target=\"_blank\" rel=\"noopener\">newtech@cpanel.net<\/a> or any of the special audience mailing lists (<a title=\"plugindevs@cpanel.net\" href=\"mailto:plugindevs@cpanel.net\" target=\"_blank\" rel=\"noopener\">plugindevs@cpanel.net<\/a> or <a title=\"edge-users@cpanel.net\" href=\"mailto:edge-users@cpanel.net\" target=\"_blank\" rel=\"noopener\">edge-users@cpanel.net<\/a>), or post on <a title=\"cPanel Forums\" href=\"http:\/\/forums.cpanel.net\/f8\/user-interface-technology-stack-research-development-feedback-399602.html\" target=\"_blank\" rel=\"noopener\">cPanel Forums<\/a>.<\/p>\n<p>&#8212;&#8211;<br \/>\nTom Green, Sruthi Sanigarapu, Kevin Thomson<br \/>\ncPanel User Interface Skunk Works Team<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019s User Interface. The next stage in this exploration was to find a replacement for YUI2 and [&hellip;]<\/p>\n","protected":false},"author":77,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[49],"tags":[917,89,549,921,925,725],"class_list":["post-19252","post","type-post","status-publish","format-standard","hentry","category-products","tag-angular-js","tag-cpanel","tag-mysql","tag-preview","tag-require-js","tag-user-experience"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>UI Technology Preview: MySQL Feature Using Modern Tools and Technology | cPanel<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Technology Preview: MySQL Feature Using Modern Tools and Technology | cPanel\" \/>\n<meta property=\"og:description\" content=\"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\u2019s User Interface. The next stage in this exploration was to find a replacement for YUI2 and [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/\" \/>\n<meta property=\"og:site_name\" content=\"cPanel\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cpanel\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-04-16T14:00:56+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165437-300x113.png\" \/>\n<meta name=\"author\" content=\"cPanel Community\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cPanel\" \/>\n<meta name=\"twitter:site\" content=\"@cPanel\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cPanel Community\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/\",\"url\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/\",\"name\":\"UI Technology Preview: MySQL Feature Using Modern Tools and Technology | cPanel\",\"isPartOf\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/#website\"},\"datePublished\":\"2014-04-16T14:00:56+00:00\",\"dateModified\":\"2014-04-16T14:00:56+00:00\",\"author\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8\"},\"breadcrumb\":{\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/devel.www.cpanel.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"UI Technology Preview: MySQL Feature Using Modern Tools and Technology\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#website\",\"url\":\"https:\/\/devel.www.cpanel.net\/\",\"name\":\"cPanel\",\"description\":\"Hosting Platform of Choices\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/devel.www.cpanel.net\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8\",\"name\":\"cPanel Community\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g\",\"caption\":\"cPanel Community\"},\"description\":\"The web hosting industry's most reliable management solution since 1997. With our first-class support and rich feature set, it's easy to see why our customers and partners make cPanel &amp; WHM their hosting platform of choice. For more information, visit cPanel.net.\",\"sameAs\":[\"https:\/\/cpanel.net\"],\"url\":\"https:\/\/devel.www.cpanel.net\/blog\/author\/cpadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Technology Preview: MySQL Feature Using Modern Tools and Technology | cPanel","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/","og_locale":"en_US","og_type":"article","og_title":"UI Technology Preview: MySQL Feature Using Modern Tools and Technology | cPanel","og_description":"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\u2019s User Interface. The next stage in this exploration was to find a replacement for YUI2 and [&hellip;]","og_url":"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/","og_site_name":"cPanel","article_publisher":"https:\/\/www.facebook.com\/cpanel\/","article_published_time":"2014-04-16T14:00:56+00:00","og_image":[{"url":"http:\/\/blog.cpanel.com\/wp-content\/uploads\/2014\/04\/2014-03-26_165437-300x113.png"}],"author":"cPanel Community","twitter_card":"summary_large_image","twitter_creator":"@cPanel","twitter_site":"@cPanel","twitter_misc":{"Written by":"cPanel Community","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/","url":"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/","name":"UI Technology Preview: MySQL Feature Using Modern Tools and Technology | cPanel","isPartOf":{"@id":"https:\/\/devel.www.cpanel.net\/#website"},"datePublished":"2014-04-16T14:00:56+00:00","dateModified":"2014-04-16T14:00:56+00:00","author":{"@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8"},"breadcrumb":{"@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/devel.www.cpanel.net\/blog\/products\/ui-technology-preview-mysql-feature-using-modern-tools-and-technology\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/devel.www.cpanel.net\/"},{"@type":"ListItem","position":2,"name":"UI Technology Preview: MySQL Feature Using Modern Tools and Technology"}]},{"@type":"WebSite","@id":"https:\/\/devel.www.cpanel.net\/#website","url":"https:\/\/devel.www.cpanel.net\/","name":"cPanel","description":"Hosting Platform of Choices","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/devel.www.cpanel.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/8cf97408aad4fb70cf55d11a1d4f57f8","name":"cPanel Community","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/devel.www.cpanel.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e1949945083b5526bb95711bd3d616b3?s=96&d=mm&r=g","caption":"cPanel Community"},"description":"The web hosting industry's most reliable management solution since 1997. With our first-class support and rich feature set, it's easy to see why our customers and partners make cPanel &amp; WHM their hosting platform of choice. For more information, visit cPanel.net.","sameAs":["https:\/\/cpanel.net"],"url":"https:\/\/devel.www.cpanel.net\/blog\/author\/cpadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts\/19252"}],"collection":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/comments?post=19252"}],"version-history":[{"count":0,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/posts\/19252\/revisions"}],"wp:attachment":[{"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/media?parent=19252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/categories?post=19252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devel.www.cpanel.net\/wp-json\/wp\/v2\/tags?post=19252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}