Useful links for the new frontend

[dhess]

(From our "Useful links for Primer" issue.)

TypeScript & React

• TypeScript for Functional Programmers. Note that this is just a brief introduction, not a manual: https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes-func.html
• The TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/2/basic-types.html
• TypeScript is just some type annotations laid on top of ECMAScript 6, so it's important to understand ES6, as well: https://leanpub.com/understandinges6/read#leanpub-auto-introduction
• "Cheatsheets" for using TypeScript with React: https://github.com/typescript-cheatsheets/react#reacttypescript-cheatsheets
• How to use jest to test React: https://jestjs.io/docs/tutorial-react

Libraries

• cola.js — constraint-based layout in the browser: https://ialab.it.monash.edu/webcola/
• Cytoscape.js — a graph theory library for visualization and analysis: https://js.cytoscape.org
• react-cytoscapejs — React component for Cytoscape.js: https://github.com/plotly/react-cytoscapejs
• React Router: https://reactrouter.com/docs/en/v6
• A list of Tailwind resources and plugins: https://github.com/aniftyco/awesome-tailwindcss

Testing

• How Jetbrains tests React UIs: https://blog.jetbrains.com/teamcity/2020/06/teamcity-ui-how-do-we-test-it/
• The Quickstrom thing: https://wickstrom.tech/programming/2020/08/27/introducing-quickstrom-high-confidence-browser-testing.html

Examples

• The BBC has a React component library, which includes a Storybook. It also handles many different languages/scripts, is well-internationalized, etc. https://github.com/bbc/psammead

[brprice]

We may use d3 for tree rendering (with animations etc). D3 has a slightly weird model which takes some getting used to. A good (and short!) resource is Thinking with Joins

[brprice]

Other graphics libraries to be aware of

• vega -- a declarative language for interactive visualization designs. I am not sure how expressive it is wrt trees though.
  • https://vega.github.io/vega/docs/transforms/tree/ uses D3 under the hood
  • https://vega.github.io/vega/examples/tree-layout/
• treant
• vis
• A cytoscape+react integration: react-cytoscapejs
• Layouts for DAGs in D3 d3-dag
• A layout engine for D3 trees with nodes of differing sizes d3-flextree
• https://react-spring.io/ simple, modern, animation primitives

Examples to be aware of

• cytoscape example source