Hi All,

We have been maintaining different web apps which use the same styles, UI
components and various utilities etc. Actually, we can manage these things
in below ways.

 1.)  Duplicating the things in web apps.

 2.)  Creating a single repository with all those.


Above both ways are a little cumbersome to manage in terms of unit testing,
version maintenance. It slows down development as well. But currently, most
of the good open-source projects rely on Lerna [1]. It allows effectively
to share the front end components across

the various projects. It is a convenient way to maintain sharable code
pieces without the overhead of many repositories. If we do an improvement
in one single unit it will reflect in the other web apps.

Furthermore, an obvious drawback of having all our packages in one
repository is having to go into each package and npm install. This would
quickly become unmanageable and time-consuming. Lerna has various built-in
commands to ease the drawbacks and bootstrap(command) is one of them.
Simply run the (Lerna bootstrap) command at the top level and Lerna will
automatically install the required dependencies for each package as well as
resolving internal dependencies by creating symlinks. It gives a
significant benefit like reducing the disk space by reusing the node
modules.


I have been using the Lerna to share the store's react components in the
publisher feature. This Doc [2] describes how it works. This guild will
help to configure reusable components in the admin portal and endpoint
registry feature.

At the first phase of this attempt, we reuse the existing store components
(ex: tryout controller, swagger UI etc..) as reusable components. But we
identified some issues in this approach. We should improve our UI
components which can be reusable in other apps to be more generic so that
it will be easy to reuse without extra work. I would like to suggest some
improvements for the next steps to overcome some issues while I was
configuring the Lerna to the apimgt features.


1. Create a separate package and keep all the reusable components. Then we
can share that package with other projects.

2. Currently, Lerna bootstrap command creates a symlink for the reusable
component's source code. We should improve it to create a symlink for the
built-in component rather than the source code.



[1]. https://github.com/lerna/lerna
[2].
https://docs.google.com/document/d/15eVUGG4JG8iKqePAvmsUFVXO8N1Fydp1CCZl_J8h8EQ/edit?usp=sharing
[3]. Git issue - https://github.com/wso2/product-apim/issues/8128

Regards,
Hasunie


-- 
*Hasunie Adikari*
Associate Technical Lead
WSO2 Inc.; http://wso2.com
lean.enterprise.middleware
blog http://hasuniea.blogspot.com | https://medium.com/@Hasunie/
Mobile:+94713095876
_______________________________________________
Architecture mailing list
Architecture@wso2.org
https://mail.wso2.org/cgi-bin/mailman/listinfo/architecture

Reply via email to