Dependency injection

You probably get tired of determining which css and js files should be imported into your html files. With TheAdmin you won't ever need to have concern in this regards. TheAdmin automatically detects which plugins you have used inside a page and it loads them instantly.

Problem

Admin templates are usually included several 3rd-party plugins. They have to include both css and js files of those plugins to run properly. Based on the way of loading this libraries, we can categorize them into two groups: Multi small, and Single huge.

Multi small

In this method, you have to expressly include all of the required files for each page. Inserting about 10+ lines of <link> in <header>, and +15 lines of <script> in the end of <body> tag. Apart from performance issue which cause from making a lot of HTTP requests before rendering the page, you have to remember which libraries you need to import in a specific page! You probably will waste your time in this process or simply load several unnecessary libraries.

Single huge

In this method, you have a style file (i.e. style.min.css) and this file is a concatenation of all plugins' css files. The same scenario for Javascrip! So, you will bloat your application with a lot of unused styles and scripts which is not optimized at all.

Solution

Our solution is to use best of both. We prepared a core.min.css and core.min.js which is so light (98kb gzipped) and includes only necessary libraries, such as Bootstrap, jQuery, Poppers, FontAwesome, etc. It would be enough for simple pages that can be made using Bootstrap components.

Furthermore, you don't need to include any extra library for a page that requires to use plugins. TheAdmin will automatically detect requirements of the page and loads necessary libraries from /assets/vendor/ directory in parallel. In this method, your header and footer are consistent in all the pages:

<html>
  <head>
    <link href="assets/css/core.min.css" rel="stylesheet">
    <link href="assets/css/app.min.css" rel="stylesheet">
  </head>

  <body>
    <script src="assets/js/core.min.js"></script>
    <script src="assets/js/app.min.js"></script>
  </body>
</html>

Prefer the old method?

No worries. Simply import your files after core.min.* and before app.min.*. You can consult the table in the following section to find out which files you should import for the plugin you're going to use in your page.

Provider list

TheAdmin usually uses data-provide="plugin-name" to detect which plugins are required in a page. A list of all plugins and included files for that plugin provided in the following table for your reference.

Name	Files - Relative to /vendor/ dir
easypie	`easypiechart/jquery.easypiechart.min.js`
peity	`jquery.peity/jquery.peity.min.js`
sparkline	`sparkline/sparkline.min.js`
chartjs	`moment/moment.min.js` `chartjs/Chart.min.js`
morris	`raphael/raphael.min.js` `morris/morris.min.js`
prism	`prism/prism.css` `prism/prism.js` `clipboard/clipboard.min.js`
clipboard	`clipboard/clipboard.min.js`
summernote	`summernote/summernote.css` `summernote/summernote.min.js`
quill	`quill/quill.bubble.css` `quill/quill.snow.css` `quill/quill.min.js`
emoji	`emojione/emojione.min.js`
selectpicker	`bootstrap-select/css/bootstrap-select.min.css` `bootstrap-select/js/bootstrap-select.min.js`
datepicker	`bootstrap-datepicker/css/bootstrap-datepicker3.min.css` `bootstrap-datepicker/js/bootstrap-datepicker.min.js`
timepicker	`bootstrap-timepicker/bootstrap-timepicker.min.css` `bootstrap-timepicker/bootstrap-timepicker.min.js`
colorpicker	`jquery-minicolors/jquery.minicolors.min.css` `jquery-minicolors/jquery.minicolors.min.js`
clockpicker	`bootstrap-clockpicker/bootstrap-clockpicker.min.css` `bootstrap-clockpicker/bootstrap-clockpicker.min.js`
maxlength	`bootstrap-maxlength/bootstrap-maxlength.min.js`
pwstrength	`bootstrap-pwstrength/pwstrength-bootstrap.min.js`
tagsinput	`bootstrap-tagsinput/bootstrap-tagsinput.css` `bootstrap-tagsinput/bootstrap-tagsinput.min.js`
knob	`knob/jquery.knob.min.js`
slider	`nouislider/nouislider.min.css` `nouislider/nouislider.pips.css` `nouislider/nouislider.tooltips.css` `nouislider/nouislider.min.js`
switchery	`switchery/switchery.min.css` `switchery/switchery.min.js`
mask	`formatter/jquery.formatter.min.js`
validation	`bootstrap-validator/validator-4.js`
wizard	`bootstrap-wizard/bootstrap-wizard.min.js`
typeahead	`typeahead/bloodhound.min.js` `typeahead/typeahead.jquery.min.js`
bloodhound	`typeahead/bloodhound.min.js`
iconMaterial	`material-icons/css/material-icons.css`
icon7Stroke	`pe-icon-7-stroke/css/pe-icon-7-stroke.min.css` `pe-icon-7-stroke/css/helper.min.css`
iconIon	`ionicons/css/ionicons.min.css`
iconI8	`i8-icon/jquery-i8-icon.min.js`
map	`https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=app.map`
mapael	`jquery.mousewheel/jquery.mousewheel.min.js` `raphael/raphael.min.js` `mapael/jquery.mapael.min.js`
jsgrid	`jsgrid/jsgrid.min.css` `jsgrid/jsgrid-theme.min.css` `jsgrid/jsgrid.min.js`
datatables	`datatables/css/dataTables.bootstrap4.min.css` `datatables/js/jquery.dataTables.min.js` `datatables/js/dataTables.bootstrap4.min.js`
sweetalert	`sweetalert2/sweetalert2.min.css` `sweetalert2/sweetalert2.min.js`
contextmenu	`bootstrap-contextmenu/bootstrap-contextmenu.min.js`
lightbox	`lity/lity.min.css` `lity/lity.min.js`
sortable	`html5sortable/html.sortable.min.js`
shepherd	`shepherd/css/shepherd-theme-arrows-plain-buttons.css` `shepherd/js/shepherd.min.js`
shuffle	`shuffle/shuffle.min.js`
photoswipe	`photoswipe/photoswipe.min.css` `photoswipe/default-skin/default-skin.min.css` `photoswipe/jquery.photoswipe-global.js`
swiper	`swiper/css/swiper.min.css` `swiper/js/swiper.min.js`
fullscreen	`screenfull/screenfull.min.js`
jqueryui	`jqueryui/jquery-ui.min.js`
dropify	`dropify/css/dropify.min.css` `dropify/js/dropify.min.js`
dropzone	`dropzone/min/dropzone.min.css` `dropzone/min/dropzone.min.js`
fullcalendar	`fullcalendar/fullcalendar.min.css` `moment/moment.min.js` `fullcalendar/fullcalendar.min.js`
justified	`justified-gallery/css/justifiedGallery.min.css` `justified-gallery/js/jquery.justifiedGallery.min.js`
animate	`animate/animate.min.css`
intercoolerjs	`intercoolerjs/intercoolerjs.min.js`
smoothscroll	`smoothscroll/smoothscroll.min.js`
aos	`aos/aos.css` `aos/aos.js`
typed	`typed.js/typed.min.js`
vuejs	`vuejs/vue.min.js`
reactjs	`reactjs/react.min.js` `reactjs/react-dom.min.js`

You might find following articles helpful as well

Directory structure

Article

HTML Structure

Article

Quick start

Article

Build tools

Article