---
# System prepended metadata

title: Sprint 17 Education
tags: [MeLoop]

---

---
title: Sprint 17 Education
tags: MeLoop
---
# Sprint 17 Education

## Table of Contents

* [Table of Contents](##Table-of-Contents)
* [Code Review Results](##Code-Review-Results)
    * [Scss](###Scss)
    * [MR流程不確實](###MR流程不確實)
    * [Code Problem](###Code-Problem)
* [Project Structure](##Project-Structure)
* [Layout](##Layout)
* [CI/CD](##CI/CD)
    * [沒有CI/CD的世界](###沒有CI/CD的世界)
    * [為什麼CI/CD出現](###為什麼CI/CD出現)
    * [CI/CD工具及內容](###CI/CD工具及內容)
* [Note](##Note)

## Code Review Results

### Scss
為CSS預處理器，可在其中加入variable、mixin等寫法讓程式可以更加簡潔易懂，同時也方便使用，以下是常用到的方法。
* mixin/function: 將經常被重複使用的固定css做成template
* variable: 網頁設計顏色以constant的方式存入，ex: $color-red:#F00
* [BEM CSS Rule](https://ithelp.ithome.com.tw/articles/10160545): BEM為一種創新命名Class名稱的設計模式，其意思由三個單次組成: Block, Element, and Modifier，方便開發者在看到class名稱的同時就了解彼此間的依賴關係。
* Other CSS tool: Sass/Less/PostCSS

### MR流程不確實
* Commit: 根據功能使用，同時要Commit的功能需要切得更小，不要包含額外不相關的改動在裡面
* MR流程
    :::info
    1. main => dev
    2. dev => feature branch(多人合作)/commit(個人的話可以偷懶)
    理論上我們會進行以下步驟3
    3. Merge back to dev branch => squash(整合commit) => remove feature branch
    之後想要看history的話可以在merge requests觀看
    approved後branch會squash to feature
    但還是能在merge request裡面看到沒被squash的commit
    :::    
    P.S. 記得merge requests兩個都要選項都要點!!!![](https://i.imgur.com/dSS1Qu0.png)
    
* Merge title 命名
    * feat: 這次的範圍
    * Draft: 標示還沒弄完(草稿)
    * Description: 內容要包含What has changed & What reviewer should know

* 在等待MR Review時同時開發的方法
    :::info
    1. dev => new branch
    2. Until MR branch Approved
    3. 這裡有3種方式可以處理
        * Rebase MR branch to new branch
        * Merge MR branch to new branch
        * Init new feature branch and cherry pick new branch
    :::
### Code Problem
* [DRY - don't repeat youself](https://cdn.hackernoon.com/images/1*ltRksgd76i9FGLlMNMvmMw.gif)
* [SOLID](https://medium.com/@f40507777/%E6%88%91%E8%A9%B2%E5%AD%B8%E6%9C%83solid%E5%97%8E-4e73887c9156)
* [Naming Convention](https://medium.com/@wittydeveloper/react-components-naming-convention-%EF%B8%8F-b50303551505)
* Other tool
    * Babel: JavaScript的編譯器、轉譯器，可用於TS/JS上。
    * Webpack: 工作預處理器，簡單來說就是「打包工具」。將眾多模組與資源打包成一包檔案，並編譯我們需要預先處理的內容。

## Project Structure
此章介紹專案結構的概念，幫助大家可以統一專案結構風格，降低co-working時的困難XD
* assets: 用來儲存各種資料
    * images - background
    * icons
    * styles - app.scss, global.scss, normalize.scss, color.scss, fonts.scss(all scss file will be imported to app.scss)
    * fonts - XXX.tff(文字檔)
* constants: 在index.js中import constants內的其他常數，方便其他檔案使用
    * index.js
    * link.js
    * ENUM/常數
* mocks: 儲存API模擬測試用的fake data(.json, .js)
* utility(helper)
    * Global Function
    * Firebase
    * Date(ex: 一套算時間的標準)
* components: 由props輸入參數，物件具有可重複使用性。主管UI部分，功能
    * 切細
    * Unit Test。
* containers: 主管邏輯部分， 從Vuex接資料。
* store
    * action
    * state
    * getter
    * mutation
    * modules
    * 可創立檔案內部在做分類
* types: Typescript用，js部分用PropsType/Flow
* model: 後端ORM
* api
    * Axios
        * 根據ENV Call Config設定Base
        * 建立instance
    * Fetch(By API)
        * index.js(import { getUser } from "@/api")
        * getUser.js
* config: 各種設定檔放在內部
    * Database
    * Auth
* service: 調用Model(商業邏輯)
* i18n: 常數說明文字做多國語係處理
* selectors: 類似getter，用於map/filter data的操作
* page(view): 單頁的邏輯
* layout: 不同page的排版，若要使用不同layout要在page中做設定，不然會使用預設的default.vue
* router: Page + Auth + Layout
* ENV
    * .env
    * .env.dev.example
    * .env.uat.example
    * .env.prod.example
* alias: 代名 "@" point to src (Ex: @/... => src/...)
* public/static: 直接對外的資料，放在這裡時要小心

## Layout
* 複用性
* 可用性
* 劃分領域
* RWD思維

## CI/CD
CI(Continuous Integration): 持續整合
CD(Continuous Deployment): 持續部屬

### 沒有CI/CD的世界
在沒有CI/CD前基本上工程師會使用cmd call tool或GUI tool來做測試，之後會經過工程師、PM/QA來做測試。等到測試通過後在整份程式碼丟給伺服器人員，經由他們來幫你部屬，處理各種大小疑難雜症。這段冗長又麻煩的過程不僅費時耗工，同時也容易發生問題，如人員pending、發布環境污染等。

### 為什麼CI/CD出現
* 容器的出現(Container)
簡單來說VM和container的差別是在硬體和軟體上實現的技術。VM(virtual machine)是以作業系統為單位的虛擬化技術，在使用時必須先經由虛擬化技術將硬體資源抽象化，之後可以自由分配硬體資源給VM。容器則是以應用程式為單位的虛擬化技術，因此可以更有效的分配使用電腦資源。

* 容器化的技術(Docker/Pod)
可控元件:OS / CPU/RAM / Script

* 管理容器出現(K8S)
    * 使用的軟體為Kubernates
    * 用來管理Docker/Pod，可以使用自動重啟、程式健康判斷
    * 可以Auto scale來處理管理高峰流量的問題

### CI/CD工具及內容
* Tool
    1. Jenkins(recommend)
    2. Gitlab CI
    3. Github Action
    4. Others...
* CI
    * lint - Eslint, Prettier
    * test
        1. unit test - jest
        2. ese test - Cypress/Jest/不做XDDD
        3. snapshot test - Storybook
* CD
    * Stage: 不同deployment給不同的使用者
        1. dev
        2. uat
        3. production
    * Deploy ways
        1. container(Local): yarn dev
        2. container(Prod): yarn build & yarn serve
        3. Build => [Storage/S3](https://aws.amazon.com/tw/s3/) => [CDN](https://www.cloudflare.com/zh-tw/learning/cdn/what-is-a-cdn/) => [DNS](https://aws.amazon.com/tw/route53/what-is-dns/) => User
    * Gitlab CI/CD
        * .gitlab-ci.yml
        * Implement
            * Install Eslint
            * Install Prettier
            * 寫單元測試(Jest)
            * Follow Our Git Flow


## Note
[Jimmy's Note](https://hackmd.io/eBLc81DDTxaN0QYveKSO0A)

[Jacky's Note](https://hackmd.io/@pSXTBcB8Q6yNve_wH3G_Yg/BkOqSF62u)

[Allen's Note](https://hackmd.io/w_ErEiVJSheEov745W9jkg)

[David's Note](https://hackmd.io/gqfGPq-BQWekDlhfCqvKsQ)

[Willie's Note](https://hackmd.io/@Th4jMJaRQqC9Uw8islmWrw/HkjPEKT2O/edit)
