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

Transcript

1. 2019 DevDay
   What's New in LINE Front-End
   Framework
   > Daisuke Shimizu
   > LINE UIT Department1 Product Manager / Front-end
   Engineer
   

   View Slide

2. Daisuke Shimizu
   Front-End Development Center /
   Senior Manager
   LIFF Product Manager
   

   View Slide

3. > LINE Front-end Framework (LIFF)
   > Web application
   • HTML, CSS, JavaScript
   > Integration with LINE platform
   • Authentication
   • User profile
   • Messaging API
   • JS SDK
   LIFF Overview
   

   View Slide

4. Multiple View Types
   Compact / Tall / Full
   

   View Slide

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
   

   View Slide

6. LIFF Apps
   Services
   In chat app
   Game Payment EC
   

   View Slide

7. Advantages of LIFF v1
   In comparison with native application
   

   View Slide

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

   View Slide

9. No App Installation Required
   Works if LINE is installed
   

   View Slide

10. Integrated With LINE Platform
    Profile API / Messaging API
    

    View Slide

11. LIFF v2
    October 2019
    

    View Slide

12. Our Focuses
    UX DX
    

    View Slide

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

    View Slide

14. LIFF v1
    liff.init(
    data => {
    //LIFF App initialization
    },
    err => {
    showAlert(err.message);
    }
    );
    

    View Slide

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

    View Slide

16. Demo
    debug on chrome browser
    

    View Slide

17. View Slide

18. Deeplink
    HTTPS scheme
    

    View Slide

19. LIFF v1
    Custom scheme
    line://
    

    View Slide

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

    View Slide

21. Demo
    LINE Browser
    

    View Slide

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

    View Slide

23. OpenID Connect
    Integrated with LINE Login v2.1
    

    View Slide

24. > Integrated with LINE Login v2.1
    > Prompts users to friend linked bot
    Bot Link
    

    View Slide

25. LIFF v2 JS SDK
    > TypeScript
    > Definition file
    > DX improvements
    

    View Slide

26. New APIs
    For JavaScript
    

    View Slide

27. QR Code Reader
    liff.scanCode()
    "QR Code" is a registered trademark of DENSO WAVE INCORPORATED
    

    View Slide

28. liff.scanQR
    LIFF v2 JS SDK
    /*
    interface ScanCodeResult {
    value: string | null
    }
    liff.scanCode(): Promise
    */
    liff.scanCode().then(result => {
    // result = { value: ‘https://linedevday.linecorp.com’}
    });
    

    View Slide

29. Demo
    liff.scanQR
    

    View Slide

30. > Select friends and groups and share
    message
    > Message types include images, videos,
    and flex messages
    > This API will be available soon
    liff.shareTargetPicker
    

    View Slide

31. New APIs
    LIFF v2 JS SDK
    liff.isInClient
    liff.login / liff.logout
    liff.getLanguage
    liff.getDecodedIDToken
    liff.getFriendship
    liff.isLoggedIn
    

    View Slide

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
    

    View Slide

33. Advantages of LIFF v2
    In comparison with native application
    

    View Slide

34. Easy Development
    Web application (HTML, CSS, JavaScript)
    Build applications including serverless
    Can be developed in the same way as a general web application
    

    View Slide

35. No App Installation Required
    Works if LINE is installed
    Deeplink automatically handles various user environments
    

    View Slide

36. Integrated With LINE Platform
    Profile API / Messaging API
    OpenID Connect, Bot Link
    New APIs (liff.scanCode, liff.shareTargetPicker, etc)
    

    View Slide

37. New Product
    

    View Slide

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

    View Slide

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

    View Slide

40. LINE MINI App
    Powered by LIFF v2.1
    

    View Slide

41. Future
    Next LIFF
    

    View Slide

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

    View Slide

43. Roadmap
    Next LIFF
    FinTech
    UX/DX AI
    

    View Slide

44. Thank You
    

    View Slide