LIFF SDK: Past and Future (LIFF SDK v3)

Takuya Okamoto
LINE UIT Team1 Senior Front-End Engineer
https://linedevday.linecorp.com/2020/ja/sessions/7557
https://linedevday.linecorp.com/2020/en/sessions/7557

Transcript

2. Okamoto Takuya UIT Team1, Kyoto Developer Division Senior Front-End Engineer LIFF/Login Front-End Tech Lead
3. › LINE Front-end Framework (LIFF) › Web application › HTML, CSS, JavaScript › Integration with LINE platform › Authentication › User profile › Messaging API › JS SDK What is LIFF
4. Today’s Sessions › 1. Past and Future (LIFF SDK v3) › 2. Actions for DX Improvements › 3. The Road to Web Orientation › 4. UI Framework for LIFF Apps
5. The circumstance around us LINE MINI App General Developers LINE Family Services LIFF SDK Team Migrated from old framework
6. What we achieved in v2 Oct 2020 Transition to another LIFF app Jun 2020 New endpoint URL spec Mar 2020 Share Target Picker Jul 2020 Publish NPM Package May 2020 Versioning policy LIFF UI (In-house Lib) Oct 2019 LIFF SDK v2
7. liff.shareTargetPicker([ { 'type': 'text', 'text': 'Hello, World!' } ]) .then(function (res) { if (res) { // succeeded in sending a message through TargetPicker console.log(`[${res.status}] Message sent!`) } else { console.log('TargetPicker was closed!') } }).catch(function (error) { // something went wrong before sending a message console.log('something wrong happen') }) ShareTargetPicker
8. import liff from '@line/liff'; liff.init({ liffId: 'myLiffId' }); NPM Package
9. Needs from developers And so on… 2) Standout advantage 5) High performance 4) Keep compatibility w/ developer's service 3) Obvious specs and behavior 1) Stability
10. Needs from developers And so on… 2) Standout advantage 5) High performance 4) Keep compatibility w/ developer's service 3) Obvious specs and behavior 1) Stability
11. Needs from developers And so on… 2) Standout advantage 5) High performance 4) Keep compatibility w/ developer's service 3) Obvious specs and behavior 1) Stability
12. Needs from developers And so on… 5) High performance 4) Keep compatibility w/ developer's service 3) Obvious specs and behavior 1) Stability 2) Standout advantage
13. To enhance our product's value 3 kinds of initialization Uniform initialization ASIS TOBE Feature Feature Feature Feature Feature Feature LIFF Team LIFF Team Other Party
14. And so on… 2) Standout advantage 5) High performance 4) Keep compatibility w/ developer's service 3) Obvious specs and behavior 1) Stability Needs from developers
15. New feature development won’t rely on SDK team Contribute to reduce SDK’s file size Planning to open plugin's I/F to the public Make LIFF SDK support plugins Develop in web development way Uniform design among different platforms …Further information, please look forward the coming session More Web-oriented Plan in v3 …And more!!
16. Example of Plugin Feature : Case1 // Plugin user's code (main.js) const profilePlus = new ProfilePlus() // Inject Profile+ Plugin liff.use(profilePlus) // LIFF initialization liff.init({liffId: "YOUR LIFF ID"}).then(() => { // Succeeded liff.init document.querySelector("#button").addEventListener("click", () => { // Fill up the input forms with user profile information liff.$profilePlus.fill() }) })
17. Example of Plugin Feature : Case2 // Plugin's code (liffp-login-your-service.js) export default class { get name() { return “yourService" } install(ctx, liff) { ctx.addCallback("afterLogin", () => { // Send AccessToken to your server this.userInfo = await fetch("https://yourapp.com/userInfo", { method: "POST", headers: { Authorization: `Bearer ${liff.getAccessToken()}` } }).then(res => res.json()) }) return { // Register your API getAccountId() { return this.userInfo.AccountId } } } } // Plugin user's code (main.js) import LoginYourService from 'liffp-login-your-service.js' const loginYourService = new LoginYourService() liff.use(loginYourService) liff.init({liffId: "YOUR LIFF ID"}).then(() => { // User can call your API const yourSerivceLoginId = liff.$yourService.getAccountId() })
18. New feature development won’t rely on SDK team Contribute to reduce SDK’s file size Planning to open plugin's I/F to the public Make LIFF SDK support plugins Develop in web development way Uniform design among different platforms …Further information, please look forward the coming session More Web-oriented Plan in v3 …And more!! By Spring 2021 Step by step
19. Thank you