Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LIFF SDK: Past and Future (LIFF SDK v3)

LINE DevDay 2020
November 26, 2020
770

LIFF SDK: Past and Future (LIFF SDK v3)

LINE DevDay 2020

November 26, 2020
Tweet

Transcript

  1. › LINE Front-end Framework (LIFF) › Web application › HTML,

    CSS, JavaScript › Integration with LINE platform › Authentication › User profile › Messaging API › JS SDK What is LIFF
  2. 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
  3. The circumstance around us LINE MINI App General Developers LINE

    Family Services LIFF SDK Team Migrated from old framework
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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!!
  13. 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() }) })
  14. 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() })
  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!! By Spring 2021 Step by step