7,898 reads

How to use admin panel template for your project properly?

by AspirityJuly 9th, 2018

Too Long; Didn't Read

We have developed 8 projects using admin panel templates for the past three years of our company existing.

Companies Mentioned

featured image - How to use admin panel template for your project properly?

We have developed 8 projects using admin panel templates for the past three years of our company existing.

It is not a secret anymore that ready-to-go solution is a best option to build small project or MVP. It seems that all you need is to buy such template and customize it for your needs.

You can buy admin panel for just $20

But this is not the option at all for a huge and expensive project. With all obvious advantages (built-in UI elements, responsive layout, time and money saving) there are a lot of drawbacks each of which slows down your development process.

Issue 1: Customization

Imagine you what you don’t like mayo and prefer oil. You are in a restaurant and your waiter serves you a vegetable salad full of mayo. The only thing you can to do in this case is simply disassemble the entire salad to clean every part of it from the mayo.

CSS customization in a regular admin panel

This short story describes the process of CSS customization in an attempt to create UI according to mock-up in a freshly bought admin panel. We were forced to disassemble the template into pieces to rewrite them from scratch. Accidentally finding Angular.js mixes wth jQuery is the “best” part of such a process.

If you would like to use admin panel with built-in logic (such as authorization, user role management, routing and so on) you will have to put up with template’s architecture.

For example, if you like UI-routing, your template will use Angular-routing. But the router is not so easy to replace a logo in a header. So the only option is to simply put up with it.

Minus 2: Version conflicts

This could happen when you decide to update some of your libraries. Using tons of outdated and recently updated components in one app is common in ready-to-go templates.

Your console after libraries update

We bet you will see hundreds of errors in your console after updating one of these components. It is not easy to find solution quickly, especially when you have to release a new version the next day.

Minus 3: It takes too much time to mess with new technologies and libraries

It is not a big deal but as you know — time is money. Nobody wants to spend their time to deal with rarely used technologies, especially if you don’t plan to use them in near future.

Infrastructure around JS is huge and you will never know what to expect from the next particular template.

For example, it is really hard to reorganise yourself if you’re a fan of SAAS preprocessor, but your template uses LESS.

As a conclusion

If you decide to build admin panel for your project with use of template, you should:

put up with template’s tech stack and adjust to it,
to customize literally everything you see,
to find a template with tech stack you really need.

Ready-to-go admin template is like a time in credit, which you will need to pay back.

Probably, when you achieve limit in the amount of code-crutches your template won’t look like the original one at all. So if you are developing a big long-term project, you should choose template carefully in the beginning to minimize a waste of time for customization.

For those who want to save time in the beginning, but full-size admin panel template is too much for your needs, the ideal option will be a seed-project.

Seed project is a development environment with all adjustments built in. In this case author of the project takes care of assembly and testing systems, minimal set of technologies.

Seed project is the best option if you are not a pro, but you want your project to be well-organised.

But if you want to save time on complex logic and components development, you should use admin panel template.

To sum up, before choosing an admin panel template follow these tips:

Estimate project size and its future;
Learn the template’s documentation and tech stack;
Be ready to deeply customize the template;
Try to clearly understand, why you need the whole admin panel, and not just a seed project.

P.S.: So as a result we decided to develop our own admin template for our own needs. We have implemented a flexible set of components and a uniform styles system with themes support.