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