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

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

LINE DevDay 2019

November 21, 2019
Tweet

More Decks by LINE DevDay 2019

Other Decks in Technology

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