Joomla Google Summer of Code 2019

Welcome to our Blog post about the first coding phase of the Google Summer of Code Joomla project New Joomla 4 frontend template: Page Builder.

After a month of bringing the team together and finalize the milestones for the upcoming work, we already started to work with the JavaScript Framework Vue.js.
The coding phase began and we are spending every working day to reach the target of our project: The page-builder, which makes it possible to define template positions with an intuitive drag & drop editor.

The Team

Who are "we", the people who work on this project?

  • The mentors for this project are Anurag Kumar, Benjamin Trenkle and Viviana Menzel. Each of them helps on different aspects for this project with years of Joomla experience. Anurag knows a lot about Vue.js, Viviana gives feedback for the editor itself and Benjamin shares knowledge about the implementation in Joomla core.
  • The two students who are developing the page-builder are:
    • Franciska Periša, studying Computer Science on Master degree at TH Mittelhessen University of Applied Sciences in Germany
    • Nitish Bahl, an Electrical and Electronics Engineering undergraduate student at Birla Institute of Technology and Science in India.

We meet every Friday to discuss the work done in the past week, problems, ideas and feedback. At the end of each meeting, we list the tasks to achieve for the following week. Besides these meetings, we do our best to share each day our progress and what we intend to do. And so we are working step by step towards the target.

Enough about the people behind this, what are we developing exactly?

About the Project

The project New Joomla 4 frontend template: Page-builder has its main focus on an editor, which makes it possible to give template styles custom defined positions with the help of a drag & drop GUI.
Users should be able to create the build up of the frontend without code, HTML or CSS.
A first implementation of the rendered result can be seen in the new frontend template "Apodis", created for this project.

The Editor

To define positions, users can open the Page-builder editor in the Template Styles menu. Here is the first choice to create a container grid. After this, elements can get added into the grid and these can contain elements like modules or even another grid to nest the build up into as many pieces as the user wants to. Elements such as containers, grid, module positions etc. are dynamic content, which means 3rd party developers could add their own elements by plugins and modify existing ones. This creates nearly boundless possibilities.

Joomla 4 Page Builder


To adjust the page-build, the editor provides drag & drop and resizing functionality for the elements. This makes it very easy to use the editor and create your own positions. Further option to add custom CSS class names has been implemented.

The "leafs" of the Page-builder "tree" are Joomla built-in elements: Component, modules and messages. They output page content the users are accustomed to, from the default Joomla template behaviour. The editor will make it possible to edit each element, select module Chrome for each position & add new columns when needed. The output of the editor is a JSON object with the type, options and children of every element, which is stored in the template_styles table via a hidden param field.

Joomla 4 Page Builder


From the technical aspects, most of the work happens in Vue.js. Here we use different open source - downloadable components:

  • Draggable to drag & drop grid elements
  • Vue-js-modal to show modal windows to add elements
  • Vuetify for the drawer on the left side
Joomla 4 Page Builder

Apodis

At first, the rendering of the created grid got integrated into Cassiopeia, but after some problems and a meeting, the new way should be visible in an also new frontend template: Apodis.

The new star of template design gets the page-builder elements in index.php and shows the rendered output directly. This is helpful for independent tests, where no stylesheets can interrupt the default behaviour, like it was the case at the attempt to include the rendering in Cassiopeia.

This is how it works: A com_templates helper function gets called in index.php and goes recursive through the JSON param obtained from the #_template_styles table, which includes type, position and all the information of saved Page-builder elements. Depending on the type and options, the rendering changes or adds HTML. In the future, the renderer will observe page-builder plugins and their desired rendering too.

Joomla 4 Page Builder

Current State

After the first coding phase we can provide:

  • Add grids having predefined layouts
  • Edit grids - User can add a custom class to an element
  • Delete grids
  • Add columns into a grid with selectable size
  • Edit columns class
  • Delete columns
  • Drag and drop to reorder both grids and columns
  • Saving layout in #_template_styles table as a hidden parameter as JSON
  • Render the frontend site part by parsing the JSON parameter
  • Loading previously saved grid
  • Option to add custom elements as Page-builder plugin (Work in progress)

Problems

At the beginning of our work, we tried to use the same way of implementation as com_media and its Vue.js files. These files are in a resource folder of the component itself with their own package.json, node_modules folder and webpack file.

Joomla 4 Page Builder


We wanted to stay as consistent as possible, but first problems appeared when the Drone tests were unsuccessful after commits which should not have influenced that. The webpack version had problems with our files and so we needed to change the structure with an updated version. The current state is that we moved all our Vue.js files and the scss files into media_source/build/com_templates, where normally all of these kinds of files are. After adding webpack into the Joomla root the Drone was happy again.
The new structure can be seen in the picture:

Joomla 4 Page Builder

Future Plans

We are on a good way, but there is a lot more to do! Some bigger parts and a lot of small things are waiting for us to develop in the upcoming coding phases:

  • Synching Module positions with predefined template positions
  • Selection of modules and components
  • Target device selection for responsive settings
  • Full plugin implementation
  • Enhance UI

Personal Conclusions

Until here the project progress was in the main focus, but what are the personal thoughts of us, the two students, who make their experience with GSoC and the work inside Joomla?

Nitish Bahl

It has long been my dream to develop some application, which everyone and anyone can use for free.
When I heard about Google Summer of Code in my first year of college and was just starting with coding, I was fascinated by the idea of working with a long time open source organisation and fixing or enhancing some features which will be used by people all around the world.
Before GSoC, I had limited knowledge of web development, PHP and JavaScript and wanted to enhance my skills by working hands-on on a real project.
Joomla has a very beginner friendly culture, which encourages contributions from new developers. Mentors and members always try to help and provide resources as soon as possible. I feel contributing to an open source organisation is the best way to increase community/peer interaction, improve programming skills and gain experience while working on a real project and initiatives like GSoC help in spreading awareness and providing a platform to connect new developers to amazing organisations like Joomla.

Franciska and I are working along with our mentors to make page builder as easy to use as possible for amateurs and at the same time flexible enough to expand the functionality via 3rd party developer plugins.

Franciska Periša

This project is a great experience to work every day on something that grows fast, but also has a limited time, which flies fast too. I already developed in and with Joomla, but the Page-builder is a completely new challenge, because of Vue.js.

Sometimes it is fascinating how easy the implementation can be, but nonetheless happens a lot which is time consuming and not easy to solve. Where Vue.js has a very good documentation, the components do not always. Another problem was using webpack and npm to build the scripts. I never really worked with this part of web development, but I learned to do this.
In general: To learn something was a big motivation for me to apply for this project and until now I am not disappointed! 

Which is also something really interesting is to work together with Nitish. We have different backgrounds, but are working side by side towards the same target. Until now we divided the work fairly between us and even without big conflicts. And so I’m looking forward the next coding phase and I’m sure our work will grow together more and more to become the vision we have for the Page-builder.