Engine Templates

Between Joomla 3 and Joomla 4, which will be your favorite one?

As a member of Joomla community, you might have known about the release date of Joomla 4 Alpha 1 on November 17th, 2017. This is a big upgrade (read more about Joomla 4 New Features here) with major improvements to bring Joomla users a greater UI user experience, more advances in functionality for limiting backward compatibility breaks, as well as increasing code quality. In today article, we are going to give you a clearer look between Joomla 3 and Joomla 4 about its features. Give it a go now!

1. BOOTSTRAP 2 – BOOTSTRAP 4

Bootstrap 4 is the most widely-known HTML, CSS and JS Framework in creating mobile-first sites and responsiveness. Bootstrap version 2 which was used to integrate with Joomla 3 is now out of date. In the next Joomla 4, the newest version of Bootstrap – version 4 will be in used! It can be seen as the main rewrite of the whole project of developing responsive websites faster and easier.

2. LESS – SASS

Both LESS and SASS are two strong CSS extensions which are programming languages created to support CSS – more extendable, themeable and maintainable.

LESS integrates with Bootstrap 2 to build Joomla 3.

Joomla 3 with LESS

SASS and Bootstrap 4 to build Joomla 4

Joomla 4 with SASS

3. RESPONSIVENESS – MOBILE-FIRST

Although Joomla 3 brought us responsive backend and frontend templates which based on the responsive grid system of Bootstrap 2, to be honest, it is still not mobile-first. To make Joomla 4 work smoothly on responsive, it is integrated with Joomla 4 – a powerful HTML, CSS, JS Framework  for developing responsiveness and mobile-first websites.

Joomla 4 gives better performance on mobile.

 4. INSTALLATION PROCESS

There were 3 steps to install Joomla 3: configuration, database, then overview. It is easy for users.

Joomla 4 installation process includes three steps as well, but with a more friendly UI, sample data installation with multilingual be included in “Customize installation” panel. There are also many options will be added:

–  Possible to install extensions (with the extensions at minimum core supported)

– Rework sample data installation.

Advances in user interface of Joomla 4 installation.

5. MEDIA MANAGER

When we use Joomla 3, there are no many things to do with just one file upload with no file management editor.

Media manager of Joomla 3 with limited features.

In Joomla 4, the new media manager will be added with many great features and advanced working panel, which makes it simple to manage files.

Multiple files upload by drag-drop

Image editor: crop, rotate and resize

Image properties

Many other options: image preview, delete, rename …

6. DEFAULT FRONTEND TEMPLATE

Protostar and Beez 3 are frontend templates of Joomla 3,  Beez 3 is an updated version for compatible with Joomla 3 (developed with Bootstrap 2 and LESS), and Protostar is a new template.

Joomla 3 two frontend templates

There is a one new frontend template in Joomla 4 which is Cassiopeia, developed with Bootstrap 4, SASS CSS and most modern web technologies.  Cassiopeia is expected to give us a better flexible layout system.

New frontend templates of Joomla 4

7. Default Backend template

 Joomla 3 backend templates are Hathor and Isis which both based on LESS CSS as well as Bootstrap 2. In Joomla 4, there is only 1 new backend template provided, it is called “atum” – developed with Bootstrap 4, SASS and many other improvements of user interface, workflow.

Joomla 3 backend templates

Joomla 4 new backend template

8. Mootools

JQuery and Mootools are included in Joomla 3 library, however, Mootools will be deleted from Joomla 4 library to help its core run faster and cleaner. In addition, this advance encourages process time shorter and readability without conflict.

9. PHP 5.3 and PHP 7

According to Joomla official announcement, PHP7 will be a required PHP version of Joomla 4, therefore, we will have a better performance with fast speed (up to 2x), more great features, as well as advances and secure of online apps and sites.

10. Horizontal and vertical collapse menu of Backend Navigation

Joomla 3 backend navigation has drop-down menu structure in horizontal, however, it has been changed in Joomla 4, the left sidebar will be in vertical style, it will collapse to give users space. When a user clicks a submenu, the main menu will be replaced by the toolbar with an icon.

Joomla 3 backend navigation in horizontal style

Joomla 4 backend navigation in vertical style

11. Responsive Back-end UI: compatible and mobile-first

It has been a great experience when Joomla 3 Admin panel works really well on all mobile and tablet layouts with full responsiveness, but still there several limitations and performance which is still not quite good. Those issues will be fixed in the next Joomla 4 when the new admin template integrates with Bootstrap 4, improved performance and backend UI.

Backend user interface of Joomla 3 and Joomla 4

12. Performance/ Loading time

In Joomla 3, we have had many important advances in performance, which will be taken into account as well for Joomla 4 via improving code quality, most modern technologies, removing previously deprecated functionality, changing JFactory with dependency injection containers, the new rewritten plugin system, Code Namespacing, Joomla Framework uses more components and more. With those improvements, we can expect for another better experience in Joomla 4 performance.

13. Technologies

Web technologies have been constantly changed since the release date of Joomla 3, that is the reason why we should keep up with the latest technologies with Joomla 4, which includes Bootstrap 4, PHPMailer 6.0, JQuery 3.

14. Coding quality

While Joomla 3 core concentration was clean code, Joomla 4 takes the core code base into account which is about to be well-optimized, cleaner and developed with the most modern website technologies, moreover, the new written plugin system by following coding standard, removing previously deprecated functionalities.

• Orthogonal Component Structure: let all components use the new capabilities which will be used across extensions.
• UI components with latest technologies: a list of components built with the new W3C standard by using plain, Javascript to offer users a better performance and well-optimized HTML markup.
• Advanced MVC layer: limit duties of a component for implementing its own major functionality. Everything else will be pulled out to the system.

15. Security features

Joomla development team has equipped and updated constantly for Joomla 3 many security features. There more security features will be offered in Joomla 4 such as preparing SQL statements support, as well as pay off some technical debt of project by retiring deprecated code, and increasing smallest software stack supported.

Required Joomla 4 system:

• PHP 7, MySQL 5.5.3
• PostgreSQL 9.2
• Supporting dropped SQL Server.

Conclusion

That’s all for our article today! Which one will be your favorite version? With this blog, we hope you’re able to make a decision simpler. Don’t hesitate to share with your friends if you think this article is helpful!

Thank you so much for reading! If you have any question, please contact us by leaving a comment below, we will reply as soon as possible!

Image Credit: Joomlart