Block Model Development for CMS Vi-Site 5.0

13 April 2020

1. Prehistory

Until recently, we developed websites according to standard proven scheme, let's call it the "Template development model".

We broke the website into templates, for example: Home, Contacts, News section, separate news, some Content page and so on, and the number of such templates could reach hundreds on large projects. Then we evaluated each template, layout and programming and also developed them, typeset and program each template separately.

In teamwork, it looked something like this. Frontend developer typeset the Main page, frontend developer Gabriel typeset the page contacts, etc. After typesetting, programmer Athanasius programs the main page, and programmer Zhenaida takes the contact page to work. And so the template for the template, and the site turned out.

2. Problem

Everything was cool, but if you look at the templates more closely, you will notice that many blocks of these templates are repeated, and only the content on them changes or the block is duplicated at all. We don’t take into account the header and footer of the site, because they are almost always the same on all page templates.

Template #1

Template #2

As you can see, these are different templates, but the banner blocks, breadcrumbs, header are the same, and only the content changes.

Developing according to the stereotyped method, layout designers Innocent and Gabriel would do the same thing, or they would have to somehow agree among themselves, and this is difficult, taking into account their names, so as not to perform double work. Programmers had the same problem.

And here is how evil the client, after everyone had already done it and programmed it, wanted to swap blocks or even decided on one page of the site to no longer use the top banner.

Usually our reaction is this: What is that? We already programmed everything and the design was approved! As a result, we had to create a new template where all the new wishes of the client will be realized, but what if there are a dozen or hundreds of such Wishlist?

As a result, deadlines are transferred, the client is not happy that we do not have time to deliver the site on time, we are not happy that we have to redo the same template several times, we can not submit the site on time, and get honestly earned money.

3. Solution to the problem

The "Block Development Model" came to the rescue. We already tried to implement it earlier on some sites, and the rudiments were made 1-2 years ago, but now with the advent of the new version of our CMS "Vi-Site 5.0", and taking into account the nuances that were with this development model on previous projects, we were able to do new and close to ideal solution. But of course that the ideal doesn't exist, and this model will be further developed and developed.

4. What is the essence of the new solution?

We stopped developing templates, but only blocks are designed (typeset and programmed).

Now in the admin panel of the site instead of 50-70 different templates that the client can use to display this or that page, there is only 1 template for choosing, we called it the "Universal template". It can be applied to any page on the site and filled with accessible blocks, changing the display order and content of these blocks as the client wishes and will not become attached to the original design.

For example, for the pages above in the CMS, this template will look something like this.

Блочная модель разработки

Each block has a preview, which shows how it will look on the site page, and is filled separately. All blocks are grouped by type for ease of searching..

5. What does this give?

a) Benefits for customer:

  • The ability to fill the pages of the site with blocks and content as he wants, without the intervention of a typesetter and programmer.
  • Save time, because you don’t need to develop a new template, you just need to fold the page from the available blocks, as you want.
  • Save money, this approach allows you to reduce the time of man-hours to develop a site by 2-3 times! How? I will explain below.
  • There are fewer bugs and situations such that the code ruled in one place of the site, and something broke in a completely different place, they are excluded, since each block lives its own life, and is not connected in any way with other blocks.
  • Plus an additional bun in the new CMS content editing is possible right on the front of the site, if the administrator is authorized in the admin panel.

b) Benefits for frontend developer:

  • No need to layout templates, you need to layout blocks of which the templates consist.
  • At the same time, many coders can work on the project without interfering with each other..
  • Tasks can be divided into smaller blocks, and perform them more quickly and efficiently..

с) Benefits for programmer:

  • Programmers get the task of programming the block, rather than programming the entire template, and this simplifies development.
  • The principles of DRY (will not be repeated) and SRP (principle of sole responsibility) work in full force, the code is not duplicated and each block is independent. The functionality of each block is answered by a separate class that knows nothing about other blocks, and editing the code in the class of one block is impossible to break something in another block.
  • The principles of MVC. I recommend using a thick model and a thin controller, this is what the controller of our universal template looks like.

Контроллер тонкий​​

It seems to me that this is the thinnest controller in the programming world that you can think of.

d) Benefits for QA engineer

Testing such code is much easier. A functional test is written for each block (not a template), while such a test is very simple, and together all these tests for each block will cover the functionality of the entire site, which will simplify the development and refactoring of the code.

6. What as a result?

  • Website development is simplified at times.
  • The client has the opportunity to design the site pages to his taste without contacting us.
  • Maintenance and completion of such sites is simplified.
  • There are ten times fewer bugs due to the fact that each block is covered with dough..
  • You can refactor a code without fear of breaking something, again because of full test coverage.
  • Project managers are easier to set tasks. No need to develop an entire template, only new blocks for a universal template need to be developed.
  • Everyone is happy and satisfied.

Author: Arthur Shchablevsky

Did you like the article? - Share the link::