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 room 1 : Ramyar Omed Ali ,Rokaya Amjaad, Nisreen hamzam, Darya naji , Banel Mikhael

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 development environment for UI components that enables you to create and showcase components in an environment outside your main application.
Storybook is a development environment tool that is used as a playground for UI components.

3-i18n.js is JavaScript Internationalization API; it 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. i18n.js is used to meet the technical and cultural needs of multiple Companies

4-KaTeX is a cross-browser JavaScript library that displays mathematical notation in web browsers. It puts special emphasis on being fast and easy to use and MathJax is a javascript display engine for rendering \TeX or MathML-coded mathematics in browsers without requiring font installation or browser plug-ins.

5-D3. Js is a JavaScript library that help as to create interactive visualization in the browser and use multiple elements of webpage in form of data set, these elements can SVG, Html or etc.., and it's very good when we need flexibility in the work , D3.js is one of the best data visualization framework and it can be used to generate simple as well as complex visualizations along with user interaction and transition effects.

6-Formik is to easily manage complex validation forms, people spend their time to build this because it takes less time to set up the state and switch handlers, spending more time on the logic of your business. People use Formik to use React and React Native to create forms and surveys.

7-React-hotkeys uses key mappings to separate the definition of keyboard shortcuts from the methods they call. People invest their time in creating react-hotkeys because it is quicker to add new functionality to one location than to ten distinct locations.
8-next.js exist as a react framework that gives you complete building blocks to create web application in very fast way, Is it the best fit for both rarely and frequently updating websites.

9-Frontity is React’s open-source framework. It helps you construct a React-based front end for WordPress.org or WordPress.com. Frontity works both as a framework and as a substitute rendering engine for your WordPress website. Frontity frameworks are commonly used nowadays to split the front end from the content. This makes headless CMS- Content Management System on WordPress easier for developers to use.

10-React Query gives us caching of server data out of the box with cache invalidation and request deduping. React Query gives us caching of server data out of the box with cache invalidation and request deduping

11-Simply put, Redux is used to maintain and update data across your applications for multiple components to share, all while remaining independent of the components. Redux use for these purposes:
Subscribe to updates.
Inside the subscription callback: Get the current store state. Extract the data needed by this piece of UI. ...
If necessary, render the UI with initial state.
Respond to UI inputs by dispatching Redux actions.

Team: Hevar Tofiq , Zaynab Hamad , Sarah Albalawi , Ruba Alsoheil, Amal Salah

1- Gatsby is a free and open source framework based on React that helps developers make a site using React and work with different data sources and can utilize the data layer . It is a static progressive web app (PWA) generator that offers code and data splitting out of the box. Benefits: Gatsby does not render anything on the server when a request is made, so it has advantages which are: speed, search engine optimization, and security. Not only are sites made with Gatsby blazing fast, but they have an implicit security since there is no database or server, and unlike standard React applications. Gatsby has a bunch of great components that simplify things like routing, linking, and handling images. It is recommended to use Gatsby to develop smaller sites like portfolios and personal blogs

2- Storybook: It is a development environment tool which allows us the creation and testing of components in isolation. It runs outside of the app, too, so project dependencies won't affect the behaviour of component.It makes development faster and easier by isolating components . This allows you to work on one .module at a time and develop entire UIs without the need for a complex dev stack. It was created since UIs are painful to debug and breadth of modern frontends overwhelm existing workflows. Benefits: Develop UIs that are more durable, Test UIs with less effort and no flakes, Document UI for your team to reuse, Share how the UI actually work. Examples of sites which use Microsoft github slack. It is mainly used in projects with many components,

3- i18next : this is a JavaScript library for internationalization of strings in html5 applications.

4- MathJax / KaTeX: MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers, with built-in support for assistive technology like screen readers, KaTeX is a cross-browser JavaScript library that displays mathematical notation in web browsers.

5- D3.js: Data-Driven Documents
is known for its flexibility and power for creating interactive and/or animated visualizations and also its steep learning curve.
D3.js is a good fit for projects that have creating visualizations by binding the data and graphical elements to the Document Object Model

6- Formik: Helps in implementing the three most annoying parts of building a form: validation, keep track of visited fields and handling form submission. Formik is a good fit if we want a complete solution including building form that has the three parts.

7- react-hotkeys: declarative library - which means you only describe what you want- for handling hotkeys and focus within a React application , provides several components that are useful for implementing keyboard shortcuts into your React app, like when you need to pause/resume with using a key on ur keyboard

8- next.js: it's a framework built on react, lets react based web apps have server-side rendering and make static-websites, it increases performance alot and helps at search engine optimization and also web crawlers such as Google's crawlers be able to identify your website.You can use React to build your UI, then incrementally adopt Next.js features to solve common application requirements such as routing, data fetching, integrations - all while improving the developer and end-user experience.

9- frontity: a free and open source framework for building WordPress websites based on React, it reduces the complexity that entails connecting both WordPress and React, you can spend the bulk of your time on the development requirements of the project (e.g. the theme) and less time on setting up the project or worrying about tooling and configuration

10- React Query is a library that gives ReactJS the state management ability for any kind of asynchronous data.
In Data fetching project, we can fetch, cache, and update data in React-based applications in a simple and declarative manner without mutating the global state.

11- Redux is used for managing and updating application state by creating a single ‘data store’ for managing state that can be accessed throughout the entire application. We use Redux in application that its state is updated frequently or has multiple components need to access the same application state.

shad-nanor-ahmad hassoun-mhamad marshall-aya marmsh
1-Gatsby enables frontend developers to go through quickly on react websites.by solving problem like pulling in data.
2-it allows you to isolate components to work on 1 component at a time which make development faster.
3-i18next is an internationalization-framework written in and for JavaScript, it's a process of designing and preparing a software products to support multiple languages or regions.
4-mathJax is an open-source java script display that's easy for authors and flexible for publishers and it also supports math accessibility and other advance functionalities, it's a powerful API for integration with other web applications .
KaTeX is a cross-browser JavaScript library that displays mathematical notation in web browsers. It puts special emphasis on being fast and easy to use.
5-it's a java script library for creating visualizations , it binds the data and graphical elements to the Dom. this allows the user to manipulate , change or add to the Dom.
6-it's an open-source form library for react, it's take care of the repetitive stuff by keeping track of errors and values .
7-it provides several components that are useful for implementing keyboard shortcut into your react app.
8- Next.js is a framework that helps you create web applications by providing additional features and structures for your applications.
9-Frontity is an open-source framework based on React. for creating wordpress applications and connect wordpress and react.
10-React Query is data fetching library for react, it makes fetching , catching and synchronizing in your react application.
11- Redux, it java script library for managing applications, it's most commonly used with react and angular .

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 .