Good day!
I'm Working on a personnel projet. A backend using node and typescript.
I've been looking at some architectures and I choose my data layer to be a factory pattern reflecting table operation. In a class, I can wrap up most queries in fonction using 10-20 line per operations. But I'm not sure if I will go with the same pattern for the business layer
Data
├── connections
│ └── mysql.ts
├── models
│ └── user.model.ts
│ └── product.model.ts
└── tables
└── user.table.ts
└── product.table.ts
└── order.table.ts
Because I dont validate parameters(done in business layer) this pattern works fine because query functions or kept fairly small. Functions only return's a result or null. Then Business layer will determine the proper error message(not found, login failed, product is back order....etc)
Now, because business layer require more logics. Thus more lines of code for parameters validation, permissions, data queries, other API calls, error handling ... etc. I strongly think I should use the modules mechanism. Wrapping up a single method in a file. Then only import the business function to an entry point.
Business
├── procedures
│ ├── authentication
│ │ ├── connections.ts
│ │ ├── delete.ts
│ │ ├── login.ts
│ │ ├── logout.ts
│ │ ├── signup.ts
│ │ └── suspend.ts
│ ├── product
│ │ ├── create.ts
│ │ ├── delete.ts
│ │ ├── find.ts
│ │ ├── read.ts
│ │ ├── reserve.ts
│ │ ├── update_description.ts
│ │ ├── update_price.ts
│ │ └── update.ts
│ └── user
│ ├── create.ts
│ ├── delete.ts
│ ├── find.ts
│ ├── read.ts
│ └── update.ts
└── validations
├── authentication
│ ├── connections.ts
│ ├── delete.ts
│ ├── login.ts
│ ├── logout.ts
│ ├── signup.ts
│ └── suspend.ts
├── product
│ ├── create.ts
│ ├── delete.ts
│ ├── find.ts
│ ├── read.ts
│ ├── reserve.ts
│ ├── update_description.ts
│ ├── update_price.ts
│ └── update.ts
└── user
├── create.ts
├── delete.ts
├── find.ts
├── read.ts
└── update.ts
Business layer will be consume by Express routes(no details need it here).
I segmented my validations to reflect the same structure as the procedures directory because AJV validation schema can get pretty big.
I anticipate about 20 Business object with an average of 7 fonctions each. Times 2 for validation. For a total average of 240 files for the business layer.
So, my questions is. Is atomizing business function using import/export in a single file per business function a good practice and will it diminish performance?
RTFMed lots of howto's on import/export but cant seem to find straight answer or performance concern.
Related
Need your help )
I'm stuck with question - how to configure Rollup build to achieve next build structure.
For example - let's assume that folder structure (it's possible to change it) is:
├── src/
│ ├── common-assets/
│ │ └── ...
│ └-- sections/
│ ├── first-section/
│ │ ├── first-app/
│ │ │ ├── app/
│ │ │ │ ├── app-assets/
│ │ │ │ │ └── ...
│ │ │ │ ├── app-components/
│ │ │ │ │ └── ...
│ │ │ │ └-- ...
│ │ │ ├── app.ts
│ │ │ └── index.html
│ │ ├── second-app/
│ │ │ ├── app/
│ │ │ └── ...
│ │ │ ├── app.ts
│ │ │ └── index.html
│ │ └-- ...
│ ├── second-section/
│ │ ├── first-app/
│ │ │ ├── app/
│ │ │ └── ...
│ │ │ ├── app.ts
│ │ │ ├── index.html
│ │ ├── second-app/
│ │ │ ├── app/
│ │ │ └── ...
│ │ │ ├── app.ts
│ │ │ └── index.html
│ │ └-- ...
│ └-- ...
├── index.html
├── main.ts
├── package.json
└── vite.config.ts
Folder sections consists of group folders. Each group folder (first-section, second-section, ...) groups apps of particular kind.
That's what I need to get after build done inside dist directory:
├── first-section/
│ ├── first-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ ├── second-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ └-- ...
├── second-section/
│ ├── first-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ ├── second-app/
│ │ ├── app-assets/
│ │ │ └── ...
│ │ ├── common-assets/
│ │ │ └── ...
│ │ ├── bundle.js
│ │ └── index.html
│ └-- ...
└-- ...
So, each *-section directory should includes common-assets and it's own index.html + bundle.js files.
Each app (first-app, second-app, ...) will be used and served as separate application (with it's own store/routing/etc).
I am struggling as well to do this with vite. I think vite is not intended for this usecase. There is a workaround I did, that maybe you can adapt to your purposes.
Basically, I have two html files I want to fill: app1.html and app2.html.
Each app's source code is in its own directory: src/app1 and src/app2.
The apps share very few resources, but I still want to build those two in one go.
My structure is as follows:
├── app1.html
├── app2.html
├── src
│ ├── app1
│ │ ├── App.svelte
│ │ ├── components
│ │ │ └── Component.svelte
│ │ └── main.ts
│ ├── app2
│ │ ├── App.svelte
│ │ ├── components
│ │ │ └── Component.svelte
│ │ └── main.ts
│ ├── shared
│ │ ├── global.css
│ │ └── shared.ts
│ └── vite-env.d.ts
├── svelte.config.js
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
You can see there are two separate apps: src/app1 and src/app2 with similar structure.
I could not find a way to build them separately using only one call to defineConfig, so basically I build the apps separately, using the emptyOutDir: false. This way I won't lose one build when doing the other.
Then, I created some scripts in my package.json:
"scripts": {
"build": "vite build",
"build:app1": "vite build",
"build:app2": "vite build",
"build:all": "pnpm build:app1 && pnpm build:app2",
...
},
The good part about this, is that from vite.config.ts i can access the name of the command using process.env.npm_lifecycle_event. It will be set to build:app1 if I do pnpm build:app1. I can use this to choose which part of the source code to build.
This is my vite.config.ts:
import { defineConfig } from "vite";
import { svelte } from "#sveltejs/vite-plugin-svelte";
const buildScript = process.env.npm_lifecycle_event;
const app = buildScript.includes(":") ? buildScript.split(":")[1] : "app1";
const buildConfig = {
rootHtml: `./${app}.html`,
entryFileNames: `${app}/${app}.js`,
assetFileNames: `${app}/${app}.[ext]`,
};
export default defineConfig({
plugins: [svelte()],
build: {
rollupOptions: {
input: { app: buildConfig.rootHtml },
output: {
entryFileNames: buildConfig.entryFileNames,
assetFileNames: buildConfig.assetFileNames,
},
},
emptyOutDir: false,
},
server: { open: buildConfig.rootHtml },
});
After running pnpm build:all, the dist folder should look like this:
dist
├── app1
│ ├── app1.js
│ └── app1.css
├── app1.html
├── app2
│ ├── app2.js
│ └── app2.css
└── app2.html
I hope this helps. I may try to use rollup instead of vite to see if I can do it more elegantly, but this workaround helped me achieve my goal.
Good morning everyone, I have a project with the following structure:
intranet
├── modulos
│ ├── almacen
│ │ ├── views
│ │ └── route
│ │ └── index.js
│ │
│ ├── ventas
│ │ ├── views
│ │ └── route
│ │ └── index.js
│ │
│ └── compras
│ ├── views
│ ├── route
│ └── index.js
│
├── route
│ └── index.js
├── store
│ └── index.js
├── ...
The modules folder will have all the modules that I will be connecting to the project, the point is that all the subfolders will have the views, route, etc. subfolders. In turn, in the route folder there will always be an index.js file.
Now in the intranet > route > index file I want to do the import as follows.
import("../modulos/*/route/index").then(module => {
console.log(module);
});
This in order to carry out a self-import of those modules that it finds. The problem is that I get an error because apparently the character * (asterisk) is not allowed inside the import.
I will appreciate the help you give me. Thank you.
This is not possible you have to iterate over all directories in 'modulos'
// pseudo code
for(const folder in modulos_subfolders) {
import(``../modulos/${folder}/route/index`)
}
Consider a webpack 4 built project with the following structure that has ./blocks/index.js as the main entry point:
├── assets
│ ├── css
│ │ ├── editor.blocks.css
│ │ ├── style.blocks.css
│ ├── js
│ │ ├── editor.blocks.js
├── blocks
│ ├── block1
│ │ ├── editor.scss
│ │ ├── style.scss
│ │ ├── index.js
│ ├── block2
│ │ ├── editor.scss
│ │ ├── style.scss
│ │ ├── index.js
│ ├── block3
│ │ ├── editor.scss
│ │ ├── style.scss
│ │ ├── index.js
│ ├── index.js
The SASS files are imported into the index.js file inside each block folder.
When webpack runs it should:
Concatenate and compile all style.scss files to ./assets/css/style.blocks.css.
Concatenate and compile all editor.scss files to ./assets/css/editor.blocks.css.
At the moment, it kind of works but instead of concatenating and compiling all style.scss files into ./assets/css/style.blocks.css and all editor.scss files into ./assets/css/editor.blocks.css it seems to grab the SASS from the LAST block folder only (`./blocks/block3').
This indicates that style.blocks.css and editor.blocks.css are continuously being overwritten which is incorrect. I think the loader that writes the final two CSS files may need to be a plugin instead? I've tried the MiniCssExtractPlugin but couldn't get that to output two CSS files based on multiple SASS files.
Here's the full repo: https://github.com/dgwyer/multiple-webpack-css-files
Managed to get this working in webpack 4 with the MiniCssExtractPlugin webpack plugin, with a minor workaround which shouldn't be necessary in webpack 5 apparently.
https://github.com/dgwyer/multiple-webpack-css-files
What am I dong wrong here?
The code works on my computer, but when I run it in docker it fails.
I get the following error:
Error: Cannot find module
'/usr/src/app/src/Presentation/viewModel/index'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at /usr/src/app/app.js:29:18
at Array.forEach ()
at Object. (/usr/src/app/app.js:28:26)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32) npm ERR! code ELIFECYCLE npm ERR! errno 1
I assume that the issue is not in docker since when I play with the require I can get different errors.
Just in case here is the docker file:
FROM node:8.9-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD npm start
Here is my app.js file which loads the module which failed:
// Load routes and load dependices - Views and ViewModel
routesConfig.getRoutes().forEach(function(route){
var routeTmp = require(path.join(__dirname,'src/Presentation/viewModel/'+route[1]));
app.use(route[0], routeTmp);
});
It failed at the require line....
When I play with the required files I get different errors, I assume that the module.export makes the problem but I don't know how to go deeper in debugging.
var express = require('express');
var router = express.Router();
var serviceConfig = require('../../../config/service');
var navigation = require('../view/navigation/navigation');
// TODO
var Base = require('../../Core/Common/Base');
const base = new Base();
// Create service
const classTmp = base.getService().create(serviceConfig.getServices().baseService);
var user = classTmp.getAdmin();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', {
title: 'Expasdress',
fields: navigation.getNavigation(),
user: user
}
);
});
module.exports = router;
Here is the project sturcture:
.
├── Dockerfile
├── Jenkinsfile
├── app.js
├── bin
│ └── www
├── config
│ ├── config.js
│ ├── createConfig.js
│ ├── domains.js
│ ├── routes.js
│ └── service.js
├── dive.log
├── k8s
│ ├── ingress
│ │ └── ingress.yaml
│ ├── pod
│ │ └── pod.yaml
│ ├── production
│ │ └── production.yaml
│ ├── rbac
│ │ └── fabric8-rbac.yaml
│ └── services
│ └── backend.yaml
├── package-lock.json
├── package.json
├── public
│ ├── icons
│ │ ├── add-thumbnail-placeholder.svg
│ │ ├── baseline-change_history-24px.svg
│ │ └── spartan-logo.png
│ ├── script
│ │ ├── app-view.js
│ │ ├── create-package.js
│ │ ├── sidebar.js
│ │ └── tag-input.js
│ └── stylesheets
│ ├── admin-base.css
│ ├── app.css
│ ├── base.css
│ ├── bootstrap
│ │ ├── css
│ │ │ ├── bootstrap-theme.css
│ │ │ └── bootstrap.css
│ │ ├── fonts
│ │ │ ├── glyphicons-halflings-regular.eot
│ │ │ ├── glyphicons-halflings-regular.svg
│ │ │ ├── glyphicons-halflings-regular.ttf
│ │ │ ├── glyphicons-halflings-regular.woff
│ │ │ └── glyphicons-halflings-regular.woff2
│ │ └── js
│ │ ├── bootstrap.js
│ │ ├── bootstrap.min.js
│ │ └── npm.js
│ ├── component
│ │ ├── buttons.css
│ │ ├── create-components.css
│ │ ├── create-content.css
│ │ └── tag-input.css
│ ├── create-package.css
│ ├── login.css
│ ├── main.css
│ ├── material.css
│ ├── packages.css
│ ├── sidebar.css
│ ├── standard-list.css
│ ├── statistics.css
│ └── style.css
├── scratch
│ ├── access_token
│ ├── email
│ ├── image
│ ├── name
│ ├── refresh_token
│ ├── scope
│ ├── surname
│ └── userToken
└── src
├── Core
│ ├── Abstract
│ │ ├── Domain.js
│ │ └── Service.js
│ ├── Common
│ │ └── Base.js
│ ├── Database
│ │ └── SQLiteDatabase.js
│ ├── Factory
│ │ ├── DomainFactory.js
│ │ └── ServiceFactory.js
│ ├── Observer
│ │ └── EventObserver.js
│ └── RequestHandler
│ └── RequestHandler.js
├── Models
│ ├── Domain
│ │ ├── Component
│ │ │ └── NameComponentDomain.js
│ │ ├── Create
│ │ │ ├── CreateDomain.js
│ │ │ ├── DeleteDomain.js
│ │ │ ├── EditDomain.js
│ │ │ └── ReleaseDomain.js
│ │ ├── List
│ │ │ └── ListDomain.js
│ │ ├── Login
│ │ │ └── LoginDomain.js
│ │ ├── Search
│ │ │ └── SearchDomain.js
│ │ └── Statistics
│ │ └── StatisticsDomain.js
│ ├── Entity
│ │ ├── Admin.js
│ │ ├── Plan.js
│ │ └── Request.js
│ ├── Mapper
│ ├── Repository
│ │ └── StorageRepository.js
│ └── Service
│ ├── BaseService.js
│ ├── CreateService.js
│ └── GetService.js
└── presentation
├── ObjectMapper
├── view
│ ├── app.pug
│ ├── appsku.pug
│ ├── component
│ │ ├── addEquipmentTags.pug
│ │ ├── addTags.pug
│ │ ├── description.pug
│ │ ├── imageLoader.pug
│ │ ├── name.pug
│ │ ├── plan-cell.pug
│ │ └── title.pug
│ ├── create-package.pug
│ ├── create.pug
│ ├── error.pug
│ ├── exercise.pug
│ ├── index.pug
│ ├── login.pug
│ ├── main
│ │ ├── baseLogin.pug
│ │ └── baseNonLoged.pug
│ ├── navigation
│ │ └── navigation.js
│ ├── nutrition-plan.pug
│ ├── package.pug
│ ├── statistics.pug
│ ├── tag.pug
│ ├── workout-plan.pug
│ └── workout.pug
└── viewModel
├── Component
│ └── Name.js
├── app.js
├── appsku.js
├── create-app.js
├── create-package.js
├── exercise.js
├── index.js
├── login.js
├── nutrition-plan.js
├── package.js
├── statistics.js
├── tag.js
├── workout-plan.js
└── workout.js
I will be desperate enough to put my git code as well:https://github.com/tech-387/spartan-apps-admin-console-frontend
I made the front-end of my website with the Materialize framework and ReactJS to make it dynamic.
My goal is to make a upvote/downvote system so I need a back-end ORM to use with a database.
I decided to go with Django as I'm more experienced with python, but when I was following a tutorial, I did the command:
npx create-react-app frontend
with the intention of replacing the new files with my "homemade frontend" to make it work except the directory structures were completely different.
Tree made with the command:
├── frontend
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ └── manifest.json
│ ├── README.md
│ ├── node_modules
│ ├── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── App.test.js
│ │ ├── index.css
│ │ ├── index.js
│ │ ├── logo.svg
│ │ └── registerServiceWorker.js
My original frontend tree:
├── frontend
│ ├── Components
│ ├── index.html
│ ├── css
│ │ ├── style.css
│ │ ├── materialize.css
│ │ └── materialize.min.css
│ ├── README.md
│ ├── node_modules
│ ├── js
│ │ ├── init.js
│ │ ├── materialize.js
│ │ └── materialize.min.js
│ ├── src
│ │ └── word_card.js
I feel like the new version of my frontend is based with the idea of making everything with ReactJS in opposition with my old one which only has ReactJS as a supplement.
How do I use django as a backend in this case?
Thanks a lot for taking of your time to help me!
If I understand your question correctly, you are now following a React with Django tutorial, but you have become stuck because the structure of the React app in the tutorial is different to the structure you have already created.
The way that you use Django is the same in either case. You are making a decoupled application with separation of concerns between the front and back end. Django doesn't know or care how your front end is structured.
If you are new to Django I would suggest you start by following the official Django tutorial and then move on to the official Django REST framework tutorial.
https://docs.djangoproject.com/en/2.2/intro/tutorial01/
https://www.django-rest-framework.org/tutorial/1-serialization/