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
• bower package manager for web development (deprecated; using in support projects)
• AngularJS 1.7.х framework (deprecated; using in support projects)
• Angular 8.0.0 as main framework
• Pug - HTML template engine
• Stylus - CSS preprocessor
• Gulp - streaming build system (deprecated; using in support projects)
• Webpack 4.x.x - JavaScript module bundler
• Babel - JavaScript compiler
• TypeScript 3.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

• WebStorm (not required)

Coding Conventions

• JavaScript Style Guide
• Angular 1.x style guide (good article)
• Angular 8.x style guide
• CSS and SASS style guide
• Stylus style guide

Unit testing

Use these frameworks:

• Karma
• Jasmine

Preferred Libraries

• EventEmitter
• Underscore / lodash
• ui-router 1.x - routing in AngularJS
• ng-file-upload 12.x.x - Angular directive to upload files
• ngx-translate - The internationalization (i18n) library for Angular

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.

Screen sizes:

• Desktop min size: 1024x768
• Mobile min size: 320x480

We support these browsers:

Desktop:

• Internet Explorer 11
• 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 prerender.io
• 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
• AngularJS API Reference
• W3C
• The Twelve-Factor App