Modern Front End Evolution

Modern Front-End Evolution
Kuan-Ching Chou
2019/11/6

3
我們迎來了新⼀波的資訊⾰命

⼀開始我們是這樣的...
4
⽤瀏覽器觀看⽂章使⽤Server放置Static Files
Static Files
(html, css, js)

5
當Web熱潮來臨
我們開始在web上進⾏商業活動

瀏覽器端(Front-End)的⾓⾊也開始吃重
7
我們必須仰賴
更為複雜的html css js來進⾏商業活動

不再只是瀏覽網⾴
8
Web Application
⽽是使⽤

Web Application
- 能夠在不同裝置良好呈現內容 -
- 網⾴部分更新 -
- 操作即時反饋 -
- 網⾴快速載入 -
- 服務容易被找到 -
- 好開發維護 -
9

Web Application
- 好開發維護 -
10

Responsive Web Design(RWD) 
響應式網⾴設計
11
能在不同裝置呈現內容，依螢幕寬調整顯⽰⽅式

利⽤Media Query 
來設定不同螢幕寬，元素之寬度要是多少
12
// 1 collumn
@media (max-width: 300px) {
.container .ele{
width: 100%;
}
}
// 2 collumn
@media (min-width: 300px) and (max-width: 600px) {
.container .ele{
width: 50%;
}
}
// 3 collumn
@media (min-width: 600px) {
.container .ele{
width: 33%;
}
}

Sassy CSS(SCSS)
13
// 1 collumn
.container .ele{
width: 100%;
}
}
// 2 collumn
.container .ele{
width: 50%;
}
}
// 3 collumn
.container .ele{
width: 33%;
}
}
.container{
// 1 collumn
& .ele{
width: 100%;
}
}
// 2 collumn
& .ele{
width: 50%;
}
}
// 3 collumn
& .ele{
width: 33%;
}
}
}
將 .ele 放在 .container 底下

Sassy CSS(SCSS)
๏ 允許使⽤變數, Function, 階層
๏ 可讀性比CSS還⾼
๏ 需要轉換回CSS, Browser才看得懂
14
compile
Source
Map
啟⽤source map，即可在Browser開
發⼯具上看到scss原始⾏數

Web Application
- 好開發維護 -
15

๏ 點擊後 
網⾴部分更新
๏ 可使⽤像
之類的套件輔助動
態取得資料，但不
跳⾴
網⾴部分更新
17
Load More
๏ 好處
• 不需跳⾴，即可載入更多內容
• User體驗不會中斷
๏ 衍伸議題
• Event Driven
難以管理Data
• 網址不變
難以管理State
• JS code 變多
需要更模組化的code

Single Page Application(SPA)
18
畫⾯變，網址變，但不跳⾴
⾴⾯差異更新

Single Page Application(SPA)
๏ 單⾴式應⽤
• 像是Gmail
๏ 完全不跳⾴
• 網址變，但實際上沒跳⾴
19

SPA應⽤場景
20
跳⾴的話，體驗會變差
๏ 帶聊天功能網站
• ex facebook
๏ ⾳樂網站
๏ 影片網站
๏ 直播網站
๏ 後台類網站

Web Application
- 好開發維護 -
21

操作即時反饋(Reactive)
22
Jquery
$("input").on("change",function(){
$("#display").html( $(this).val() )
})
๏ 所⾒即所得，體驗不中斷

Web Application
- 好開發維護 -
23

網⾴載入的越久，顧客越不會留下
24

加快初始化速度
๏ JS
• Minify、Uglify
• …
๏ CSS
• Minify
• CSS Sprites
• …
๏ Initial Data
• PWA
25
JS Minify, Uglify
去除空格、縮排、註解、混淆...

CSS Sprites
26
將圖檔合併以減少網路IO
icon-s6194bebbcc.css
.icon-sprite, .actions .remove,
.actions .pen, .actions .save,
.actions .search {
background-image: url('/images/icon-s6194bebbcc.png');
background-repeat: no-repeat;
}
.actions .remove {
background-position: 0 0; width: 48px; height: 48px; }
.actions .pen { background-position: 0 -48px; }
.actions .save { background-position: 0 -96px; }
.actions .search { background-position: 0 -144px; }

Progressive Web Appication(PWA)
27
讓Web Application
部分服務離線可使⽤
已載入過的Data
離線時還可繼續使⽤

Web Application
- 好開發維護 -
28

Search Engine
29
Crawler
爬取網站
Html
Website
下載網站內容
Search …. 提供搜尋服務
分析
動態產⽣內容
難以被爬蟲抓取

Search Engine Optimization(SEO)
๏ SEO: 將網⾴內容優化，以讓搜尋引擎好分析
๏ 爬蟲程式難以爬取動態產⽣內容
⼀些網⾴內容預先由Server Side Render(SSR)出來
30
Response
Request
Crawler
Html
Prerender
Server
預先渲染
想讓爬蟲抓取的資料

Web Application
- 好開發維護 -
31

模組化
32
<!DOCTYPE html>
<html>
<head>
<script src=“/global_lib/aaa.js"></script>
<script src="/global_lib/bbb.js"></script>
<script src="/global_lib/ccc.js"></script>
<script src=“/index_lib/001.js"></script>
<script src="/index_lib/002.js"></script>
<script src="/index_lib/003.js"></script>
...
</head>
<body>
...
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src=“/global_lib.js"></script>
<script src=“/index_lib.js"></script>
...
</head>
<body>
...
</body>
</html>
1
將共⽤js包成⼀個js
1
22
將特定⾴⾯⽤之js包成⼀個js1 2

模組化
33
๏ ES5
• Require JS: ⽤js的⽅式來進⾏模組化
๏ ES6
• import, export: 原⽣⽀持模組化
• 導致require js的熱度降低
• 不⽀持ES6之瀏覽器無法使⽤
• 模組化後需要進⾏優化 
=> 使得webpack、babel等js興起

模組化
34
๏ ES5
• Require JS: ⽤js的⽅式來進⾏模組化
๏ ES6
• import, export: 原⽣⽀持模組化
• 導致require js的熱度降低
• 不⽀持ES6之瀏覽器無法使⽤
• 模組化後需要進⾏優化 
=> 使得webpack、babel等js興起
util.js
function TestFunction(){
return "Hello World"
}
export {
TestFunction
}
main.js
import { TestFunction } from ‘util.js'
TestFunction() // "Hello World"

Babel
๏ Babel is a JavaScript compiler.
๏ 旨在解決js語法跨瀏覽器相容問題
35
Compile

Webpack
36
將多個檔案合併(Bundle)並進⾏優化

Webpack
37
src/index.js
import bar from './bar';
bar();
src/bar.js
export default function bar() {
//
}
page.html
<!doctype html>
<html>
<head> ... </head>
<body> ...
<script
src="dist/bundle.js"></script>
</body>
</html>
webpack.conﬁg.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path:
path.resolve(__dirname,’dist'),
filename: 'bundle.js'
}
};
Source CodeEntry Point
Conﬁg File
利⽤entry js，將關聯檔案全部合
併(Bundle)成⼀個js並進⾏優化

元件化
๏ 有些前端框架甚⾄可以做到元件化
๏ 不只是物件化
• 將html, css, js整個物件化起來
๏ 元件內部之html, css, js 
不會影響到外部
๏ 也可定義與外部js 
之input, output接⼝
38
元件化後之⽇曆
內部運作邏輯已經與外部隔開

39
元件化
๏ Suedo Code 
以Vue為例
Main.vue Calendar.vue
<template>

<div> ... </div>
</template>
<script>
// Define js logic
export default {
name: "Calendar",
data(){
return {
...
}
},
}
</script>
<style lang="scss" scoped>
// Define Scss
...
</style>
<template>
<Calendar/>
</template>
<script>
// Define js logic
import Calendar from 'Calendar.vue'
export default {
name: “Main",
components:{ Calendar },
data(){
return {
...
}
},
}
</script>
// Define Scss
...
</style>

40
元件化
Main.vue
<template>
<Calendar/>
<Calendar/>
</template>
<script>
// Define js logic
import Calendar from 'Calendar.vue'
export default {
name: “Main",
components:{ Calendar },
...
}
</script>
// Define Scss
...
</style>
2個⽇曆各⾃有⾃⼰的狀態
不會被另⼀個⽇曆影響
๏ Suedo Code以Vue為例

管理複雜化之前端
๏ 以SPA為例
• 何時更新Data，同步Data?
• 何時該連動更新畫⾯?
• 何時該呼叫後端更新Data?
41
管理的議題，使前端框架興起

以Vue為例
๏ Vue是Model-View-ViewModel(MVVM)架構
42

使⽤前端框架
๏ 前端的運作開始複雜化
๏ Data在event driven下越來越難管理
๏ 前端框架希望簡化這些複雜的管理問題
๏ 3⼤前端框架
43
React Angular Vue

⽤前端框架進⾏開發
๏ 以下是⼀個基本型開發模式
1. 安裝node js
2. 安裝框架
3. 以框架的規範進⾏開發
4. Build前端專案
5. 將Build後之Static File進⾏部署
44
過去我們直接撰寫Static File，並部署
應⽤前端框架的話，通常要先Build過才會部署

45
前端技術如雨後春筍般出現

46
這麼多的技術
選誰好?

47
每個技術的出現，背後都有它所想要解決的問題
只要他能解決你的痛點，你就有選他的理由

49
我選擇可以讓我準時下班的

Modern Front End Evolution

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Modern Front End Evolution