A day of full stack developer @ NFU

受邀於 2018/5/8 前往虎尾科技大學資管系演講

Transcript

1. 全端⼯工程師的⼀一天 Jeremy @ NFU
2. Jeremy Yen Glossika 全端⼯工程師 SITCON 學⽣生計算機年年會 15-17 議程組 HITCON 台灣駭客年年會 15-17 翻譯組 KPMG 資訊安全顧問
4. ⼤大綱 ▸ 網⾴頁技術的演進 ▸ 現代前端技術簡介 ▸ 現代後端技術簡介 ▸ 如何為你的專案選擇適當的技術？ ▸ 專題討論：CDN
5. 調查
6. 網⾴頁技術的演進
7. 世界第⼀一張網⾴頁
10. 檔案式網⾴頁
11. 分享檔案的協定 ▸ FTP ▸ SAMBA (網路路芳鄰檔案共享) ▸ HTTP
12. 檔案式網⾴頁
13. 檔案式網⾴頁 ˙ JOEFYQIQ
    ˙ VTFSQIQ
    ˙ MPHJOQIQ
14. 所⾒見見即所得時代
15. MS Frontpage
16. Adobe Dreamweaver
17. 直接⼿手刻 HTML/CSS/JS 直接寫在同⼀一⾴頁
19. JavaScript
20. Java / JavaScript
22. jQuery
23. <h1 id="title"> Hello </h1>
24. JavaScript jQuery document.addEventListener('DOMContentLoaded', function() { var h1 = document.getElementById('title'); h1.innerHTML = 'Hello'; }, false); $(document).ready(function() { $('#title').html('Hello'); });
25. 找到 DOM
26. 拿 DOM 做⼀一些操作
27. 現代前端技術簡介 以 Vue.js 為例例
29. 動態取得留留⾔言/顯⽰示步驟
30. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁
31. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
32. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON ▸ 找到 HTML 容器 #container
33. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON ▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
34. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON ▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
35. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON ▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
36. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON ▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
37. 動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON ▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容 ▸ Render 介⾯面
38. 什什麼是必要的步驟？
39. 什什麼是必要的步驟？ ▸ 載入網⾴頁
40. 什什麼是必要的步驟？ ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
41. 指令式渲染 ▸ jQuery，操作 DOM (Document of Object) 為基礎的開發模式 ▸ 開發⽅方式直覺，透過 Selector 選擇 DOM 即可開始改變網⾴頁 內容，製作互動元件 ▸ ⼀一旦程式架構擴⼤大後，程式碼混雜不易易維護
42. 宣告式渲染 ▸ 以操作物件模型為基礎的開發模式 ▸ 關注點放在資料 ( Model ) 與狀狀態 ▸ 直接描述資料與 DOM 的對應，⽽而不是直接操作 DOM
43. <input id="email" type="email"/>
44. jQuery Vue.js var default = 'user@example.com'; $('#email').val(default); $('#submit').click(function() { var input = $(‘#email’).val(); }); <input id="email" type="email" v-model="data.email" />
46. email.data: 'user@example.com'
47. Vue.js 宣染概念念 ▸ 定義組件(Component)變數，例例: data.email ▸ 在 HTML 上連結變數，例例如使⽤用 v-model 建立雙向綁定 ▸ 變更更 data.email 的同時，畫⾯面上的 HTML 也會⾃自動變動
48. 現代後端技術簡介 以 PHP / Laravel 為例例
49. 網站如何運作
50. 請求 (Request)
51. 請求 (Request) 我要看⾸首⾴頁 GET /index.html Server
52. 回應 (Respond)
53. 回應 (Respond) 1. 查詢資料庫
54. 回應 (Respond) 1. 查詢資料庫 2. 產⽣生網⾴頁 HTML
55. 回應 (Respond) 1. 查詢資料庫 2. 產⽣生網⾴頁 HTML 回應 index.html HTTP 200 OK Server
56. 靜態網站要素 • ⼀一台連上網路路的裝置（伺服器） • 網⾴頁伺服器軟體 (Apache 或 nginx) • 能「公開」存取的 IP 或網址 • 網⾴頁檔案 (.html)
57. 靜態網站 (Static) = 純前端網站 動態網站 (Dynamic) = 含後端語⾔言之網站
58. 我的電腦能不能架網站？
59. ⼀一定可以架給⾃自⼰己看 (localhost) 但是不⼀一定能「公開」存取
60. 直接網路路連線 網際網路路 你的電腦 Public IP
61. 直接網路路連線 網際網路路 • ISP ⼩小烏⿔龜（⼀一般家⽤用） • TANET 學術網路路（宿舍） 你的電腦 Public IP
62. 直接網路路連線 網際網路路 • ISP ⼩小烏⿔龜（⼀一般家⽤用） • TANET 學術網路路（宿舍） 你的電腦 Public IP 可以公開存取
63. NAT 網路路連線 網際網路路 你的電腦 NAT
64. NAT 網路路連線 網際網路路 你的電腦 NAT • Wi-Fi 路路由器（⼀一般家⽤用） • 學校防火牆（系館 Wi-Fi）
65. NAT 網路路連線 網際網路路 你的電腦 NAT • Wi-Fi 路路由器（⼀一般家⽤用） • 學校防火牆（系館 Wi-Fi）
66. NAT 網路路連線 網際網路路 你的電腦 NAT • Wi-Fi 路路由器（⼀一般家⽤用） • 學校防火牆（系館 Wi-Fi） 需經過 NAT 管理理員允許
67. Port Forwarding
68. NAT: Port Forward 網際網路路 你的電腦 NAT
69. NAT: Port Forward 網際網路路 你的電腦 NAT • 告訴 NAT • 看到 80 Port 要轉給我喔 • 看到 443 Port 要轉給我喔 • 其他 Reject
70. 網站伺服器 需 24 ⼩小時開機
71. 靜態網站架設替代⽅方案 • 付費租⽤用線上虛擬伺服器 (VPS, AWS EC2) • 使⽤用免費架站服務（本課程採⽤用 Github pages) • 使⽤用學校伺服器或其他⽅方法
72. 測試開發⽤用 成品上線
73. 測試開發⽤用 本機 伺服器 成品上線
74. 測試開發⽤用 本機 伺服器 成品上線 虛擬 伺服器
75. 傳統 PHP
76. 䅺Ⰵ玑䒭焺 IUNM
    
    I
     QIQ
    FDIP
    UJUMF
    
    I
    IUNM ⠿剪㐼♳⛓
    JOEFYQIQ
    
77. 䅺Ⰵ玑䒭焺 IUNM
    
    I
    
    1)1
    湬陼㐼贖椚⚥
    I
    IUNM 佐ⵌ銴宠䖕贖椚
    JOEFYQIQ
78. 䅺Ⰵ玑䒭焺 IUNM
    
    I
    .Z
    5JUMF
    I
    IUNM 㹐䨩畮ツ植⛓
    JOEFYQIQ
79. Laravel
80. .7$
    卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS
81. .7$
    卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 
    ⢪欽罏锞宠
82. .7$
    卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 
    叆鑉锞宠 
    ⢪欽罏锞宠
83. .7$
    卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 
    须俲 
    叆鑉锞宠 
    ⢪欽罏锞宠
84. .7$
    卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 
    须俲 
    须俲 
    叆鑉锞宠 
    ⢪欽罏锞宠
85. .7$
    卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 
    须俲 
    须俲 
    叆鑉锞宠 
    ⢪欽罏锞宠 
    㔐䥰⢪欽罏
86. 資料庫
87. 關聯聯式 SQL
88. NoSQL
89. 如何為你的專案 選擇適當技術？
91. 䪮遯鼇乵 ⵹畮 )5.-$44 7VFKT +4K2VFSZ 3FBDUKT 沒其他選擇了了XD 相比 React 我認為比較好上⼿手的前端框架 設定最簡單最快速的寫法 ⽬目前非常熱⾨門的前端框架
92. 䪮遯鼇乵 䖕畮 /PEFKT&YQSFTT 3VCZ
    PO
    3BJMT 1ZUIPO%KBOHP 1)1-BSBWFM
93. 䪮遯鼇乵
94. ꡠ鸮䒭须俲䏨
95. 䪮遯鼇乵 须俲䏨 /P42-.POHP%# 42-.Z42- 扁平/欄欄位可能不相同/沒有必要關聯聯 需要關聯聯/正規化的資料
96. 䪮遯鼇乵 䖕畮 ⵹畮 须俲䏨 )5.-$44 /PEFKT&YQSFTT /P42-.POHP%# 7VFKT 3VCZ
    PO
    3BJMT +4K2VFSZ 3FBDUKT 1ZUIPO%KBOHP 42-.Z42-
97. 討論
98. 專題討論：CDN
109. 1 秒
110. 1 秒
111. 2 秒 1 秒
112. CONTENT DELIVERY NETWORK
113. 靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 CDN 快取 英國 UK 客⼾戶端 德國 DE
114. 靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE
115. 靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE
116. 靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜)
117. 靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜)
118. 靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜)
119. 靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) API 呼叫結果 稍慢抵達 (通過海海纜)
120. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 CDN 快取 英國 UK 客⼾戶端 德國 DE CDN 上⾞車車 英國 UK
121. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE CDN 上⾞車車 英國 UK
122. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE CDN 上⾞車車 英國 UK
123. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
124. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
125. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
126. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
127. 動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜) CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK Google/Amazon 內部專線網路路 (⾼高優先權)
128. CDN 服務提供者
129. Google GCP
130. Amazon CloudFront
131. GeoDNS
132. 傳統 DNS DNS 伺服器 客⼾戶端
133. 傳統 DNS DNS 伺服器 請問 example.com 在哪裡？ 客⼾戶端
134. 傳統 DNS DNS 伺服器 請問 example.com 在哪裡？ 客⼾戶端
135. 傳統 DNS DNS 伺服器 請問 example.com 在哪裡？ 客⼾戶端 回應：在 94.87.94.87 喔
136. 傳統 DNS DNS 伺服器 請問 example.com 在哪裡？ 客⼾戶端 回應：在 94.87.94.87 喔
137. GeoDNS DNS 伺服器 客⼾戶端 德國 DE 客⼾戶端 台灣 TW
138. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 客⼾戶端 德國 DE 客⼾戶端 台灣 TW
139. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 客⼾戶端 德國 DE 客⼾戶端 台灣 TW
140. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 回應：英國 Server IP 1.1.1.1 客⼾戶端 德國 DE 客⼾戶端 台灣 TW
141. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 回應：英國 Server IP 1.1.1.1 客⼾戶端 德國 DE 客⼾戶端 台灣 TW
142. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 回應：英國 Server IP 1.1.1.1 客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡？
143. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 回應：英國 Server IP 1.1.1.1 客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡？
144. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 回應：英國 Server IP 1.1.1.1 客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡？ 回應：⽇日本 Server IP 9.9.9.9
145. GeoDNS DNS 伺服器 請問 example.com 在哪裡？ 回應：英國 Server IP 1.1.1.1 客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡？ 回應：⽇日本 Server IP 9.9.9.9
146. Q & A