LINE Front-end Framework (LIFF) LINE Kyoto UIT 1 李致賢 (a.k.a Jason Lee) 2020/08/01 build an mini-app ecosystem for LINE developers 

Jason Lee LINE Frontend Engineer • Base on Japan/Kyoto • Present LIFF developer • Love Typescript/React…etc 

01 02 03 04 05 06 Today’s Agenda Brief introduction for LIFF framework Why LIFF? Use case and examples Challenges Future of LIFF Q & A 

• LINE Front-end Framework • Web application • Javascript SDK (Typescript supported) • Integration with LINE platform • Authentication • Interaction API with LINE • Get user profile, send a message…etc • In-App mode / external browser mode Brief introduction for LIFF framework 

• LIFF 推出前的歷史 • 誰在使⽤ LIFF? • LINE Family Service • LINE Mini App • ⼀般開發者 • 簡單易⽤ • 直觀，簡潔的 API 設計 • 開放與安全性 • 減少 Native bridge 的使⽤ Why LIFF? 

• 無須安裝，立刻使⽤ • 使⽤ Web 開發 • 想要與 LINE App 整合 • 取得使⽤者基本資訊 Use case 

• 申請 LINE Channel，建立 LIFF App • https://developers.line.biz/ • Install JS SDK • Via NPM • Via CDN • LIFF Starter • https://github.com/line/line-liff-v2-starter Example 

• 跨平台 • LINE App • iOS • Android • External Browser • Chrome • PC / Mobile • Safari • PC / iOS Challenges 

• Technical stack • Typescript • 只⽤到為數不多的 library • Jest • Webpack • CircleCI • 公司內部的 Analytics tool Challenges 

• Developer experience • Enhance supporting for Typescript • Static type checking • Hint from Typescript LSP Challenges 

• User experience • Inconsistent UI Design • UI Library (LUI) • Bounce rate • Incremental Channel Permission Challenges 

Future of LIFF • 提升可維護性 • 改善 QA 流程 • 改進 unit test 的架構 • Internal OSS • Pluginize • Monorepo • 改善開發者體驗 • Debug Tool • LIFF Mock • LIFF Emulator 

Q & A 

THANK YOU