Coding Standards - Wollets :)

Coding Standards - Wollets :)

Coding Standards on Front-end for BVTeam.

Be74fd9a577ea5ef1ab2e7c71bcfa4b5?s=128

Djalma Araújo

March 31, 2016
Tweet

Transcript

  1. Coding Standards Front-end: the Good Parts :) @djalmaaraujo

  2. Names! Javascript, CSS, Markup, your kid.

  3. STOP BEING GENERIC FOR NON- GENERIC STUFF!

  4. Javascript Names • .js- your classes if some JS code

    uses that element.
 Bad Example: .js-save
 Good Example: .js-orderlog-edit-save-button (Specific!) • Module names should use CapitalizeCase.
 Bad Example: var selectChange = function () {};
 Good Example: var OrderLogEditPageSelectChange = function () {};
 Good Example: var OrderLogEditPage = function () {}; // add the selectChange method in • Method Names / Variables should always use camelCase
 Bad Example: var personalname = “”; / var personal_name = “”;
 Good Example: var personalName = “”; / var windowSize = “”;
  5. None
  6. None
  7. None
  8. Refactoring No, please :( YES, YES!

  9. Js Patterns - Folder Structure • BookVolumePlus/src/BvPlus/Bundle/ AdminBundle/Resources/public/js dist/ files

    are ignored now custom code for specific pages custom generic code used across the app
  10. Js Patterns - Application.js • BookVolumePlus/src/BvPlus/Bundle/ AdminBundle/Resources/public/js/ application.js Not allowed

    to add custom code Only Initialisers are allowed
  11. JS Pattern Example

  12. BEM CSS Block Element Modifier

  13. Block Element Modifier .project (block) .project—modifier (block modifier) .project__title (element)

    .project__title--red (element modifier)
  14. BEM CSS Example

  15. Wiki https://github.com/woboinc/BookVolumePlus/wiki/Coding-Standards https://github.com/woboinc/BookVolumePlus/wiki/Front-end-Development-Workflow

  16. thanks. :) bye. @djalmaaraujo