Re-written [BLAST query page] by React JS library

[r06942072]

[BLAST query page(submission page)]
link:
https://github.com/r06942072/frontend_BLASTquery

---

Naming list of smart UI components

• 4 blocks:
  • yourQuery
  • ourDb
  • program
  • timeTravel

---

Functionality list

• [BLAST query page] Adding searchBar #271, add Searching bar, and remain scrolling bar
• List all organisms and BLAST databases
• User can select multiple databases
• User can enter multiple query sequences
• Text box for query input
• Sample sequences for input
• Support only one type of database at a time (nucleotide or peptide)
• Disable BLAST programs based on the database and query type (nucleotide or peptide)

---

Link:

• BLAST webapp
  https://i5k.nal.usda.gov/webapp/blast/
• BLAST js original code
  https://github.com/NAL-i5K/genomics-workspace/blob/master/blast/static/blast/scripts/blast-multi.js
• Hmmer js original code
  https://github.com/NAL-i5K/genomics-workspace/blob/master/hmmer/static/hmmer/scripts/hmmer-multi.js

[r06942072]

【Example React project】

• Link: https://reactjs.org/community/examples.html
  • ShoppingCart, testing
  • CartPokedex, searching bar

• My hands-on coding from scratch
  https://github.com/r06942072/pro_emoji
  @gmod-dev
  cd /app/data/chun-hung_dev/pro_emoji
npm start

[r06942072]

【Styling for react frontend】
Option1: styled-components
styles are also part of component

• https://www.styled-components.com/docs/basics
• https://medium.freecodecamp.org/a-5-minute-intro-to-styled-components-41f40eb7cd55
• Testing the CSS, https://github.com/styled-components/jest-styled-components
• the benefit of using styled-components, inheritance
  

Option2: reactstrap
https://reactstrap.github.io/

[r06942072]

【testing】
using Jest + Enzyme

• Test-driven development (TDD) for this project.
  • Follow the idea of TDD, I will create unit.test.js file based on the Functionality list first, and then implement it.
• some library options:
  • Jest + Enzyme
  • Mocha + Enzyme
  • Jest v.s. Mocha : Jest new and easy setup, Mocha mature and more config

[r06942072]

【from JQuery to React】
React is good candidate to handle the event of UI

• 

[r06942072]

【State management library】

• The idea is add some restrictions to state of frontend UI component change, so makes it more predictable.
  • The motivation of using Redux
    link: https://redux.js.org/introduction/motivation
  • There are three fundamental principles if we use Redux
    link: https://redux.js.org/introduction/three-principles
• It is nicer to have a central data store in the react project.
• Share state across react components
• Choosing between: Redux (vs) mobX
  • functional programming (vs) object-oriented programming
  • closer to vanilla JavaScript (vs) harder to understand the underlying mechanisms
  • single store (vs) multiple stores
  • strict, changes centralized (vs) not easy to maintain
  • more boilerplate (vs) less boilerplate
  • easy debug, explicit (vs) unpredictable, implicit
  • maintainable code　(vs) small and simple
  • data update logic is redux-defined (vs) data update logic is developer-defined