Skip to content
Enterprise React at Scale
Enterprise React at Scale (project brief)
Enterprise Frontend/React - Best Practices (DRAFT)
Priority list
Design to-do list with Figma
Frontend Guidelines (HTML/CSS/JS)
More
Share
Explore
Getting Started
Setup and installation (WIP)
Clone the repository
⁠
⁠
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
⁠
⁠
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
⁠
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
⁠
⁠
- Standards for developing consistent, flexible, and sustainable HTML and CSS.
⁠
⁠
- A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.
⁠
⁠
- 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
⁠
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"].
⁠
, 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
⁠
over the next few years, and eventually remove it from the language entirely. Prefer the
⁠
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.
⁠
⁠
⁠
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.
⁠
⁠
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:
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
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.
⁠
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.
⁠
. 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:
⁠
⁠
(
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠

⁠
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
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
⁠
Timeline/Roadmap
FE/REACT Timeline 2
3
Search
Oct 2021 - Feb 2022
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 2021
Nov 2021
Dec 2021
Jan 2022
Feb 2022
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)
⁠

⁠
Add feature
⁠
⁠
View of Roadmap
3
Search
Feature
Start Date
End date
Effort
Proprity
1
General guidelines
10/4/2021
11/29/2021
Small 🐜
Medium
2
HTML, CSS, JS Guidelines
10/25/2021
12/20/2021
Small 🐜
High
3
React Guidelines
11/1/2021
1/3/2022
Medium 🌴
High
4
Code reviews, Accessibility, Performance Guidelined
11/29/2021
1/17/2022
Medium 🌴
Medium
5
RFC (Request for comments)
1/5/2022
1/22/2022
Small 🐜
High
6
Security Best Practices (FE)
1/10/2022
1/31/2022
Medium 🌴
High
7
FE Team roles
12/27/2021
1/6/2022
Medium 🌴
Medium
8
Web/Online (SharePoint Site)
1/3/2022
1/31/2022
Medium 🌴
Low
9
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.