Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
A day of full stack developer @ NFU
Search
Jeremy Yen
May 15, 2018
Technology
0
200
A day of full stack developer @ NFU
受邀於 2018/5/8 前往虎尾科技大學資管系演講
Jeremy Yen
May 15, 2018
Tweet
Share
More Decks by Jeremy Yen
See All by Jeremy Yen
dEXonation
jeremy5189
0
100
Club Mate and Hacker - 34C3 @ SITCON
jeremy5189
2
620
SITCON 2017 論壇系統開發分享 @ SITCON 2017 Summer
jeremy5189
0
200
poManeuver: Poland into space
jeremy5189
0
350
How we hacked a forum
jeremy5189
0
350
Bdecisive - Booking.com Taipei Hack 2nd Prize
jeremy5189
0
480
Social Intelligence Smart-device project
jeremy5189
0
60
IoT made easy @ SITCON x HK
jeremy5189
0
98
遺失的學校 - SITCON 2014 Lightning Talk
jeremy5189
0
550
Other Decks in Technology
See All in Technology
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
510
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
120
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
340
Compose Compiler Metricsを使った実践的なコードレビュー
tomorrowkey
1
220
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
280
Azureの基本的な権限管理の勉強会
yhana
0
280
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
240
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
510
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
Featured
See All Featured
Become a Pro
speakerdeck
PRO
11
4.5k
Agile that works and the tools we love
rasmusluckow
325
20k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Practical Orchestrator
shlominoach
182
9.7k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Testing 201, or: Great Expectations
jmmastey
28
6.3k
Art, The Web, and Tiny UX
lynnandtonic
289
19k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Web Components: a chance to create the future
zenorocha
305
41k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
In The Pink: A Labor of Love
frogandcode
138
21k
Done Done
chrislema
178
15k
Transcript
全端⼯工程師的⼀一天 Jeremy @ NFU
Jeremy Yen Glossika 全端⼯工程師 SITCON 學⽣生計算機年年會 15-17 議程組 HITCON 台灣駭客年年會
15-17 翻譯組 KPMG 資訊安全顧問
None
⼤大綱 ▸ 網⾴頁技術的演進 ▸ 現代前端技術簡介 ▸ 現代後端技術簡介 ▸ 如何為你的專案選擇適當的技術? ▸
專題討論:CDN
調查
網⾴頁技術的演進
世界第⼀一張網⾴頁
None
None
檔案式網⾴頁
分享檔案的協定 ▸ FTP ▸ SAMBA (網路路芳鄰檔案共享) ▸ HTTP
檔案式網⾴頁
檔案式網⾴頁 ˙ JOEFYQIQ ˙ VTFSQIQ ˙ MPHJOQIQ
所⾒見見即所得時代
MS Frontpage
Adobe Dreamweaver
直接⼿手刻 HTML/CSS/JS 直接寫在同⼀一⾴頁
None
JavaScript
Java / JavaScript
None
jQuery
<h1 id="title"> Hello </h1>
JavaScript jQuery document.addEventListener('DOMContentLoaded', function() { var h1 = document.getElementById('title'); h1.innerHTML
= 'Hello'; }, false); $(document).ready(function() { $('#title').html('Hello'); });
找到 DOM
拿 DOM 做⼀一些操作
現代前端技術簡介 以 Vue.js 為例例
None
動態取得留留⾔言/顯⽰示步驟
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
▸ 找到 HTML 容器 #container
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容
動態取得留留⾔言/顯⽰示步驟 ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
▸ 找到 HTML 容器 #container ▸ 製作 HTML 字串串並填入留留⾔言內容 ▸ Render 介⾯面
什什麼是必要的步驟?
什什麼是必要的步驟? ▸ 載入網⾴頁
什什麼是必要的步驟? ▸ 載入網⾴頁 ▸ 透過 AJAX 呼叫 API 取得留留⾔言列列表 JSON
指令式渲染 ▸ jQuery,操作 DOM (Document of Object) 為基礎的開發模式 ▸ 開發⽅方式直覺,透過
Selector 選擇 DOM 即可開始改變網⾴頁 內容,製作互動元件 ▸ ⼀一旦程式架構擴⼤大後,程式碼混雜不易易維護
宣告式渲染 ▸ 以操作物件模型為基礎的開發模式 ▸ 關注點放在資料 ( Model ) 與狀狀態 ▸
直接描述資料與 DOM 的對應,⽽而不是直接操作 DOM
<input id="email" type="email"/>
jQuery Vue.js var default = '
[email protected]
'; $('#email').val(default); $('#submit').click(function() { var
input = $(‘#email’).val(); }); <input id="email" type="email" v-model="data.email" />
None
email.data: '
[email protected]
'
Vue.js 宣染概念念 ▸ 定義組件(Component)變數,例例: data.email ▸ 在 HTML 上連結變數,例例如使⽤用 v-model
建立雙向綁定 ▸ 變更更 data.email 的同時,畫⾯面上的 HTML 也會⾃自動變動
現代後端技術簡介 以 PHP / Laravel 為例例
網站如何運作
請求 (Request)
請求 (Request) 我要看⾸首⾴頁 GET /index.html Server
回應 (Respond)
回應 (Respond) 1. 查詢資料庫
回應 (Respond) 1. 查詢資料庫 2. 產⽣生網⾴頁 HTML
回應 (Respond) 1. 查詢資料庫 2. 產⽣生網⾴頁 HTML 回應 index.html HTTP
200 OK Server
靜態網站要素 • ⼀一台連上網路路的裝置(伺服器) • 網⾴頁伺服器軟體 (Apache 或 nginx) • 能「公開」存取的
IP 或網址 • 網⾴頁檔案 (.html)
靜態網站 (Static) = 純前端網站 動態網站 (Dynamic) = 含後端語⾔言之網站
我的電腦能不能架網站?
⼀一定可以架給⾃自⼰己看 (localhost) 但是不⼀一定能「公開」存取
直接網路路連線 網際網路路 你的電腦 Public IP
直接網路路連線 網際網路路 • ISP ⼩小烏⿔龜(⼀一般家⽤用) • TANET 學術網路路(宿舍) 你的電腦 Public
IP
直接網路路連線 網際網路路 • ISP ⼩小烏⿔龜(⼀一般家⽤用) • TANET 學術網路路(宿舍) 你的電腦 Public
IP 可以公開存取
NAT 網路路連線 網際網路路 你的電腦 NAT
NAT 網路路連線 網際網路路 你的電腦 NAT • Wi-Fi 路路由器(⼀一般家⽤用) • 學校防火牆(系館
Wi-Fi)
NAT 網路路連線 網際網路路 你的電腦 NAT • Wi-Fi 路路由器(⼀一般家⽤用) • 學校防火牆(系館
Wi-Fi)
NAT 網路路連線 網際網路路 你的電腦 NAT • Wi-Fi 路路由器(⼀一般家⽤用) • 學校防火牆(系館
Wi-Fi) 需經過 NAT 管理理員允許
Port Forwarding
NAT: Port Forward 網際網路路 你的電腦 NAT
NAT: Port Forward 網際網路路 你的電腦 NAT • 告訴 NAT •
看到 80 Port 要轉給我喔 • 看到 443 Port 要轉給我喔 • 其他 Reject
網站伺服器 需 24 ⼩小時開機
靜態網站架設替代⽅方案 • 付費租⽤用線上虛擬伺服器 (VPS, AWS EC2) • 使⽤用免費架站服務(本課程採⽤用 Github pages)
• 使⽤用學校伺服器或其他⽅方法
測試開發⽤用 成品上線
測試開發⽤用 本機 伺服器 成品上線
測試開發⽤用 本機 伺服器 成品上線 虛擬 伺服器
傳統 PHP
䅺Ⰵ玑䒭焺 IUNM I QIQFDIPUJUMF I IUNM ⠿剪㐼♳⛓JOEFYQIQ
䅺Ⰵ玑䒭焺 IUNM I 1)1湬陼㐼贖椚⚥ I IUNM 佐ⵌ銴宠䖕贖椚JOEFYQIQ
䅺Ⰵ玑䒭焺 IUNM I .Z5JUMF I IUNM 㹐䨩畮ツ植⛓JOEFYQIQ
Laravel
.7$卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS
.7$卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS ⢪欽罏锞宠
.7$卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 叆鑉锞宠 ⢪欽罏锞宠
.7$卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 须俲 叆鑉锞宠 ⢪欽罏锞宠
.7$卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 须俲 须俲 叆鑉锞宠
⢪欽罏锞宠
.7$卺圓爚䠑㕬 7JFX .PEFM $POUSPMMFS 须俲 须俲 叆鑉锞宠
⢪欽罏锞宠 㔐䥰⢪欽罏
資料庫
關聯聯式 SQL
NoSQL
如何為你的專案 選擇適當技術?
None
䪮遯鼇乵 畮 )5.-$44 7VFKT +4K2VFSZ 3FBDUKT 沒其他選擇了了XD 相比 React 我認為比較好上⼿手的前端框架
設定最簡單最快速的寫法 ⽬目前非常熱⾨門的前端框架
䪮遯鼇乵 䖕畮 /PEFKT&YQSFTT 3VCZPO3BJMT 1ZUIPO%KBOHP 1)1-BSBWFM
䪮遯鼇乵
ꡠ鸮䒭须俲䏨
䪮遯鼇乵 须俲䏨 /P42-.POHP%# 42-.Z42- 扁平/欄欄位可能不相同/沒有必要關聯聯 需要關聯聯/正規化的資料
䪮遯鼇乵 䖕畮 畮 须俲䏨 )5.-$44 /PEFKT&YQSFTT /P42-.POHP%# 7VFKT 3VCZPO3BJMT +4K2VFSZ
3FBDUKT 1ZUIPO%KBOHP 42-.Z42-
討論
專題討論:CDN
None
None
None
None
None
None
None
None
None
None
1 秒
1 秒
2 秒 1 秒
CONTENT DELIVERY NETWORK
靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 CDN 快取
英國 UK 客⼾戶端 德國 DE
靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE
靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE
靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜)
靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜)
靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜)
靜態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) API 呼叫結果 稍慢抵達 (通過海海纜)
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 CDN 快取
英國 UK 客⼾戶端 德國 DE CDN 上⾞車車 英國 UK
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE CDN 上⾞車車 英國 UK
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE CDN 上⾞車車 英國 UK
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK
動態 CDN 原理理簡介 伺服器 台灣 TW 靜態內容 動態內容 預先複製 (通過海海纜)
CDN 快取 英國 UK 客⼾戶端 德國 DE 圖片、⾳音訊等 快速抵達 (歐陸電纜) CDN 上⾞車車 英國 UK Google/Amazon 內部專線網路路 (⾼高優先權)
CDN 服務提供者
Google GCP
Amazon CloudFront
GeoDNS
傳統 DNS DNS 伺服器 客⼾戶端
傳統 DNS DNS 伺服器 請問 example.com 在哪裡? 客⼾戶端
傳統 DNS DNS 伺服器 請問 example.com 在哪裡? 客⼾戶端
傳統 DNS DNS 伺服器 請問 example.com 在哪裡? 客⼾戶端 回應:在 94.87.94.87
喔
傳統 DNS DNS 伺服器 請問 example.com 在哪裡? 客⼾戶端 回應:在 94.87.94.87
喔
GeoDNS DNS 伺服器 客⼾戶端 德國 DE 客⼾戶端 台灣 TW
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 客⼾戶端 德國 DE 客⼾戶端
台灣 TW
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 客⼾戶端 德國 DE 客⼾戶端
台灣 TW
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 回應:英國 Server IP 1.1.1.1
客⼾戶端 德國 DE 客⼾戶端 台灣 TW
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 回應:英國 Server IP 1.1.1.1
客⼾戶端 德國 DE 客⼾戶端 台灣 TW
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 回應:英國 Server IP 1.1.1.1
客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡?
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 回應:英國 Server IP 1.1.1.1
客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡?
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 回應:英國 Server IP 1.1.1.1
客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡? 回應:⽇日本 Server IP 9.9.9.9
GeoDNS DNS 伺服器 請問 example.com 在哪裡? 回應:英國 Server IP 1.1.1.1
客⼾戶端 德國 DE 客⼾戶端 台灣 TW 請問 example.com 在哪裡? 回應:⽇日本 Server IP 9.9.9.9
Q & A