# Re-Architecture Transaction Page and Sleep Well - Paipo
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

> Start here

## Transacation

- Transcation
- Payment
- Delivery
- Review
- Done

### A Four-Factor Problem

### Re-Architecture Targets
- Strategy
- Start from scratch
- Migrate page by page (o)

### Find the divisible unit
- Normally by URL or by page
- Team member can work in parallel
- Add or remove with minimal change
- can be treated as a meaningful business unit
- Potential E2E test and code splitting target
----

- Role (Scope is too big)
- Transcation Status (Hard to modify)
- Delivery Methods
- Item Types

### How to make peace of old codebase

---

**Technologies in new Architecture:**
React, Redux, Redux-Saga

**Layers**
1. Side Effect (redux-saga)
2. Blueprint Layer (react)
3. Smart Container (react-redux)
4. Persentation Component (react)

---

**Seprate 2 logics**
- Dispaly Logic vs Business Logic (example: Send Message)
- Business logic (redux-saga)
- 1 business spec = 1 saga function = 1test

---
#### Test

[StoryBook](https://github.com/storybookjs/storybook)

- Saga Test
- E2E Test

// ToDo
**Test Flow**
Story -> Acceptance Criteria -> E2E Test -> Task

> Programming is all about layers, try to seprate logic into different layer.