Vue plugin-based development
Instead of starting with what we did and how we did, let me start with why.
Why we did this
Earlier we used to build front-end applications in a monolithic way, where everything is tightly couple for that particular application
Which is good, gave us a proper scope of individual application. Then we started to scale up things to multiple countries and various applications. Each country have a different configuration like different mobile validation, different rules, and sometimes different requirements
We thought not to handle different repositories for different countries since there be a lot of code duplication. So we decided to go with configuration based where we inject a config file specific to the country when that particular country is loading. Which have all the generic things required for that country?
This solution is right but going on we faced a few critical issues in development process like,
- If else ladder — we ended up have a lot of if-else conditions in the code
- Testing — whenever a particular country do some changes, then every country has to test it (Since it’s a single code base)
- Code commits — Many conflicts used to happen since many developers are working for different countries.
- Complete module in a different application — Some times we want a module from application A into application B (Which we used iframes)
So we thought to scale up this solution which can solve at least a few problems. During that process, we came up with this plugin-based architecture, where we learned many things along the way.
How we did
Let’s take an application (monolithic) which has modules like users, notifications, settings, newsfeed, and some business logic around them.
To make any changes to business logic, we have to break through the modules and make the changes and stick it back with a lot of if-else conditions. So we broke every module into an individual application so that any other application can consume it.
(core is something which controls all the plugins)
Now we can work on each module separately and publish them as an individual package. Any Vue application can consume them when required.
Ideally, this is what we are talking
- vue create demo-app
- npm i @myapp/users @myapp/notifications @myapp/settings @myapp/core -save
- init the core module
- Add some configurations
That’s is all the modules injected into the application and ready to serve in the browser. It looks great and beautiful, but how to do it?
So before reaching that level, we need to understand a few problems we solved along the way. Combining all those solutions, we can get the answer to our question.
