File/folder structure for modularized meteor app


#1

I want to build a modularized meteor app, as for me it is the easiest way to develop separated modules. I think the new import folder should be used for that. So I would start with this structure for an article-module - like it is explained in the guide (if I understand that correctly):

imports/
    api/
        articles/
            publication.js
            methods.js
            collection.js
    ui/
        articles/
            article.html
            article.css
            article.js     // contains helpers, events and onCreated/onRendered
    startup/
        client/
        server/

So I would import the needed files in the startup folder:

startup/server/index.js

import '../../api/articles/collection.js';
import '../../api/articles/publications.js';
import '../../api/articles/methods.js';

startup/client/index.js

import '../../api/articles/collection.js';
import '../../api/articles/methods.js';
import '../../ui/articles/article.html';
import '../../ui/articles/article.css';
import '../../ui/articles/article.js';

In the app I would import the startup files in the client/server folder and everything is working fine. Great!

But:

  1. Is there any improvements/advices to that struture?
  2. I don’t understand the advantage in this style vs. just put the files in the root server and client folder!!
  3. Is it tecnically possible to load modules only if user has some defined roles? So if a user is no editor, I don’t need this module to be loaded. So this would make sence for me to use imports…

#2

I really appreciate the work you put in to laying this post out. I’ve been struggling with laying out my project correctly with this new modularity and yours is the first that makes most sense to me.

In regards to the last question, you can’t import modules dynamically from runtime information. I don’t know all the specifics however I do remember that issues with mobile devices arise with attempting to dynamically import.


#3

Typically, all files import what they need. Your /imports/startup/client/index.js would just import /imports/ui/articles/article.js. Article.js would likely need /imports/api/articles/collection.js and /imports/api/articles/methods.js to implement functions. Usually, article.js would also import article.html and article.css. methods.js would usually have to import collection.js also.

On the server side, the index file imports the publications and the methods. The collection will be imported by each of those as a necessity to do their jobs.

IMO the reason for modularization is to avoid namespace pollution. Each file imports exactly what it needs and no more. If you use a linter like eslint, you’ll get warnings for importing things you don’t use or not importing something you do use. Use a linter!


#4

Have you seen Rocket.chat? https://github.com/RocketChat/Rocket.Chat


#5

article.js would import collection.js and methods.js and methods.js would also import collection.js. So collection is imported twice???


#6

Yes, each file imports whatever it needs to reference. If it doesn’t import
it, it can’t see it.