Slide 1
Slide 1 text
TODAY 看世界(?)
是我們在看扣啦！
上班到底都在看什麼勒？
Slide 2
Slide 2 text
Jeffery Bai
LINE TODAY | TECH FRESH
Education
● Master of Information Management @ NTU
● Research Field: NLP, RecSys
Experience
● 2024 | TECH FRESH @ LINE Taiwan
● 2023 | Data Scientist Intern @ MoBagel
● 2021 | Data Analyst Intern @ USPACE
Slide 3
Slide 3 text
01 TODAY 要看什麼？
CONTENT
02 演算法知道你愛看啥！？
03 讓你的架構乾淨起來
04 從0開始的 Refactor 生活
Slide 4
Slide 4 text
TODAY 要看什麼？
讓你逛不完的 LINE TODAY 產品
TODAY 看世界
國際 娛樂
10M↾
users
50M↾
traffic
3
regions
Section 1
Slide 5
Slide 5 text
優質新聞節目
TODAY 看世界, TODAY 財知道, …
精彩賽事轉播
NBA, UBA 大專籃球, CBL 中職,...
其他有趣內容
好康優惠, 電影聲量榜, 動漫票選,...
Slide 6
Slide 6 text
LINE MUSIC LINE SPOT
Slide 7
Slide 7 text
QA
Data Engineer
PM
大量的內容＝超大量資料
Data Team 在做什麼？
Machine
Learning
Engineer
ETL pipelines, Dashboard
Recommendation
Scrum!!!
Slide 8
Slide 8 text
SECTION 02
演算法知道你愛看啥！？
真假！？
什麼是「個人化推薦系統」？
（Personalized Recommender System）
Slide 9
Slide 9 text
協同過濾
（Collaborative Filtering）
相似商品
（Similar Items）
Source: Recommender Systems in Machine Learning: Examples
Slide 10
Slide 10 text
協同過濾
（Collaborative Filtering）
相似商品
（Similar Items）
Slide 11
Slide 11 text
如何做推薦模型？先從資料開始！
Define
Data Spec
資料情境、定義
Feature
Engineering
前處理、特徵工程
Model
Design/Training
模型設計、訓練
User Features Item Features
Interactions
Slide 12
Slide 12 text
可以上線了嗎？不行！先做 A/B Test
A/B
Testing
線上測試、更新
What to test?
How to test?
How to Evaluate?
決定實驗組 vs. 對照組
決定使用者分群、實驗時間區間
決定衡量指標、通過條件
Slide 13
Slide 13 text
學校專案 vs. 業界實務
學校 實務
資料 小量、乾淨、定義清楚 巨量、複雜 → 資料分析 !!!
情境 固定、單純、受控制的命題 每天變動的環境 → 商業邏輯
團隊 小團隊、成員單一 多人協作、迅速迭代 → 表達呈現能力
規模 小規模、實驗性、會動就好 大規模開發維護 → 乾淨的 Code
Slide 14
Slide 14 text
Min Chang
LINE TODAY | TECH FRESH
MS @NCU IM
2024 ~ 2025 TECH FRESH @LINE Taiwan
2022 ~ 2024 Freelancer @Gamma Technologies
Slide 15
Slide 15 text
那專案架構上呢？
通常單次使用 更新頻率不高
多人一起頻繁修改 系統需要長期規劃 好擴充/鬆耦合
Slide 16
Slide 16 text
SECTION 03
什麼 Clean Architecture前端也能用嗎？
讓你的架構
乾淨起來
Slide 17
Slide 17 text
今晚我想來點 Clean Architecture
• 核心理念：關注點分離
• 核心 (黃色/紅色)：業務規則 - 系統中最穩定、最重要的部分。（放在下面）
• 外層 (藍色/綠色)：技術細節 - 框架、資料庫、UI... 這些都是可以替換的工具。 （放在下面）
• 由外向內的依賴關係
• Domain, Use case, Adapter, Framework
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
SECTION 04
從例子看起，慢慢搬成乾淨架構
從0開始的Refactor生活
Slide 20
Slide 20 text
LINE Music login
Web 登入
SSO Server
驗證
session
登入成功
Any errors
Session 合法
是否在服務區
顯示錯誤
訊息
…
Slide 21
Slide 21 text
什麼？加入LIFF登入 ?
Session LIFF Token
Slide 22
Slide 22 text
什麼？加入LIFF登入 ?
Web 登入
SSO Server
驗證
session
登入成功
Any errors
Session 合法
是否在服務區
顯示錯誤
訊息
…
Slide 23
Slide 23 text
什麼？加入LIFF登入 ?
Web 登入
SSO Server
驗證
session
登入成功
Any errors
Session 合法
是否在服務區
顯示錯誤
訊息
…
Slide 24
Slide 24 text
原本的
SSO登入
登入
驗證 Session & 身分
驗證 SSO Session
Slide 25
Slide 25 text
保持不動加入LIFF登入看看？
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Domain
聚焦在「核心概念」和「不變商業規則」上。
定義與操作那些與應用場景無關、永遠成立的業務邏輯。
User Domain
Slide 28
Slide 28 text
Domain
聚焦在「核心概念」和「不變商業規則」上。
定義與操作那些與應用場景無關、永遠成立的業務邏輯。
Slide 29
Slide 29 text
Domain
聚焦在「核心概念」和「不變商業規則」上。
定義與操作那些與應用場景無關、永遠成立的業務邏輯。
Slide 30
Slide 30 text
Use case
系統的業務規則和應用特定的業務邏輯
獨立於外部框架，使得業務邏輯可以在不受外部依賴變化影響的情況下被測試和維護
Login Authentication
Slide 31
Slide 31 text
Use case
系統的業務規則和應用特定的業務邏輯
獨立於外部框架，使得業務邏輯可以在不受外部依賴變化影響的情況下被測試和維護
Get Profile
Get Access Token
Validate Session
Slide 32
Slide 32 text
Use case
系統的業務規則和應用特定的業務邏輯
獨立於外部框架，使得業務邏輯可以在不受外部依賴變化影響的情況下被測試和維護
用抽象取代實作
定義Delegator介面
Slide 33
Slide 33 text
Use case
系統的業務規則和應用特定的業務邏輯
獨立於外部框架，使得業務邏輯可以在不受外部依賴變化影響的情況下被測試和維護
不需要去判斷是哪種登入，交由delegator的實作決定
Slide 34
Slide 34 text
Use case
系統的業務規則和應用特定的業務邏輯
獨立於外部框架，使得業務邏輯可以在不受外部依賴變化影響的情況下被測試和維護
Handle Authentication
也同理
Slide 35
Slide 35 text
Adapter
將外部環境與業務流程組合
Slide 36
Slide 36 text
Adapter 將外部環境與業務流程組合
SSO
LIFF
Delegator
實作
SSO
Delegator
LIFF
Delegator
Slide 37
Slide 37 text
Adapter 將外部環境與業務流程組合
最後來用hook與頁面整合
React
Slide 38
Slide 38 text
Framework
包含了選擇的第三方工具（框架、函式庫、驅動程式）
具體實現，而不是抽象邏輯
UserProfileAvatar.tsx
Slide 39
Slide 39 text
UserProfileAvatar.tsx
useLoginHandle
r
Framework
Adapter
Use case
SSODelegator
LiffDelegator
Delegator
login
User
Domain
handleAuthenticatio
n
Slide 40
Slide 40 text
No content