JS and React popular frameworks

reactFrameworks.md

Learning Objectives

The objective of this discussion is to expose you to some of the popular frameworks that are built on top of JavaScript or React. The goal is not for you to know how to use these, but simply understand what their intended usage is in case you want to use it at some point in time.

For each of these, I want you to answer the following questions for the class:

1. Why does this exist? Why did people spend hundreds of hours of their time to build this?
2. For what types of projects would you use this for?

Questions

1. Gatsby
2. Storybook
3. Svelte
4. i18n.js
5. MathJax / KaTeX
6. D3.js
7. Formik
8. react-hotkeys
9. Frontity
10. React Query
11. Redux

Sara jouma , Nour kayyali, Dana Alsiddig, Jana AbuHaltam

1. Gatsby:
   Gatsby is a powerful tool that can help developers to build high-performance, SEO-friendly, and scalable websites
   Gatsby is mainly used to build static websites, Progressive Web Apps, and even Electron apps. However, it’s also well-suited for building blogs and other content-heavy websites.

2.Storybook:
An open-source tool for UI development. The tool enables developers to showcase the interaction of the components in an isolated development environment, making it easier to test and debug the components and collaborate with fellow developers.
It can be used for applications with complex user interfaces.

3.Svelte:
Svelte is a modern JavaScript framework used to build static web apps that are fast, lean, and are fun for developers to use.
However, Svelte’s main intuition, and its biggest difference from all the other popular JavaScript frameworks, is that it moves most of the processing to a compilation stage. That is, rather than relying on large and complex libraries loaded at run time, Svelte is built around a compiler that processes your application’s code before emitting a small, fast, and optimized code bundle.

4. i18n.js:
   i18next is an internationalization-framework written in and for JavaScript.
   Most frameworks leave it to you how translations are being loaded. You are responsible to detect the user language, to load the translations and push them into the framework.
   i18next takes care of these issues for you. We provide you with plugins to:
   detect the user language, load the translations, optionally cache the translations
   extension, by using post-processing
   and it uses for all projects that required multi-languages supports

5.MathJax / KaTeX:
Is a cross-browser JavaScript library that displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup. MathJax is released as open-source software under the Apache License.
It used for Educational websites, research, and scientific publications.

6.D3.js:
It is an open-source JavaScript library that is used for manipulating documents based on data. It produces dynamic visualizations of data for the web. D3.js provides the building blocks for displaying data through colorful charts, graphs, and maps – instead of boring text and spreadsheets.
It used in dashboards, infographics, interactive charts.

7.Formik:
is a popular open-source library for building and processing complex form data in React applications such online shopping for account creation. it provides a convenient way to manage form state, validation, and submission.

8.react-hotkeys:
Is a library that can be used to add keyboard shortcuts to any type of React application. It is a good choice for developers who want to make their applications easier and faster to use.

9.Frontity:
Is framework is to help people build performant, scalable websites with WordPress and React easily by using WordPress REST API to fetch the data from your WordPress site (PHP server) and renders it in your React frontend (Node. js server).
It used in News websites , E-commerce websites , Portfolio websites, Blog websites

10.React Query:
is a powerful data synchronization library for React that solves these problems. It provides you with a set of hooks that you can use to fetch, cache, and update data in your React and Next.js applications.
It used in application that required a lot of complex data fetching.

11.Redux:
Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments, and are easy to test and it solves the state transfer problem by storing all of the states in a single place called a store.
It used in games, e-commerce, and large scale web apps.

Team members: Sara Jouma, Nour Kayyali, Jana AbuHaltam, ( and me :D )

Gatsby: Its a static site generator that simplifies and enhances the development of content-driven websites where content and SEO are important. It could be used for portfolios, e-commerce, and blog websites.

Storybook: Development environment for UI components. It makes it easier for developers to make, test, and showcase individual UI components. It can be used for applications with complex UIs.

Svelte: A framework, that provides an efficient and simple way to build web applications, Svelte can be used to develop small pieces of an interface or whole applications.

i18n.js: A library, used for internationalization and localization, and to facilitate the process of adapting a software application to different languages and regions. Can be used for websites and mobile apps with a global audience.

MathJax / KaTeX: Libraries used to make it easier to display math equations and symbols in a web application. Educational websites, research, and scientific publications.

D3.js: A data visualization library, that helps developers create interactive and dynamic data visualizations using HTML, SVG, and CSS. Used for projects that involve complex data visualizations, such as dashboards, infographics, interactive charts, research etc etc.

Formik: A library that handles forms in React applications. Simplifies form management, validation, and form state handling in React. Can be used in user registration.

react-hotkeys: A library used for handling keyboard shortcuts in React applications. Can be found in many web applications, games, or productivity tools

Frontity: A framework, used to combine the power of WordPress as a content management system with the flexibility and performance of React. Used in projects that rely on WordPress as a CMS, and SEO-dependent web applications, like e-commerce.

React Query: A library, used for managing, caching, and synchronizing server state in React applications. It streamlines data fetching and state management. Used in projects that require real-time data updates, caching, and API interactions, such as social media apps, e-commerce, etc.

Redux: A state management library for JavaScript applications, commonly used with React. It centralizes and manages applications state, making it predictable and easier to debug. Used for stateful applications where you need to manage and synchronize the state across different parts of the application, such as games, e-commerce, and large scale web apps.

Room #6
Team Members: Lunar Salameh, Diala Abdealqader, Mo'mena, jafar bino.

1. Gatsby:
   The Gatsby framework exists as a modern website development framework primarily designed to create high-performance websites and applications.
   Gatsby provides development teams as an open-source front end framework for creating dynamic, blazing-fast websites, as it also has all the tools for building the modern web, plugins, Performant react-based runtime for the framework, as it makes the hardest parts of building an amazing digital experience simple.

2. Storybook:
   Storybook exists as a workspace for crafting the building blocks of a website's user interface, much like a potter shapes each piece of clay separately. It gives developers the power to focus on one piece at a time, ensuring each part is perfect before assembling the whole pottery collection. This way, every button, menu, and dialog box can be fine-tuned to look and work just right, alone and together.

You'd want to use Storybook when you're working on a big digital project that needs all its visual and interactive elements – the digital decor, so to speak – to match and work together seamlessly. It's ideal for teams who are piecing together the complex puzzle of a website's interface, making sure every piece is just right before slotting it into place.

3. Svelte
   Why does this exist? Why did people spend hundreds of hours of their time to build this?
   Reducing Bundle Size
   Eliminating the Virtual DOM
   Moving Work to Build Time
   Built-in Transitions and Animations
        2. For what types of projects would you use Svelte for
   Single-Page Applications
   Projects with Animation Requirements
   Projects with Existing APIs
   Learning and Educational Projects: Svelte's design and concepts, such as 
   reactivity and the absence of a virtual DOM

4. i18n.js
   Why does this exist? i18n.js is a library that facilitates internationalization (i18n) and localization (l10n) in JavaScript applications. It simplifies the process of translating web applications into multiple languages, making them accessible to a global audience.
   People spent significant amounts of time developing i18n.js because:
   Global reach and accessibility
   Cultural sensitivity and inclusivity
   Market expansion and competitiveness
   User experience enhancement
   For what types of projects would you use this for? i18n.js is essential for projects that target an international audience and require language translation and localization support. It is particularly useful for applications that serve users from diverse linguistic backgrounds and cultures,You would use i18n.js for projects such as:
   E-commerce websites targeting international customers.
   Multinational corporate applications and communication platforms.
   Educational platforms serving students and educators from diverse language backgrounds.
   Social media platforms catering to users from different linguistic and cultural contexts.
   Content platforms and digital publishing websites with a global audience.

5. MathJax and KaTeX:
   serve as the web's mathematicians, translating the intricate language of math into visual form that can be clearly understood when viewed online. They ensure that the complex equations and symbols look crisp and precise on-screen, just as they would on paper.

You'd call on these libraries for projects that revolve around learning or research, such as scholarly platforms, online education portals, or any digital space where math is the star of the show and needs to be presented with textbook accuracy.

6. D3.js
   Why does this exist? D3.js is a powerful JavaScript library for manipulating documents based on data. It exists to facilitate the creation of dynamic and interactive data visualizations in web browsers, enabling developers to create custom, data-driven visualizations easily.People invested considerable time and effort in building D3.js due to several key reasons and motivations, as highlighted below:
   Lack of comprehensive alternatives
   Growing demand for data visualization
   Enhancing user engagement and comprehension
   Empowering customization and creativity
   Driving innovation and research for what types of projects would you use this for? D3.js is particularly suitable for projects that involve data visualization and interactive graphics, such as data dashboards, data analysis tools, and any application where data representation in the form of charts, graphs, and diagrams is crucial.

7. Formik:
   People spend a considerable amount of time building libraries and frameworks like Formik because they aim to solve common problems and streamline specific tasks in software development. so Formik is a popular form management library in react, its primary purpose is to manage the state of form elements, validation, and form submission, reducing the complexities associated with handling forms in React.
   As for the project, Formik is used in any react project that involves form input, regardless of complexity, we can benefit from it to simplify form management, validation and submission.

8. react-hotkeys
   The react-hotkeys library exists to provide a simplified and efficient way to manage keyboard shortcuts in React applications. It was developed to streamline the process of handling keyboard events and creating keyboard shortcuts within React-based projects.
   In essence, react-hotkeys can be applied to a variety of web applications and platforms where providing users with the ability to use keyboard shortcuts offers a more efficient and user-friendly experience, allowing them to navigate, interact, and perform actions quickly and seamlessly within the application.

9. Frontity
   Frontity is built specifically for headless WordPress websites using React. people invested time in building Frontity to create an efficient and user-friendly way of combining the benefits of React with WordPress, enabling developers to build fast and friendly websites while simplifying the development process through a well-structured and specialized framework.

Some examples of projects where Frontity can be a valuable choice include: Frontity is ideal for content-heavy websites such as news portals, blogs, online magazines, and publishing platforms that rely on frequent content updates and require fast loading times. In addition to Businesses and corporate entities that use WordPress for their content management can utilize Frontity to build their websites with an enhanced user experience. also, Platforms offering exclusive content, memberships, or subscriptions.

10. React Query
    React Query acts like a personal shopper for your app's data. Just as a shopper expertly picks out items from various stores, React Query fetches data from different servers. It remembers what it fetched before (caching), checks for the latest versions (updating), and keeps everything running smoothly with less work for the developer.

You'd want to use React Query in your app's digital toolbelt if your app is like a bustling newsroom where the latest information is always coming in and needs to be displayed accurately, like in a content management system or a dashboard that tracks user data. It's all about keeping the information fresh and your app's performance zippy.

11)Redux:
Redux is like the conductor of an orchestra, ensuring that every section and instrument (parts of your app) comes in at the right time and in harmony. It was crafted to take the confusion out of managing the many pieces of information that flow through a complex app. Just like a conductor leads the performance with a clear plan, Redux leads the flow of data with clear rules, so developers know what's happening at every moment.

You'd bring in Redux for the big, intricate web concerts – applications that are like symphonies with many instruments playing together. Think of sprawling apps where many things happen at once, like a social network, a complex game, or a finance tracker. In such projects, you want that single conductor, Redux, to keep the music playing sweetly, without missing a beat.

Teammates: Hayder, Noor Alrai, Hakeema, Musab

Gatsby: Gatsby exists to provide developers with a fast, efficient, and scalable framework for building websites and web applications using modern web technologies. Gatsby is used for blogs, personal websites, business sites, e-commerce platforms, documentation sites, and web applications, thanks to its speed, flexibility, and performance optimizations.

Storybook: Is useful for testing out UI components, as it lets developers test out components is isolation. And it runs outside of the applications, and so other components won't be affected by the behaviour of the tested components. Storybook can be used to developed and showcase individual UI, and it is also useful for large projects with many components.

Svelte: Exists as a front-end framework for building efficient web applications. People invest time in it due to its simplicity and ease of use, allowing for faster development and better performance. It's ideal for various projects, including interactive websites, single-page applications, and web applications requiring smooth user experiences.

i18n.js: Simplifies the process of internationalization (i18n) in JavaScript applications. It enables developers to handle multilingual content and translations, making it easier to create applications that cater to diverse language and regional preferences. i18n.js is used for projects that require support for multiple languages and cultures. It's commonly employed in web applications, mobile apps, and software applications where content and user interfaces need to be adapted for different languages and regions.

MathJax / KaTeX: are both JavaScript libraries used to render mathematical notation, including LaTeX-style mathematical formulas and equations, on web pages. They are used in projects that involve scientific, technical, or educational content. They are commonly used in academic websites, e-learning platforms, research publications, and any other applications where mathematical equations or notation need to be displayed accurately and attractively.

D3.js: Exists to help developers create interactive and data-driven visualizations in web browsers. It provides a powerful set of tools for manipulating documents based on data, allowing the creation of dynamic and engaging charts, graphs, and visual representations of data. commonly used in data analytics applications, dashboards, interactive reports, and any project where complex data sets need to be presented visually and interactively on the web.

Formik: exists to simplify form management in React applications. It provides an easy-to-use and efficient way for developers to handle form validation, submission, and error handling, reducing the complexity of managing form state in React components. Formik can be used in websites, web applications, and online forms where user input needs to be collected, validated, and processed.

react-hotkeys: Is used to manage keyboard shortcuts and hotkeys in React applications. It simplifies the process of defining and handling keyboard shortcuts, allowing you to create a more efficient and user-friendly interface for keyboard-driven interactions. It is used where users need quick access to specific features or actions without relying solely on mouse interactions, improving accessibility and user efficiency.

Frontity: is a React-based framework for building headless WordPress themes. It simplifies the development of WordPress-powered websites by providing a modern and efficient way to create fast and dynamic front-end experiences using React.js. Frontity is specifically designed for projects that rely on WordPress as a content management system (CMS).

React Query: Is used to simplify data fetching and state management in React applications. It provides a powerful and intuitive solution for managing asynchronous operations, such as API calls, caching, and data synchronization, enhancing the developer experience and improving the performance of React applications. React Query is used for projects that require efficient data fetching and management, including single-page applications, complex web applications, and interactive websites. It is valuable for applications that rely heavily on real-time data, as well as projects where responsive and seamless user experiences are essential.

Redux: is an open-source JavaScript library commonly used for state management in complex web applications, particularly those built with frameworks like React, Angular, and Vue. It provides a predictable and centralized way to manage the state of your application and helps you maintain data consistency and make state updates more manageable. Redux is used in a wide range of projects, especially those with demanding state management requirements, and it is suitable for applications where multiple components need access to shared state, enabling a consistent and predictable way to manage application data flow.

lina abumahfood, Wajd al-kayyali, Sanad alshobaki, Rama alzeer
1- Gatsby
Used to generate static websites and provides excellent performance and SEO benefits.
Projects: content website, e-commerce, Portfolio Websites also for Documentation.

2- Storybook:
A development environment for UI components. It creates and tests UI components in isolation, making it easier to maintain and share design systems.
Projects: drawing UI sketches, Component Library Development also for UI documentation.

3- Svelte
A JavaScript framework people are using it for its simplicity and performance, as it doesn't require a virtual DOM.
Projects: Single-Page Applications and SSR (Apps with Server-Side Rendering)

4- i18n.js
A library that allows us to have websites for different languages and regions.
Projects: multilingual websites.

5- MathJax / KaTeX
libraries exist to render mathematical equations.
Projects: E-learning websites: University websites.

6- D3.js
Stand for Data-Driven Documents. A free, open-source JavaScript library for visualizing data.
Projects: Dynamic dashboards, Data maps, KPIs dashboards.

7- Formik
Formik is a library for building forms in React.
projects: sign up form, sign in form.

8- React-hotkeys
A JavaScript library for handling keyboard shortcuts and keybindings in React applications.
Projects: text editor, video player in general any web applications with a lot of data or complex interfaces.

9- Frontity
A framework for building headless WordPress sites with React.
Projects: headless CMS. (Content Manegment System) and API Documentation.

10- React Query
A library used to simplify the process of fetching, caching, updating, and synchronizing data with your API.
Projects: To do list apps, weather apps.

11- Redux
is a state management library for JavaScript applications. People use it for managing complex application states and enabling predictable data flow.
Projects: real-time chat apps.

members: Ahmed ahmed , farah alsoqi, ammar kolko

1- Gatsby: It's a fantastic tool for building blazing-fast websites and web applications.
Gatsby allows sites to defer non-critical page generation to increase load times. This allows developers to generate only the most important pages during a build. Less-trafficked pages are then rendered only when accessed by site users. This is especially useful for large and complex sites.

2- Storybook: An open-source tool for UI development, Storybook is essentially a library or a playground for UI components. The tool enables developers to showcase the interaction of the components in an isolated development environment, making it easier to test and debug the components and collaborate with fellow developers. Storybook types exports only typescript types for storybook usage. It exports typescript enums, which do have a runtime implementation. But it should not export any implementation such as classes, methods, functions or constants. It also has no dependencies, all the types it exports are bundled in.

3-Svelte: it used for building user interfaces just like react, and for creating static web app that focus on performance (high speed) and simplicity.

4- i18n.js: is an internationalization-framework written in and for JavaScript. i18n goes beyond just providing the standard i18n features such as (Pluralization, Context, Interpolation, Format). It provides you with a complete solution to localize your product from web to mobile and desktop.

5- MathJax / KaTeX: are libraries for rendering mathematical equations that could be used in a web pages . these libraries are specially used for educational platformms and for mathematical content

6-D3.js: This framework exists to fill the need of data visualization and representing data in a visual and appealing way. its usually used for Reports, Statics

7- Formik: it is a library for managing the form for React. it helps simplify the process of building and managing complex type forms. it is used for web apps that require forms such as registration, data entry, and login.

8-React-hotkeys: React-hotkeys is a library that exists to make it easier for developers to add keyboard shortcuts and hotkeys to their React applications. By using react-hotkeys, developers can provide users with a more seamless and intuitive experience, allowing them to navigate and interact with the application more efficiently. It's all about making things easier and more enjoyable for both developers and end-users. it is used for keyboard shortcuts in components.

9- Frontity: it is react-based framework for building headless WordPress websites and web app it used to work fast and flexibly with WordPress websites as the source content.

10-React Query: is a powerful data synchronization library for React that solves these problems. It provides you with a set of hooks that you can use to fetch, cache, and update data in your React and Next. js applications. React Query also handles the state management of queries automatically, reducing the need for developers to write and maintain complex state management logic. It provides built-in error-handling capabilities, allowing developers to handle API errors gracefully.
React query types :There are five types of query in Access. They are: Select queries • Action queries • Parameter queries • Crosstab queries • SQL queries. Select Queries Select query is the simplest and most common type of query.

11- Redux: is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments, and are easy to test. While it's mostly used as a state management tool with React, you can use Redux with any other JavaScript framework or library.
Redux Types: Redux has 3 major components: 'actions', 'reducers' and the 'store'. Actions are simple JavaScript objects. It has a 'type' property which specifies the type of the action we are performing and optionally, can also have a 'payload' property which is used to send some data to our redux store

Team: Hassan AbuGareeb, mohamad karbejha, hisham al Eesa, ahmad mash:
1- Gatsby : it is used to build static sites, it boosts performance it only loads critical HTML, CSS, JavaScript, and other data and prefetches resources for other pages you might navigate to.
-Gatsby is the perfect solution if you don’t need huge customization in data fetching.

2- Storybook
Why does this exist?
To make it easier to build and maintain UI components.
What is it used for?
Building and documenting UI components in isolation.

Def: Storybook is a tool that helps developers build UI components separately from the rest of their application. This makes it easier to create and test UI components, and to ensure that they are consistent and reusable.

3-Svelte
Q: Why does this exist? Why did people spend hundreds of hours of their time to build this?

Ans: Svelte, however, doesn't use a virtual DOM, instead compiling code into tiny, pure Vanilla JS. As a result, the code works much faster from the beginning, making a potential app product much lighter and user-friendly. This is the first and most notable difference that Svelte has presented to the world of coding.

Q: For what types of projects would you use this for?

Ans: you can build entire web applications with it. It is a good choice for large-scale projects.

4- i18n.js
What is i18n.js used for?
i18n.js is used to translate JavaScript applications into multiple languages. It is a library that provides a simple and efficient way to do this.
what types of projects would you use i18n.js?
You would use i18n.js for any JavaScript application that you want to translate into multiple languages. This includes web applications, mobile applications, desktop applications, and even command-line applications.

5-MathJax / KaTeX
MathJax is a JavaScript library that displays mathematical notation in web browsers, so basically to make mathematical texts and equation look better and more readable.
Katex : a fast, easy-to-use JavaScript library for TeX math rendering on the web, Tex Math is a popular means of typesetting complex mathematical formulae.

• MathJax and Katex are used in any project that contains any kind of mathematical content, they help with the formatting and rendering of the mathematical content on the website.

---

6-

7- Formik
What is Formik used for?
Formik is a library that helps developers build and manage forms in React applications. It provides a number of features that make it easier to validate forms, handle errors, and submit form data.

For what types of projects would you use Formik?
You would use Formik for any React application that needs a form. This includes web applications, mobile applications, and desktop applications.

8- react-hotkeys
What is react-hotkeys used for?
react-hotkeys is a library that helps developers add keyboard shortcuts to React applications. It provides a simple way to define keyboard shortcuts and to handle keyboard events.

For what types of projects would you use react-hotkeys?
You would use react-hotkeys for any React application where you want to add keyboard shortcuts. This includes web applications, mobile applications, and desktop applications.

9- Frontity
Why does Frontity exist?
People build websites and web applications using different content management systems (CMSs), such as WordPress, Drupal, and Joomla. However, these CMSs can be slow and inflexible. Frontity exists to make it easier to build fast and flexible websites and web applications using React.

What is Frontity used for?
Frontity is a headless React framework. This means that it allows you to separate your front-end code from your back-end code. This makes it easier to scale and maintain your website or web application, and to use different CMSs.

For what types of projects would you use Frontity?
You would use Frontity for any project where you want to build a fast and flexible website or web application. This is especially true if you want to use a different CMS than WordPress, or if you want to have more control over your front-end code.

10-React Query
-React Query is a data-fetching and state management library for React applications that simplifies fetching, caching, and updating data, it provides the user with hooks to help with fetching, caching, and updating data in React and Next js applications.

---

11-Redux
Why does Redux exist?
Redux exists to make it easier to manage the data in your JavaScript applications.
What is Redux used for?
Redux is used to manage the state of JavaScript applications. State is the data that an application uses to run.
For what types of projects would you use Redux?
use Redux for any JavaScript project where you need to manage a lot of data, or where the data is complex. This includes projects such as:
Large websites
E-commerce applications
Real-time chat applications
Data visualization applications.

Aya Abu Al Hummos, Malak Jabr, Yassin Aji, Dana Maraqa, Lujain Mansour

1. Gatsby: An innovative open-source framework that empowers developers to build high-performing static websites and applications. Known for its speed, security, and flexibility, it leverages the power of React to deliver an unmatched user experience.
   usually used for :
   Static Websites: Gatsby's primary use case is for building static websites. If you have a website that doesn't require real-time data updates and can be pre-rendered,
   Blogs: Gatsby is a popular choice for creating blogs.
   E-commerce Sites: example : Nike
   Portfolio Websites: For designers,
   developers, photographers, or any creative professional,
2. Storybook: a framwork best used to work on UI components in isolation of other components , made to resolve issues front-end and UI designers use while developing,
   used for the following project:
   Web Application Development
   Design Systems:UI library for a company or a project
   E-commerce Platforms: Projects involving e-commerce websites often require a wide range of UI components
   Team Collaboration: Storybook encourages collaboration between designers, developers,
3. Svelte is a fast and efficient JavaScript framework for building user interfaces. It's chosen for its performance, simplicity, small bundle size, built-in reactivity, and ease of learning. It's commonly used in web projects where speed and simplicity are key. 4) i18n.js is a library used for internationalization in software development. It helps create applications that can support multiple languages and regions, making them accessible to a global audience. It's important for projects aiming for worldwide reach and cultural adaptation.
4. MathJax / KaTeX: a library written in JavaScript, that is used to display mathematical formulas and notations in the browsers quite easily and efficiently. MathJax provides tools to transform your content from traditional print sources into modern, accessible web content. It is commonly used to render mathematical content in LaTeX or MathML notation in web applications.
   types of projects where MathJax can be particularly useful:

1. Educational Websites and Platforms
2. Scientific Publications
3. Math and Science Blogs
4. Online Math Quizzes and Tests
5. Mathematical Software

7. Formik: Formik addresses several common challenges and pain points that developers encounter when working with forms.
   You would typically use Formik in React projects for various types of forms, such as login and registration forms, contact forms, data entry forms, surveys, and any application that requires user input and data submission. It's particularly valuable for projects with complex forms that involve input validation, conditional logic, form state management, and integration with back-end services.

8. Overall, react-hotkeys is a valuable tool for improving user experience, accessibility, and developer productivity in React applications where keyboard interactions play a significant role. It simplifies the implementation of keyboard shortcuts and makes it easier to create a more user-friendly and efficient application.
   You would use react-hotkeys in a variety of projects where you want to implement keyboard shortcuts and improve user interaction, like Games and Productivity Applications

9. React Query: a powerful data-fetching library for React applications that simplifies fetching, caching, and state management of server-side data. It was created to address the challenges developers face when managing server-side state, fetching, caching of data, and error handling.
   Declarative & Automatic: You need to tell React Query where to get your data and how fresh you need it to be, and the rest is automatic
   Simple & Familiar: If you know how to work with promises or async/await, you already know how to use React Query.
   Extensible: React Query is configurable down to each observer instance of a query with knobs and options to fit every use case.
   It’s suitable for anything from weekend hobbies to enterprise e-commerce systems. So, whether you’re building a small personal project or a large-scale application, React Query can be a valuable tool to simplify data management.

10. Redux: A predictable state container for JavaScript applications.
    Predictable: Redux helps you write applications that behave consistently.
    Centralized: Centralizing your application’s state and logic enables powerful capabilities
    Debuggable: The Redux DevTools make it easy to trace when, where, why, and how your application’s state changed.
    Flexible: Redux works with any UI layer and has a large ecosystem of add-ons to fit your needs.
    It’s suitable for anything from small personal projects to large-scale applications.
    Redux is used in production by many major companies and is a popular choice for projects that require a robust, scalable state management solution.

team : feda, Mahmoud,Mohammad,Abdullah, MohammadRasheed.
Q1Gatsby: Gatsby is an open-source framework that combines functionality from React, GraphQL and Webpack into a single tool for building static websites and apps. features : 1- code splitting,2-friendly developer experience .... Type of project : eCommerce sites, marketing sites, blogs

2- Storybook : is a development environment tool that is used as a playground for UI components. It allows us, to create and test components in isolation. It runs outside of the app, too, so project dependencies won't affect the behaviour of components, so it making it easier to test and debug and it also Helps focus on building individual UI components in isolation Enhances collaboration between designers and developers Makes it easier to test and iterate on UI components Creates a living document of UI components Enhances testing of UI components in isolation //. ,,, Project: it's used for the UI testing and development It provides a sandbox for creating, visualizing, and documenting User Interface components and allows developers to see how the components will look and behave in different states, making it easier to catch and fix issues early in the development process

3-Svelte :1- is a modern JavaScript framework used to build static web apps that are fast, lean, and are fun for developers to use. You can use Svelte to build single, reusable components for projects of any kind, including larger applications written with Angular, React, Vue, or any other frameworks 2- Svelte’s simplicity is one of its standout features. Unlike other frameworks that come with a steep learning curve and a myriad of concepts to grasp, Svelte keeps things simple. It relies on familiar HTML, CSS, and JavaScript, making it easier for developers to get started and build applications quickly. Projects: Brave ,Decathlon ,Square's official website (financial services and mobile payment)

4- i18n.js : 1- The JavaScript Internationalization API (also known as i18n) allows you to design web pages and applications in such a way that they can be easily adapted to support the needs of users that speak different languages 2- Internationalization (I18N) is the process of designing and preparing software products (apps) to support multiple locales, languages, and regions. By internationalizing a codebase, developers and businesses can expand their user base and access a wider audience. project : it used for time formats, local calendars, number formats, and numeral systems, sorting and presentation of lists, handling of personal names and forms of address.

5- MathJax / KaTeX: are two popular libraries for displaying mathematical content in browsers. Although both libraries offer similar functionality, they use different syntaxes and have different configuration options. project : displays mathematical notation in web browsers, using MathML, LaTeX and ASCIIMathML markup.

6- D3.js : (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards. projects: creating visualizations such as charts, maps, and more on the web.

7- Formik : is a small group of React components and hooks for building forms in React and React Native and is written in TypeScript,. It helps with the three most annoying parts: Getting values in and out of form state , Validation and error messages , Handling form submission project : for building form in react and its called using useFormik function to create the component .

8- react-hotkeys : 1- uses key maps to decouple defining keyboard shortcuts from the functions they call. This allows hot keys and handler functions to be defined and maintained independent of one another.2- A hotkey is a key or a combination of keys on a computer keyboard that, when pressed at one time, performs a task (such as starting an application) more quickly than using a mouse or other input device.

9- Frontity : it's free and open source framework to create lightning fast websites using WordPress and React, uses WordPress REST API to fetch the data from your WordPress site (PHP server) and renders it in your React frontend (Node. js server).

10- React Query : s a powerful data synchronization library for React that solves these problems.
11- Redux : Redux is an open-source JavaScript library for managing and centralizing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.

1- Gatsby : it is used to build static sites, it boosts performance it only loads critical HTML, CSS, JavaScript, and other data and prefetches resources for other pages you might navigate to.
-Gatsby is the perfect solution if you don’t need huge customization in data fetching.

2- Storybook
Why does this exist?
To make it easier to build and maintain UI components.
What is it used for?
Building and documenting UI components in isolation.

Storybook: is a tool that helps developers build UI components separately from the rest of their application. This makes it easier to create and test UI components, and to ensure that they are consistent and reusable.

3- Svelte
Q: Why does this exist? Why did people spend hundreds of hours of their time to build this?

Ans: Svelte, however, doesn't use a virtual DOM, instead compiling code into tiny, pure Vanilla JS. As a result, the code works much faster from the beginning, making a potential app product much lighter and user-friendly. This is the first and most notable difference that Svelte has presented to the world of coding.

Q: For what types of projects would you use this for?

Ans: you can build entire web applications with it. It is a good choice for large-scale projects.

4- i18n.js
What is i18n.js used for?
i18n.js is used to translate JavaScript applications into multiple languages. It is a library that provides a simple and efficient way to do this.
what types of projects would you use i18n.js?
You would use i18n.js for any JavaScript application that you want to translate into multiple languages. This includes web applications, mobile applications, desktop applications, and even command-line applications.

5-MathJax / KaTeX
MathJax is a JavaScript library that displays mathematical notation in web browsers, so basically to make mathematical texts and equation look better and more readable.
Katex : a fast, easy-to-use JavaScript library for TeX math rendering on the web, Tex Math is a popular means of typesetting complex mathematical formulae.

• MathJax and Katex are used in any project that contains any kind of mathematical content, they help with the formatting and rendering of the mathematical content on the website.

6-
Why does D3.js exist?
To make it easier to create interactive charts and graphs on the web.

For what types of projects would you use D3.js?
Any project where you need to display data in a visually appealing and interactive way. This includes projects like news websites, business dashboards, and educational tools.

7-Formik
What is Formik used for?
Formik is a library that helps developers build and manage forms in React applications. It provides a number of features that make it easier to validate forms, handle errors, and submit form data.

For what types of projects would you use Formik?
You would use Formik for any React application that needs a form. This includes web applications, mobile applications, and desktop applications.

8- react-hotkeys
What is react-hotkeys used for?
react-hotkeys is a library that helps developers add keyboard shortcuts to React applications. It provides a simple way to define keyboard shortcuts and to handle keyboard events.

For what types of projects would you use react-hotkeys?
You would use react-hotkeys for any React application where you want to add keyboard shortcuts. This includes web applications, mobile applications, and desktop applications.

9- Frontity
Why does Frontity exist?
People build websites and web applications using different content management systems (CMSs), such as WordPress, Drupal, and Joomla. However, these CMSs can be slow and inflexible. Frontity exists to make it easier to build fast and flexible websites and web applications using React.

What is Frontity used for?
Frontity is a headless React framework. This means that it allows you to separate your front-end code from your back-end code. This makes it easier to scale and maintain your website or web application, and to use different CMSs.

For what types of projects would you use Frontity?
You would use Frontity for any project where you want to build a fast and flexible website or web application. This is especially true if you want to use a different CMS than WordPress, or if you want to have more control over your front-end code.

10-React Query
Why does React Query exist?
Because fetching data from APIs can be hard and complex. React Query makes it easier.

What is React Query used for?
To make fetching data from APIs easier in React applications.

For what types of projects would you use React Query?
Any project where you need to fetch data from APIs, such as e-commerce applications, real-time chat applications, data visualization applications, social media applications, and news websites.

11-Redux
Why does Redux exist?
Redux exists to make it easier to manage the data in your JavaScript applications.

What is Redux used for?
Redux is used to manage the state of JavaScript applications. State is the data that an application uses to run.

For what types of projects would you use Redux?
use Redux for any JavaScript project where you need to manage a lot of data, or where the data is complex. This includes projects such as:
Large websites
E-commerce applications
Real-time chat applications
Data visualization applications

our humble group : reem bino , farah arar , ahmad juma , omar masoud ‧₊˚✩彡

Q.1 It exists to help developers build fast, optimized, and highly performant websites and web applications. It leverages the power of modern web technologies like React, GraphQL, and Webpack to enable content-driven web development.
_People spent hundreds of hours building Gatsby because it is a powerful and efficient framework for building fast and optimized websites. Gatsby uses modern technologies such as React and GraphQL to provide developers with a smooth development experience and deliver high-performance websites. It offers features like pre-rendering, code splitting, and progressive enhancement, which significantly improve website speed and user experience. Moreover, Gatsby has a vibrant community and a rich ecosystem of plugins and themes that contribute to its popularity and the time invested in its development.

Q.2storybook The tool enables developers to showcase the interaction of the components in an isolated development environment, making it easier to test and debug the components and collaborate with fellow developers.
_It's widely used in web development to maintain a consistent and well-documented UI.

Q.3 svelete used to build static web apps that are fast, lean, and are fun for developers to use. You can use Svelte to build single, reusable components for projects of any kind, including larger applications written with Angular, React, Vue, or any other frameworks.
_ People spent hundreds of hours building Svelte because they saw the need for a more efficient and lightweight framework that could help developers build fast and performant web applications.

Q.4 i18n.js is a library for internationalization (i18n) in JavaScript applications. It exists to simplify the process of handling multiple languages and translations in web applications.For what types of projects would you use this for? i18n.js is useful in projects that need to support multiple languages and regions. It's commonly used in websites and applications that have a global audience.
_People spent hundreds of hours building i18n.js because it provides the necessary functionality and tools to easily implement internationalization in web applications. This library helps developers streamline the process of translating and displaying content in different languages, managing user locale preferences, and handling other internationalization-related tasks. The effort invested in building i18n.js ultimately saves time and improves efficiency for developers working on internationalized projects.

Q.5 The existence of MathJax and KaTeX is to enable the rendering and display of mathematical equations and symbols on websites. These tools are used because standard HTML and CSS alone do not have built-in support for mathematical notation. MathJax and KaTeX provide a way to easily incorporate mathematical expressions into web pages by utilizing JavaScript libraries.
_People spent hundreds of hours building MathJax and KaTeX because there was a need for a reliable and efficient way to display mathematical notation on the web. Mathematical equations are an integral part of various fields such as mathematics, physics, engineering, and computer science. However, traditional HTML and CSS did not provide sufficient support for rendering complex mathematical symbols and expressions.

Q.6 D3.js (Data-Driven Documents) exists as a JavaScript library to help with data visualization on the web. It allows developers to create interactive and dynamic visualizations using HTML, CSS, and SVG. D3.js provides a way to bind data to elements in the DOM (Document Object Model) and then apply visual transformations based on that data. It is popular among web developers and data scientists for its flexibility and ability to create custom visualizations
-People spent hundreds of hours building D3.js because it provides a flexible and customizable way to represent data visually.

Q.7 Formik exists to simplify form management in React applications. It provides an easy way to handle form state, validation, and submission, allowing developers to focus on the core functionality of their forms without having to write boilerplate code.
-Formik is a popular library in the JavaScript ecosystem used for building forms in React applications. While I do not have specific information on why the creators of Formik spent a lot of time building it, I can provide some general reasons why people invest time and effort into building libraries like Formik.

Simplicity and Convenience: Building and managing forms in web applications can be complex and time-consuming. Libraries like Formik aim to simplify this process by providing a set of tools and utilities that make form handling more convenient and intuitive.

Efficiency and Reusability: Building a form from scratch for each project can be repetitive and inefficient. With Formik, developers can leverage pre-built components and functions to create forms quickly and easily. This promotes code reusability, saving time and effort in the long run.

Community and Collaboration: Many open-source projects, including Formik, are developed by a community of contributors. These contributors often share a common goal of addressing common pain points and improving the developer experience. Building and maintaining libraries like Formik allows developers to collaborate and contribute to a shared ecosystem, benefiting both themselves and others in the community.

In summary, people spend time building libraries like Formik to simplify form handling, increase efficiency, promote code reusability, and contribute to the developer community.

Team Members: (Room2) Lubna Abdelkhaliq, Dana Omar, Hammam Abu Shehadeh, Hasan Jabaie, Baraa Sidair

//Question 1: Gatsby
is a React-based open-source framework with performance, scalability, and security built-in. project, Blogs, and Personal Websites, Portfolio Sites. Gatsby is a free, open-source, React-based framework designed to help developers build performant websites and apps. Put simply, Gatsby is a static site generator that leverages React. Gatsby uses static site generation, pages are pre-rendered making it faster to load. Gatsby's focus is on page performance, which is achieved through heavy image optimization, lazy loading, code splitting, and smart preloading of assets. This focus on performance is especially important since faster pages lead to better user experience and improved search engine rankings. offers offline use ( https://ninetailed.io/blog/gatsby-vs-react/ )

//Question 2: StoryBook
Storybook is an open-source tool that serves as a playground for UI components. It allows developers to showcase and test components in an isolated environment, facilitating collaboration and debugging. we can use Storybook for:
Web applications.
Single-page applications (SPAs).
Mobile apps (especially with React Native).
Design systems.
UI libraries.
Collaborative projects involving developers, designers,

//Question 3: Svelte
designed for building user interfaces on the web. It directly updates the actual DOM elements. "reactive declarations," so that When your data changes, the UI automatically reflects those changes. it allows developers to build web applications in a declarative style and is also used to build static web apps that are fast, lean, and fun for developers to use. Svelte is better suited for smaller applications demanding high performance. Svelte is better for smaller, more dynamic projects. such as: Mobile Applications, and SPA

//Question 4: (i18n):
is the process of designing and developing a software product so it can be adapted for users of different cultures and languages.
Is useful for: Software apps
E-commerce platforms
Content management systems
Games
Multinational corporations
Government websites
Educational platforms
Social media platforms

//Question 5: MathJax
is a JavaScript library that is used for displaying mathematical equations and symbols on web pages. It allows users to write mathematical expressions.
With MathJax, mathematics is text-based rather than image-based, and so it is available for search engines, meaning that your equations can be searchable, just like the text of your pages.
MathJax can generate output in several formats, including HTML with CSS styling.
MathJax includes the ability to generate speakable text versions of your mathematical expressions that can be used with screen readers, providing accessibility for the visually impaired.
MathJax is commonly used in educational websites, scientific publications, and online platforms that involve mathematical content. It provides a consistent and reliable way to present mathematical notation across different browsers and devices. (https://docs.mathjax.org/en/latest/basic/mathjax.html)

//Question 6: D3.js
is a free, open-source JavaScript library for visualizing data. Its low-level approach built on web standards offers unparalleled flexibility in authoring dynamic, data-driven graphics. for producing dynamic, interactive data visualizations in web browsers. and we use it to create highly engaging, interactive, and informative visualizations, making data more accessible. project Data Dashboards (https://d3js.org/what-is-d3)

//Question 7: Formik
Formik is a popular open-source library for building and processing form data in React applications. It provides many utility components and functions that make handling form data in a React application more enjoyable

What is the use of Formik?
Formik is a small group of React components and hooks for building forms in React and React Native. It helps with the three most annoying parts: Getting values in and out of form state. Validation and error messages.

What type is Formik?
The Formik source code is written in TypeScript, so you can rest easy that Formik's types will always be up-to-date. As a mental model, Formik's type signatures are very similar to React Router 4's .

//Question 8: react-hotkeys
is a valuable tool for enhancing user experience, accessibility, and developer productivity. The time invested in building and maintaining it reflects its importance in web application development.
And it's suitable for:

1. Web apps
2. Productivity tools
3. CMS
4. Data entry apps
5. Games
6. Development environments
7. Accessibility enhancements

//Question 9: Frontity
open-source framework based on React. It uses your WordPress site as a headless CMS and renders it in a React framework. It enables you to build a fast headless WordPress static website quickly.
Frontity uses WordPress REST API to fetch the data from your WordPress site (PHP server) and renders it in your React frontend (Node.js server). Frontity then renders the pages in HTML or AMP. Frontity can be hosted in a regular Node.js server or a serverless service like AWS, Netlify, or Vercel.
project
Portfolio and Personal Websites

https://frontity.org/
https://snipcart.com/blog/frontity-headless-wordpress

// Question 10: React Query
What is React query for?
React Query is a data-fetching and state management library for React applications that simplifies fetching, caching, and updating data

The combination of local caching and background refetching makes React Query a powerful tool for managing data fetching in React applications. It can help you to improve performance, reduce API calls, and ensure that your data is always up-to-date

Why is useQuery used?
useQuery is a custom hook within React Query used to fetch data in a React application. Under the hood, these hooks manage lots of things such as caching data after the initial fetch, re-fetching data in the background, etc.

Why use React query over useEffect?
Additionally, React Query eliminates the requirement for useState and useEffect hooks and substitutes a few lines of React Query code in their stead. In the long term, it will unquestionably assist you in maintaining a quick, responsive, and maintained application.

//Question 11: Redux
state management library for JavaScript applications, particularly in the context of web development. It was created to solve specific challenges related to managing and sharing application state in large and complex applications. Redux is commonly used in various types of projects, including: Large-Scale Web Applications, React Applications, Cross-Platform Applications, Single-Page Applications (SPAs):

Gorgees, Raneem, Mohammad, Ramah

1- gatsby :

-open source, front-end framework for React developers that need to build eCommerce sites, marketing sites, blogs, documentation, and any other type of website

-does this by pre-rendering pages and using technologies like server-side rendering and static site generation. building fast and performant websites and web applications

-solving problems in Gatsby The main problem solved is the slow loading time of the website and the need for better
SEO(search engine optimization) which helps to make the website show more on search engines

-When to Use GatsbyJS? When You Need a Static Site
-Use It if SEO Is Crucial for You
-Use It When Your Project Demands a High Level of Security
-Use It When You “Crave” High Performance

2- Storybook

• Storybook is a frontend workshop for building UI components and pages in isolation, and It helps you develop hard-to-reach states and edge cases without needing to run the whole app.
• for the project's that contain a lot of UI components, Storybook provides a dedicated environment for testing and debugging makes it easier to identify and fix UI components bugs. It also allows developers to easily test each component in different scenarios, making it easier to catch issues early on in development.

3- Svelte

• Svelte is a contemporary JavaScript framework, that bypasses the virtual DOM by compiling components directly into vanilla JavaScript.
• Known for its efficiency and concise code, it eliminates the need for added libraries or intricate build configurations.
• Its user-friendly methodology simplifies web app development.
• Ideal for both novice and experienced developers due to its intuitive structure.

4- i18n.js

• Internationalization (I18N) is the process of designing and preparing software products (apps) to support multiple locales, languages, and regions. By internationalizing a codebase, developers, and businesses can expand their user base and access a wider audience.
• it exists so can provide features for managing translations, formatting dates, numbers, currencies, and more to make your application accessible to users from different regions.
• They put a lot of effort so they can make the transition easier in projects
• We can make any project accessible to a global audience

5- MathJax / KaTeX

• MathJax and KaTeX help show math on websites.
• MathJax offers broader notation support, while KaTeX prioritizes rendering speed.
• They're great for school sites and science pages.
• MathJax updates math in real-time with JavaScript.
• People are talking about using KaTeX instead of MathJax in Moodle.

6- D3.js

• js (also known as D3, short for Data-Driven Documents) is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of Scalable Vector Graphics (SVG), HTML5, and Cascading Style Sheets (CSS) standards
• for data visualization projects.

8- React HotKeys

• A declarative library for handling hotkeys and focus areas in React applications.
• it exists to handle keyboard shortcuts and key bindings in React applications.
• They put a lot of effort so they can make the shortcut easier to access either for the programmer and for UI
• We can use for projects that have a lot of keyboard shortcuts

10- React Query

• React Query exists to simplify data-fetching and state management in React applications.By automating the synchronization of server - - state to the local state,
• React QueryMain Function: Automates syncing between server and local states.
• Enhances UX with tools like pagination.soIt's got stuff like pagination to make user experience better.