DEV Community

Discussion on: JavaScript: File Naming Conventions

Collapse
 
jenbutondevto profile image
Jen • Edited

Usually in our codebases these 'groups' would have their own directory. For a web frontend project it goes something like Component/Template/Lib (includes services, classes)/Routes/Util.

And then the filename would tell you a little more. Classes or components are UpperPascal. Of course if there are enough in the same "family" like TextInput.html, TextArea.html, Radios.html they can have their own directory like 'form'. If it's in somewhere like Lib, it'll probably be called something like communicationService. If it's just a group of related functions it will probably find itself in util/time.js

Collapse
 
codewithluke profile image
Luke Babich

Interesting. So if I understood this correctly as an approach you are taking a feature lets say 'X' that would contain its component/styling and business logic?

Feature X:
featureXComponent.js
featureXService.js
featureXTemplate.html

Would the above be correct understanding?

Collapse
 
jenbutondevto profile image
Jen • Edited

My bad, probably didn't articulate that too clearly. let's say feature X is some sort of blog functionality, it'll break down something like this

components/blog/Hero.html, components/blog/InfoBox.html, components/blog/Article.html, component/blog/IndexCard.html, components/Footer.html(not in /blog since it's the same everywhere across the site)

Since I am using svelte nowadays, templates are found in routes/ so I'll have something like /routes/blog/index.html and /routes/blog/[slug].html.

in lib/ probably something like lib/communicationService.js which is generic. lib/blogService.js might have methods .getLatest() or .report(blogId, user, reason)

Thread Thread
 
codewithluke profile image
Luke Babich

Ah I follow you now! Yea that is a pretty similar approach to how I approach it. Thanks for the insight!