Just a little explanation:

"I'm used to be a solo front-end developer in my company and using default folder-structure and way of coding which vue-cli provided, it is good for a solo developer and small applications, but the project is going to scale up and be an enterprise level app, which takes me more times to develop new feature or make it harder to reuse my previous codes and also the company said we want to hire new front-end developers, which makes it like a nightmare for me in this situation.

So i decided to make a change to make a better and well define front-end project, so first i migrated the project from js to typescript to use interfaces and class , etc... which the interface and classes and helpers that i developed makes the code very cleaner than it was, and i was happy about it.

but it seems that its not enough, which Also i told myself currently i know where every things lives and how to do things and where should i go to develop new components and add what in where folders and etc... but if the new developer has come, it can make him/her confuse to adpat to it, so i began to read about enterprise level folder-structures(https://github.com/vuejs/awesome-vue#scaffold) like this one which is introduced by chris frtiz in vue awesome (https://github.com/chrisvfritz/vue-enterprise-boilerplate):

enter image description here

and this one whic is also introduced by vue awesome(https://github.com/NarHakobyan/awesome-vue-boilerplate):

enter image description here

and when i was investigate them, i noticed that every developer comes with a new self authored folder structre, and finally i used a conjunction of those in my project and it seems to wrok very well.

But i still think i made a new folder structure and self authored way of coding, which is not a standard or maybe not well enough defined solution.

So i began to investigate other solutions in other domains and uncle bob's pages, and finally i found something called "Clean Architecture" in uncle bob's site which shows an diagram which tell about a onion model of doing code developiong,

("(https://blog.cleancoder.com/uncle-bob/2012/08/13/the-clean-architecture.html). enter image description here)

and it seems to be popular in android world and our companies android developer seems to be very happy with it and they telling me we can see our code and quickly found what is what and where should we go to develop new things and a better reusre our pervious code and almost no conflict in developing.

I want to know is this architecture good for fron-end? do you have any exprience in developing front-end with this clean code? was it really helpfull?

thank you in advance for the guide.

  • 10
    Before you decide to add a technique to your tool belt, you need to first understand its purpose, so that you can apply the technique to solve a specific problem. Simply "being good" is not enough. Commented Feb 1, 2020 at 15:06
  • 6
    This "clean architecture" may work well for many projects and fail miserably for others. Your question lacks context. Commented Feb 1, 2020 at 16:45
  • 2
    That you have not identified your goals or in what way you expect this architecture to be "good". Basically what Robert Harvey said. Commented Feb 1, 2020 at 17:32
  • 2
    I told that i want it to be easily scale able and something which is familiar with developers not a custom one which makes each developer to every time read new one. Commented Feb 1, 2020 at 19:54
  • 2
    It's a good question. The answer you are discussing, clean architecture, doesn't really address your problem. Architecture thinks on a different level about the interaction of components. It doesn't usually go as deep as folder structure and how much to comment the code or other ways to make it easier to add developers to a project. I'd ask this on stack overflow proper.
    – Martin K
    Commented Feb 2, 2020 at 19:49

1 Answer 1


Yes you can definitely use it on frontend code.

Clean architectures beauty is that it structures your code such that its platform independent. It makes it really easy to reuse the same code across platforms. I.e web, mobile, desktop etc.

The whole idea of frontend and backend really has nothing to do with the business logic of your app, so it should be kept out of your business logic. If I were you I would pick of a copy of clean architecture. Bob explains it much better than I can in this short answer.

  • Did you use it in react? how was that? is it available at github to take a look and have a conversation over the practice? Commented Jun 29, 2021 at 4:21
  • 2
    I used Vue. The front end code plugs into your domain. i.e: Vue knows about your domain, but your domain does not know about Vue. The front-end implements interfaces that your domain decides. I could switch the project over to React, NextJS or any other front-end framework because of the architechure. The source code cannot be shared because its for my work. But I can explain the method in more detail if you like. Commented Jul 1, 2021 at 3:57
  • It will be great if you could make some reprex in GitHub for case study, I really like to learn more about it practically Commented Jul 1, 2021 at 4:07
  • The strategy has already been very well explained in the literature. Clean arch, by Bob Martin. Commented Jan 25, 2022 at 0:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.