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 v6.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.5.х as main framework (deprecated; using in support projects)
• Angular 5.x.x as main framework
• Pug - HTML template engine
• Stylus - CSS preprocessor
• Gulp - streaming build system (deprecated; using in support projects)
• Webpack 2.x.x - JavaScript module bundler
• Babel - JavaScript compiler
• TypeScript 2.x.x - optional types, classes, and modules to JavaScript

Development OS

We don’t 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 4.x 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

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

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 web browsers:

• Internet Explorer 11+
• Latest Google Chrome
• Latest Apple Safari
• Latest Mozilla Firefox

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

Useful links

• Frontend Dev Bookmarks - a LOT of useful links
• Material Design Icons
• AngularJS API Reference
• W3C
• ngmodules.org - find modules for AngularJS
• The Twelve-Factor App