9

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.

SeyyedKhandon
  • 241
  • 2
  • 8
  • 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. – Robert Harvey Feb 01 '20 at 15:06
  • yes i know, and i am asking about it before adding it to my project. it is still not abvious for me and unfortunatley i dont have enough exprience in clean architecture, because of that i want an exprienced user to comment me about this, and tell me their expreince ..., can you please tell if you have any in this criteria? thanks in advance. – SeyyedKhandon Feb 01 '20 at 16:13
  • 6
    This "clean architecture" may work well for many projects and fail miserably for others. Your question lacks context. – Christian Hackl Feb 01 '20 at 16:45
  • @ChristianHackl what do you mean lacks context? – SeyyedKhandon Feb 01 '20 at 16:46
  • 2
    That you have not identified your goals or in what way you expect this architecture to be "good". Basically what Robert Harvey said. – Christian Hackl Feb 01 '20 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. – SeyyedKhandon Feb 01 '20 at 19:54
  • And one more important thing is, as @RobertHarvey said, i think it is good, but i don't know how much is it practical and useful in front-end domain(which has many frameworks that do things in their own ways). i really appreciate that if anyone who has used uncle bobs clean Architecture in action and exprienced it in front-end, guide me. – SeyyedKhandon Feb 02 '20 at 02:59
  • 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 Feb 02 '20 at 19:49
  • thank you for your answer. i went through a lot(folder structure , api design, oop with typescript etc ..), and finally reach here to the land of architecture, so really i wanna make a better frontend with this architecture, but i just wan to know is there anyone who used this before in his frontend project, and was it really helpfull in mass scale projects and does it really make the project isolate from the framework in real projects with lots of 3rd party libraries? – SeyyedKhandon Feb 03 '20 at 03:06

1 Answers1

2

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.

kiwicomb123
  • 198
  • 8
  • 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? – SeyyedKhandon Jun 29 '21 at 04: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. – kiwicomb123 Jul 01 '21 at 03: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 – SeyyedKhandon Jul 01 '21 at 04:07
  • The strategy has already been very well explained in the literature. Clean arch, by Bob Martin. – kiwicomb123 Jan 25 '22 at 00:12