Joomla Google Summer of Code 2019

The second coding phase has ended and we are happy to inform you that the page-builder project has made great progress in the last weeks!

Short summary: We are Franciska Periša and Nitish Bahl, the two students for Google Summer of Code for the Joomla! project New frontend template: Page-builder.
The page-builder makes it possible to set frontend template positions by a drag & drop editor within the Joomla backend Template Styles. Also added: The new frontend template Apodis, which uses the page-builder to generate HTML for the frontend part. Developed with VueJS it is (besides the Media Manager) a new way of enhancing Joomla! and makes it an exciting project for us and the mentors, Benjamin Trenkle, Anurag Kumar, and Viviana Menzel.

About the Project

When the second phase started, we continued with the work and focused on the editor. One of the most important tasks was to give the editor the possibility to resize columns within a grid. In the first phase, we managed to change the order of the grids and columns, but the user could not change the size after the element was added. Another approach was to make elements, which can be used in the editor, customizable and expandable with the help of page-builder plugins. Until July only grids and predefined column layouts were selectable.
Besides the functionality, the look of the editor changed a lot too. Watch out for the screenshots!

New Grid Layout

To make draggable and resizable columns inside of a grid, we are using the Vue.js component vue-grid-layout. The old draggable component was not able to resize elements. The new one gives positioning of columns a lot of freedom (sometimes too much) and provides nice functionality like responsiveness, breakpoints, RTL support, bounds checking, static columns, etc. The editor layout was a real challenge as it allowed the user to have a column on every position by default, and not just at the proper position. The editor should be able to get rid of gaps in the grid, for easier rendering, so we put a lot of time into calculating free space, column positions and the preventing of overlapping. As the grid should behave like Bootstraps grid, we added the option to add offset to columns. This is the only valid way of creating a gap inside of the layout.

pagebuilder 2 1

Extendable Elements

The page-builder should be like the rest of Joomla: customizable with plugins and therefore own content elements. That means that the elements used by the editor should be implemented in an ‘intelligent’ and ‘flexible’ way. All installed page-builder plugins are triggered and give all necessary data for their element. The editor loads them and gives the user the opportunity to choose one, when a  [+] button is clicked. The available selection is depending on the parent element.

pagebuilder 2 2

A plugin can configure the element and give the structure where it should be available in the editor. For example, it can be only available as root item. When the developer does not want that the element includes others (except module position), the attribute ‘children’ should just be set to ‘false’. The same is possible for parent elements. This way it is not a problem for 3rd party developers to include and customise new elements which are not part of the core functionality. For now, there are some default elements (which can be deactivated) - containers (like Bootstrap containers, elements which set the content in the middle of the page), grids, columns and module positions.

pagebuilder 2 3

Integrate state and methods using Vuex

Vuex is used to enable multiple components to get their state from a centralized Vuex store and can reactively and efficiently update whenever the store’s state changes. Using Vuex has made the codebase and architecture of page-builder much more modular, efficient and expandable for future extensions. It also enables us to keep track of events which change state and helps us in debugging using Vue Devtools Extension.

pagebuilder 2 4

Current State

After the second coding phase we can provide:

  • Elements installable through plugins
  • Add, edit and remove elements
  • Drag and drop to reorder elements
  • Resizable columns within a grid
  • Saving layout in #_template_styles table as a hidden parameter as JSON
  • Render the frontend site part
  • Loading previously saved grid
  • Set a module chrome for module position

Problems

We are working 5 days a week on the page-builder, commit at least twice every day and try to solve issues besides new features, but during this phase we run into problems, which took a lot of time and we could not archive every planned task for this milestone. In some meetings, we saw ourselves discussing the same topics over and over again, especially the grid-layout and the behavior of the columns. Then the mentors tried to catch the source of the problems, to save time and make real progress again, as we did in the first phase. We decided to stop writing issues into long checklists in one GitHub issue and started to write our own separate issues for every problem with detailed descriptions (for the problem and wanted solution) and in most cases gifs or screenshots. We hope that this will help us solve the issues quickly and easily, as we are not doomed to work in circles anymore. We make sure to keep in mind that the last phase is going on and time is flying…

Future Plans

The last coding phase has started and so we want to implement the most important tasks to finish GSoC with a stable page-builder.

  • Emulate bootstrap classes inside the editor
  • Adding modules and components using editor
  • Target device selection for responsive settings
  • Improving grid-layout

Personal Conclusions

This phase was difficult and exciting for us. The meetings were long and full of discussions. But what are the personal opinions of the students?

Nitish Bahl

In this coding phase, we worked on some behind the scene features which didn’t have a direct impact on the look and feel of the page builder editor but was essential in making the codebase modular for future development and flexible for 3rd party developers. Some essential and long-standing bugs which the team had been working on were solved in the last part of the coding period. We had some long and detailed discussions about which vue component to use for editor part. Overall, it was a great learning experience and we have identified key deliverables which are to be done in the final coding phase.

Franciska Periša

This coding phase was not as motivating for me as the first one, because of the problems we described in the related chapter. It was mainly my part to program the grid behavior and it took a long time until I understood how the mentors imagined that. So we made a lot of small steps, which was kind of frustrating. Especially as we have many other tasks for this project and I sat at the same task for weeks. But introducing separate GitHub issues, helped me a lot to understand the problems and I was able to fix them better and more comprehensive. Making more progress motivated me again and I learned how important it is to identify and describe problems to solve them accordingly. I will definitely take this experience into my future projects and the third coding phase.