介紹 Web Page Builder 在網頁前端世界裡是一個很多人在做開發的題目。 而且甚至有許多商業用的 Wordpress 主題或是外掛作為相關的營業項目。像是 Avada 或是 Wix.com，都是相當知名的 Page Builder。
GrapeJS 是一個開源的 Web Page Builder，透過這次的研究。希望可以激發大家對於網頁前端及開發有更多的想像。
以下簡介主要編輯部分的功能:
種類 區塊管理 blockManager 樣式管理 styleManager or selectorManager 特徵管理 traitManager 裝置管理 deviceManager 圖層管理 layerManager 儲存管理 storageManager 區塊管理 主要是可以透過拖拉區塊的方式拉進去編輯器裡面，然後就可以產生出相對應的 html 程式碼。拖拉進去 GrapeJS 的編輯器之後，就會形成一個元件。GrapeJS 還有提供可以客製化區塊管理員的功能。
樣式管理 在點選每一個圖層之後，他就可以顯示每個圖層當前的 class 或是 style。就可以在控制面板新增或是修改該個元件或是圖層的樣式。
特徵管理 可以在每一個頁面上透過新增屬性(Attributes)增加HTML DOM 的活用度。其中的特徵值也可以顯示在輸出頁面的資料上。
裝置管理 可以自行設定該網站想要支援的寬度，可以直接在瀏覽器上查看不同寬度下畫面的呈現。
圖層管理 可以透過拖拉的方式去排序和重新架構開發者所希望的畫面上的呈現。
儲存管理 主要用途是用來儲存頁面上的操作記錄，可以透過取消上一步的方式(Ctrl+Z)，回覆到想要的狀態。
延伸思考 如何整合 grapeJS 和現有的 css 框架? 其實在像是 bootstrap 或是 tailwind css 都是現代前端工程師習慣的 css 框架。如果能好好整合，對前端開發人員是很有幫助的，他可以透過新增 class 就可以修改樣式，也不用特地學習 css 語法。 如何整合網頁開發流程?
介紹 Typescript 轉譯成 Javascript 之後，執行程式碼就無法驗證資料的型態是否是正確的。在三大框架裡面有許多好用的驗證套件。但是 Zod 是一個可以透過宣告 Schema 去驗證資料的 Typescript 的函式庫。透過宣告的方式，補足了執行從 Typescript 轉譯之後的程式卻無法驗證資料型別的不足。
使用情境 從 API 取得資料之後 要驗證表單輸入資料是否正確時 我用電商網站的商品作為例子:
假設這是電商網站上產品的物件型別
宣告型別 透過定義各個欄位型別，會有一個最後的 schema object。可以透過 schema object 做資料格式的判斷。
如果資料錯誤就會丟出 ZodError，ZodError 的格式如下圖:
也可以客製化錯誤訊息
結論 Zod 可以彌補 Typescript 的不足。原生瀏覽器目前是沒有辦法直接執行 Typescript 的，會需要透過 Webpack 等之類的打包工具去轉譯成原生瀏覽器可以支援的格式。所以 Typescript 目前可以做到的型別檢查還是在還沒轉譯之前，透過檢查的方式判斷變數的資料型別對不對。 Zod 做好資料格式方面的驗證，而且支援客製化錯誤訊息。不過在表單的資料驗證，還會有需要做跨表單的驗證或是資料邏輯方面的驗證。這是使用 Zod 需要特別注意的地方。 參考資料 Github Source Typescript: 他實際上沒有驗證你的型別