Frontend, Which approach to use for the project?

Question

css

So, the point is. That already there is a service which successfully works.
Now the task is to develop landing pages (rather, even widgets) for the Telegram chatbot.
In the future, it is planned to create a new version of the SPA Personal Account (we are looking towards angular), where these same widgets will also be used.
But back to the fact that you need to develop widgets, and the task is to come up with the best approach to development.
Customer's priorities:
Widget loading speed.
Speed ​​of development and implementation.
1. The option that I was offered was to simply buy a template for the admin panel on Themforest, and based on it, make layout of individual widgets. But I don’t really like this option, because. we will prioritize download speed, these templates use a bunch of different libraries that will need to be loaded every time a telegram user sends another request to the bot, so this option will impose many restrictions. The only advantage of this option is that there will already be many different ready-made components.
2. Take a css framework as a basis, for example, bootsrap or fundation, and already lay out the components that will be used in the widgets, this will already give more room for speed optimization, and will allow us to decide when and which additional libraries we use.
3. The option that, in my opinion, will be the best, is to take and write a css framework tailored to our needs. This will allow us to have a common structure of styles that we can use in the SPA, and still have separate isolation components that can be separately loaded, while excluding library styles, etc. which other widgets will use. And most importantly, this will minimize the weight of the downloaded content, minimum js, minimum css. The only downside is that the entry threshold for new developers will be lower than the first two options. It will also take additional time to write a assembler for this project, and write documentation.
So the question is, can someone give advice, or suggest some other option, maybe I'm missing something, because. For me, this is the first such unusual project.
And not just a site where everything is clear and simple. For me, option 1 would be good if we just needed to develop a SPA. But the guys want to make widgets, and at the same time they want us to be able to quickly implement them in the SPA with minimal losses.
And now I see it in such a way that with the first option, the user will conditionally load every time ~ 2mb of unnecessary trash.
In the second: 1mb
In the third: 0.3-5mb
Ps The chatbot should send a link that opens in the browser.
Thank you for your attention.

Answer 1

And what is the actual problem here? Take for bootstrap download the admin template, as I understand you need a dashboard - there are a billion of them. Bootstrap can be compiled leaving only the necessary components. in case 3, it seems to me that you will be testing the frontend for a very long time

Answer 2

Since we are talking about SPA, then you will obviously be rewriting / modifying the backend to work through the API, which means that nothing prevents clients from writing on anything that your developers already know. It is natural to ideally choose one toolkit for use in all clients (web/mobile/desktop). Of the currently popular options, you can look at ReactJS / ReactNative, but keep in mind that for your task this may just be an overkill.
For design, the second option is just better, that is, a ready-made popular css library, for which you can simply write your own themes.
It’s definitely not worth worrying about the size of libraries in SPA: the first load will be quite long (don’t forget to make an indication), but then everything will be taken from the cache, and the page won’t be updated, all data will be loaded as needed and rendered already on the client.
As for the chat bot: I didn’t quite understand what you are worried about - you will give the user a text link. Well, when a user enters the site, it’s quite reasonable to immediately detect the client’s platform (for example, using nginx) and redirect to the appropriate version: light mobile or full-fledged or even to the native client in the store, but it’s better to immediately provide for the possibility of manually installing the desired version by the user.