Gigachat

Project Proposal
SWE Team 1

A twitter clone project

TABLE OF CONTENTS
Backend Technologies 1
Used Frameworks | DBMS | Libraries 2
Naming Conventions 3
Why did we choose NodeJS? 3
Why not Django? 4
Why Express? 4
Why not NestJS? 4
Why not SQL? 4
Why NoSQL? 4
Why MongoDB not Cassendra? 4
Why these naming conventions? 4
Unit testing 3
1. Front-End Team:
A. Used Frameworks/Technologies/tools/libraries:
B. Naming Convention:
C. Questions
D. Answers
I. React JS
II. Angular
III. Tailwind
IV. Bootstrap
V. Naming Conventions
VI. Jest
VII. Mocha/Jasmine
VIII. React Docgen
1
BACK-END TECHNOLOGIES

USED FRAMEWORKS | DBMS | LIBRARIES

- NodeJS (JavaScript runtime environment)
- NPM (Package Manager)
- MongoDB (database management system)
- Mongoose (library built on top of Mongo)
- Jest (Testing)

NAMING CONVENTIONS
- Files, Components: PascalCase
- Components instances: camelCase
- CSS classes: flat case (all lowercase)
- Constants: Screaming_Snake_case (Ex: API_URL)
- Utility functions: camelCase
- Props: camelCase & PascalCase for React Components
- Variables: camelCase
- Handlers: handleEvent or handleComponentEvent (e.g. handleCommentSubmit)

WHY DID WE CHOOSE NODEJS?

- According to the Stack Overflow Developer Survey 2023, NodeJS is the most popular back-end
library, with 42.65% of respondents saying they use it. It is also the most wanted front-end
library, with 35.25% of respondents saying they would like to learn it.

2
 - Node.js comes with NPM, a powerful package manager that provides access to a vast
ecosystem of open-source libraries and frameworks.

- Node.js is built on an event-driven, non-blocking I/O model, making it efficient for

handling concurrent connections and building scalable applications.

- Node.js has a large and active community of developers, providing resources, tutorials,
and support.

WHY NOT DJANGO?

- Unable to handle multiple requests at once while Nodejs can do which our project need.
- DJANGO'S PERFORMANCE IS LOW COMPARED TO MORE LIGHTWEIGHT FRAMEWORKS.
THIS CAN BE A CONCERN FOR APPLICATIONS THAT REQUIRE EXTREMELY HIGH
PERFORMANCE OR HAVE STRICT LATENCY REQUIREMENTS.

WHY EXPRESS?
- Simplicity: Express offers a minimalist and intuitive API, allowing developers to focus on clean
and concise code without unnecessary complexity.
- Middleware: Express has a robust middleware system for adding modular and reusable
functionality to applications, such as request parsing, authentication, and error handling.
- Routing: Express provides a flexible routing system for handling different types of requests and
implementing RESTful APIs, with support for route parameters and query parameters.
- Integration with Node.js ecosystem: Express seamlessly integrates with other Node.js modules
and libraries, leveraging the vast ecosystem of packages and tools available.
- Performance: Express is lightweight, efficient, and designed for high concurrency, making it
suitable for large-scale applications and performance optimization techniques.

WHY NOT NESTJS?

- Performance Overhead: Due to its additional abstractions and features, NestJS may introduce a
slight performance overhead compared to Express.js. The additional layers of abstraction and
the use of decorators and dependency injection can impact the overall performance of the
application, especially in high-performance scenarios.

WHY NOT SQL?

- Rigidity of Schema: SQL databases require a predefined schema, making it inflexible for
evolving or dynamic data structures.
- Scalability Challenges: Scaling SQL databases horizontally can be complex, especially with
large data or high traffic loads.
- Performance Impact of Joins: Complex joins on large datasets can impact performance and
require careful optimization.
3
 - Limited Support for Unstructured Data: SQL databases are not well-suited for handling
unstructured or semi-structured data.
- Lack of Flexibility in Data Modeling: SQL databases enforce a rigid structure defined by the
schema, making it challenging to accommodate changes in data requirements.
- In our project we need flexible schema, high performance DBMS

WHY NOSQL?
- Flexible Data Model: NoSQL databases offer a flexible schema-less design, accommodating
unstructured or evolving data structures.
- Scalability: NoSQL databases scale horizontally, distributing data across multiple servers for
handling large amounts of data and high traffic loads.
- High Performance: NoSQL databases prioritize performance, optimizing read and write
operations for fast data retrieval and processing.
- Schema-less Design: NoSQL databases eliminate rigid schemas, allowing for easier data
modeling and manipulation.
- Our Project doesn’t need very complex queries which is the best advantage of SQL.

WHY MONGODB NOT CASSENDRA?

- Complexity of Data Modeling: Cassandra's data modeling can be more complex compared to
MongoDB. It requires careful consideration of data partitioning, denormalization, and query
patterns to optimize performance. MongoDB, on the other hand, offers a more straightforward
and flexible data model.
- Limited Querying Flexibility: Cassandra's query language (CQL) is designed for distributed
databases and may have limitations in terms of querying flexibility compared to MongoDB's rich
query language. MongoDB provides a wider range of querying operations, including advanced
filtering, sorting, and aggregation capabilities.

WHY THESE NAMING CONVENTIONS ?

- We searched some articles and found that these are the most famous best practices by
experienced people
- These are the links:
- https://climbtheladder.com/10-react-naming-conventions-best-practices/
- LinkedIn
- javascript/react at master · airbnb/javascript (github.com)

UNIT TESTING
Why Jest?
4
 - 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.
Why not other testing tools e.g. 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.
- Source: www.browserstack.com/guide/jest-vs-mocha-vs-jasmine

FRONT-END TECHNOLOGIES

Used Frameworks/Technologies/tools/libraries:
ReactJs. (Java script library)

Tailwind. (CSS Framework)

Npm. (Package Manager)

Jest. (Testing)

React Docgen. (Document Generator)

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
5
Handlers: handleEvent or handleComponentEvent (e.g. handleCommentSubmit)

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?

Answers
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

6
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.

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.
7
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.

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.

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.

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.

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.

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.
8
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.