An exercise for students to research some popular JavaScript libraries

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

Partners: Ayşe Saflo && Bilal Avvad && Mohamad Ziada
Question 1:
1.1 Libraries exist because they are some type of codes that are being used frequently and in multiple types of projects. Hence, instead of creating a project from scratch each and everytime, if there is a library that is similar to it, you can easily use it to make the work much more esier and user-friendly to code in.
1.2 Basically libraries are a pre-written application that we overwrite and use to owr specific needs by adding or changing less code lines than what we would do in creating an app from scratch.
Question 2:

1. Gatsby: open source frontend framework, it's slogan The hardest parts of the web, made simple. when programmer use Gatsby will not waste time for Performance. SEO. Security. Integrations. Accessibility. where Gatsby covered, that lets the programmer focusing more on their business.
2. Storybook: an open source tool, Storybook is a JavaScript tool that allows developers to create organized UI (User Interface) systems making both the building process and documentation more efficient and easier to use.
3. I18N: a process of designing and preparing apps to support multiple locales, languages, and regions. developers that use I18N have the ability to expand their user base.
4. MathJax: a library used to display mathematical notation on the web (Symbol, equations, and calculations). It was build to tell different browsers to understand all the math notations the same and to make sure that browsers will not interpret it differently. It some kind like the babel library that tell browsers to understand all the new things in JS.
5. d3.js: a library that has over 85000 charts and vector that can be used dynamically to represent data on the screen (charts, candle stock price charts, pies.. etc., The library is using only for web (a I read). Like excel for example … takes a table of data and convert it to Scatter Plot or line chart
6. Formik: a group of React components and hooks for building forms and surveys. It most used for getting values in and out state. And handling form submissions. I think it is some kind used instead of state just by importing it and defining content with useFormik()
7. React-hotkeys: It is a library to handle hotkeys functions when pressed in different browsers using different operation systems. For example, this library deal with what will happen when the user press the hotkeys such as Supported keys ⇧, shift, option, ⌥, alt, ctrl, control, command, ⌘ .
8. Next.js: since React.js is a client-side rendering library, Next.js is a server-side rendering library. Next.js allow us to have a dynamic server-side rendered websites that require to interact alot with the server for every request, it is much faster to use in this scenario. (used when a project have too many components that require a data request from servers)
9. Frontity: we use it for giving websites a face basically, meaning that it helps us to have a head start on building our project with many of common queries built-in, it is also used for the SEO operations where it has a ready server side rendering functionalities. It is an easy way to build fast and engaging websites. ( Used when we need to create fast interactive projects since everything is already built in)
10. React Query: We use it when we have a shared data instances across the app, and instead of writing a fetch, useState, and useEffect on each component, we can use React Query to share data across all app instance with much less code, and the data itself can be state as well. Furthermore, It is uses to handle caching and invalidating data to optimize the request operations. (Used in projects that require too many fetches and data usage in multiple components in the app)
11. Redux: it is used mostly with react, we use it when we have reasonable amount of data flows that is changing constantly, and in this situations normal States in react wouldn't be much of help. (used for projects that require too many states and it combines them into one big state tree)

Gatsby :
it is a static react_based site generator ..it uses front end techniques like react_routers in order to give fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching

it simply exists to make the developers lives easier .. when we have a framework that is ready to use and gives a great output like gatsby
it can be used with all kinds of static websites to optimize their performance and enhance the design .. and what's great about it is the developer doesn't need to learn how gatsby work or doesn't need to have a learning curve like learning a new language it's much simpler

storybook :
is an open-source UI development environment for React components in isolation
It makes development faster and easier by isolating components. and what specialize this tool is that we don't have to build a complex code in order to make the design and it runs outside the main app so the developers don't worry about crushing the code

i18n.js:
Internationalization (I18N) is the process of designing and preparing software products (apps) to support multiple locales, languages, and regions
like when we make a project for different nationalties or when our project needs translation that is the best time to use i18n.js
or even to solve the local-based problems like translating the internationalized app into specific languages for particular locales
it has a great deal of help regarding globalization

MathJax / KaTeX:
are A JavaScript display engine for mathematics that works in all browsers.
Helps to get easier for math operations in web apps and it can be used with Some MIT websites

D3.js:
is an open-source js library and it is used to create custom dynamic data visualizations. it brings the data to life by using SVG, Canvas, HTML, and CSS. Generating data is a massive deal today and communicating with it is difficult. So the visual representation of the data is the most effective way and we can do that by using d3.js
d3.js focuses more on transitions, transformations, and interactions

Formik:
is a library to handle forms in react. Creating forms and managing forms are difficult in react. And when the project gets bigger, it will be more difficult. because we need states for every form element and managing every state is difficult and it makes code repeated. so the form is a way to handle the forms. it will keep things organized and refactored.

React Hotkeys:
is a library for handling hotkeys and focus areas in React applications. it uses keymaps to decouple defining keyboard shortcuts from the functions they call. This allows hotkeys and handler functions to be defined and maintained independently of one another.

Next.js:
For optimizing, easy to use. Because it solves so many problems about communication between server and client, also rendering.
A project that what needs for performance

Frontity:
Using react for WordPress. Because WordPress is so common and react is an indispensable framework, also using this for fastness, SEO friendly. Literally any default blog, etc.

React Query:
Works with API, fetch / post req. Helps with server-state data management.
LIKE MOVIE PROJECT... Everything with that API