Table of Contents

List of Figures............................................................................................................................I
1. Front-End Team:...............................................................................................................2
A. Used Frameworks/Technologies/tools/libraries:..........................................................2
B. Naming Convention:.....................................................................................................2
C. Questions......................................................................................................................2
D. Answers........................................................................................................................3
I. React JS.....................................................................................................................3
II. Angular......................................................................................................................4
III. Tailwind..................................................................................................................4
IV. Bootstrap.................................................................................................................5
V. Naming Conventions.................................................................................................5
VI. Jest..........................................................................................................................5
VII. Mocha/Jasmine.......................................................................................................5
VIII. React Docgen......................................................................................................6
References.................................................................................................................................7

List of Figures
Figure 1: Stack overflow survey on most common web technology........................................3
Figure 2: Ranking of Usage Over Time....................................................................................4

|Page
1. Front-End Team:

A. Used Frameworks/Technologies/tools/libraries:
ReactJs. (Java script library)
Tailwind. (CSS Framework)
Npm. (Package Manager)
Jest. (Testing)
React Docgen. (Document Generator)

B. Naming Convention:
Files, Components: Pascal Case
Components instances: camelCase
CSS classes: flat case (all lowercase)
Constants: Screaming Snake case (Ex: API_URL)
Utility functions: camelCase
Props: camelCase & Pascal Case for React Components
Variables: camelCase
Handlers: handleEvent or handleComponentEvent (e.g. handleCommentSubmit)

C. Questions
Why did we use React?
Why not Angular?
Why Tailwind?
Why not Bootstrap?
Why those naming convention?
Why Jest for unit testing?
Why not Mocha/Jasmine for unit testing?
Why Docgen?

2|Page
D. Answers

I. React JS
React is a wide used Java script library our current life, we chose it based on the
facilities the library will give us technically for this project, and what it will give as an
experience, such experience can help us in the market nowadays, we will first take a
look on the market analysis of front-end developers.

 Market analysis

Figure 1: Stack overflow survey on most common web technology

According to Figure (1), React is the most popular front-end library. It has a large
community and ecosystem.
According to Figure (2), you can see that React is widely used nearly 80% of the
Front-end developers use, either in work, school, or for freelancing.
React has a large and active community, with over 1.5 million contributors on GitHub.
This means that there is a wealth of resources available to React developers, including
tutorials, documentation, and libraries.
Based on LinkedIn data and industry research, React is the most popular and in-
demand front-end technology.

3|Page
 Figure 2: Ranking of Usage Over Time

 Technical Analysis
React's component-based architecture enables developers to break down their user
interfaces into small, reusable components. This makes it easier to develop, maintain,
and scale large and complex UIs.
React has a shallow learning curve and most of us have already started learning it
React uses a virtual DOM, which is a lightweight representation of the actual DOM.
This allows React to efficiently update the UI when there is a change in the data
without having to redraw the entire page. This makes React apps fast and responsive.

II. Angular
React apps are generally faster than Angular apps because of the virtual DOM.
React is fast, efficient, and is growing in popularity because it is lightweight and
suitable for mobile native.

III. Tailwind
Utility-first approach: Tailwind CSS uses a utility-first approach, which means that it
provides a set of low-level CSS utility classes that can be combined to create any
design. This means a lot of control over CSS and makes it easy to create custom
designs.
4|Page
IV. Bootstrap
Bootstrap uses a component-based approach, which means that it provides a set of pre-
built CSS components. This can make it easier to get started with Bootstrap, but it can
also be less flexible in some cases.
Bootstrap comes with a built-in design system that can be difficult to customize.
Tailwind CSS is generally faster than Bootstrap. This is because Tailwind CSS
produces smaller and more efficient CSS files.
Tailwind CSS is easier to learn than Bootstrap. This is because Tailwind CSS has a
simpler and more intuitive API.

V. Naming Conventions
We searched some articles and found that these are the most famous best practices by
experienced people, you will find in the references those articles.

VI. Jest
Jest comes with built-in features like mocking, code coverage, and snapshot testing, so
we don't need to set up additional tools or configurations to start writing tests.
It has gained significant popularity in the React community. As a result, it has a large
and active community that can provide support, share best practices, and contribute to
the tool's development.
It has a "zero configuration" philosophy, meaning it works well with React projects
out of the box without requiring extensive setup. It automatically detects your test files
and runs them, making it easier to get started with testing.

VII. Mocha/Jasmine
Jest has a simpler and more intuitive API compared to Mocha and Chai. They provide
a declarative and straightforward syntax that makes it easier to write and read tests.
Jest is an all-in-one testing framework with features like mocking, assertion, and code
coverage analysis, While Mocha is a more lightweight framework that focuses on
providing a flexible test runner and letting you choose your assertion library and
mocking library.
While both Jest and Jasmine are capable testing frameworks, Jest may be a better
choice for more complex testing scenarios due to its richer feature set and faster
execution speed.

5|Page
VIII. React Docgen
React Docgen automates the process of generating documentation for components.
saving us the time of writing and maintaining documentation manually.
The generated documentation from React Docgen provides a clear and standardised
format for understanding and using the components. It includes information about
props, prop types, default values, and other relevant details.

6|Page
References
Ijharb. (2023, may 15). Airbnb React/Jsx style Guide. Retrieved from github:
https://github.com/airbnb/javascript/tree/master/react
Onome, D. (2023, January 26). Angular vs. React: The Difference and Which Framework to
Choose. Retrieved from ninetailed: https://ninetailed.io/blog/angular-vs-react/
R.C., S. (2023, April 17). Jest vs Mocha vs Jasmine. Retrieved from Browserstack:
https://www.browserstack.com/guide/jest-vs-mocha-vs-jasmine
Sacha Greif, E. B. (2022, December 22). front-end frameworks. Retrieved from
2022.stateofjs: https://2022.stateofjs.com/en-US/libraries/front-end-frameworks/
Santos, K. (2022, December 4). 10 React Naming Conventions Best Practices. Retrieved
from climbtheladder: https://climbtheladder.com/10-react-naming-conventions-best-
practices/
Stack overflow. (2023, October 19). 2023 Developer survey. Retrieved from stackoverflow:
https://survey.stackoverflow.co/2023/#overview
Velkov, K. (2023, June 18). React JS - Naming Convention. Retrieved from Linkedin:
https://www.linkedin.com/pulse/react-js-naming-convention-kristiyan-velkov/
Wallis, J. (2022, October 10). TailWind CSS Vs Bootstrap: What’s The Difference & Which
One Is Best? Retrieved from intuji: https://intuji.com/tailwind-css-vs-bootstrap-which-
one-is-best/

7|Page