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

1.a) Gatsby is a simple front-end framework that we can use to creating static websites.
1.b)The reason to use this, it gives high performance.

2.a) We can use storybook framework for making UI component seperately and use it the same component in several other projects later as well.
2.b)Storybook is a tool/framework used for UI development which allows you to build isolated and reusable components that can be leveraged to develop entire UIs without much effort.

3.a)With Internationalization, we can provide multiple languages services.
3.b)Ultimately, good internationalization ensures your software, app, or website works across a variety of cultures and target markets. It means that every piece of text should be translatable and that there shouldn't be any code that relies on text being input in a specific language or alphabet.

4.a) Both libraries exist because they wanted to add math formulas to webpages more easily.
4.b) I would use it if I need to present Math formulas on my webpage. Educational projects.

5.a) It's used to create more visual representations of accumulated data. I would use it because data represantation shouldn't be just doesn't need to be boring graphs, this would help me to visualise it better in an asthetic way and I would use it if I wanted to represent some data.
5.b) It could e used on data analysis projects and data visualisation.

6.a) It exists because they wanted to prevent repetitive code that appears when we want to control the forms in React.
6.b) I would use it if I'm gonna deal a lot with inputs in my website.

7.a)Sometimes called shortcut keys provides several components that are useful for implementing keyboard shortcuts into react project. A hot key 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) it is more quickly than by using a mouse or other input device.
For example:
pressing the F1 key in any application running Windows usually brings up a help menu
The "Alt + F4" combination results in closing the current application
7.b) All projects that has some key shortucuts.

8.a) React framework for developing single page Javascript applications such as Static websites server-side rendering for React-based web applications.

• helps us specify dynamic routes based on data and pre-render web pages
• the reasons for using next becaue it has good performance and speed
  8.b) For server-side projects.

9.a) Open-source framework that enables us to build and headles frontend WordPress site based on React after using WordPress site serves the data via the REST API, also Frontity will then consumes this data and render it in the browser as a SPA (Single Page Application)
9.b) For single page applications.

10.a) If we are fetching so many things we can use React Query. It 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.
react-query: This will be used to make fetch and post requests to the API
10.b) React Query is a great hook library for managing data requests that completely removes the need to put your remote data inside the global state. You just need to tell the library where you need to fetch your data, and it will handle caching, background updates, and stale data without any extra code or configuration.

11.a) It exists because people wanted to be able to see their states in one place and understand what's exactly changing in the app. It's managing the states and putting them in a global store to allow sibling components pass data to each other via state. It removes the constrains of data flow between components and lets you access all the states from one big global place that has all the states inside.
11.b) It's used to create apps that is consistent between client, server, and native. Also it is easy to test and pass data between components.

1. Gatsby is blazing fast and secure. Its a free and open source static site generator. The emphasis is on the speed. It optimizes the normally time consuming operations so that they are executed fast. For example it loads the critically needed html css and js parts first and then the other secondary stuff.

2. Storybook is a testing library. It runs outside the app so you wont harm the components when testing different stuff with the UI.

3. i18n.js is a small library thats used for internationalization. 18 in the i18n is the number of letters between i and n in the word 'internationalization'. Internationalization in developer world means illocalization, therefore it encourages the use of universally accepted stuff like unicode.

4. MathJaX enables us to put mathematical equations and/or other mathematical syntax to use in our sites easily. It can be used with just one script at the header but its heavy in size and relatively slow. To talk about KaTeX and LaTeX we first need to know what TeX is. TeX is a programming language that was designed and implemented by Donald Knuth back in 1978. Its used for typesetting complex mathematical formulas. KaTeX is a minimal library which is based on TeX, does the same thing as MathJaX but does it way faster. Plus KaTeX has NO DEPENDENCIES.

5.D3.js (Data Driven Documents) : a JavaScript library for producing dynamic, interactive data visualizations (pictures, graphics, diagrams, maps, tables…) in web browsers.

6. Formik: provide all the codes in react to build forms (including keeping track of values/errors/visited fields, orchestrating validation, and handling submission).

7. react-hotkeys : library to handle hotkeys in React applications (=provide codes to use keyboard shortcuts in components).

8. Next.Js : it React that is rendered on the server side which make it better for indexing and crawling website which important to SEO.

9.Redux: it’s main feature is like having global state that is accessible from all component.

10.Frontity : Framework for building WordPress websites based on React. it. uses data from the WordPress REST API and generates the final HTML that is displayed in the browser using React.WordPress dashboard to edit and create content in exactly the same way that you are accustomed to.

11.React Query : it makes makes fetching, caching, synchronizing and updating server state in React application much easier and it deals with Caching and Updating "out of date" data in the background

Buse Şentürk, İsa Tekinkaya, Moulham Hallak

Gatsby: open-source static website generator it was created for the sake of simplicity, inspired by the writer Gatsby himself. It makes creating websites with react “easy and fun”. It is suggested to be used for e-commerce websites., blogs, company & portfolio pages. It helps teams create CMS (content-management system) powered websites. Using it helps your website follow the latest web standard and optimized for speed & security. You code your website and Gatsby turns it into a single-page html website.

Storybook: a tool to create & alter UI components “in isolation” -in a sandbox- with React. You can work on one component at a time even before creating a whole full-stack project posting and receiving data from a database. It seems that this tool can be used for any type of website for the sake of UI -not stated specifically-. Used during development time to see how the components look alone. You can see how a card looks like without creating the whole container for example, before putting in the whole environment.
i18n.js: a process & library of internalization & localization with JS. It is used to make websites international or local language, time, numbers etc. wise. It should be used for websites/apps that are expected to be used in multiple countries.
Pluralization
Date/Time localization
Number localization
Locale fallback
Asset pipeline support

MathJax / KaTeX: they are open-source libraries to display mathematical formulas, equations etc. that are compatible in all browsers and recognized by screen readers (accessibility is important). The first one is more complex with lots of dependencies but the latter is simpler. They should be used for websites that include formulas, equations and such features, i.e.: engineering-related websites, educational/academic contents etc.

D3.js
is a JavaScript library for manipulating documents based on data. It can bind the data to the DOM and then apply transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers.
We could make a diagram which increases so it could be dynamic.

Formik
takes helps you to avoid to repeat yourself it keeps track of values/errors/visited fields, orchestrating validation, and handling submission—so you don't have to. This means you spend less time wiring up state and change handlers and more time focusing on your business logic.
You could make a booking website and it would support you with all the updates

react-hotkeys

is a library for handling hotkeys and focusing on areas in React applications.
It helps you to give the buttons on your keyboard functionality.

We could do a little video game with this librarie like a ball which you have to     get into an area.

Next.js: react framework that lets the developer create hybrid static and server rendering and does not need any configurations or packages. has features such as img optimization, domain & subdomain routing & auto lang. detection (internationalization), fast refresh, file system routing typescript and in-built css support. It is used by big websites such as Netflix, GitHub, Starbucks, Uber, Ticketmaster. It seems to be useful both for back-end & front-end.

Frontity
Frontity is a free framework that helps in building React-based frontend for a WordPress site. And it helps in pass actions and libraries to the components. In other words, it combie between React and wordpress. It is similar to Gatsby and Next.js but with more advantages.

React Query
React Query is the missing data-fetching library for React, it makes fetching, caching, synchronizing and updating server state in the React applications easy. Which means, Instead of writing reducers, caching logic, timers, retry logic, complex async/await scripting, we write a one line code.

Redux
is a pattern and a library to organize global state in the application.it can be used with any UI. And it enables the developer to track the changes of the states. If the application becomes complex and it is hard to know where state is stored or how state changes, then it is a good time to learn Redux.

Partners Abdulrahman Taji, Mohammed Manar, Deniz Demirbilek
1- react Gatsby:
most simply is a static site generator that means the static site part of this means that what Gatsby will produce for us are static HTML files that we load up onto a server.
Gatsby is going to break that convention have All of the stuff already pre-configured ahead of time and just serve that up now.
Gatsby is built with a plug-in architecture and this is a great system because what we're serving up is a static site how do we go about interacting with JavaScript and other things can get a little complicated so it's really nice that we could pull this complex code out into plugins and we could rely on a huge ecosystem of other plug-in authors to do some of the heavy lifting with common things for us
briefly review gatsby is a static site generator that uses graph QL to get data react for templating and it's got a plug-in architecture.

2- Storybook:
storybook is basically a development environment and playground for UI components it enables you to create components independently and showcase those components interactively in an isolated development environment what that last part means is that storybook runs outside of your main react application so you can develop UI components in isolation without having to worry about the business logic.
it makes development across the team smoother one is the ability to view the different components that have already been developed as part of the app two is the ability to view what are the different props that those developed components accept three is the ability to visually showcase those components to your stakeholders for feedback.

3- I18n.js:
I18n.js = Internationalization
18 refers to the number of letter in the word “Internationalization”
basically I18n.js is a function to internationalize your extension. You can use these APIs to get localized strings from locale files packaged with your extension, find out the browser's current language, and find out the value of its Accept-Language header.

4- The purpose of MathJax and KaTeX is to bring the ability to include mathematics easily in web pages to as wide a range of browsers as possible.
Example:

5- D3 stands for Data-Driven Documents and is widely used to create interactive data visualizations on the web

6- Formik is a small library that helps us with the 3 most annoying parts: Getting values in and out of form state. Validation and error messages. Handling form submission

7. React-hotkeys: is used to let users create their own keyboard shortcuts.
   This would be useful if there are lots of functionality in the app and we would like to provide shortcuts for our users.

8.Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites. Traditional React apps render all their content in the client-side browser, Next.js is used to extend this functionality to include applications rendered on the server side.

So rendering on the server side means reducing the burden on web browsers and providing enhanced security. Even less powerful mobile devices can display complex apps since rendering is done on the server.

9.Frontity is an open source project that lets users create React web apps using WordPress. Using Frontity any wordpress project can be made into a React web app, so it makes React more accessible to developers.

10- React Query: Simplifies data fetching by eliminating the need to write fetching logic from scratch. This would be useful if we were fetching from lots of databases in our web app.

11- Redux:
Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces.
Redux is a small library with a simple, limited API designed to be a predictable container for application state. It operates in a similar fashion to a reducing function, a functional programming concept.
Explaining throw example:
in this application in any given component we dispatch actions so one action might be changed name this action then is ran through a reducer that is where the Redux reducer where the name comes from a reducer has one simple job or task it takes the action handles the action so if the action has changed name the reducer will have a method which knows what to do upon a change named action namely change the name and it will then take the old state and manipulate it in a way that it now reflects this action so takes the old state adds or execute this single action on the old state and gives us back a new state now this is best an immutable which means don't change the old state instead take it as a basis and then create a brand new state so kind of a copy of the old state with the change employees so the old state stays untouched we just create a new state and return it's a good practice to do so because it gives you unique States in your application which makes it very clear at which point of time you had which state so we're in this reducer and we're getting back a new state now this state is then stored in well a store and we have only one store in the whole application in our read acts world this store has one simple task store our state that's why it's called store and we may have multiple reducers but we only have one store so multiple reducers for multiple parts of our application but only one store which holds one unique store and then our application can subscribe to that store or specific components can subscribe to parts of the score store parts of the state they need and whenever the state is updated and therefore a new status passed to the store will automatically send it to all the components interested and the application will update.

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