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:
- Why does this exist? Why did people spend hundreds of hours of their time to build this?
- For what types of projects would you use this for?
- Gatsby
- Storybook
- i18n.js
- MathJax / KaTeX
- D3.js
- Formik
- react-hotkeys
- Next.js
- Frontity
- React Query
- Redux
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.
Storybook is a testing library. It runs outside the app so you wont harm the components when testing different stuff with the UI.
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.
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.
Formik: provide all the codes in react to build forms (including keeping track of values/errors/visited fields, orchestrating validation, and handling submission).
react-hotkeys : library to handle hotkeys in React applications (=provide codes to use keyboard shortcuts in components).
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