---
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兩個都要選項都要點!!!

* 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)