# 從0開始打造企業級元件及低代碼平台 - 楊勝堡 (湯姆羊) & 黃添賜 (阿賜)

{%hackmd @HWDC/BJOE4qInR %}

>#### 》[議程介紹](https://hwdc.ithome.com.tw/2024/session-page/3221)
>#### 》[填寫議程滿意度問卷｜回饋建言給辛苦的講者](https://forms.gle/eyghE5r6axwGdVN1A)

簡報連結：https://www.slideshare.net/slideshow/hwdc-2024-0-x/271728813

# 前言

開發過程中，一個團隊project的數量‘會越來愈多。但是開發量能會有上限，所以這次想要推低代碼平台與公用元件庫來解決，專案越來越多衍生的問題。

## 理想中的元件庫

## 收斂的解決方案

* 建立Design Guideline的元件庫
* 移除外部元件庫
* 建立元件portal

## Design guideline x 元件庫 - Atomic Design

* 從最初不可被分割的元件開始


* 外部元件的使用量
* 用來得知需要重視哪些元件
* 表單元間佔了>80%
## Design Guideline - 分層架構圖

## 移除外部元件

* 前導專案
* 其他專案

## 移除後的差異比較

* 統一元件樣式

## 元件portal

* 能在單一頁面查找全部的元件、
* 希望文件永遠在最新的狀態

開發時注重的重點
* 元件展示
* SVG素材下載
* 更新記錄
* 問題回報
* !!避免重工!!

## 文件同步機制

## 文件同步機制 - 載入範例程式碼

# 元件實踐與開發秘辛

## 痛點一:程式一改，測試就要重寫

### 視覺化測試

* 把每個區塊都各自命名


[前端測試指南：策略與實踐](
https://www.tenlong.com.tw/products/9786263338746)

這本書解決滿多痛點，這不是業配。推薦

## 痛點二:不是改個小功能嘛?怎麼程式碼差異這麼大?

開發中:
* eslint
* prettier

提交程式碼時
* husky
* lint-staged

## 痛點三:元件庫發布後，在舊版的瀏覽器跑版很嚴重

- stylelint
- 可以提醒在舊版的瀏覽器不支援

# Code to low code

## 套件領域展開

* 展開特定空間領域範圍，在範圍中**擴大自身的特色及各種優勢規則*

# Code to low code

## 擴展目標

* 期望可以拖曳組成畫面

## 平台功能組成

* 在畫面上可以拖拉然後組成網頁內容
* 產生之後可以動，可以用來產生程式碼
* 最後可以希望自動部署

## Build

* 需要有原料
* 非元件庫以外的東西之後才作
* 要有畫布
* 要有設置器
* 最後產出描述檔sschema.json

## 原料區

- 原料區
- 分子區

## 渲染

跨iframe拖拉遇到的問題

### 解決辦法

1. 沒辦法偵測到drop事件:多墊一層layer
2. 無法知道drop的定位
- `postMessage()``

### 舊作法

* 每一個拖拉元件都是用JSON儲存
* 節點量多的時候效能不好

### 新作法

* 改用class
* 每次
* 導入ngrx進行狀態管理

## 平台工作流

## 什麼是原理圖

* 有來原有複製需你的，修改，建立實體

## Generate

## 畫面展示

## AI in lowcode

## RAG

會導入RAG，目前還在研究中。

## Lowcode within RAG

# 沒有最好，只有更好

綁定資安，弱掃

# Ｑ＆Ａ
Ｑ：你們做出來的元件庫黎production有多遠？以前做出來的東西不能deploy，導致最後脫軌。一個團隊要求大家都用同一個團隊，你怎麼push這個？
Ａ：現在主要處理前端切版。還在路上。
Ａ：我們前端們目前集中在同一個pool幫所有專案做開發，所以沒有這個問題

Ｑ：發想到現在的時間和團隊成員
Ａ：去年6,7月元件庫成熟。全新投入的人約3個前端，0.5個UX

==聊天區==