Schematics 是由 Angular 團隊開發出來的代碼產生器，用來產生和重構專案中的程式碼；雖然是由Angular團隊所開發，但可應用的情境卻遠遠超出了Angular的範圍，可以用來產生任何語言及應用的代碼，且完全沒有副作用！ 本次分享將介紹如何使用Schematics幫助我們大幅減少重造輪子的辛苦，專注在真正有價值的工作上面；並介紹實務上該如何使用 Schematics、以及 Angular 6 後的高度整合應用，讓開發人員生活更加輕鬆。

1. 黃升煌 Mike
多奇數位創意有限公司 全端工程師
Blog: https://wellwind.idv.tw/blog/
玩轉 Schematics

2. Name
黃升煌 Mike
Title
多奇數位創意有限公司
全端工程師
Award
2018 iT鐵人賽
Modern Web 組冠軍
About Me

3. 程序猿，你覺得
寫程式快樂嗎？

4. 快樂 不快樂
• 面對不同問題很有趣
• 職稱聽起來很帥氣
• 學習新東西很好玩
• 重複一樣的事情很無聊
• 加班、爆肝、沒生活
• 看不到未來

6. 程序員所要面臨的
「必要重複程式碼」

7. 程序員面臨的「必要重複程式碼」

8. 程序員面臨的「必要重複程式碼」

9. 程序員面臨的「必要重複程式碼」

10. 程序員面臨的「必要重複程式碼」

11. 程序員面臨的「必要重複程式碼」
• 每一頁內容都差不多
• 欄位不一樣
• 邏輯不一樣
• 程式碼幾乎一樣

12. 我們每天都在面臨許多
「必須重複」的程式碼！

13. 在一些簡單的情境，
我們可以靠code snippet解決

14. 但它卻無法解決許多更複雜的情境

15. 身為懶惰的工程師

16. 應該找點更有效率的方法

17. Schematics 就是其中
一種強力工具
(Angular Only)

18. Schematics 基本觀念

19. 關於 Schematics
將專案從某種狀態
變成另外一種狀態
Workflow
具有豐富API來處理檔
案變更，且容易組合
Compose
確認所有步驟正確才更新，
沒有副作用！
No Side Effect

20. 簡單來說，就是
「程式碼產生器」

21. Schematics 基本觀念 (新增)
A
B
C
D
E
A
B
C
D
E

22. Schematics 基本觀念 (變更內容)
A
B
C
A
B
C'
C'

23. Schematics 基本觀念 (移除)
A
B
C
A
B
C

24. 開始使用 Schematics

25. 開始使用 Schematics
> npm install -g @angular-devkit/schematics-cli
> schematics blank --name=my-schematics
(建立基本 schematics 專案骨架)

26. 開始使用 Schematics
> schematics @schematics/schematics:schematic
--name=my-schematics
> schematics schematic --name=my-schematics
(使用 @schematics/schematics 的 schematic 產生程式)
(意義同上)

27. 專案架構
package.json

28. 專案架構
Schematic
(Generator)
collection.json

29. 專案架構
Collection
(Scheamtics的集合)
collection.json

30. 專案架構
collection.json
程式進入點

31. 專案架構
collection.json
參數設定檔

32. 專案架構 schema.json
可用的參數

33. 專案架構 schema.json
必填的參數

34. 程式說明
Rule：用來回傳一個 Tree 的方法
(把TreeA變更成TreeB)
Tree：代表一個等待變更中目錄的樹狀架構

35. 程式說明
Action：用來處理檔案結構的操作符號(operators)

36. 程式說明
Rule
A
B
C
A
B
C

37. 程式說明
Tree Tree'
A
B
C
A
B
C
Action

38. 執行 Schematics

39. 執行 & 測試
> npm run build
> schematics .:my-schematics
執行my-schematics(只會顯示變更資訊，不會真正變更檔案)
> schematics .:my-schematics --dry-run=false
執行my-schematics(會真正變更檔案)

40. 執行 & 測試
> npm link ../my-schematics
> schematics my-schematics:my-schematics
> ng generate my-schematics:my-schematics
(Angular CLI 專用指令：指定某個 schematic 建立檔案)
> ng set defaults.schematics.collection=my-schematics
(Angular CLI 專用指令：設定預設 schematics)

41. DEMO

42. 使用 Schematics CLI 產生範本

43. 使用 Schematics 範本目錄結構

44. 執行 Schematics 結果

45. Schematics 常用工具

46. 常用工具

47. 常用工具

48. 常用工具
使用 chain 組合多個 Rule

49. 常用工具
執行其他外部 schematic

50. 常用工具
合併 Tree
合併檔案來源
取代變數資料

51. Angular CLI 與 Schematics
完美整合

52. 與 Angular CLI 整合
使用 ng add 安裝套件

53. 與 Angular CLI 整合
使用 ng update 更新套件 (package.json)

54. 與 Angular CLI 整合
使用 ng update 更新套件 (migration-collection.json)

55. 使用案例

56. 使用案例 (Angular Material)
安裝 Angular Material
需要 6 個步驟

57. 使用案例 (Angular Material)
透過 schematic…
ng add @angular/material
一行搞定！

58. Angular Material 5.0.0 到 6.0.0 時，
breaking changes 多達將近70條！
使用案例 (Angular Material)

59. 使用案例 (Angular Material)
透過 schematic…
ng update @angular/material
一行搞定！

60. 有了schematics以及ng update，
我們就可以更安心肆無忌憚的breaking changes了

61. 使用案例 (NG-ZORRO)
文件直接提供 generate command code
連記憶 schematic 語法的麻煩都省下來了！

62. 使用案例 (其他)
• @ngrx/schematics
• ngcli-wallaby
• cypress-schematics
• ngx-schematics-collection

63. 撰寫 Schematics 的建議

64. 撰寫 Schematics 的建議
• 學習 Functional Programming 與 Patterns
• 盡量使用 Pure Function
• 將步驟切成小的 rule functions

65. Thank You
&
QA Time

66. Resources
• @angular-devkit/schematics
• Schematics: Generating custom Angular
Code with the CLI
• Schematics — An Introduction