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.

Joomla Integrates Bootstrap

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.

Less Language

Joomla 3 with LESS

SASS and Bootstrap 4 to build Joomla 4

Sass And Less

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 Joomla 3 Responsive

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 3 Installation

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.

Joomla 4 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.

Joomla 3 Media Manager

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

Joomla 4 Media Manager

Image editor: crop, rotate and resize

Joomla 4 Image Editor 1

Image properties

Joomla 4 Media File Properties

Many other options: image preview, delete, rename …

Joomla 4 Manage File

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 Front End Templates

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.

Joomla 4 Front End Template

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 Back End Template

Joomla 3 backend templates

Joomla 4 Atum Template

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.

Joomla 4 Require Php 7

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 Navigation

Joomla 3 backend navigation in horizontal style

Joomla 4 Navigation

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.

Joomla Back End Responsive

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.

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

5/5 - (1 vote)
Digital Team Enginetemplates

We’re a Digital Team from EngineTemplate with 5 content experts. Our team has 5 years exp in open source Joomla and WordPress, we make daily blogs and build useful resources for everyone who is having issues with open source while using it.

Leave a Reply

Your email address will not be published.

Happy Summer Sale! Get 50% OFF for your purchase on today! Coupon code: SUMMERSALE50 Redeem Now
Happy Summer Sale! Get 50% OFF for your purchase on today! Coupon code: SUMMERSALE50 Redeem Now