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
210
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
120
Club Mate and Hacker - 34C3 @ SITCON
jeremy5189
2
710
SITCON 2017 論壇系統開發分享 @ SITCON 2017 Summer
jeremy5189
0
230
poManeuver: Poland into space
jeremy5189
0
450
How we hacked a forum
jeremy5189
0
490
Bdecisive - Booking.com Taipei Hack 2nd Prize
jeremy5189
0
570
Social Intelligence Smart-device project
jeremy5189
0
64
IoT made easy @ SITCON x HK
jeremy5189
0
110
遺失的學校 - SITCON 2014 Lightning Talk
jeremy5189
0
560
Other Decks in Technology
See All in Technology
Azure Well-Architected Framework入門
tomokusaba
1
310
Pure Goで体験するWasmの未来
askua
1
180
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
バイブコーディングと継続的デプロイメント
nwiizo
2
430
実装で解き明かす並行処理の歴史
zozotech
PRO
1
420
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
150
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
2
170
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.5k
許しとアジャイル
jnuank
1
130
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
24
17k
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.5k
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
110
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Balancing Empowerment & Direction
lara
4
680
Scaling GitHub
holman
463
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
4 Signs Your Business is Dying
shpigford
185
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
The Cost Of JavaScript in 2023
addyosmani
53
9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Six Lessons from altMBA
skipperchong
28
4k
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