libraries.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. i18n.js
4. MathJax / KaTeX
5. D3.js
6. Formik
7. react-hotkeys
8. Next.js
9. Frontity
10. React Query
11. Redux

Team Particpants: Baraa, Maryam, Noor, Riham

1. Gatsby : is a free and open source framework based on React, it helps developers build blazing fast websites and apps. it allows the developers to make a site using React and work with any data source (CMSs, Markdown, etc) of their choice.
   why we use it? : Gatsby enables developers to build fast, secure, and powerful websites using a React-based framework and innovative data layer that makes integrating different content, APIs, and services into one web experience incredibly simple.

Gatsby is used by organizations of all shapes and sizes for building every kind of website and app imaginable.

2. Storybook is packaged as a small, development-only, workshop that lives alongside your app. It provides an isolated iframe to render components without interference from app business logic and context. That helps you focus development on each variation of a component, even the hard-to-reach edge cases.

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

4. KaTeX is an open source fast, easy-to-use JavaScript library for TeX math rendering on the web. KaTeX is compatible with all major browsers. You can find its ode on github.
   A JavaScript display engine for mathematics that works in all browsers.
   No more setup for readers. It just works. https://www.mathjax.org/

5. D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.

6. Formik is the world's most popular open source form library for React and React Native.
   Build forms in React, without the tears :p

7. React hotkeys
   1.When a user pot keys and handler functions to be defined and maintained
   independent of one another.
   react-hotkeys provides several components that are useful for implementing keyboard
   shortcuts into your React app

2. React-starterStarter Project For React Base .

8)Next.js

1.provides a framework to structure your application,
and optimizaions that help make both the development process and
final appliation faster.
Next JS is used to create web applications and performs server-side rendering,
whereas React JS focuses on rendering towards the DOM.
2. helps make superfast and extremely user-friendly static websites,
as well as web applications using React.

9. Frontity
   1.because It’s easier to cause out-of-sync bugs when the state exists
   in two different places.
   It enables you to build a fast headless WordPress static website quickly
   2.for building WordPress websites based on React.

10. React Query is often described as the missing data-fetching library for React,
    but in more technical terms, it makes fetching, caching, synchronizing and updating server
    state in your React applications a breeze.

11)Redux ia a library for mamanging and updating state, by using action event. It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

Ali Majid - Hogr Honar - Danah Osta - Mahnaz Nazir - Nina Hawari

1. Gatsby.js: In short, Gatsby is a React-based free and open-source framework that helps developers build blazing-fast websites and applications. It offers built-in performance, scalability and security.

Developers love this static site generator for its great documentation and using modern tech stack that’s future-proof. There are some best use cases for Gatsby:

PWA (Progressive Web Apps)
Jamstack websites
Static eCommerce storefronts
Headless eCommerce platforms
Performant marketing pages
Super-fast digital business page

2. A) storybook: Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. Storybook integrates with most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails. they also support React Native, Angular, Vue, and many other frameworks.
   B) Storybook to build small atomic components and complex pages in your web application. If it's a UI, you can build it with Storybook. if you are working in a big project, or you are working with a remote team, Storybook helps you and your team to easily manage components with a single source of truth.

3. 1- The i18n-js format is a direct export of translations defined by Ruby on Rails. To export the translations, even if your project is written in a different language, you can use i18n to translate the project depend on your local browser language.
   2- we are using i18n when we have a project that's running in a different regions so that the users from different countries could understand the project language.

4. 1- MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. So it's away of typesetting maths by handling conversion of the mathematical notation into MathJax's internal format.
   2- Basically we are using MathJax / LaTeX with the projects that have a mathematical like ( math quiz application ) so the MathJax / LaTeX renders the mathematical operation as it should be.

5. D3.js:
   D3.js is a library for creation of charts and graphs (interactive, data-driven visualizations).
   It allows to build absolutely any type of data visualization.

6.Formik:
Formik makes debugging, testing, and reasoning about your forms a breeze.
Formik takes care of the repetitive and stuff—keeping track of values/errors/visited fields,
orchestrating validation, and handling submission.
This means you spend less time wiring up state and change handlers.

A way to standardize the input components and the flow of form submission.
Formik helps you to write the three most annoying parts of building a form:

1. Getting values in and out of form state
2. Validation and error messages
3. Handling form submission

7. react-hotkeys : React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts. Uses a fork of hotkeys.js for keydown detection of special characters. You give it a keymap of shortcuts & it bind it to the mousetrap singleton. The, it'll unbind it when the component unmounts.

react-hotkeys-hook - React hook for using keyboard shortcuts in components. Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.

8. Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.

9. Frontity was built to help react developers build fast headless WordPress static websites quickly. Wordpress is built using PHP and javascript, but as frontend developers with no back-end knowledge things can get tough, but since frontity is here to help, build fast headless WordPress static websites quickly. Headless WordPress lets developers retrieve site content, package it however they want without WordPress's limitations, and stick it on a web page for your audience to see. So it allows us to create websites, apps and themes for headless Wordpress. Its a more feature-rich alternative to the likes of Next and Gatsby. With features like zero setup development, lightening-fast loading and server-side rendering and many more

10. React Query allows you to defeat and overcome the tricky challenges and hurdles of server state and control your app data before it starts to control you.

React query is best at managing server states often described as the missing data fetching library for react, it was built to make the fetching, caching, synchronizing and updating server state in your React applications a breeze. It works with zero configuration and its fully customizable. React query helps you to control your app before it start to control you giving you full control over server state. A good example of a project using React query would be a movies website, where we need to fetch multiple things from an API.

11. Redux’s creation was interesting, it got popular because of its size (2KB) and its simplicity and its documentation. Its main advantage is that it overcomes the problem of “prop drilling”, so instead of getting lost with passing state around and remember which component is change it state, Redux creates a store to manage all the states for us. It maintains the state of an entire project in a single object. It makes code easier to manage, organize and easy to test. Projects with a large number of components like a food delivery app is better if done with Redux.

team:- Mustafa M. ,Ali ibrahem ,Alan abdullah ,abdulbari ,Roza

1->Gatsby is an open-source framework that combines functionality from React, GraphQL and Webpack into a single tool for building static websites and apps.

2->Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time.

3- i18njs is an internationalization-framework written in and for JavaScript and you can use it with React and next js, in purpose of translating web applications easily i18njs is created and All started back in 2011 when we were in search for an internationalization library that meets our demand - allowing to run both on server side Node.js and on our client side single page applications and when your website is used in different places and nations then you have to make translating for your web contents and by using i18njs you can achieve that

mathJax was designed with the goal of consolidating the recent advances in web technologies into a single, definitive,
math-on-the-web platform supporting the major browsers and operating systems.
It requires no setup on the part of the user (no plugins to downlaod or software to install),
so the page author can write web documents that include mathematics and be confident that users will be able to view it naturally and easily.
One simply includes MathJax and some mathematics in a web page, and MathJax does the rest.

MathJax works with screenreaders & provides expression zoom and interactive exploration. You also can copy equations into Office, LaTeX, wikis,and more .

5. Why does this exist

D3 helps you bring data to life using HTML, SVG, and CSS. D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

For what types of projects would you use this for

To reate an interactive SVG bar chart with smooth transitions and interaction and for visualizations and 3D for games.

6 : Formik is the world's most popular open source form library for React , by using Formik you cand avoid 3 most annoying part when you create a form Getting values in and out of form state , Validation and error messages and Handling form submission cause Formik collocating all of them in one place so in order to handle form and form validations in an efficient way it's better to use Formik and you need to use Formik if your project needs form handling and form validation.

7. Why does this exist

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

For what types of projects would you use this for?

To decouple defining keyboard shortcuts from the functions they call.

8- >for the most part related to speed and performance. React components that make up the user-facing part of a website are all initially rendered on the server side. This means that once the HTML has been delivered to the client (the user’s browser), nothing else needs to happen for the user to be able to read the content on the page. This makes page loading times appear much faster to the user.

for developing server-side rendered (SSR) React applications. It's easy to use and well supported, making it an attractive choice for web app development projects.

9.>
Frontity enables you to easily build a React-based frontend for a headless (or decoupled) WordPress site.
Your WordPress site serves its data via the REST API,
and the frontend that you build with Frontity consumes this data and renders it in the browser as a
SPA (Single Page Application) which you can configure and style to your liking.

The Frontity framework allows developers to create React-based frontends for WordPress. You can create any kind of frontend, be it an app, theme, single-page website, or even a simple blog interface using Frontity.

10-> quick start page , managing the cycle in the old pattern required 19 lines of code, and using React-Query requires only one. The query object returned by React-Query includes all the state information we had before. We are released from the burden of repetitively managing the request process over and over — React-Query does it for us. By this stage, to put it in React terms.

This library will help you to fetch, synchronize, update, and cache your remote data while also reducing the amount of code you need to write by providing you two simple hooks and one utility function.

11->React was designed with the concept of states and lifecycles. And in React, state can also not be modified directly, it can only be done via the function setState. This makes it easier for Redux concepts to be applied because they share they same understanding and behavior of a state object. Without Redux, you would have to make data dependent on the components and pass it through different components to where it’s needed.

when your app grows to the scale where managing app state becomes a hassle; and you start looking out for making it easy and simple.because Redux allows you to manage your app’s state in a single place and keep changes in your app more predictable and traceable .