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

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.