Giving Joomla 3 a shot of steroids with Bootstrap and Angular

If you read my post about SEO, you know that modern Ajax sites don’t exactly do well when it comes to search engine crawlers. The ideal solution to the problem was to implement the fragment method that search engines to support to tell them to make an additional request to the website for the static content. Well that plan was shot out of the water due to the lack of innovation in the realm of SEO consulting companies… one in particular.

The direction we chose to go was to render all content on the server side with Joomla 3and PHP, but retain modern Ajax frameworks like AngularJS and JQuery when it comes to dynamic functionality. For the responsive UI, we did stick with Bootstrap 3, but we started with the T3 blank template and just modified it to meet our needs. In implementation, this was quite a simple task. Let’s look at some of the moving parts.

Joomla 3

If you haven’t upgraded to Joomla 3, stop reading this and do so now… for a CMS, it is definitely a huge upgrade from previous Joomla versions. It’s based on Bootstrap 3 and has a lot of improvements and it is definitely more user friendly.

T3 Framework

Do not grab just any template out there. Starting with the T3 template framework is definitely the way to go… It provides simple tools for managing a template, optimization and great SEO ability.

Bootstrap 3

When you start with the T3 framework, you can choose to use the Bootstrap 3 template. I highly recommend you do so. Bootstrap 3 is a major upgrade and gives you a standard way to manage your content formatting and responsive UI. The benefit I get here is that no matter what element I am working in with Joomla, I can use standard Bootstrap 3 CSS classes and I don’t have to learn a specific template CSS. I would say without a doubt, you should always pick a template that is based on Bootstrap 3.

AngularJS

Since I had the SEO debacle, I had to toss Angular routing out the window, but that doesn’t mean I had to abandon the other great aspects of Angular as a javascript framework. I am utilizing the resource module extensively to interact with the server and the animation module to provide some really nice effects that catch the eye without distracting from the content.

In the end what I ended up with was a great template and I did little work to achieve it. By leveraging the T3 framework and the T3 blank bootstrap 3 template, I had an excellent foundation on which to build. I upgraded JQuery to 2.1.1 and I incorporated Angular by using the assets.xml file included in the template.

Drawbacks

All this sounded almost too good to be true when I went down this road and as with most things, it is. There are a couple drawbacks to “buying in” to the CMS world. Although they are relatively small issues, I certainly pulled out some hair working around them.

The first problem is that it seems that every module out there incorporates it’s own version of JQuery as well as the T3 template and Joomla pulling it ┬áin too. If you aren’t careful, you’ll end up with several of them being downloaded which will hurt your overall performance. I solved this by disabling JQuery in most of my modules, but the drawback there is that I have to make sure that every module is either compatible with JQuery 2.1 or 1.8 that T3 imports. Getting all that right was a bit painful.

The second problem is that you really need to work in Joomla itself and in the template too at times for testing and modifications. This is especially true if you want to deviate highly from the template’s layout. I solved this issue by just mounting the template as a Dreamweaver site and I work in that as well as in the Module manager in Joomla 3.

There was a huge upshot by integrating Joomla 3 though… Ajax is all built in… You can get JSON or XML data from Joomla 3 and any module just by a simple url syntax defined in the Joomla 3 documentation. In WordPress I actually had to install a plugin for this and it wasn’t very flexible.

Conclusion

Overall, I am very impressed with Joomla 3 and now I actually prefer it over WordPress… At some point in the near future, I am going to convert this blog to a Joomla site. When I have time that is.

If you are interested or need help with any of these integrations, just drop me a message and I’d be glad to share my modified template with you.