JoomlArt's Blog

Joomla Tutorials, info, Discussions and much more...

Joomla 4 alpha 1 was released on 17 November 2017 with huge updates and major developments to improve user experience (UI), code quality and giving Joomla! large functionality improvements with limited backward compatibility breaks. Let’s do feature comparison between Joomla 4 and Joomla 3.

Joomla 3 and Joomla 4 features comparison

Joomla 3 and Joomla 4 features comparison

15 new things that are worth taking note for Joomla 4

1. Bootstrap 2 vs. Bootstrap 4

Bootstrap is the most popular HTML, CSS, and JS framework for building responsive, mobile-first websites.

Joomla 3 integrated Bootstrap 2 that is outdated. Joomla 4 will keep up-to-date with Bootstrap, it integrates Bootstrap 4 that is a major rewrite of the entire project to help build responsive website faster and easier.

Joomla 4 integates Bootstrap 4

Joomla 4 integates Bootstrap 4

2. LESS vs. SASS

SASS and LESS are both very powerful CSS extensions. They are programming languages designed to make CSS more maintainable, themeable, and extendable.

By integrating Bootstrap 2, Joomla 3 was developed with LESS.

Joomla 3 is developed with LESS

Joomla 3 is developed with LESS

While Joomla 4 integrates Bootstrap 4, therefore it is developed with SASS.

Joomla 4 is developed with SASS

Joomla 4 is developed with SASS

3. Responsive vs. mobile-first

Joomla 3 comes with responsive for both front-end and back-end template based on Bootstrap 2 responsive grid system but frankly, it is not yet called mobile-first. In Joomla 4 integrates Bootstrap 4 - the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web. Therefore, Joomla 4 will work better on responsive.

Joomla 4 works better in responsive layouts

Joomla 4 will work better in mobile

4. More simplified installation process

Joomla 3 installation process with 3 steps: configuration, database and overview, it is pretty simple for users.

Joomla 3 installation process

Joomla 3 installation process with 3 steps

Joomla 4 also has 3 steps installation process with more friendly UI, the multilingual and sample data installation is included in the “Customize installation” panel. Joomla 4 plans to add more options during the installation like:

  • Ability to install extensions (at minimum core supported extensions)
  • Rework sample data installation
Joomla 4 installation process

Joomla 4 installation with user interface improvements

5. Media manager: fully rebuilt Media Manager

Joomla 3 media manager has limitation in features in file management: 1 file upload, no editor

Joomla 3 media manager

Joomla 3 media manager: limited features

Joomla 4 comes with fully rebuilt Media Manager. The new media manager with more advanced features and improved working panel to manage media files with ease:

5.1 Multiple files upload with drag and drop

Joomla 4 new media manager

Joomla 4 new media manager with more advanced features

5.2 Image editor: crop, resize, rotate

Joomla 4 image editor

Joomla 4 new media manager supports image editor tools

5.3 Image properties

Joomla 4 media file properties

Joomla 4 media file properties

5.4 More options: image preview, delete, rename ...

Joomla 4 media file options

More options in new media manager of Joomla 4

6. Default Front-end template: 2 vs. 1

Joomla 3 has 2 front-end templates named: Beez 3 and Protostar. Beez 3 template was updated to compatible with Joomla 3 while Protostar template was newly built for Joomla 3 based on Bootstrap 2 and LESS.

Joomla 3 front-end template

Joomla 3 supports 2 front-end templates

Joomla 4 only supports 1 front-end template - cassiopeia that is newly developed, based on Bootstrap 4, SASS CSS and new web technologies.

Joomla 4 new front-end template

Joomla 4 new front-end template based on Bootstrap 4

Joomla 4 new front-end template comes with more flexible layout system.

View Joomla 4 Template Layout Structure →

7. Default Back-end template: 2 vs. 1

Same as front-end template, Joomla 3 supports 2 admin templates named: Hathor and Isis. They are both based on Bootstrap 2, LESS CSS.

Joomla 3 back-end template

Joomla 3 back-end templates

The new developed admin template in Joomla 4 - atum is based on Bootstrap 4, SASS with outstanding improvements for user interface and workflow.

Joomla 4 back-end template

Joomla 4 back-end templates

8. Mootools and NO Mootools

Joomla 3 library packaged with both Mootools and JQuery but Mootools will be removed from Joomla 4 library to make its core cleaner, faster and improve both readability and processing times and no conflict.

9. Minimum PHP version require: PHP 5.3 and PHP 7

Joomla 3.x requires minimum PHP version - PHP 5.3 + while Joomla 4 requires PHP 7 +. PHP 7 offers fast performance (suppose 2x faster), more secure and a lots more features, improvements for websites and online applications.

Joomla 4 requires php 7

Joomla 4 requires minimum PHP version - PHP 7 +

10. Back-end navigation: horizontal vs vertical collapse menu

Joomla 3 back-end navigation uses horizontal style with drop-down menu structure.

Joomla 3 horizontal back-end navigation

Joomla 3 horizontal back-end navigation

Joomla 4 back-end navigation will use vertical style, its fixed on left sidebar and the vertical menu can be collapsed to save space if user wants. When accessing a sub-menu, the main menu will be auto switched to toolbar menu with icon.

Joomla 4 vertical back-end navigation

Joomla 4 vertical back-end navigation

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

Joomla 3 admin panel is responsive, it works quite fine on responsive layouts: mobile and tablet but limitations are there and performance is not so good. Those things need to be fixed in Joomla 4 so Joomla 4 comes with a totally new admin template that integrates Bootstrap 4. Not only back-end UI is improved a lots but the performance is also better.

Joomla responsive back-end user interface

Joomla 4 and Joomla 3 responsive back-end user interface

12. Performance / loading time: Good vs. better

Joomla 3 had significant improvements on performance and this will be more focused on Joomla 4 with improving coding quality, using modern technologies, removing previously deprecated functionality, new rewritten plugin system, Dependency Injection Containers to replace JFactory, Joomla framework to be used in more components, Code Namespacing and Depreciation and more. All those things definitely will improve Joomla 4 performance.

Joomla 4 has better performance

Joomla 4 will have better performance

13. Technologies: outdated vs. latest

Web technologies has been changed/upgraded a lots since Joomla 3 released. Joomla 4 core is built with new technologies only: Bootstrap 4, jQuery 3, PHPMailer 6.0.

14. Coding quality: clean and well optimized

In comparison with Joomla 3, Joomla 4 will focus more on the core codebase, it need to be clean, well optimized, only use latest technologies, new rewritten plugin system following new coding standard, all previously deprecated functionalities are removed.

MVC layer improvement: restrict the duties of a component so a component implements its own core functionality. Everything else is pulled out into the system.

Orthogonal Component Structure: allows any component to take advantage of new capabilities that are designed to be used across extensions.

UI components using modern technologies: a collection of components developed with the new W3C standard that uses plain and optimized java scripts for performance with clean and well-optimized HTML markup.

15. Security features: More features added

Joomla 3 introduced lots of features for security since released and it is continuously updated to fix security issues.

Joomla 4 will add more security features like: support for prepared SQL statements, paying off some of project's technical debt by retiring deprecated code and raising the minimum supported software stack.

Joomla 4 system requirements:

  • PHP 7
  • MySQL 5.5.3
  • PostgreSQL 9.2
  • SQL Server support has been dropped.

Know more about Joomla 4:

Related Posts

BLOG COMMENTS POWERED BY DISQUS