Enterprise React at Scale

Explore

Frontend Guidelines (HTML/CSS/JS)
Frontend Guidelines (HTML/CSS/JS)

CSS/SCSS Architecture (system structure)

Framework Guides

Version Control (WIP)

FRONTEND TEAM ROLES

Accessibility

Performance (WIP)

Getting Started

Setup and installation (WIP)

Clone the repository

ReactComponentsLibs - Repos (visualstudio.com)⁠

⁠

Open in VScode

Install the recommended extensions when prompted

Run npm i to install all npm dependencies

Lerna bootstrap to symlink package and setup mono-repo if you run into problems with lerna bootstrap you may need to install globally to do this run npm i -g lerna

Read the setup guide for additional information

README.md - Repos (visualstudio.com)⁠

⁠

Read the guidelines

Frontend (HTML/CSS/JS)

HTML Guidelines

Use HTML semantic tags, avoid nested div’s (div soup) use semantic html to write you markup.

Define your page structure using the correct sections and outlines

Using_HTML_sections_and_outlines#Problems_solved_by_HTML5⁠

Reduce the use Html tables elements, table elements are not responsive, and it attached horizontal scrollbar on small devices, please use flexbox/css-grids whenever supported to reduce dependency on HTML tables

Variable names, HTML class names, HTML id names should be consistent across the project.

Refrain from creating ids to HTML elements when requirement is just to style HTML elements. Ids should be unique throughout the HTML page. So please check for the id-name if it is already assigned to some other HTML element.

Guidelines Deep Dive

⁠

Code Guide by @mdo⁠

- Standards for developing consistent, flexible, and sustainable HTML and CSS.

⁠

Learn Responsive Design⁠

- A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.

⁠

Layout patterns⁠

- A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.

⁠

Code Examples

(TBD)

⁠

Foundations

If you need more information on the guidelines or you're not comfortable with the subject matter, you can browse the following resources:

⁠

CSS Guidelines

Use Global scss/css styles at all times, do not inline styles

Use Dart Sass (sass) for writing SCSS files as

LibSass and Node Sass are deprecated⁠

When grouping selectors, keep individual selectors to a single line.

Include one space before the opening brace of declaration blocks for legibility.

Place closing braces of declaration blocks on a new line.

End all declarations with a semi-colon. The last declaration's is optional, but your code is more error prone without it.

Lowercase all hex values, e.g., #fff. Lowercase letters are much easier to discern when scanning a document as they tend to have more unique shapes.

Quote attribute values in selectors, e.g., input[type="text"].

They’re only optional in some cases⁠

, and it’s a good practice for consistency.

Avoid specifying units for zero values, e.g., margin: 0; instead of margin: 0px;.

When import CSS/SCSS files please use the @use as the @import rule is deprecated

The Sass team discourages the continued use of the @import rule. Sass will
gradually phase it out⁠
over the next few years, and eventually remove it from the language entirely. Prefer the
@use rule⁠
instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)

Don’t use @import for external css resources as it is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach.

Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future.

⁠
`CSS/SCSS Architecture (system structure)`⁠
⁠

The foundations of a solid CSS architecture can uphold the project as it begins to scale and grow. If these foundations have not been constructed properly, your project could likely fall over in the future.

CSS will not likely break the system as a JavaScript error might. However, it can create different issues that make working on the project very difficult. If you have a team of engineers who are not confident in adding or changing CSS in the project, they are more likely to introduce bugs. These bugs will find their way to your end-users, and the project’s success may be affected because of this.

Continue Reading⁠

⁠

Guidelines Deep Dive

(TDB)

⁠

Code Examples

(TBD)

⁠

CSS Foundations

If you need more information on the guidelines or you're not comfortable with the subject matter, you can read the following resources:

⁠

GitHub - sass/sass: Sass makes CSS fun!⁠

⁠

CSS Guidelines⁠

⁠

A user’s guide to CSS variables – Increment: Frontend⁠

⁠

GitHub - stylelint/stylelint: A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.⁠

⁠

GitHub - stylelint-scss/stylelint-scss: A collection of SCSS specific linting rules for Stylelint⁠

⁠

Defensive CSS - Ahmad Shadeed⁠

⁠

Learn CSS⁠

⁠

JavaScript

Adopt JavaScript EcmaScript6 best practices. Eg. Use ‘let’ over ‘var’. Use arrow functions. Specify data types.

Only insert JavaScript links in head of the document or above the closing body tag, inline <script/> tags will be rejected.

Use async or defer when loading JavaScript files in the header of your page.

Loading third party javascript efficiently ⁠

JQUERY, is/or probably was one of the most popular/useful JS libraries ever—however most of JQUERY functionality has been replaced by native JavaScript functions, as a results framework like bootstrap are replacing jQuery with native (vanilla) JavaScript.

youmightnotneedjquery⁠

. Avoid using JQuery whenever possible

Do not mix jQuery with reactive applications like Angular and Vue.js or React it is not necessary, please us framework API functions/features or vanilla JavaScript.

Check licensing and vulnerabilities for any JavaScript library or utility before use.

Please ensure that all imported javascript libraries are updated and monitored for security vulnerabilities

Guidelines Deep Dive

⁠

Developing Components in Isolation

Usually, in an app, you have a lot of UI components, and each of them has many different states. For an example, a basic button component could have the following states:

⁠

SEARCH UI-KIT⁠

(

https://blue-water-0db40cf10.azurestaticapps.net/⁠

⁠

React Styleguidist: Isolated React component development environment with a living style guide | React Styleguidist⁠

⁠

Developing Components in Isolation | Create React App⁠

⁠

Introduction to Storybook⁠

⁠

Code Examples

(TBD)

⁠

Foundations

If you need more information about the guidelines or you're not comfortable with the subject matter, you can browse the following resources

⁠

GitHub - standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixer⁠

⁠

Airbnb React/JSX Style Guide⁠

⁠

You Might Not Need jQuery⁠

⁠

jQuery considered harmful⁠

⁠

Timeline/Roadmap

FE/REACT Timeline 2

FE/REACT Timeline 2

General guidelines

HTML, CSS, JS Guidelines

React Guidelines

Code reviews, Accessibility, Performance Guidelined

RFC (Request for comments)

Security Best Practices (FE)

FE Team roles

Web/Online (SharePoint Site)

Implementation (FE Teams)

Oct 2023

Nov 2023

Dec 2023

Jan 2024

Feb 2024

Mar 2024

Apr 2024

May 2024

Jun 2024

Month

TodayFit

⁠

Add feature

⁠

View of Roadmap

View of Roadmap

Feature

Start Date

End date

Effort

Proprity

General guidelines

10/4/2021

11/29/2021

Small 🐜

Medium

HTML, CSS, JS Guidelines

10/25/2021

12/20/2021

Small 🐜

High

React Guidelines

11/1/2021

1/3/2022

Medium 🌴

High

Code reviews, Accessibility, Performance Guidelined

11/29/2021

1/17/2022

Medium 🌴

Medium

RFC (Request for comments)

1/5/2022

1/22/2022

Small 🐜

High

Security Best Practices (FE)

1/10/2022

1/31/2022

Medium 🌴

High

FE Team roles

12/27/2021

1/6/2022

Medium 🌴

Medium

Web/Online (SharePoint Site)

1/3/2022

1/31/2022

Medium 🌴

Low

Implementation (FE Teams)

12/27/2021

1/27/2022

Large ⛰

High

There are no rows in this table

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Frontend Guidelines (HTML/CSS/JS)Frontend Guidelines (HTML/CSS/JS)

Getting Started

Setup and installation (WIP)

Frontend (HTML/CSS/JS)

HTML Guidelines

Guidelines Deep Dive

Code Examples

Foundations

CSS Guidelines

⁠CSS/SCSS Architecture (system structure)⁠⁠

Guidelines Deep Dive

Code Examples

CSS Foundations

JavaScript

Guidelines Deep Dive

Code Examples

Foundations

Timeline/Roadmap

Frontend Guidelines (HTML/CSS/JS)
Frontend Guidelines (HTML/CSS/JS)

⁠
`CSS/SCSS Architecture (system structure)`⁠
⁠