frontend.md

Front-end

1. Technologies
2. Development OS
3. IDE
4. Coding Conventions
5. Test-Driven Development
6. Preferred Libraries
7. Best Practices
8. Design And Markup
9. Search Engine Optimization
10. Google Analytics & other third-party services
11. Useful Links

Technologies

• Node.js v12.x.x (LTS)
• npm package manager for Node.js (deprecated; using in support projects)
• yarn package manager for Node.js
• Angular for complex Enterprise solutions
• Vue.js for simple-to-moderate complexity web sites
• Pug - HTML template engine
• Stylus - CSS preprocessor
• Webpack 4.x.x - JavaScript module bundler
• TypeScript 4.x.x - optional types, classes, and modules to JavaScript

Development OS

We don’t recommend use Windows as OS for development machines. We use latest Mac OS X or Ubuntu/Debian (long-term support releases are preferred).

IDE

• VSCode
• WebStorm

Coding Conventions

• JavaScript Style Guide
• Angular style guide
• CSS and SASS style guide
• Stylus style guide

Unit testing

• Jest

Preferred Libraries

• RxJS
• Underscore / lodash
• date-fns
• normalize.css
• For Angular
• For Vue.js

Best Practices

• Keep in mind that desktop web site is not a mobile app
• Keep in mind 300 milliseconds onClick delay in mobile devices' browsers
• Be careful with finding npm packages for your project and follow these rules:
  1. Check license.
  2. Evaluate indicators of quality, popularity and maintenance (good resource).
  3. Check size of package for project bundle (good resource).
  4. Save dependencies without automatic a major version bump.
  5. Periodically check for outdated dependencies (command npm outdated).

Design And Markup

Web sites that we develop should be responsive and adaptive by default.

We support these browsers:

Desktop:

• Edge - last 2 major versions
• Firefox - last 2 major versions, ESR
• Chrome - last 2 major versions
• Safari 12.0 and latest
• Opera - last 2 major versions

Mobile:

• Chrome - last 2 major versions
• Mobile Safari 12.0 and latest
• Android - last 2 major versions
• Samsung Internet 11.1 and latest
• UC Browser for Android 12.3 and latest

Search Engine Optimization

This section is not finished yet.

• Properly setup robots.txt file. See robotstxt.org
• Generate sitemap.xml file. See sitemaps.org
• Use tags: h1...h6, p, meta, title etc.

Google Analytics & other third-party services

Create separate third-party service ID constant for each environment (development, staging, production). Keep constants files out of repository.

Google Analytics:

• Test account - [email protected] (see on MLSDev Articles / Accounts) - create app google analytics for staging and development servers.
• Production account is to be provided/created by/for client

Firebase:

• Test account for staging and development servers - [email protected]
• Firebase integration guide (to be replaced on MLSDev Articles page)
• Production account is to be provided/created by/for client

Useful links

• Frontend Dev Bookmarks - a LOT of useful links
• Material Design Icons
• W3C
• The Twelve-Factor App