# Component Development
Our ReactJS components are developed using a styled-components approach (preferably React functions based components). In line with documentation driven development and quality code principles, deliverables must also include related documentation, built with the following workflow described here.
# General Workflow
# 1. Identify Needed ReactJS Components
Identify ReactJS components that need to be created from Figma UI design files and list each identified component as a ‘GitHub Issue’ in the GitHub prifina/app-desktop or prifina/app-mobile repositories.
- This ensures all components from the designs are correctly identified for development.
# 2. Document Components
Document the identified components to be developed into the Storybook Drafts -Google doc.
Helpful resources:
identifying all subcomponents within structured ‘element components’,
documenting details of new sub components.
As part documenting and before any component development, check what existing reusable components are available to use as your ‘building blocks’ components: Blend GitHub - Prifina Desktop App GitHub (NOTE: Always use the latest alpha-package version, and not the normal 'latest' version labeled by GitHub) and Storybook.
- to make sure all needed details needed to develop the component exist and are confirmed
In your Storybook drafts documentation, mark those “building block” -components already available with a link to the available resources and identify those that need to be developed as part of your bigger component. Those that need to be developed, should be also listed as GitHub Issue cards and documented in more detail (see examples here).
- this is to make sure existing components are used
- new components are only built with existing components when available, and
- that completely new components are only created where they don't already exist
# 3. Update ‘GitHub Issue cards’
Update GitHub issues from each component using this template format and linking with component related documentation details in your Storybook Draft / Figma / User Story doc / etc. (see also list of all existing user stories).
- this is to make sure that all needed details are easily available when components are reviewed
- for approval from different aspects; UX logic, code quality, measures, etc.
# 4. Plan your work before you code.
In the issue cards, describe your plan, how the ReactJS component, using styled-components approach, will be developed (function based ReactJS components are preferable).
Use existing Blend components as your ‘building blocks’ components when available (NOTE: Always use the latest alpha-package version, and not the normal 'latest' version labeled by GitHub).
- to get your plan checked and validated, before potentially wasting time on creating anything redundant
- this is important particularly on your first component, further components follow the same approach
# 5. Develop Based on Approved Plan
Develop each component one by one, based on your own documentation and plan/approach that has been approved. Our normal development workflow requires forking and then creating a ‘pull request’ against the alpha branch.
- ask for feedback for your code using GitHub comments feature in the Issue card
# 6. Test and Verify Components
Test components by creating a Jest test script for each component and testing your component using Storybook (v.6.x)
# 7. Delivering The Final Component
Deliver the final component (using GitHub pull request) and any related supporting documentation in Storybook format (v.6.x), to make it available for others in our storybook components library in this project.
# Additional Guidelines
- Comments are exchange with our UI Designer (directly in relevant Figma files and Slack) and with our Senior Developer (in GitHub issues cards and Slack) as needed
- If a component requires api and/or AWS access then it also requires AWS Amplify module use.
- When naming components, try to avoid too short and general logic like; Email.js, but use longer names, like ResetUsingEmail.js
- The components we are developing are part of a larger app, so each should fit with the overall structure and use only existing node modules.
- In case for a good reason, adding new modules is possible, but as a general rule package.json changes are not allowed.
- Make sure to have a look at the Alpha branch to see how those components, that are marked existing, look.
- There is a Storybook setup ready, so it is the best way to see those.
- We are using our own design system (blend-ui), which is heavily styled-components focused. If you are familiar with Material-ui, it has some similarities as they have started to use the same.
- Our normal development workflow requires forking and then creating a ‘pull request’ against the alpha branch.
- We also require a working Storybook story for separate visual checking (not required to integrate with App routing) and a Jest testing script for automated testing.
- Currently there are no existing Jest tests, but the basic rendering test using "react-test-renderer" is very simple.
- If development has any new reusable functions (not components), then it is necessary to include ‘Jest test’ for testing.
# Related key Figma files
Production Version Development
Prifina Design System
# Other Useful Libraries and Resources:
# AWS Amplify
AWS Amplify consists of a development framework and a web hosting service that provides a convenient way to build mobile and web applications on AWS. The Amplify Framework utilizes AWS Cloud Services to offer capabilities including offline data, authentication, analytics, push notifications and bots at high scale.
Helpful Links:
Official Tutorial about how to deploy a React app with AWS Amplify.
An Amplify Example
Serverless React Example (Relevant up to “deployment” part only.)
External Documentation 1 about Amplify.
External Documentation 2 about Amplify.
# State
One of the more important learnings from the project are the differences between stateless and stateful components, how to use them and what files should have state and what files should not. Another thing that ties into this is the use of React hooks, which is the way that we dealt with the state in this project.
Helpful Links:
State vs Stateless
General reference on React Hooks
More about the useState React Hook
# ESLint
This one isn’t too impactful in terms of the actual thought being put into how the code works, but none of us have used this when we
started the project, and it turned out to be a wonderful tool to help make things more readable and uniform so that the code is a bit easier to access.
Helpful Links:
Getting Started Guide
# Prifina SDK
Checkout Prifina SDK containing useful code examples of using Amplify and React to develop Prifina's first third part application: Prifina React-SDK