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
Ali Majid - Hogr Honar - Danah Osta - Mahnaz Nazir - Nina Hawari
Developers love this static site generator for its great documentation and using modern tech stack that’s future-proof. There are some best use cases for Gatsby:
PWA (Progressive Web Apps)
Jamstack websites
Static eCommerce storefronts
Headless eCommerce platforms
Performant marketing pages
Super-fast digital business page
A) storybook: Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application. Storybook integrates with most popular JavaScript UI frameworks and (experimentally) supports server-rendered component frameworks such as Ruby on Rails. they also support React Native, Angular, Vue, and many other frameworks.
B) Storybook to build small atomic components and complex pages in your web application. If it's a UI, you can build it with Storybook. if you are working in a big project, or you are working with a remote team, Storybook helps you and your team to easily manage components with a single source of truth.
1- The i18n-js format is a direct export of translations defined by Ruby on Rails. To export the translations, even if your project is written in a different language, you can use i18n to translate the project depend on your local browser language.
2- we are using i18n when we have a project that's running in a different regions so that the users from different countries could understand the project language.
1- MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers. So it's away of typesetting maths by handling conversion of the mathematical notation into MathJax's internal format.
2- Basically we are using MathJax / LaTeX with the projects that have a mathematical like ( math quiz application ) so the MathJax / LaTeX renders the mathematical operation as it should be.
D3.js:
D3.js is a library for creation of charts and graphs (interactive, data-driven visualizations).
It allows to build absolutely any type of data visualization.
6.Formik:
Formik makes debugging, testing, and reasoning about your forms a breeze.
Formik takes care of the repetitive and stuff—keeping track of values/errors/visited fields,
orchestrating validation, and handling submission.
This means you spend less time wiring up state and change handlers.
A way to standardize the input components and the flow of form submission.
Formik helps you to write the three most annoying parts of building a form:
react-hotkeys-hook - React hook for using keyboard shortcuts in components. Make sure that you have at least version 16.8 of react and react-dom installed, or otherwise hooks won't work for you.
Next.js is a React framework that gives you building blocks to create web applications. By framework, we mean Next.js handles the tooling and configuration needed for React, and provides additional structure, features, and optimizations for your application.
Frontity was built to help react developers build fast headless WordPress static websites quickly. Wordpress is built using PHP and javascript, but as frontend developers with no back-end knowledge things can get tough, but since frontity is here to help, build fast headless WordPress static websites quickly. Headless WordPress lets developers retrieve site content, package it however they want without WordPress's limitations, and stick it on a web page for your audience to see. So it allows us to create websites, apps and themes for headless Wordpress. Its a more feature-rich alternative to the likes of Next and Gatsby. With features like zero setup development, lightening-fast loading and server-side rendering and many more
React Query allows you to defeat and overcome the tricky challenges and hurdles of server state and control your app data before it starts to control you.
React query is best at managing server states often described as the missing data fetching library for react, it was built to make the fetching, caching, synchronizing and updating server state in your React applications a breeze. It works with zero configuration and its fully customizable. React query helps you to control your app before it start to control you giving you full control over server state. A good example of a project using React query would be a movies website, where we need to fetch multiple things from an API.