Generator admins

Briefly the essence of the problem: would have a lot of admins, I wrote the generator admins.

the

How it works:

the

describe the entity to JSON.
generated the database schema (PostgreSQL);
generated procedures to the database;
generated by the server (NodeJS or PHP);
generated admin area (HTML file);

Nakata was tadalail, copied it all;
the

begin work;

Content:

the

come down to that;
why not take a ready-made solution;

what happened.
the

that did NOT work;
how it works;
about UX;

how it started

the fact that I constantly had to impose the admin for different services. New project, new server, new admin. Sometimes they were written from scratch, sometimes worked up. Somewhere in the 13th admin I depressed. I wanted to make a change. Therefore, the new admin for the statistical division was created in the style of Windows 98. Further, urgently, by the "budding" was received on the admin panel of the licensing Department, and, subsequently, a new admin game portal.

By this time it became clear that some components are the same in all projects. And examples of use are again:

the

list;
create / edit / delete item;
assign the connection one-to-many or many-to-many;

Then we wrote a generator which templates you created the master code base. It is clear that all the "wishlist" had to finish by hand, but it was already a big step forward. After three admin it became clear that the need to generate not only the layout, but, preferably, the API server and the database schema. It had not all projects, but in passing the "SNiP SNiP and production services" was the most. Because different branches of the admins got fixes various bugs, by the end of summer it became obvious that it would be very good to merge all the fixes in one branch and to upgrade the alternator. That's what I began to do in the evenings and weekends.

Scalability level copy/past admins generator first version

the

is There a CMS admin panels and generators?

, thousands of their. What's wrong with them:

the

Readiness for a specific language or framework.

for Example, if you are using Laravel (PHP framework), you can take SleepingOwl. But if you have a backend in Java, no PHP can not be screwed.

Monolithic

the Solidity follows from the previous paragraph. On the one hand can be a very cool system that dynamically changes the admin area, depending on the database schema. On the other hand, you can't this link be removed. If you need only the layout — this will hurt. The same will be hurt when you want to connect admin to your authorization system (many large offices have a single authorization systems that control access to all systems for all users from a single point of control).

ground under the sites

Probably half of the generators admins collect different variations of the CMS systems. Some of them are very cool, but they are fundamentally not suited for content management. If you drive in them a database of books, it is so simply to take and distribute 100 books by category will be very painful.

Difficulty customization

Well, it's obvious. "It is impossible to make a universal admin, each project is unique" (C).

What is very much lacking in adminka:
the
the
the Ability to create communication many-to-many without switching to the edit mode of the content. Example: there is a list of 100 games, you need to quickly affix to them tags. Most admins need to open the "edit game", to affix the tag to return to "game list".

the
the Ability to batch stamp ties, delete or edit. Example: to select 15 banners and immediately assign them another channel of promotion.

the
Lack of logging. Example: look at the content and immediately want to know who and when it was edited, and what exactly has changed.

the
the Ability to make a duplicate object and all of its records with a single click. Example: make a copy of the advertising company with all its banners and sites.

the
the Ability to import / export data to Excel. Example: managers you need to check in Excel the content and sales, or send a list of anything the partners.

the
Complex search filters (in the group properties with the exception). Example: select all books from the categories "Classic" and "Novels", except those whose id's: 20, 30, 65, and those marked by the tag "sales Hit". In SQL we have to do, and managerov in admike filters, as a rule, such tricks will not do.

Fix these problems I decided to do. It is clear that in fact, if you put the question about code-generation, then "the list" becomes even more. It is necessary to be displaying the statistics, which pulls the data analysis and the tools add the "business logic" for handling the impact of these on top of each other, etc. the Subject is very extensive, but in view of the limited my motivation and man-hours of development, all wishlist is not implemented. While I would like to finish at least the minimum basic functionality.

the

What exactly can be done?

Looking ahead, the username/password is demodemo / qwerty123456 and right viewing put (suddenly who will break and demos will be useless before its time)

Price

let's Start simple. This guy was a radio parts wholesale trades. Urgently need a price on the website will display the search. All 1S-the warehouse had not. Vzhuh, withdrawn: https://goo.gl/OIPQXv

Parody JIRA

traditionally, JavaScript developers TODO sheet is supposed to write. Let's write a TODO list group of companies. There were subsidiaries, divisions, departments. And inside departments have tasks. Tasks scattered on the workers. Each employee two sheets: the current tasks and the task queue for the future. Mumbo Jumbo, ready: https://goo.gl/6UWqRn (demodemo / qwerty123456)

Yes, of course. Still need comments to tasks and so the files could be attached. This is a minimal set. But this is admin generated in the previous version, which is still not supported. In the new — already fixed.

CRM

Want your CRM. There will be companies, their offices and key persons, scattered through the offices. We can see the description of the company or a dossier for each key person directly by our Manager (type: customer card). Next, you need to be able to create "event" associated with a key person (for example: phone call, letter, meeting). Even though there are separate lists: what we need to do now, what we expect from the client, a list of stocks in our relationship. Um... weak total of seven objects. Let's add separate entities different types of clients (private, legal. person, etc.) and a separation profile (carriers, tour operators, hotels, etc.). SNiP-SNiP, tadalail: https://goo.gl/OcJU8g (demodemo / qwerty123456)

Probably, still need all sorts of reports, accounts and warehouse of goods, but on the one hand I don't even know how the accounting and the warehouse, on the other hand, maybe they should make a separate admin area, because it is the other departments with other business processes.

Yes, of course, need integration with the PBX, advertising platforms, and electro-mail. But this is not a "Chik-Chik demo" for 30 minutes.

the

JSON on the input — editor of the NSI output

In General, the bottom line is this is editors item-reference information (NSI). The closer your project is to the editor of the NSI, the more you will get out of the box. Data visualization, Analytics, and logic until you have to write yourself.

But even so, it is possible to outline Ala prototip ERP system. In fact this realization very strongly motivated to further action. Further, by search and view different demos, it became clear that:

the

many ERP systems-level "startup", not much superior in functionality "Chik-Chik demo". But because Kodo-generate a "Chik-Chik demo" can greatly surpass them.
many ERP systems are built on the same principle of code generation and deployment from a pile of configs. For example, there was such a thing "Etalon", which, judging by the descriptions, were really the same as this bike, only under DOS. Again — thousands of them.

the

Why should you?

Assume that you write in Java, you are constantly plagued by Agulara. Here you will be able to generate an admin area and not to climb in the front. Or another option — you have the architecture we need to create many tables (Yes Yes Yes, I know that you, the Java exchange, can the schema from the class to roll and Vice versa — the class to generate DB schema), but suddenly everything can. Or scheme will need to roll architect who doesn't write Java, but only with the base running. Or you do clean the front and can't afford a relational database — here, at least, will constrain and indexes at least some (although it is clear that the database schema you fuck with his "de-normalize", but all of a sudden). Or maybe you want to cut start-up level of "rocket science", and have no desire to engage in domestic infrastructure project.

the

Well, for home projects from three tables will do. We boooolshoy project, is another story.

No :) because Kodo-generation and part of the admin a little less than completely out of configuration, you can deploy a project of 1000 object. Another question — why? Usually more than 20 entities in the same project — pain (there will be from 40 to 100 tables in database). Therefore, large projects are divided into microservices and micro service — this is in the region of 100 tables.

Plus, we can set individual settings for connecting to the database not only for each entity, but also for its logs. Therefore, out of the box we can write the logs in a separate database and to operate on entities from different databases in one admin interface.

Plus, authorization, originally made as a separate module, just due to the fact that the admin is collected on a conveyor belt and has a separate access control system (Hello lovers ESIA, OIB, Sonat'e %wasted%).

the

a Little about how it works and how much weight

first we need to describe all the entities and their relationships in a JSON'. This is one of the most difficult parts.

somehow

{
"objects": [
{
"id": "distributionChannel",
"name": {
"logic": "DistributionChannel",
"logicSmall": "distributionChannel",
"layout": "distribution_channel"
},
"properties": {
"create": {
"name": { "tag": "input", "type": "string", "min": 1, "max": 50 },
"description": { "tag": "textarea", "type": "string", "min": 1, "max": 500 }
},
"update": {
"name": { "tag": "input", "type": "string", "min": 1, "max": 50 },
"description": { "tag": "textarea", "type": "string", "min": 1, "max": 500 }
},
"search": {}
},
"visualization": {
"main": {
"name": { "type": "string", "min": 0, "max": 50 }
},
"history": {
"name": { "type": "string", "min": 0, "max": 50 }
}
}
},
...

Next, start the node and create a more detailed configs

the

config node

Succeed several large footcloths

{
"objects": [
{
"id": "distributionChannel",
"name": {
"logic": "DistributionChannel",
"logicSmall": "distributionChannel",

},
"aside": [
{
"id": "create",
"title": "Creating DistributionChannel",
"buttons": [
{ "tag":"popup_button", "icon": "menu", "value":"Menu", "id":"distribution_channel_aside_create_button_popup_menu" },
{ "tag":"popup_button", "icon": "search", "value":"Search", "id":"distribution_channel_aside_create_button_popup_search" }
],
"content": [
{ "tag":"input", "type":"string", "min":1, "max":50, "id":"distribution_channel_aside_create_name" },
{ "tag":"textarea", "type":"string", "min":1, "max":500, "id":"distribution_channel_aside_create_description" },
{ "tag":"button", "title":"Create", "id":"distribution_channel_aside_create_button_create" }
]
}

you Can rearrange fields, add something or cut. Next, the generated code (which is the bulk of the same configuration files)

the

node sql
node nodejs
node admin

an Example of one of hundreds created JS files

(function () {
"use strict";

ToggleStyleContentSearchConfig function() {
return {
common: [
{ id: "content__search__processing", className: "hidden" },
{ id: "content__search__not_found", className: "hidden" },
{ id: "content__search__result", className: "hidden" }
],
processing: [
{ id: "content__search__processing", className: "loading__icon search_status__loading" }
],
notFound: [
{ id: "content__search__not_found", className: "search_status__message" }
],
result: [
{ id: "content__search__result", className: "search__container__result" }
]
};
}

module.exports = ToggleStyleContentSearchConfig;
})();

When the files are ready, execute the generated SQL (to create a schema in a DB). Copy server files in a separate folder. Deploym. Left to collect statics

the

gulp
gulp easy

the Static will gather in one HTML file, which will need to throw to the server. If all goes well, you can try to pinch the static (-40% or -8% with gzip)

the

gulp hard

Bit technical specifications + design principles, the status of the project at the moment, plans for the future

some numbers:

the

Database (currently PostgreSQL, MySQL plan to add)

1 entity = (1 table objects + in table log) + n * (table relationships many-to-many + table log);

1 entity = 5 procedures for the object (create + edit + delete + search + for one object) + 4 treatments of logs (create + delete + search + for one log) + n * procedure for relationships (create + delete + find) + n * logs for connections (create + delete + find);

total: (2 + n*2) tables and (9 + (n*3*3)) procedures, where n is the number of links many-to-many

Server (NodeJS now, plan to add PHP)

a Total of six files, because everything is being kept in an instance of one class with the configuration.

Customer (vanilla JS)

1 entity = ~10 HTML files + ~50 files, JS + n * (~25 files for communication many-to-many)

total: Model of the 12 entities will have approximately 50 tables, 160 procedures, 1000 static files (HTML+CSS+JS). Statics after Assembly and compression will weigh ~1MB (all in one HTML file). There are "miracle-plug", which can put the squeeze on after Google-compilers to ~600кб, and on the client after gzip arrive ~85кб ~~model gzip on brotli, and booster to 79кб~~. Most of the files of the project (85%) is similar configs Ala JSON wrapper. Therefore, the project can be very flexible to configure after file generation, and very strong grip on the Assembly,~~, and add the functionality copy/past'om with search and replace on a directory~~.

the

the Principles that formed the basis of the bike:

the

Layout is a one HTML file, not a linked server. The only thing that connects them — the format of the AJAX requests and responses. Want your backend — feel free to replace.
the Backend doesn't know the database structure, but knows the names hranimoj and arguments. Want my DB schema, write your own.
anything that can be described the configuration should be described configs. They are usually more than 85% of the files of the project (more entities, the greater the percentage).
All the files and configs needs to be decomposed so that new functionality can be added copy/past'om the correct folders. It is clear that something will still have to fix hands in the code, but the less of these moments the better.

And then just: — Hranilki evil! Only ORM!!!11

actually, no. This argument is relevant, if you store business logic in hranimyh — then Yes. But there is no business logic. The whole point hranimoj: to give, create, or edit an entry, without any logic. Well, not logging via triggers, but only on request by the server of the procedure. The question arises: "what to do if we want the database to change? Hranilki will have to be rewritten, and if using the ORM — no." Well, I personally, and none of my friends are not faced with the fact that the project is on the move database changes. But if you encounter this situation, it is likely to "rewrite the ten generation templates hranimoj to another subset of the SQL language" will be the smallest problem.

the

project Status to date:

the

in September from scratch I had to redo everything. But the search became better, there was a log object, design, etc.
in November began to appear, the features and first two services with a new base. Mode for left-handed use, change of position, log connections, batch processing, etc.
in December I had to rewrite the server database and put in raskoryachku the front. Thought that before the end of December will be able to collect a stable version, but did not. There is already a communication with the base was strictly through procedure, search groups, search with the exception, the ability to add comments etc.

or something

Sold

the

create/edit/delete entity;
search with filters, sorting and paging the results.
create/edit a simple Association of the two entities;
ability to specify/change the position of;
logging of the create/edit entity;
logging of the create/edit a simple Association of the two entities;
view logs.
generation of custom selectors (the list of values which is stitched, not loaded);
batch add/delete relationships (many-to-many) entity;
a link to the field, to skip creating it (for binding, example: one field partner for all entities in small panel). referenceElementId;
generate independent lists of entities;
the ability to change the size of the working area;
search by list id object;
automatic adjustment of the number of rows in the search;
highlighting of search query in the search results;
display mode "left-handed";
insert the search (create/edit) in a random place. Example: comments to the Tasca;

fixes:

the

search error: filter ref_channel_id. You need to generate a LEFT JOIN requests for such searches and filters + extra fields on the search form;
the

fix output object names in the search for ref_ relations (for example lock, cost column);
display of detail of server error;
cleanup of the file + new project structure. Need to make cleaner final Assembly sorrow;
fix the behavior of batch allocation of object;
fix calculation of the number of the search string for the screen;
typing in queries;
check the file before overwriting, always writes an error to the console (which actually is not). It's annoying, but not critical;

Not implemented features:

the

logging of change of position;
displaying/editing nested in essence arrays (e.g. list of transactions instead of names or a list of payment orders is the payment method);
determination of the order of loading entities;
the definition of a related field (auto-all, if you change one. For example: a change of partner or channel advance);
upload files on the fly;
upload file "on the list";
to export the search to CSV (export);
to load results from CSV (import);
the
up reversible/not reversible;
to add recovery States by the logs (when opened detail the state of the object);
batch delete entities;
the description and removal of post-compressor'and in a separate project;
a convenient generator for config in a separate application;
to improve logging history objects. Field is_remove to do change_type (0 created, 1 — edited 2 — removed)
localization;
adaptation for mobile phones/tablets;
create a client showcase;

search filters as an array rather than a single value (multiple "include" and "exclude" selections);
the

choice of screen display (main/aside) for transactions of each type;
sub-folders using the field parent_id. There is a field — there is a folder, there is a change of search filter;
keyboard control.
to change the welcome screen. Bring to it the count of connection entities of the project (in admin banners);
to write SEO text;
to connect the plugin with pagination scroll;
to devise a system of authorization for third-party projects. To alter the authorization module (remove the Draft User);

Not implemented functions on the server:

the

tables in the database;
validation of the fields in the object "service", not when creating a "REST API";
generate documentation for API methods.

the authorization module is not tied to Sonata;
the

the database schema is tied to the access of Partners or the presence of restrictions on the users;
generation of servers in PHP.

the great advantage is that it is not "theoretical development". Every component was already in the old projects, or have current. Accordingly, a list of "hotelok" and the procedure for their implementation is dictated by the pain of operation ~~(well development experience of other generators admins)~~.

the

What are the plans for the next month:

the

~~to collect in the end a stable version with procedures~~
roll on PHP, because the server node in the normal sharashka not deploy. And are easier to maintain and cheaper. (roughly speaking, for 1500 rubles already possible to deploy the admin area ~20 million records)
add the file
to write a script to install out of the box, and now have an hour and a half to dig to expand the project ~~(and this despite the fact that I know every file in your project)~~.

the

a Little about UX.

to Write the basic functionality is pretty boring. When bored, switch to bugs and features. Here is one of them. There is a right-side and left-side interfaces. Those who do localization — collect two option (Hello badoo). I still have a + 2 variant: for left-handers and right-handers. The difference is that the interface zerkaltsa not completely, but only control panels. Russian Lefty is more convenient to use mirrored control panels, but the information in the tables read from left to right. And Lefty Arab — on the contrary, European layout panels, but reverse the order of columns in the table.

right-handed Caucasian

left-Handed Arab

left-Handed European

right-handed Arab

different projects need different balance zones "search results" and "edit element". For example, in the book editing application books quite narrow panel on the right. And in the change of the game to do better in the Central part. In the same way it affects the preferences of a particular Manager, who works with the project. So in the new version, the ratio of the areas of "search" and "edit" you can change in the settings.

Those who work with statistics usually spend a lot of time in Excel or similar program. They are accustomed to rows with a height of about 16px. Those who work with a variety of CMS websites and web muzzles on bootstrap'e, accustomed to the line height to 32px. Therefore, the height of the row as given in the configuration.

opinion, that scrolling is evil. Why it happened — a subject of separate article. I agree with that. But to specify the exact number of rows that will fit on the screen is impossible, since we all have different monitors. Therefore, the admin panel at the start calculates the optimal number of rows to the current settings for this monitor. They are always exactly as much as fits on the screen without vertical scrolling.

the

In conclusion

What do you think, colleagues?

Organizer books, parts, or any other standard reference information, with the web face are not wanted?

inb4:

it was in the Django
where is the link on github?
on a real project, do not fly!
fu rewrite in PHP, put less!!!11
where is the charts? the main stat is base!
slice the configs != Kodo-generate
everything is buggy, the raw product
the interface is incomprehensible!
React'and why not?
that was...
and where download setup file?
without data analysis you don't need it!
why not MongoDB?
LIKE it slow!
and documentation?
why the test coverage is zero?
layout is not flexbox'AMI, kill yourself!
and there is a version for mobile phones?
, an article about anything!
I have a layout go!

Article based on information from habrahabr.ru

Поиск по этому блогу

computer express