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

D3.js

• a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.
• For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
• Visualization
• it can be used with any JS framework of your choice like Angular.js, React.js or Ember.js.
• By using D3, your code will be shorter and you’ll be able to do more.

Next.js

• is a JavaScript framework created by Zeit. It lets you build server-side rendering and static web applications using React. It’s a great tool to build your next website. It has many great features and advantages, which can make Nextjs your first option for building your next web application.
• It has powers to Develop beautiful Web application for different platform like Windows, Linux and mac.
• Next.js is based on react, webpack and babel.
• Compatible with JavaScript, Node and react.
• every import in the code get bundled and served with each page. It means that unnecessary code never get loaded on the page.
• it automatically reloads the application when changes in the code get saved.

Forntity

• is a free and open source framework to develop WordPress themes based on React js
• As an alternative rendering engine for WordPress.
• As a React framework to create WordPress themes.

https://docs.google.com/document/d/1nwRiWvNuCW8bVgqBPELbF7tnuTbpGq3o6rD7R99wNYw/edit?usp=sharing

please add to this doc and send me your email and I can share it with you

https://docs.google.com/document/d/1AoryCGwYA8l2zLkQohaANCxgYYaoJ8dY1c2LkKyaP2A/edit?usp=sharing

https://docs.google.com/document/d/1xoukYg6xPowwRn_tJx0F7aWL7VfjyxkQljwz3D6282g/edit?usp=sharing

I18n.js (Internationalization)

MathJax / KaTeX

D3.js

D3.js
· Q1: D3 (Data-driven document )Javascript Library used for interactive visualizations in the browser. It is the easy way for manipulation visual data in a webpage and displaying external data files like CSV, JSON, or Excel files
· Q2: for project or apps that view daily statistics and charts
Ex coronavirus daily updated apps with charts and analytics

What is
Next.js is a framework that most notably allows you to write server-rendered React apps easily -- amongst other cool things.
IT'S A FRAMEWORK
Next.js is opinionated and provides structure for how you build your app. Like Rails, the file-system is often the API. You name your file something special and put it in a special directory, and it Just Works. In this way, Next.js feels like a framework.

Why Next.js

Server rendering
code split based on routing
Pre-Rendering
Statically generated and server-rendered React applications have never been easier.
Static Exporting
No need to learn a new framework. Exporting a static site with Next.js is as easy as a single command.
CSS-in-JS
Next.js comes with styled-jsx included, but it also works with every CSS-in-JS solution you know and love.
Zero Configuration
Automatic code splitting, filesystem based routing, hot code reloading and universal rendering.
Learn Next.js
Fully Extensible
Complete control over Babel and Webpack. Customizable server, routing and next-plugins.
View Full Documentation
Ready for Production
Optimized for a smaller build size, faster dev compilation and dozens of other improvements.

---

Frontity — a new WordPress framework

PS: What problems does Frontity solve? (And whose problems are they?) Will Frontity make frontend development more accessible to people who are new to React?
RM: In order to create a WordPress theme with React, developers need to learn and configure lots of different things: bundling, transpiling, routing, server rendering, retrieving data from WordPress, managing state, managing CSS, linting, testing,…
There are already some amazing React frameworks, such as Next.js and GatsbyJS, that can work with WordPress, but they're not focused exclusively on it. As a result, there's still some complex configuration and additional tooling left to the developer.
This is what Frontity aims to solve; we want to make everything much simpler for WordPress developers and more accessible to those who are new to React. Each part of the framework has been simplified and optimized to be used with WordPress, and developers don't need to figure out what tools to use for things like CSS or state management.
Everything is ready so they can get WordPress and React to work together in an easier way.

i18next provides you with a complete solution to localize your product from web to mobile and deskto, it is about Internationalizing JavaScript.
It takes care of these issue:
• detect the user language
• load the translations
• optionally cache the translations
• extention, by using post-processing - e.g. to enable sprintf support

The framework was built with scalability in mind. For smaller projects, having a single file with all the translation might work, but for larger projects this approach quickly breaks down. i18next gives you the option to separate translations into multiple files and to load them on demand.

Features:
• Pluralization
• Date/Time localization
• Number localization
• Locale fallback
• Asset pipeline support

The i18next created integrations for frontend-frameworks such as React, AngularJS, Vue.js and many more, also use i18next with Node.js, PHP, iOS, Android and other platforms.

Gatsby

• framework based on React that helps developers build fast websites and apps (site generator)
• builds web site as “static” files that can be deployed easily on dozens of services.
• pulls data from any data source
• follows the latest web standards, to be highly performant. It makes use of the latest and popular technologies including ReactJS, Webpack, GraphQL, modern ES6+ JavaScript and CSS.