Skip to content

Code Standards

Git

  • Ensure you're commiting changes with the Jira Task ID in your commit msg. You can use the prepare-commit-msg git hook to do this automatically by either:
    • Running the pnpm Script:
      Terminal
      pnpm run init:githooks
    • Manually copying the file:

Packages

  • The generator-quickstart/app/templates/ Directory structure should mirror the Miva server. The themes folder will sit relative to templates folder but should NOT be uploaded to the server.

PageSpeed

Goals:

  • TTFB <= 500ms
  • TTI <= 3sec
  • PageSpeed score > 90

Code Standards

Browser Support

  • Babel/PostCSS
    Terminal
    npx browserslist ">0.25%, not android < 5, not IE 11"
  • Manual QA List
    Terminal
    npx browserslist "cover 90% in US and last 1 version, not IE 11"

Testing

  • Manual Tests
    • Per Issue & Minor Release
      • Personal Unit Tests
      • Pod/Peer/Team Unit Tests
      • Automated Tests (coming soon)
    • Per Major Release
      • Integration tests
      • Cross browser tests
      • QA Team QA

Accessibility

  • Passing Axe and Lighthouse accessibility audits

Developer Workflow

Uses our implementation of GitFlow

JavaScript Strategies

  • JS Modules
  • jQuery/JS-Library Usage
    • Prefer Vanilla JS; except when it makes sense to leverage a library.
  • AJAX
    • Lean on vanilla JS (fetch){target=_blank} as much as we can, especially for the core files.
  • DOM Selection
    • Core framework JS files will use vanilla JS selectors to eliminate the need for a dependency in the core framework.
    • Use "js-" prefixed selectors & vanilla JS (ex. document.getElementsByClassName('js-foobar')) as opposed to jQuery Selectors ($('.js-foobar')) and Hook selectors ($.hook('foobar')/<span data-hook="foobar">)
    • Also instead of just using document.getElementsByClassName, consider using a more-specific document.getElementById('js-your-container').getElementsByClassName('js-your-elements') to increase the performance.

CSS Strategies

Further Reading

Resource Group Usage

  • Primarily only used for window.mivaJS and the Google Tag Manager window.dataLayer

Naming Conventions

The follow examples illustrate how "Lorem's Ipsum Dalor for ACME!" would be output in each scenario.

Pascal Case

Example: LoremsIpsumDalorForAcme

  • JavaScript class files

Camel Case

Example: loremsIpsumDalorForAcme

  • JavaScript files, functions, & variable names.

Kebab Case

Example: lorems-ipsum-dalor-for-acme

  • Markdown Files
  • CSS classes, file-names
  • npm packages
  • Directories
  • Repos

Snake Case

Example: lorems_ipsum_dalor_for_acme

  • Miva Variables
  • HTML Input names (ex. <input name="foo_bar">)
  • SASS variables names

Constant (Snake Case & All Caps)

Example: LOREMS_IPSUM_DALOR_FOR_ACME

  • Constants

BEMIT

  • CSS classes