Angular pluggable apps
Is it the right approach? — Part 1
Agenda
- Goal
- Initial Understanding
- Research
- PoC Part 1
- PoC Part 2
- PoC Part 3
- Next steps
Goal:
To create Angular pluggable apps. We will create the core application, and would allow third party to create the plugins and using the plugin extend our core application.
Initial Understanding:
When we (Coding Town India) team, discussed about PoC of Angular pluggable apps, I had no idea how to do it. But I have used pluggable concepts,
- in chrome browser it is an extension,
- in programming world these are called as packages or gems,
- In Jira admin module, it is called as Add-ons.
What we planned to do was something similar to Jira Add-ons using Angular 9.
Jira workflow:
- Go to ‘Add-ons’ page by clicking the ‘Add-ons’ link from the home page.
2. In the ‘Add-ons’ page search for the Add-on and install.
3. Jira has the market place, where third party can upload the Add-ons.
Research:
I checked few links and got to know the types of pluggable systems and core characteristics of pluggable systems.
Types of pluggable systems:
- CMS systems like WordPress
- Systems that support add-ons, such as Jira
- Embedded systems
- Very large systems
Core Characteristics:
- Changes occur without the need to rebuild
- Supports application extensions from other teams
- Can be build with standard tooling
- LTS
PoC part 1:
I followed a great article from Paul Ionescu and got it working. The gist of the article is explained below.
The application container has ‘Core App’ and ‘Plugin component’, from the local terminal, we will got to the ‘plugin component’, using ‘roll-up’ bundler will bundle the application and run build command, it will bundle the plugin and put it in the ‘Core App’ assets directory using relative path.
This is a good start for our pluggable concept, got to know the extensibility of the app from the local system.
Concepts learned:
- O (2nd Letter) from SOLID principles of Object Oriented Design
- Rollup bundler
- AOT and JIT
PoC part 1 conclusion:
Though we got the workable module, there were few more questions like how to run it in the server, where to have the plugin components. This leads to the second POC.
POC part 2:
Continuing from the step 1, created a small ‘Express application’ to have it as a server and run the application in the ‘Express server’ and on the trigger from the web application, downloaded the plugin from the remote location and added to our core application assets location.
Concepts learned:
- Simple server application using express
- Angular @viewchild
PoC part 2 conclusion:
With the server and the plugin in a remote location, we have moved to the next step. but still it all looked amateurish. so decided to mimic the Jira add-on concept and use ‘Angular Core UI’ to have an real world application feel.
PoC part 3:
Goal: To extend the POC part 2 in a real world UI, till part 2, it was just ‘Hello world’ kind of application.
Below is the wireframe.
Below is Actual screens flow:
Concepts learned:
- Node fs module
- Angular Core UI basis
PoC part 3 conclusion:
Combined the first and step step with the Core UI. but here we have to do few more additional steps, it is not just downloading, we have to alter few javascript files, used append method of node fs module.
Flow in 3rd Steps are
- Have a core UI with few side menu’s (Have one more side menu as Plugin)
- Have the pluggable component in the remote location
- Download the pluggable component on a trigger from the core app
- Modify routes javascript file
- Rebuild the application
Next Steps:
Todo:
- To try the options without modifying javascript file.
- To try the concept of doing it without rebuilding the application.
- To consider security aspects.
- To checks to handle pluggable code shouldn’t break the core app.
