How to make it easier for programmers to develop web interfaces? Refactoring Smartadmin Show Tinyui

How to make it easier for programmers to develop web interfaces is a lasting topic, and all the companies involved in the development will encounter this problem and are deeply troubled by the problem.
Tiny framework also has to look directly at this problem, indeed, to solve this problem is also very difficult and deep, the industry has a variety of attempts, which is also a variety of different frameworks appear.
Tiny Framework builders believe that it is unrealistic to adopt a framework to solve all problems. And even if you find a very good framework for the time being, it can meet the needs of the application, but as the technology evolves, the evolution of the business will slowly become less satisfying to business needs. Therefore, the tiny framework is built from the goal of not putting a set of UI components to suit various needs.
In turn, let's look at some of the problems that you might encounter in doing Web applications:

• The introduction and sequence of JS in UI, the problem of JS merging
• The introduction and order of CSS in UI, the problem of CSS merging
• The extent of the impact of a performance problem in the UI, such as a problem with a tree, to change many of the places used in the tree
• Code duplication problem, the same content in many places, if you want to change will change a lot of places
• Problems with difficulty in overall layout adjustment
• Programmers need to pay attention to too many issues, js,css, layout, backstage business, front-end display, the interface engineers must be all-rounder to get all the problems.
• The problem of development efficiency
• Implementation efficiency issues, the front desk response requirements faster
• Problems with clusters
• The question of internationalization
• ...

So, I wrote an article before: The ultimate solution for UI development interested classmates, can go to see, today's goal is to use the Tinyui framework of the refactoring smartadmin, making it easier to use.
Smartadmin First Knowledge
Smartadmin is a set of UI component libraries based on the Jquery,bootstrap build, which is straightforward, it is a hodgepodge, it combines the various jquery plug-ins and bootstrap together, provides a basic complete application development UI library, The basic is to take it can be used in a very professional application system.
Here is the interface, of course, it provides four sets of skin, can be switched:

085559_r5hc_1245989.jpg (65.3 KB, download number: 0)

Download attachments

Uploaded 6 days ago

Since Smartadmin is a commercial product that needs to be purchased, it cannot provide its copy, which is said to be found in Baidu and is said to be downloadable. If you just want to see it, please click this link: http://192.241.236.31/test4.smartadmin/
smartadmin Analysis through the analysis of smartadmin, found that it reused a large number of open source plug-ins, and the use of Ajax loading technology, in the runtime loaded with a large number of JS plug-ins or CSS, the entire page using HTML+JS integration, Many JS and the page is separate, that is, the processing of the DOM elements of this page JS is not necessarily in the current HTML file, so to understand is very difficult, if you want to apply it in their own projects, is also very difficult thing.
For example, to display a widget, you need to write something like this:
?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21st 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<div class= "Jarviswidget" id= "wid-id-0" > <!--widgets Options: Usage: <div class= "Jarviswidget" id= "wid-id-0" data-widget-editbutton= "false" > Data-widget-colorbutton= "false" Data-widget-editbutton= "false" Data-widget-togglebutton= "false" Data-widget-deletebutton= "false" Data-widget-fullscreenbutton= "false" Data-widget-custombutton= "false" Data-widget-collapsed= "true" Data-widget-sortable= "false" - <!--widget div--> < div> <!--widget edit box-- < div class= "Jarviswidget-editbox" > <!--this area used as dropdown edit box--- < input class= "Form-control" type= "text" > <span class= "Note" ><i class= "fa fa-check text-success" ></i> change title to update and save instantly!& Lt;/span> </div> <!--end Widget edit box-- <!--widget Content-- < div class= "Widget-body" > <p> Widget comes with a default ten padding to the body which can be removed by adding the class <code>.no-padd Ing</code> to the <code>.widget-body</code> class. The default widget also comes with 5 widgets buttons as displayed on top right Corner of the widget header. </p> <a href= "javascript:void (0);" class= "btn btn-default btn-lg" > <strong>Big</strong> <i>button </i> </a> </div> <!--End Widget Content-- </div> <!--end Widget Div--- </div>

This programmer is still very difficult to deal with, OK, this is not too much. Execute the following command:
Dir *.js/s/w run result:?

1 2	Total Files Listed: 310 Files 6,043,053 bytes

Execute the following command:
Dir *.css/s/w run result:?

1 2	Total Files Listed: 36 Files 1,511,412 bytes

There are so many JS, there are so many CSS, the introduction of their order is also very important, a slight error, there will be JS error problem. Take a look at the JS loading process:

093417_jwih_1245989.jpg (131.21 KB, download number: 0)

Download attachments

Uploaded 6 days ago

You can see that to access a large number of js,css, the pressure on the server is relatively large, the client load time is also relatively long, the programmer to clarify these relationships, is also very difficult.
smartadmin reconstruction of Smartadmin is a reconstruction based on the architecture of tiny framework. The first step, clarify the relationship through the collation, found that the smartadmin used in the JS plug-ins are as follows:

1 2 3 4 5 6 7 8 9 Ten All + + ( ) , , , , , , , , , and 38 (+) - $ - - --- --- -- - - - - --- --

Bootstrap Bootstrapprogressbar Bootstrapslider Bootstraptags Bootstraptimepicker Bootstraptree Bootstrapwizard CKEditor Colorhelpers ColorPicker DataTables Delete-table-row Dropzone Easypiechart Excanvas Fastclick Flot Fontawesome Fueluxwizard Fullcalendar Ie-placeholder Ion-slider Jquery Jquery-form Jquery-nestable Jquery-touch jQueryUI Jqueryvalidate Js-migrate Jstorage Knob Markdown Maskedinput MaxLength Morris Msiefix MultiSelect Notification Nouislider Pace Prettify Raphael Select2 Selecttouislider Smartadmin Smartwidgets Sparkline Summernote Superbox Throttle-denounce Typeahead Vectormap X-editable

The second step: UI plug-in, component-wrapping: For example, the jquery component package, is to write the following file: Jquery.ui.xml

1 2 3 4 5

<ui-components> <ui-component name= "jquery" > <js-resource>/jquery/jquery-1.11.0.js</js-resource> </ui-component> </ui-components>

For example, jQueryUI Group repair package, is to write the following file: Jqueryui.ui.xml

1 2 3 4 5 6

<ui-components> <ui-component name= "jQueryUI" dependencies= "jquery" > <js-resource>/jqueryui/js/jquery-ui-1.10.4.custom.js</js-resource> <css-resource>/jqueryui/css/smoothness/jquery-ui-1.10.4.custom.css</css-resource> </ui-component> </ui-components>

For example, bootstrap component package, is to write the following file: Bootstrap.ui.xml

1 2 3 4 5 6

<ui-components> <ui-component name= "Bootstrap" dependencies= "jQueryUI" > <css-resource>/bootstrap/css/bootstrap.min.css</css-resource> <js-resource>/bootstrap/js/bootstrap.js</js-resource> </ui-component> </ui-components>

Other analogy, the main purpose is to distinguish, which JS, which CSS, and collate the dependencies between packages, for example, the above bootstrap rely on jQueryUI, of course, jQueryUI relies on jquery
CSS and JS resources can be built automatically through the above dependency tree tiny framework.
Because these resources are placed in the Main/resources directory of the Jar project, they are directly in the jar package.
The third step, write the macro , for example, the original tab, need to involve HTML,JS, write the following macro to use as follows:

1 2 3 4 5 6 7 8 9 Ten All + + , , , , , , , , , , and

#** * jQueryUI Tab * Juitab[1..1] * Juitabheader[1..1] * JUITABHEADERITEM[1..N] * JUITABCONTENTITEM[1..N] *# #macro (Juitab $juiTabId) < div id= "$juiTabId" > $bodyContent </div> < script> $ (document). Ready (function () { $ (' # $juiTabId '). tabs (); }); </script> #end #macro (Juitabheader) < ul> $bodyContent </ul> #end #macro (Juitabheaderitem $juiTabContentItemId) < li> <a href= "# $juiTabContentItemId" > $bodyContent </a> </li> #end #macro (Juitabcontentitem $juiTabContentItemId) < div id= "$juiTabContentItemId" > $bodyContent </div> #end

Later programmers can write a tab page in the following way:

1 2 3 4 5 6 7 8 9 11 + - +

# @juiTab ("tabs")     # @juiTabHeader ()      & nbsp;  # @juiTabHeaderItem ("tabs-a") first#end         #@ Juitabheaderitem ("Tabs-b") second#end         # @juiTabHeaderItem ("Tabs-c") third# End     #end     # @juiTabContentItem ("tabs-a")          Tabs-a content     #end     # @juiTabContentItem ("Tabs-b")          tabs-b content     #end     # @juiTabContentItem ("tabs-c")          TABS-C content     #end #end

Through the above processing, the implementation of the code is closed, and the easy-to-understand macro, in order to improve developer efficiency, improve the code maintainability of the significant improvement. Especially when the need to change, as long as the interface does not change, a lot of time, as long as the macro definition can be modified, for the programmer to write the interface file, can be transparent processing.
results after refactoring

095647_ekv2_1245989.jpg (116.15 KB, download number: 0)

Download attachments

Uploaded 6 days ago

You can see that after refactoring, the interface style does not change as it was originally.
Next look, JS loading: From the original many JS files, changed to only load two, the description JS file has been merged and compressed transmission.

095845_xprk_1245989.jpg (22.87 KB, download number: 0)

Download attachments

Uploaded 6 days ago

Then look at the CSS loading, you can see, but also only need one on it:

100106_nfi0_1245989.jpg (19.11 KB, download number: 0)

Download attachments

Uploaded 6 days ago

After refactoring, write a small component that looks like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

# @jarvisWidget ("wid-id-0" <strong>Default</strong> <i>Widget</i> ") # @jarvisWidgetHeader () #end # @jarvisWidgetBody () # @widgetEditBox () <input class= "Form-control" type= "text" > <span class= "Note" ><i class= "fa fa-check text-success" ></i> change title to update and save instantly!& Lt;/span> #end # @widgetBody () <p> Widget comes with a default ten padding to the body which can be removed by adding the class <code>.no-padding</code> to the <code>.widget-body</code> class. The default widget also comes with 5 widget buttons as displayed on top right Corner of the widget header. </p> <a href= "javascript:void (0);" class= "btn btn-default btn-lg" > <strong>Big</strong> <i>button </i> </a> #end #end #end

through the reconstruction of Smartadmin, the css,js relationship in Smartadmin is successfully cleared, which facilitates the subsequent reuse.
By writing macros, you can isolate the component developer from the page developer. It is the component developer who deals with js,css and so on, and lets page developers focus only on business presentation.

How to make it easier for programmers to develop web interfaces? Refactoring Smartadmin Show Tinyui