your-repo-name-here v2.0.0

Partner-ce-repository-template

Pre Requisites

• node ^v12.7.0

• yarn ^v1.15.0

  Fast, reliable, and secure dependency management.

The following package is just to be able to select and install the node version that we support: it's not required.

• nvm ^v0.33.2

Read carefully

We depend on ce-webpack library to build and get the project running for dev and prod purposes. For syncing our code with AWS S3 buckets, we are using a custom circleci configuration under our .circleci folder.

• CE-WEBPACK

These one library contains all of our dev dependencies, no other library should be required for ce-webpack to work.

Setup project locally

• Clone the repo.
• Open Git bash on root where “package.json” resides.
• Run the install command:

yarn install

• To start the dev env, run:

yarn start

Setting git defaults

git config core.eol lf

Commands

• Run the dev server:

yarn start

• Build the site for dev and QA:

yarn build:dev

• Build the site for prod:

yarn build:prod

Tools

• VS Code, Atom, Brackets IDE for development.
• Webpack imagemin library for image optimization
• Page optimization measure tool:
  • Google page speed (https://developers.google.com/speed/pagespeed/insights/)
  • Webpage test (http://www.webpagetest.org/)

Technologies

• HTML5
• SCSS
• Plain vanilla JavaScript with ES6
• Babel to convert ES6 to understandable code on browsers
• ES Lint and SCSS Lint
• React
• Webpack
• CircleCi (Automation)

Approach

• Kept third party library usage to minimal
• Wrote hand crafted styles to achieve responsiveness
• To speed up work, created local build system using webpack which takes care of minify, compression task and export files that need to push to server
• For images which need high resolution for desktop are separated to load on desktop and mobile/tablet devices so that unnecessary high res images are not loaded on devices
• Implemented lazy load for images which falls outside first load view port, with that approach images are not loaded initially. Images will be loaded whenever that section is visible. This will speed up DOM loading

Best Practices

• ES and SCSS lint is configured and files are scanned during development
• Kept media queries in separate file called “responsive.scss”, so that media query declaration will be declared only once and related css will be wrapped under that declaration

Optimization

• Enable compression and served JS, CSS, HTML files using gzip
• HTML, CSS, JS minify
• Optimized images to keep image size minimum to save users bandwidth and to speed up load time

Optimization we could not implement due to restriction

• Enabling static file caching option from server

Commit Message Format

• Your first commit:

  [tag]([application area | file]): [short message] [ticket number]

  tags are explained below

• A short message in sentence case.

• Ticket number from Jira.

  ex: fix(core): Api hostname AE-928

• All following commits should have a short description: PR comments: typos, lint, etc, fix bugs carrot, rm elmer hat

Tag your commit with one of the following:

• fix - for a bug fix.
• feat - implemented a new feature.
• update - for a backwards-compatible enhancement.
• breaking - for a backwards-incompatible enhancement or feature.
• docs - changes to documentation only.
• build - changes to build process only.
• upgrade - for a dependency upgrade.

Branching strategy

• Always branch of development.
• Branch name should belong to one of the tags in the commit section, and have a meaningful name:
  • feat/SAF-9999
  • update/tracker-api
  • build/production
  • fix/SAF-9900
  • fix/step-1 this is in case there is no ticket.
• If you are already working on your branch and development is updated, please rebase your code with the latest of development.

PRs process

• If your changes are related to new features, please use release/<branch-name> and merge all your work there.
• Follow the commit message format for the PR title, it should match your first commit.
• Add a meaningful description.
• Add all the tickets/tasks with the proper link to jira.
• Make use of our core/index.js to define all catchs for variables.
• After finishing your coding, be sure to run yarn build:dev and check for errors.

How to merge

All PRs merged to development should be made using MERGE COMMIT option. In github UI, find the option under the dropdown menu (hint: this is usually the default one).

• Check that the merge title is aligned with Commit Message Format, and leave the PR number in parenthesis. Eg.:

fix(core): Api catch QWE-123 (#90)

External Dependencies

For tracking purposes we require an external file located here: //files.ampush.io/js/.