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
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
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