What's New in LINE Front-end Framework

What's New in LINE Front-end Framework

Daisuke Shimizu
LINE UIT Department1 Product Manager / Front-end Engineer
https://linedevday.linecorp.com/jp/2019/sessions/B2-1

Be4518b119b8eb017625e0ead20f8fe7?s=128

LINE DevDay 2019

November 21, 2019
Tweet

Transcript

  1. 2019 DevDay What's New in LINE Front-End Framework > Daisuke

    Shimizu > LINE UIT Department1 Product Manager / Front-end Engineer
  2. Daisuke Shimizu Front-End Development Center / Senior Manager LIFF Product

    Manager
  3. > LINE Front-end Framework (LIFF) > Web application • HTML,

    CSS, JavaScript > Integration with LINE platform • Authentication • User profile • Messaging API • JS SDK LIFF Overview
  4. Multiple View Types Compact / Tall / Full

  5. History 2018 - 2019 LINE Things 2018.11 LIFF v1 released

    2018.6 LIFF v2 released 2019.10 LINE QUICK GAME 2018.9 In chat app 2018.5
  6. LIFF Apps Services In chat app Game Payment EC

  7. Advantages of LIFF v1 In comparison with native application

  8. Easy Development Web application (HTML, CSS, JavaScript) Build applications including

    serverless
  9. No App Installation Required Works if LINE is installed

  10. Integrated With LINE Platform Profile API / Messaging API

  11. LIFF v2 October 2019

  12. Our Focuses UX DX

  13. LIFF Supports Modern Browsers Integrated with LINE Login v2.1

  14. LIFF v1 liff.init( data => { //LIFF App initialization },

    err => { showAlert(err.message); } );
  15. LIFF v2 liff.init({ liffId: “{liffId}" }).then(() => { if (!liff.isLoggedIn())

    { //Redirect to LINE Login liff.login(); return; } //Show User Profile }).catch((err) => { window.alert(err.message); });
  16. Demo debug on chrome browser

  17. None
  18. Deeplink HTTPS scheme

  19. LIFF v1 Custom scheme line://

  20. LIFF v2 HTTPS scheme https://liff.line.me

  21. Demo LINE Browser

  22. > https://liff.line.me/{liffId}/path?query=foo > Support OGP Path and Query Parameters 31

  23. OpenID Connect Integrated with LINE Login v2.1

  24. > Integrated with LINE Login v2.1 > Prompts users to

    friend linked bot Bot Link
  25. LIFF v2 JS SDK > TypeScript > Definition file >

    DX improvements
  26. New APIs For JavaScript

  27. QR Code Reader liff.scanCode() "QR Code" is a registered trademark

    of DENSO WAVE INCORPORATED
  28. liff.scanQR LIFF v2 JS SDK /* interface ScanCodeResult { value:

    string | null } liff.scanCode(): Promise<ScanCodeResult> */ liff.scanCode().then(result => { // result = { value: ‘https://linedevday.linecorp.com’} });
  29. Demo liff.scanQR

  30. > Select friends and groups and share message > Message

    types include images, videos, and flex messages > This API will be available soon liff.shareTargetPicker
  31. New APIs LIFF v2 JS SDK liff.isInClient liff.login / liff.logout

    liff.getLanguage liff.getDecodedIDToken liff.getFriendship liff.isLoggedIn
  32. Overview New features of LIFF v2 > Modern browser support

    > OpenID Connect > Bot_prompt Added with LINE Login v2.1 > https://liff.line.me/{liffId}/{path}?{query} > Universal link / Deeplink > Definition file TypeScript support Deeplink > liff.scanQRCode > liff.shareTargetPicker > Multipurpose APIs New APIs
  33. Advantages of LIFF v2 In comparison with native application

  34. Easy Development Web application (HTML, CSS, JavaScript) Build applications including

    serverless Can be developed in the same way as a general web application
  35. No App Installation Required Works if LINE is installed Deeplink

    automatically handles various user environments
  36. Integrated With LINE Platform Profile API / Messaging API OpenID

    Connect, Bot Link New APIs (liff.scanCode, liff.shareTargetPicker, etc)
  37. New Product

  38. LINE x ৐׵Ҋ಺ Powered by LIFF v2.1

  39. > Action menu > Built-in share function New View Type

  40. LINE MINI App Powered by LIFF v2.1

  41. Future Next LIFF

  42. LUI > LIFF UI > Web components > Built-in LINE

    Design System
  43. Roadmap Next LIFF FinTech UX/DX AI

  44. Thank You