website-frontend

NOTICE:

block:

• 原意是為了區隔 core-fe Module 的 module
• 後續為了架構分層而用

Application Router

Flow

• BootstrapRouter->
• BootstrapModuleRouter->
• ModuleRouter->
• SplitLayoutBlock

Files

• Bootstrap/view.tsx ->
• Bootstrap/component/router.tsx ->
• Router/APISuccessHandler.tsx ->
• Each Module Routers

• // NOTICE: Thinking Router->Route->Switch->Module->ModulePage
• // TODO: Thinking
• // startApp
• // Module
• // Module, ModuleBlock
• // Module, PageBlock, Page
• // 關注業務 Module, PageBlock, Page, SplitLayoutBlock
• // 關注 UI /Router: Module, ModuleRouter, SplitLayoutBlock, PageBlock, Page
• // 關注 Page User Event

Application View

Structure

• AppLayoutTemplate
  • SplitPage (From SplitLayoutBlock)
    • Logo
    • LinkGroup
    • Link
    • Content (SplitLayoutPage)
      • SplitLayoutPage
      • SplitLayoutPage.Header
      • SplitLayoutPage.Content

Module Structure

• Module Router (custom)
  • Module (neo)
    • component
    • Page
      • Component
    • Router
    • Error
    • type
    • lang
    • asset
    • BoundaryRouterModule.ts

Block Structure

Other Note

• utilities: function

• library: group function or component to library

• module: neo style module

• component: React component

• type:

• CustomTyping

NOTICE

View

• View: UI, UX
  • Page

Page

• Page: UI (View:UI)
• PageBlock: Action - Sync/Async (View:UX)

Application View

• BootstrapModule
  • LayoutModule
    • EachModule (Switching by Router)
      • Page(PageBlock)

Others

• SystemView

• SystemRouter

• MainView

• MainRouter

• InitApplicationFlowUseCase

Code Splitting

Module的RootComponent 得動態載入 SplitLayoutBlock 不需要動態載入 PageBlock得動態載入

// NOTICE: // # Module // Module this.withdrawPageBlock.getSaga();

// # ModuleRouterBlock

// ## NOTE: Way1: // import Route from Module this.withdrawPageBlock.getPageComponent(); // import Route from Module this.bankCardPageBlock.getPageComponent(); // import Route from Module this.personalSecurityPageBlock.getPageComponent();

// ## NOTE: Way2 // Or import Route from SplitLayoutBlock

// REFACTORING // Define /* <div="application"> </ */

/* startApp - BootstrapModule - BootstrapModuleComponent - Init ThemeModule - Init MessageModule - Rendering Router - AModuleRouter (Rendering by url ) - ARootComponent - BModuleRouter (Non rendering) - BRootComponent - CModuleRouter (Non rendering) - CRootComponent */ // TODO: 搬移

// NOTICE: // Module: 不需要 attachLifecycle // Module 需要 attachLifecycle，目的是? // 1. 返回 React.PureComponent // 2. lifeCycle會呼叫 onEnter, onRender, onTick, onDestroy 有什麼用?

// # componentDidMount // const enterActionName = ${moduleName}/@@ENTER; // app.logger.info

// const initialRenderActionName = ${moduleName}/@@INITIAL_RENDER; // app.logger.info

// const tickActionName = ${moduleName}/@@TICK; // app.logger.info

// # componentDidUpdate // const locationChangeRenderActionName = ${moduleName}/@@LOCATION_CHANGE_RENDER; // app.store.dispatch(actions.onDestroy());

// # componentWillUnmount

// Module 下定義自己的 ModuleRoute -> PageRoute // Bootstrap 引用 ModuleRoute 去定義路由，那就可以切換了

interface WithdrawUserCaseInterface { withdraw: (request: any, history: any) => void; } // REFACTORING const usercase = (dispatch: any) => { let withdrawUserCase: WithdrawUserCaseInterface = { withdraw: (request: any, history: any) => { dispatch(actions.createCustomerBankCard(request, history)); }, }; };

// FIXME: // 單支 API 失敗，看是否是核心或是業務 API // 核心 API 如果是驗證身份失敗，停止後續請求 // 核心 API 如果是其他，後續請求正常發送

// 業務 API

// NOTICE: 管理成功與失敗的彈框 // 1. 區分成功與失敗有重要嗎？ // 如果以目前寫法是蠻重要的，畢竟只有錯誤會進來 ErrorHandler，除非連成功後的請求也單獨呼叫。 // 基本上成功只有一種可能，但失敗有很多種可能，或失敗也只有一種，所以失敗統一管理？成功不需要統一？

// 2. 寫法思考：if-else 用 saga 可以寫出一個獨立情境，並且可能狂分支。 // 狂分支就不好統一集中管理了。 // 但如果基本上一層外加跳轉頁面，那其實架構很夠用了

// NOTICE: // alert vs confirm // confirm 有 branch的可能

// FIXME: 這邊有 Error 與 Success 訊息夾雜再一起了

Block

讓開發人員記得名稱就是共用模組而非 CoreModule

Module PageModule:

• initUserEvent
• define page saga flow onEnter onRender onDestroy 利用角色去分層 UserAction.submit; SystemAction.getCardList; 如果是E2E的話，不管是User或是System都要測試到 UI Testing

Service基本上 Module, PageBlock都會被呼叫到 並且一個 Module 可能會用到很多種類的 Service，這邊就不做限制

domain 角色 執行 行為 伴隨 事件

ViewModel

一個 View 只有一個 ViewModel LoginFormView -> LoginFormViewModel

Account.login({ name: loginFormViewModal.nickname, phone: loginFormViewModal.phoneNumber, })

take event 怎辦呢

command 要不要拆出來用 oo 表示

資料夾限制，code review oo 表示，強制

oo 代替 code review

角色不同 PageBlock 渲染頁面呼叫 System.getCardList, System.submit PageBlock 內有需要使用的呼叫 User.submit, 拆出來好自動化介面測試。而e2e則不需要管 System或是User去觸發的。

UI/User Testing 有必要劃分嗎？ UI Testing: System.Action, User.Action User Testing: User.Action 自動化介面測試

System.submit(); User.submit();

UserModel FormModel SystemAction

// NOTICE: customerServiceLink: 根據業務邏輯需求設定 // NOTICE: 某模組下所有業務邏輯錯誤 (Other Status Code Except 200)

// NOTE: response // NOTE: onConfirm (錯誤彈框後，還有後續) // NOTE: onCancel (錯誤彈框後，還有後續) // function* request() { // let response: WithdrawBankCardsResponse; // try { // response = yield call(WithdrawAJAXWebService.bankCards); // } catch (error) { // // NOTE: Way1: Module - CustomErrorHandler // // NOTE: Way2: ModuleServiceBlock - CustomErrorHandler // throw error; // // Javascript // // Network // // API // // throw ModuleErrorHandler.capture( // // error, // // () => {}, // // () => {}, // // history // // ); // } // }

// NOTICE: AXIOS.Error(200 外) // NOTICE: 1. isAxiosError && error.response 有值 // 502, 504: throw new NetworkConnectionException(Gateway error (${error.response.status}), requestURL, error.message); // other: throw new APIException(errorMessage, error.response.status, requestURL, responseData, errorId, errorCode); // NOTICE: 2. isAxiosError && error.response 沒有值 // throw new NetworkConnectionException(Failed to connect: ${requestURL}, requestURL, error.message); // NOTICE: 3. 不是 isAxiosError // throw new NetworkConnectionException(Unknown network error, [No URL], e.toString());

// APIException // APIException: status===400 && errorCode===VALIDATION_ERROR // APIException: API_ERROR_${statusCode}

Each Layer 1.pure javascript -> function, class, 2.module 3.hooks