The Method to Build Complex Web App. 這是彭彭在 Modern Web 2017 演講的簡報。以 Piconion 這款專業的線上影像處理軟體為核心，分享建構軟體系統的關鍵心法。

1. 開發複雜網頁應用的黃金法則
The Method to Build Complex Web App
Destructure Piconion
https://piconion.com/

3. Piconion 影像處理軟體的開發、經營
Vision
願景
Development
開發
User Feedback
使用者回饋
Monetization
盈利
本次以開發經驗分享為主題，其他為輔

4. Build Complex Web App
建構複雜的網頁應用程式

5. The Key
事情很簡單

6. Modularize
模組化

7. Keep Modularizing
更多的模組化

8. Hierarchical Structure
一層不夠，不會兩層嗎？

9. Lovely, Totally Clean Code
用心寫出可愛、完美、乾淨的程式碼

10. Holy Bullshit

12. The Truth
真相

13. Dirty Code Always Exists
噁爛的、難以被有效模組化的程式碼
會永遠存在、且越來越失控

14. The Key is ...
真正的關鍵是 ...

15. Accept it
打不贏，就接受它

16. Name it
然後給它取個名字

17. Glue Code

18. General Code Responsibility
Application State
User Interface Data Management
Glue Code

19. Details
來一點細節吧

20. File System in Piconion
var FileState=function(){
this.id; this.name;
this.current; this.modified;
this.set=function(){};
this.get=function(){};
};
var FileUI=function(){
this.elem;
this.create=function(){}
this.modify=function(){}
this.remove=function(){}
};
var FileData=function(){
this.img;
this.load=function(){}
this.modify=function(){}
this.dispose=function(){}
}
Glue Code

21. Modules in File System
FileState
FileUI FileData
Blue rects are modules, should meet requirements listed below:
● Clear purpose: 清楚的權責。
● Independant: 獨立運作，彼此不互相影響。
● Reusable: 可重複利用。
● Unit Testable: 可做單元測試。

22. Glue Code in File System
Glue
Green triangle is glue code, do any other dirty works:
● Set up & Initialize. 完成初期設定。
● Control application flow. 控制應用流程。
● Pass data between modules. 傳遞模組間的資料。
● Do unit test. 加入單元測試程式。

23. More Details
更多的細節

24. Another Key is ...
還有另外一個關鍵是 ...

25. Pure Function

26. Pure Function
INPUT OUTPUT
NO SIDE EFFECTS
沒有副作用
在同樣的輸入下，永遠會得到一樣的輸出

27. Why Pure Function?
● Easy to do unit test. 容易做單元測試
● Flexible and Reusable. 彈性且可重複使用
● Simple. 減少影響整體系統的函式，能有效降低系統複雜度
● Should be the interface of modules.
是建立模組介面的優良選擇。

28. Where Pure Functions Work Best?
var FileState=function(){
this.current;
this.modified;
this.set=function(){};
this.get=function(){};
};
var FileUI=function(){
this.elem;
this.create=function(){};
this.modify=function(){};
this.remove=function(){};
};
var FileData=function(){
this.id; this.name; this.img;
this.load=function(){};
this.modify=function(){};
this.dispose=function(){};
}
Glue Code
(File Object)

29. File Object
(Glue Code)
var File=function(){
// Ignore FileState, FileData, and FileUI Details
var fileState=new FileState();
var fileData=new FileData();
var fileUI=new FileUI();
this.init=function(){
fileData.load(function(){
fileState.set("current", true);
fileUI.create({
"current":fileState.get("current"),
"name":fileState.get("name"),
"img":fileState.get("img")
});
});
};
};
(new File()).init();

30. What we write
var FileUI=function(){
this.elem;
this.create=function(inputs){
this.elem=document.createElement("div");
this.elem.className=
inputs.current?"current-file":"file";
this.elem.title=inputs.name;
};
this.modify=function(){};
this.remove=function(){};
};

31. What we DON’T write
var FileUI=function(){
this.elem;
this.create=function(){
this.elem=document.createElement("div");
this.elem.className=
fileState.current?"current-file":"file";
this.elem.title=fileData.name;
};
this.modify=function(){};
this.remove=function(){};
};

32. Hierarchical Structure
一層不夠，不會兩層嗎？

33. File Management System in Piconion
Current File
(State)
File Bar
(UI)
Array of File Object
(Data)
File
Manager

34. File Management System in Piconion
var FileManager=function(){
var files=[]; // Array of File Object / Data
var fileCurrent=null; // State
var fileBar=new FileBar(); // UI
this.loadFile=function(){};
this.changeCurrentFile=function(){};
this.disposeFile=function(){};
};
FileState
FileUI FileData
Encapsulated
File Structure

35. Done

36. Piconion Overview
FileManager
TransformManagerSelectionManager
PathManagerLayerManager
HistoryManager
Basic HTML/CSS EventDispatcher
Custom UI
Component
App State App Constant Language Pack
UI
State
Data

37. What’s New
支援 Google Drive、觸控介面、觸控筆
多檔案編輯、路徑圖層等等

38. FAQ
問答時間

39. 其實還有 XD

40. 已知 未知
已知 邊逛 PTT 邊達成目標。
仔細規劃、評估風險後達
成目標。
未知
程式寫到一半，哀號一聲
，這麼簡單的議題居然沒
注意到 => 時間x2
程式寫到一半，因為神祕
的原因卡住，要先找出問
題根源，再進一步設法解
決 => 時間 ∞
市場、資金
環境巨變
時間壓力
成本壓力

41. Piconion 影像處理軟體的開發、經營
Vision
願景
Development
開發
User Feedback
使用者回饋
Monetization
盈利
用一張投影片聊聊其他主題吧

42. TRUE END
謝謝大家

43. 彭彭的線上課程教學
在台大擔任前端工程講師超過八年
https://training.pada-x.com/