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