loading...

Discussion on: Code Like a Conversation: Basic Levels of Abstraction

Collapse
karfau profile image
Christian Bewernitz

Is this separation also somehow visible in your code(/-structure)? Or how do you communicate about those levels in the team?
I'm asking this because I'm having a hard time wrapping my head around how to apply this to a big react/redux project with lots of abstraction levels.

Collapse
hudsonburgess7 profile image
Hudson Burgess Author

I would like it to be visible -- a lot of my work recently has been refactoring to make this structure more clear.

I'm not sure what the default structure is for a React app (I work primarily in Angular), but my src/app/ directory looks something like this:

classes/              <-- classes like User, Project, Search, etc.
components/      <-- pieces like sidebars, navbars, forms, etc.
pages/                 <-- technically just higher-level components
services/             <-- HTTP calls and other complex, reusable logic
store/                   <-- ngrx things
...
app.component.*.ts

Hope that's helpful!

Collapse
courier10pt profile image
Bob van Hoove

ASP.Net MVC also has a directory structure that reflects the architecture. Like:

Controllers/
Views/
Models/

I've grown to dislike that approach since things get cluttered easily. For every 'topic' in your application you'll spread files among those folders.

Since you're storing your project on a filesystem, you get 1 hierarchy to choose.

If you go for the architectural divide. It helps you to familiarize with the architecture. And it looks neat with the folders collapsed.

If you go for the topic divide, you'll have all related files together whenever you work on them. That's pretty convenient.

Let's try and demonstrate this with a made up project folder:

README.md
BaseDAO.xyz
Project/projects.json
Project/project.html
Search/LuceneIndex.xyz
Search/SearchService.xyz
Search/Index.template.xyz
User/User.xyz
User/UserController.xy
User/UserService.xyx
User/UserDAO.xyz
User/Templates/Edit.template.xyz
User/Templates/List.template.xyz
User/Templates/Search.template.xyz

Where .xyz is your language of choice.

[disclaimer]
Maybe I'm comparing apples with pears... Bit unsure if I know enough about React to tell.
[/disclaimer]

Collapse
karfau profile image
Christian Bewernitz

While not being familiar with angular, it looks like this nicely aligns with the project structure.
I guess it would need some naming convention or documentation/knowledge sharing to "ensure" this.

Maybe somebody else can suggest something?