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
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
Flutterでキャッチしないエラーはどこに行く
taiju59
0
230
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
120
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
530
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
170
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.8k
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
290
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
160
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Making Projects Easy
brettharned
117
6.4k
It's Worth the Effort
3n
187
28k
Writing Fast Ruby
sferik
628
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
The Language of Interfaces
destraynor
161
25k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
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