Why ?
- have a uniform codebase
- avoid endless discussions
- makes code easier to read
Proposal
Letter case
Javascript
| TYPE |
CONVENTION |
EXAMPLE |
| Class |
UpperCamel |
MyClass {} |
| Function |
lowerCamel |
const myFunction = function(){}; |
| Class attribute |
lowerCamel |
this.myAttribute = {}; |
| Constant |
ALL_CAPS |
const MY_CONSTANT = "https://www.ovh.com"; |
| Function argument |
lowerCamel |
function (myArgument) { return myArgument; } |
AngularJS
| TYPE |
CONVENTION |
EXAMPLE |
HAS SUFFIX |
| Module |
lowerCamel |
myModule |
|
| Controller |
lowerCamel |
myController |
Yes |
| Service |
lowerCamel |
myService |
Yes |
| Factory |
lowerCamel |
myFactory |
Yes |
| Directive |
lowerCamel |
myDirective |
|
| Component |
lowerCamel |
myComponent |
|
| Filter |
lowerCamel |
myFilter |
|
| Translation |
lowerCamel |
myTranslation |
|
File naming
${name-of-the-feature}.${type}.js
i.e.:
user.controller.jsservice-pack.service.js
Why ?
It's the way it is currently and I don't have a valid rebuttal
Module naming
ovhManager${HierarchycalLevel1}${HierarchycalLevel2}
i.e.:
ovhManagerPciPrivateNetworks
Why ?
It creates a unique name of each module
Directive and component names
${nameOfTheFeature}
Why ?
It's the way AngularJS wants us to do 🎉
Controller names
⚠️ avoid using Controller whenever you can, use a Component or a Directive instead
${nameOfTheFeature}Ctrl
i.e.:
Why ?
Makes it easy to differenciate compared to linked Component or Directive
Service and factory names
Proposal 1
${NameOfTheFeature}
i.e.:
Why ?
- Makes it easy to differentiate compared to linked
Component or Directive
- Services are singletons and singleton names starts with an upper case
Rebuttal
Makes it harder to differentiate of its Class name
import User from './user.service';
export default class {
/* @ngInject */
constructor(User) { // 'User' is already declared in the upper scope
this.User = User;
}
}One easy solution would be to name the Class import differently
import UserClass from './user.service';
export default class {
/* @ngInject */
constructor(User) {
this.User = User;
}
}Proposal 2
${nameOfTheFeature}Service
i.e.:
userServiceservicePackService
Why ?
- Makes it easy to differentiate compared to linked
Component or Directive
- Same convention as the
Controller
- services are meant to be instantiated and instances uses
lowerCamel
this.userService.getUser(this.serviceName);
Proposal 3
${NameOfTheFeature}Service
i.e.:
UserServiceServicePackService
Why ?
- best of Proposal 1 and Proposal 2
Translation names
Proposal 1
${unique_name_for_the_translation}
i.e.:
pcc_dashboard_options_basic_action_menu_activation
Proposal 2
${featureName1}_${featureName2}
i.e.:
pcc_dashboard_options_basic_actionMenu_activation
In PCC, in the dashboard, in the options, only for basic options, in the action menu, this is the text for the activation menu item
Resources
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent