[Infographic inside] Joomla 4 vs Joomla 3 - What’s the difference?
Developing and introducing it to the Joomla community in 2017, Joomla 4 is still in the Alpha stage but, we now can install Joomla 4 on your localhost and see all the major differences compared to Joomla 3.
And it has some amazing improvements, I must say.
This article will show you 11 significant differences between Joomla 4 and Joomla 3. We hope after 5 minutes of reading, you can decide whether or not updating to this latest version is for you.
Let’s take a closer look!
(Scroll down at the end or click here to see the infographic)
1. Bootstrap 2 vs Bootstrap 4
Bootstrap is a free front-end framework that helps web development process much faster and easier.
Particularly, Bootstrap plays a vital role in easily creating responsive designs. And the latest version - Bootstrap 4 is integrated with Joomla 4 instead of keeping Bootstrap 2 in Joomla 3. You can see the new front-end template’s user interface is much improved.
See all the differences from a technical aspect.
2. LESS vs SASS
They are all-powerful CSS extensions in programming languages that make the code cleaner, development process faster and better organized.
- Joomla 3: uses Bootstrap 2, so it was developed with LESS (Leaner Style Sheets) which is a major improvement from a few years ago. LESS is based on JavaScript.
- Joomla 4: is updated in Bootstrap 4, then the version use SASS (Syntactically Awesome Stylesheets) based on Ruby.
Overall, both can do a great job as a CSS extension. However, with SASS being much more popular than LESS nowadays, and more powerful according to many experienced developers Joomla 4 seems to be in good hands.
3. Better responsiveness
Designing websites following the mobile-first rule or with the responsive layout is a must nowadays when mobile devices take up more than 50% of total web traffic. With Joomla 4, the responsive layout is developed with the latest technology.
- Joomla 3: has the responsive layout grid system but actually, users are not satisfied with it. Users have some difficulties in implementing the design as well as not knowing how to tune the width of the columns in the grid.
- Joomla 4: uses the CSS Grid to replace the 12 column layout system. The change not only makes the development process easier but also significantly improves the responsiveness of your site.
4. Default front-end template
Comparing the two pictures below, you might agree that the Joomla 4 front-end design has a cleaner and more elegant look than the old one version
- Joomla 3: has 2 front-end templates which are Beez3 and Protostar.
- Joomla 4: has only Cassiopeia as the front-end template in which the user interface is developed based on Bootstrap 4 and the layout is developed based on CSS Grid.
5. Default backend template
The back-end interface has been changed in Joomla 4. The big improvement is the position of the menu. Instead of keeping the horizontal menu, Joomla 4 has switched the menu vertically.
- Joomla 3: has 2 back-end templates which are Hathor and Isis.
- Joomla 4: has a new back-end template named Atum which comes with great improvements in the user interface and some interesting features like the new publishing workflow.
6. More simplified Installation process
Joomla 4’s installation process is more simplified than Joomla 3.x’s
- Joomla 3: includes 3 steps - main configuration, configure database, and overview.
- Joomla 4: Although the version still has 3 steps as before, this improvement will help users to look back on previous information without interrupting the installation process and having to submit again if they want to modify something.
As you can check from the Github process, the Joomla team plans to add the feature which lets you install the extensions (at minimum core supported extensions) along with the Joomla 4 installation.
7. Media Manager with editing feature
The Joomla team has noticed the pain points of users in the previous version when it comes to the media manager. The feature had absolutely no editing function at all. A strange phenomenon when we are living in 2019.
However, Joomla 4 now has a “smart innovation” in Media. It is integrated with editing features which will be more useful for you to upload pictures. Besides, you can read the properties of each photo by clicking on the picture.
- Joomla 3: have limited functions such as no editing feature included that requires the user to edit the photo before uploading.
- Joomla 4: add many new features in Media manager
- Support multi-files upload and drop & drag uploading
- Edit pictures: crop, resize, rotate, rename.
Drag-n-Drop upload
8. PHP version required
Integrating with the latest PHP (Hypertext Preprocessor) version - a language programming especially for developing web - Joomla 4 has faster performance and more security with lots of improved features.
- Joomla 3: requires minimum PHP version 5.3+. Because the APC and database are only available to PHP 5.x.
- Joomla 4: require the latest PHP version 7+. Because PHP 7 uses the new model of engine called PHP-NG which increases the performance twice as much. Moreover, with the additional features like Abstract Syntax Tree and Null Coalesce Operator makes easier parsing of PHP code.
9. Change for Mootools and JQuery
This tool was added to address the problem of making powerful and flexible code, as well as keep it organized. However, since introduced in Joomla 2.5, the technology of Mootools is quite old and doesn’t have any impact on the newest version. Therefore, the Joomla team decided to keep up with the latest technology.
- Joomla 3: support Mootools and jQuery libraries. But libraries like those are slow and not frequently updated although they’re still active.
- Joomla 4: removed Mootools in order to increase the performance overall. Joomla team had to rewrite all jQuery in vanilla JS and ensure that jQuery won't be loaded in core. But you still will be able to use it if you want. Moreover, they are moving to custom elements, which are much faster, framework agnostic, and will also be fully accessible.
10. Optimize Codebase
Joomla 4 is developed to be the best version of Joomla. Joomla team integrated the latest technologies such as Bootstrap 4, jQuery 3, PHPMailer 6.0, Vuejs for Media Manager in order to build a stronger foundation of core codebase. Therefore, the codebase is well optimized and becomes friendly for users.
- Joomla 3: keep the outdated coding quality which should be optimized better.
- Joomla 4: pay attention more to creating an optimized and cleaner core codebase.
11. More secure
Security is always a concerning problem that every kind of CMS should focus on. Therefore, Joomla 4 has ensured security at a higher level.
- Joomla 3: still has many flaws in the security and continuously updated to fix security problems.
- Joomla 4: adds more security features such as supporting the prepared SQL statement, increasing the minimum supported software stack. Of course, with the latest technology, your site is more secure.
Experience Demo Joomla 4 website
Check it out. We just publish a new demo website about Joomla 4.
This website has full new features of Joomla 4. You can try out our website to have the most realistic experiences and compare it with your old version of Joomla 3 to see the differences between them.
In Conclusion
Through comparing the differences between Joomla 4 and 3, it can be noticed that Joomla 4 has more advantages than Joomla 3 such as a smart interface, better responsiveness, better security, and x2 faster performance.
All the noticeable differences between Joomla 4 vs Joomla 3 can sum up in this exciting infographic below:
Also, you can try out Joomla 4 to experiences all the features with our helpful guide:
- How to install Joomla 4 in your localhost
I hope this article is helpful for you and please keep in touch with us to read more topics about Joomla 4.
