Skip to content

Update front-end development standards #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 28, 2020
Merged

Update front-end development standards #27

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 35 additions & 21 deletions platform/frontend/frontend.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,23 +15,23 @@

## Technologies

* [Node.js](https://nodejs.org/en) v6.x.x (LTS)
* [Node.js](https://nodejs.org/en) v12.x.x (LTS)
* [npm](https://www.npmjs.com) package manager for Node.js _(deprecated; using in support projects)_
* [yarn](https://yarnpkg.com/) package manager for Node.js
* [bower](http://bower.io) package manager for web development _(deprecated; using in support projects)_
* [AngularJS](https://angularjs.org) 1.5.х as main framework _(deprecated; using in support projects)_
* [Angular](https://angular.io/) 5.x.x as main framework
* [AngularJS](https://angularjs.org) 1.7.х framework _(deprecated; using in support projects)_
* [Angular](https://angular.io/) 8.0.0 as main framework
* [Pug](https://pugjs.org) - HTML template engine
* [Stylus](http://stylus-lang.com/) - CSS preprocessor
* [Gulp](http://gulpjs.com) - streaming build system _(deprecated; using in support projects)_
* [Webpack](https://webpack.js.org/) 2.x.x - JavaScript module bundler
* [Webpack](https://webpack.js.org/) 4.x.x - JavaScript module bundler
* [Babel](https://babeljs.io/) - JavaScript compiler
* [TypeScript](https://www.typescriptlang.org/) 2.x.x - optional types, classes, and modules to JavaScript
* [TypeScript](https://www.typescriptlang.org/) 3.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).
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
Expand All @@ -43,7 +43,8 @@ We don’t use Windows as OS for development machines. We use latest Mac OS X or

* [JavaScript Style Guide](https://github.com/airbnb/javascript)
* [Angular 1.x style guide](https://github.com/rwwagner90/angular-styleguide-es6) (good [article](https://www.sitepoint.com/writing-angularjs-apps-using-es6/))
* [Angular 5.x style guide](https://angular.io/docs/ts/latest/guide/style-guide.html)
* [Angular 8.x style guide](https://angular.io/docs/ts/latest/guide/style-guide.html)
* [CSS and SASS style guide](https://github.com/airbnb/css)
* [Stylus style guide](https://github.com/skyout/stylus-styleguide)


Expand All @@ -60,34 +61,44 @@ Use these frameworks:
* [Underscore](http://underscorejs.org) / [lodash](https://lodash.com)
* [ui-router](https://ui-router.github.io/ng1/) 1.x - routing in AngularJS
* [ng-file-upload](https://github.com/danialfarid/ng-file-upload) 12.x.x - Angular directive to upload files
* [ngx-translate](http://www.ngx-translate.com) - 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](http://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices) in mobile devices' browsers
* Be careful with finding npm packages for you project and follow these rules:
1. Check license.
2. Evaluate indicators of quality, popularity and maintenance (good [resource](https://npms.io)).
4. Check size of package for project bundle (good [resource](https://bundlephobia.com/)).
3. Save dependencies without automatic a major version bump.
4. 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:
#### Screen sizes:
* Desktop min size: 1024x768
* Mobile min size: 320x480

We support these web browsers:
#### We support these browsers:
Desktop:
* Internet Explorer 11
* Edge 16
* Firefox 59
* Chrome 64, 65, 66
* Chrome for Android 66
* Desktop Safari 11, 11.1
* Mobile Safari 10.3, 11.2, 11.3
* Opera 52
* Android Browser 4.4
* Samsung Internet 6.2
* UC Browser for Android 11.8
* 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
Expand All @@ -109,12 +120,15 @@ 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](https://docs.google.com/document/d/1qobl-BeepjCSQz8AxA8EpMsSiAnx4vX86CDc-NZSjJE) _(to be replaced on MLSDev Articles page)_
* Production account is to be provided/created by/for client

## Useful links

* [Frontend Dev Bookmarks](https://github.com/dypsilon/frontend-dev-bookmarks) - a _LOT_ of useful links
* [Material Design Icons](https://materialdesignicons.com)
* [Material Design Icons](https://material.io/resources/icons)
* [AngularJS API Reference](https://docs.angularjs.org/api)
* [W3C](http://w3.org)
* [ngmodules.org](http://ngmodules.org) - find modules for AngularJS
* [The Twelve-Factor App](http://12factor.net/)