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

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.