With everybody wanting to move towards JavaScript based frontends, how can Joomla be left behind. In this session, I will show how we built an angular frontend and used Joomla as an API backend.

1. Building Modern
Front Ends for Joomla
Online Joomla Day 6-8 November 2019

2. Ashwin Date
@coolbung
ashwin@tekditechnologies.com
● CTO, Techjoomla & Tekdi
Technologies

3. ● Started in 2009
● Extensions
● Custom Software Development
● Team of over 50+ developers,
designers and architects

4. About Us
• Founded in 2006
• Opensource focused growth strategy has helped us
get a large worldwide client base
• We are one of India’s top Joomla based development
companies with some of the most complex projects to
our name
• Product first approach to development, delivering
optimisations through code reuse

5. www.techjoomla.com | www.appcarvers.com
Team
• 50+ team across all divisions
consisting of frontend and backend
developers, Product developers,
Project & Product managers, Analysts
and Architects
• Majority of the team has an
experience of 4-8 years
• Senior Architects with 12+ Years of
experience

6. www.techjoomla.com | www.appcarvers.com
Offerings
• UI/UX Development
• Web & Portal Applications
• API Development
• Business Intelligence (BI), Big Data and
Data Analytics
• Modern Abstracted frontends
• Large Scale Joomla based applications and
enterprise implementations
• Native & hybrid mobile applications
• Progressive web applications

7. Key Products
Shika e-Learning system for Joomla that supports host of content types -
documents, videos, SCORM, quizzes, exercises and feedback. Also supports
e-commerce / paid courses.
JTicketing Event booking system supporting paid events and multiple ticket
types. Can integrate with Adobe Connect for online events. Use it with the
native events manager or with JEvents, Easysocial or Jomsocial events.
JGive Create campaigns for accepting donations for causes, or set it up in an
investment mode like Kickstarter to put up projects and accept micro-
investments.

8. com_api REST API toolkit for Joomla 3.x. This extension allows creating RESTful API endpoints for
Joomla resources
TJ Reports is an extension that allows you to easily build reports for your extensions
UCM Content Manager that allows creating multiple “content Types”, add fields.
TJ Dashboard is a great way to build Dashboards for your Joomla Applications
Open Source Product Stack

9. Open Source Product Stack
Advanced Search allows indexing data from any extension into a search database like Algolia,
SOLR, Elasticsearch
TJ Notifications is a unified communication tool that allows managing email templates for different
media - email, SMS, push
TJ Queue Is a generic job queue / message queue that has MySQL and Amazon SQS adaptors

10. Why another
frontend ?

11. Multi Tier Architecture - the way
forward
● User front ends are not limited to web - can be mobile, TV, wearables and lot
more
● Each tier may evolve independently
● Easier to Manage & Simpler to scale
● Typical web 3 tier architecture uses a JavaScript frontend (Angular, React),
Application layer (PHP, Python, NodeJS etc) and a database.

12. Multi Tier Architecture with Joomla
● Joomla uses MVC which already has separation of concerns
● However using different CSS frameworks needs good knowledge of the
Joomla templating system
● Clients love the smooth experience offered by Single Page Apps
● But what about those who have already invested in learning Joomla ?

13. Multi Tier Architecture with Joomla

14. Joomla as API backend
Uses com_api as the API framework
Several core plugins already built
3rd party extensions can write plugins to add more endpoints
Supports JSON, JSONP and XML
Authentication with API Tokens / JWT
Auto login plugin to login to Joomla using API Token
User Impersonation

15. Available APIs
Joomla user with social login (Uses JFB Connect)
Articles and Categories
Easysocial (Users, Pages, Groups, Events, Newsfeed)
Easyblog (Reading, searching and writing blogs)
JTicketing
Shika
TJ Reports via API

16. Angular / React
No need to reinvent the UI
Large ecosystem with plenty of modules
JavaScript - The cool thing everyone wants to get into

17. Case Study 1 -
Osianama.com

18. Osianama
Asia’s largest Auction House
Running on Angular + Joomla for over 2 years now
Joomla menus, Zoo, Advanced Search
Algolia
www.osianama.com

19. User + Articles
Articles - List, search, filter, read article
User - Username / password login, Social login
https://github.com/tekdi/ngtek-joomla/tree/demo

20. ● Around 150,000 records in Zoo
● Around 500,000 relations between records
● 15 API endpoints created
Some Numbers

21. Case Study 2 -
Marketplace with
driving quality and
safety monitoring

22. Vehicle
Tracking
Mobile and web
application with API
mashups for Vehicle
tracking for compliance.
Web App using Joomla
backend for APIs,
Angular JS for Frontend
Mobile app using
Xamarin

24. ● Admin Panel for agencies to manage jobs
● Mobile App for drivers to accept jobs and as a driving companion.
● App integrates with the Sentiance SDK for driving quality monitoring
● Background services to calculate driving scores
● Close to 30 APIs with full CRUD implementation for most entities
Key Areas

25. Thank You !
Please share your feedback
https://forms.gle/HyvnGwuxtp21zT8n9