2

I am having a difficult time trying to figure out where to place a certain file in my javascript project.

I have a fairly large JSON object that represents ISO language codes:

{"code":"nl","name":"Dutch","nativeName":"Nederlands, Vlaams"},
{"code":"en","name":"English","nativeName":"English"},
{"code":"eo","name":"Esperanto","nativeName":"Esperanto"},
{"code":"et","name":"Estonian","nativeName":"eesti, eesti keel"},
{"code":"ee","name":"Ewe","nativeName":"Eʋegbe"},

I did not want to retrieve this information from an API as this info is fairly static and does not change often.

I am just 'importing' this ISO language code Object file in the JS file that needs to reference it.

However, I have no idea where to actually place this file.

My current project file structure:

root/
    package.json
    webpack.config.js
    node_modules/
    dist/
    src/
        index.html
        js/
            models/
            views/
            config.js
            index.js -- (single application controller)
            iso-language-codes.js

As you can see, 'iso-language-codes.js' resides at the same level as the application controller 'index.js.'

I know this is pretty weak, but where should I put it? Mostly, this kind of thing is preference, but logic tells me I should create a new 'data' folder and put the 'iso-language-codes.js' within the new directory like below:

src/
    index.html
    js/
        models/
        views/
        config.js
        index.js -- (single application controller)
        data/
            iso-language-codes.js

Any recommendations are greatly appreciated.

Spent a good deal of time googling and searching stack, but could not find anything to answer my specific question. If anyone has anything I can reference, that would be great.

ponytails_soda
  • 95
  • 10

2 Answers2

1

Your thought process is fine. There is nothing wrong with placing static data files in a subdirectory (ISO codes for languages and countries are typical examples).

Most people don't like the name data, though. It is too generic, everything is data. Typical names are assets/ or resources/ or even iso-codes/, if you want to be specific. Nothing wrong with it, or a combination of above.

The MVxxx directory structure is meant to organize your thinking into models and views and make life easier for the maintainer. It is not cast in stone, every project is unique.

Also, when a project gets a lot of traffic, people often relocate files like these to a CDN, to cut loading times. Then your URL would be similar to https://some-cdn.example.com/resources/iso-codes/lang.js. i.e. you can think of the directories in a way that would be easy to distribute to multiple servers or even services.

Alex Pakka
  • 9,466
  • 3
  • 45
  • 69
  • Thank you. I will put 'iso-language-codes.js' under a new 'assets' directory. The only difference with the above structure, is that I am renaming generic 'data' to 'assets' as per your recommendation. Another thanks for the extra info on MVC structuring and directory structuring that compliments offloading to outside services for high traffic sites. – ponytails_soda Aug 20 '19 at 15:20
  • Do you think the 'config.js' file is fine where it is? Or, should it be placed under 'assets' as well? Only 1 config file so no need for a 'config' directory, but maybe 'config.js' should go under the new 'assets' directory? – ponytails_soda Aug 20 '19 at 15:28
  • 1
    @ponytails_soda if it is just one file - sure. Very common practice. If you end up having multiple configs (it is better to avoid it), then a `config/` directory starts to make sense. – Alex Pakka Aug 20 '19 at 15:42
  • Ok, I will leave 'config.js' where it as (same level as index.js app controller). Thanks. – ponytails_soda Aug 20 '19 at 16:16
  • Sorry for another comment, but I think I finally get what you are saying. Please see new directory structure and details below. – ponytails_soda Aug 20 '19 at 17:08
0

"you can think of the directories in a way that would be easy to distribute to multiple servers or even services":

https://some-cdn.example.com/resources/iso-codes/lang.js

I noticed the URI segment 'resources' before 'iso-codes,' so I was thinking I could group images and sass styling under resources as well is iso-codes. Sorry, I forgot to mention images and styling before.

Here is old structure:

src/
    index.html
    images/
    sass/
    js/
        models/
        views/
        config.js
        index.js -- (single application controller)
        assets/
            iso-language-codes.js

Below is the new proposed structure grouping ISO stuff (no longer under 'js' folder), images, and sass styling under a common 'resources' folder.

src/
    index.html
    resources/
        iso-codes/
            lang.js
        images/
        sass/
    js/
        models/
        views/
        config.js
        index.js -- (app controller)

This would properly follow your maxim? "you can think of the directories in a way that would be easy to distribute to multiple servers or even services"

ponytails_soda
  • 95
  • 10