General best practice

Naming convention#

• Class name: PascalCase
  • ex: new MySuperClass();
  • ID and variable name: camelCase
  • ex: var mySuperVariable = "super";
• Public member: myMethod: function(){}
  • This is the component API
  • You can access it from outside the component
• Protected member: _myMethod: function(){}
  • This can be overridden by subclasses to modify or implement a new behaviour
  • You do not have access to it from outside the component
• Private member: __myMethode: function(){}
  • This a specific private internal member.
  • Useful only for this component, you do not have access to it from outside, and you must not override it in subclasses
• Class pre/suffixes:
  • primitive: suffix Primitive (ex: myLabelPrimitive, myImagePrimitive, …)
  • view: suffix View (ex: mySearchView, myMenuView, …)
  • screen: suffix Screen (ex: myCatalogScreen, mySplashScreen, …)
  • service: Service suffix (ex: programService, channelService, …)
  • mixin: M prefix (ex: MObjectStates, MObjectProperties, …)
  • abstract: Abstract prefix (ex: AbstractChannelService, AbstractProgramService, …)

You should, you must#

• One class equals one file.
• Limit the usage of z-index: prefer the natural order of nodes to handle overlays.
• For maintainability, avoid to define function with more than 50 lines of code: split and refactor.
• For maintainability, avoid to define function with more than 3 or 4 parameters: use object instead.
• Comment and format your code: use your IDE (templates and auto generated JSDoc).
• Test your code: tests are kind of specifications and useful for non regression.
• Start to develop on Chrome browser but test your code quickly on targeted device: performance and compliance verification.

You should not, you must not#

• Define classes with multiple inheritance: mixin is not an inheritance.
  • Especially avoid to inherit from two classes with a common ancestor
• Put lots of business logic in controllers, its role is to retrieve data, update views and coordinate. Use service for it.
• Override __XXX or _XXX methods: most of the time there is a better way to do what you want to do.
• Put code into event function body: events are just events, no logic in it.

    onEvent:fct(parameters){/* has to be empty!!! */}

• Use console.log: use console.info, console.debug, console.warn, console.error
  • You can use it for debug purpose but do not forget to remove them afterward