What's New in LINE Front-end Framework

by LINE DevDay 2019

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Multiple View Types Compact / Tall / Full

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

LIFF Apps Services In chat app Game Payment EC

Slide 7

Slide 7 text

Advantages of LIFF v1 In comparison with native application

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No App Installation Required Works if LINE is installed

Slide 10

Slide 10 text

Integrated With LINE Platform Profile API / Messaging API

Slide 11

Slide 11 text

LIFF v2 October 2019

Slide 12

Slide 12 text

Our Focuses UX DX

Slide 13

Slide 13 text

LIFF Supports Modern Browsers Integrated with LINE Login v2.1

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Demo debug on chrome browser

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Deeplink HTTPS scheme

Slide 19

Slide 19 text

LIFF v1 Custom scheme line://

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Demo LINE Browser

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

OpenID Connect Integrated with LINE Login v2.1

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

New APIs For JavaScript

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Demo liff.scanQR

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Advantages of LIFF v2 In comparison with native application

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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