Coding Standards - Wollets :)

Coding Standards on Front-end for BVTeam.

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 = “”;
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