developperBestPractice

Documentation du code javascript

le format de la doc est standard et similaire à ce que l'on peut voir dans les autres langages :

    /**
     * Description de la maFonction
     * @param {string} param - description du paramètre
     */
    maFonction : function maFonction(param){
      ...
    }

pour une surcharge utiliser le @inheritdoc :

    /** @inheritdoc */
    initialize: function initialize(options){
        
    }

tous les paramètre disponibles sont documenté ici

Bonnes pratiques javascript

guide bonne pratique javascript : ici

Bonnes pratiques focus

architecture MVC

• Focus implémente le modèle MVC
  Model = Focus Model
  View = template Handlebars
  Controller = Focus View
  

• Une couche de service est également disponible afin d'héberger les logiques de travail sur les objets et les appels aux web services

• les responsabilités :
  

la vue : initialisation des données, gestion des évènements, affichages graphiques, appel des services
le service : manipulation des datas, appel du serveur

la sémantique

• la sémantique de votre code permet une meilleure maintenanbilité. le nom des variables et des fonction, les conditions dans un if permettent avec une bonne sémantique une meilleur compréhension de la logique produite

exemple :

//mauvais
if( previousData.searchContext!== undefined && previousData.searchContext.scope === newData.searchContext.scope
        && previousData.searchContext.query === newData.searchContext.query
        && previousData.facet === newData.facet){
...
}

//bon
var isSameSearchContext = false;
if(previousData.searchContext) {
    var isSameScope = previousData.searchContext.scope === newData.searchContext.scope;
    var isSameQuery = previousData.searchContext.query === newData.searchContext.query;
    isSameSearchContext =  isSameScope && isSameQuery;
}
var isSameFacetContext = false;
if(previousData.facet){
    isSameFacetContext = isEqual(previousData.facet,newData.facet);
}

if(isSameSearchContext && isSameFacetContext){
 ...
}

• les variables ne coûtent rien et permettent de comprendre le code facilement

• ne pas faire du javascript inline : map(_.filter(fonction())) => se créer les helpers correspondants

Les vues

Général

• Respecter toujours le même ordre de déclaration de fonction qui suit le cycle de vie de la vue :
  propriétés
  initialize
  events
  handlers
  template data
  render
• ne pas surcharger de méthode inutilement
• toutes les vues possèdent un mode DEBUG :

customOptions{
  DEBUG: true
}

elle affichera alors son contenu dans la console

• ne pas commiter de console.log, le debugger permet de faire mieux

Gestion du rendu

• une vue ne doit pas être affichée tant que ses données ne sont pas prêtes à être affichées.
• la fonction isReady :

isReady: function isReadyConsultEditView() {
  return [votreCondition] && [parentView].prototype.isReady.call(this) === true;
},

permet d'afficher la vue uniquement quand elle est prête.

Complexité du code

• une fonction doit faire 20 lignes au maximum avec une complexité cyclomatique inférieur à 10