- this is about tech, but
- any particular tech is not that important
- tech is applied by certain people to solve a specific task
- trilateral fit between tech, people and a task
what is described below is an account of the particular balance of the three that over the years we found to work for Oasis frontends
- agile = iterative, incremental
- high quality
- long life span
- developed by a team(cross functional)
- open to general purpose programmers
- usually proficient at frontend javascript
- don't need to be blockchain experts to provide usefull input
general purpose tools composed to act in harmony:
- Typescript
- React with theme-ui(dai-ui) for the views
- RxJS for everything else
Ideas/Patterns/Practices
- simple subset of "functional programing"
- immutability, higher order functions, curry
- goes well with React, RxJS
- easier to reason about functions than objects
- loosely coupled modules
- explicit dependencies
- late binding, application setup at runtime
- modules available to presentations via react hooks
- 'poor man's' dependency injection
- module: vaultHistory.ts
- dependency setup: AppContext.ts
- state model data based
- explicit representation
- independent of presentation
- module based implementation
- logicless = look is the only concern
- little use of
useState - parallel work on presentation and bussines logic
- multiple presentation modes possible (browser vs native client)
- simple model: vaultHistoryEvents.ts
- advanced model: manageVault.ts
- presentation: ManageVaultButton.tsx
- deserves workshop on its own
bussines logic implemented as rx pipelines:
- blockchain transactions
- data transformations
- user input
- backend services
- transactions: reclaimCollateral.ts, proxyActions.ts
- data transformations/backend: vaultHistory.ts
- user input: ilksFilters.ts
- healthy dose of usual agile practicies
- healthy = not too much, not too little
- storybooks
- pipeline unit tests
- both productivity and quality control
- bussines logic at the pipeline level
- pipelines mockable thanks to explicit dependencies
- speeds up development, regression tests
- fixes "operating field" for the iterative act of ui development
- speeds up exhaustive exploration of ui state space
- communication tool - generated on each commit, available to non technical team members
- quality control aspect:
- "manual" visual inspection
- automated visual testing (to be integrated)
it should be easier to develop with pipeline unit tests and storybooks than without
- better focus
- quick iterative feedback
- works for storybooks
- not so clear with pipeline unit tests
- basic unit tests
- pipeline unit tests
- storybooks
- minimal functional tests (endtest.io)
The second law of thermodynamics, in principle, states that a closed system's disorder cannot be reduced, it can only remain unchanged or increase. A measure of this disorder is entropy. This law also seems plausible for software systems; as a system is modified, its disorder, or entropy, tends to increase. This is known as software entropy.
- pipelines created by functions
- parameters are explicit, treated as dependencies
- late binding, application setup/arming in AppContext.ts
- pipelines available to views via hooks:
useAppContext,useObservable - non functional aspects like caching configurable at setup time
- create pipelines that forms bussines model of the app
- model distributed to the views via React context
- models that require parameters at the moment of usage are just curried and memoized functions
useAppContextuseObservable
Examples
- reducer pattern rxjs way
- state machines when necessary managed by pipelines Examples: simple, complicated
Osis Commons
- web3context - web3react based
- connectors: mm, hw wallets, wallet link/connect, others
- call definitions
- transactions definitions
- transactions.ts module