No content

Okamoto Takuya UIT Team1, Kyoto Developer Division Senior Front-End Engineer LIFF/Login Front-End Tech Lead

› LINE Front-end Framework (LIFF) › Web application › HTML, CSS, JavaScript › Integration with LINE platform › Authentication › User profile › Messaging API › JS SDK What is LIFF

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

The circumstance around us LINE MINI App General Developers LINE Family Services LIFF SDK Team Migrated from old framework

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

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

import liff from '@line/liff'; liff.init({ liffId: 'myLiffId' }); NPM Package

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

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

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

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

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

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

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!!

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() }) })

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() })

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

Thank you