LIFF SDK: Actions for DX Improvements

Ting Shu Lin
LINE UIT Team1 Front-End Engineers
https://linedevday.linecorp.com/2020/ja/sessions/7909
https://linedevday.linecorp.com/2020/en/sessions/7909

Transcript

2. DX Improvements Changes related to developer experience › Also fixed some minor issues: › Incorrect API description in document › Error handling › Undefined behaviors › NPM Package and TypeScript Type Definition
3. Modern Front-end Development Use frameworks like • React • Vue • Angular Build with • Webpack • Rollup ! Install packages with > yarn add @line/liff > npm install @line/liff
4. Modern Front-end Development Use frameworks like • React • Vue • Angular Build with • Webpack • Rollup ! Install packages with > yarn add @line/liff > npm install @line/liff But LIFF only provided:
5. LIFF Development in 2019 Errors in Typescript and ESLint
6. LIFF Development in 2019 No Hints, No TypeError. Need to check document carefully " Which one is right?
7. NPM Package Released ٩(๑❛ᴗ❛๑)۶
8. Friendly Hints In VSCode and all Editors connected with TypeScript LSP › Hints for function names › Hints for paramaters
9. Static Type Checking See type errors just in time! * You can also enjoy this in JavaScript files!
10. Read Documentations Easily
11. > npm publish @line/liff It seems easy? #
12. Problems we faced › Other minor issues › Like versioning policy, documentation… › LIFF had high dependance with native clients. › LIFF was not typed perfectly. https://developers.line.biz/en/docs/liff/versioning-policy/
13. Problems we faced › Other minor issues › Like versioning policy, documentation… › LIFF had high dependance with native clients. › LIFF was not typed perfectly. https://developers.line.biz/en/docs/liff/versioning-policy/ $
14. Make Type Stricter
15. What’s Really Useful Type? › Convenient for passing type checking ❌ Hints and check for attributes
16. What’s Really Useful Type? › Safe and useful to users
17. Improvement to LIFF’s Type $$
18. Improvement to LIFF’s Type $$
19. Improvement to LIFF’s Type Thanks to @line/bot-sdk
20. Improvement to LIFF’s Type Thanks to @line/bot-sdk
21. Problems we faced › LIFF had high dependance with native clients. › LIFF was not typed perfectly.
22. Problems we faced › LIFF had high dependance with native clients. › LIFF was not typed perfectly.
23. Problems we faced › LIFF had high dependance with native clients. › LIFF was not typed perfectly. $
24. LIFF Native Client › Affected by iOS, Android and LINE App › LIFF is dependent on native client
25. The Old Way LIFF sdk.js LINE 10.9 LIFF sdk.js LINE 10.10 LINE App updated #SPLFO
26. The Old Way LIFF sdk.js LINE 10.9 LIFF sdk.js LINE 10.10 LINE App updated Just update this file #SPLFO
27. The Old Way LIFF sdk.js LINE 10.9 LINE App updated Just update this file LIFF sdk.js (new) LINE 10.10
28. LIFF Installed with NPM > npm install @line/liff@2.2.3 LIFF 2.2.3 LINE 10.9 LIFF 2.2.3 LINE 10.10 LINE App updated
29. LIFF Installed with NPM > npm install @line/liff@2.2.3 LIFF 2.2.3 LINE 10.9 LIFF 2.2.3 LINE 10.10 LINE App updated #SPLFO All LIFE app using LIFF < 2.2.4 are broken &
30. Separate Code related to Native Client Before: All features were included in one file Web Features Messaging Login LIFF iOS supporting Android supporting
31. Separate Code related to Native Client After separated Web Features LIFF Core LIFF Android LIFF iOS Provided on NPM Dynamically loaded, always latest.
32. LIFF Installed with NPM > npm install @line/liff@2.2.3 LIFF 2.2.3 LIFF-iOS 2.2.3 LINE 10.9 LIFF 2.2.3 LIFF-iOS 2.2.4 LINE 10.10 LINE App updated Dynamically Loaded
33. Problems we faced › LIFF had high dependance with native clients. › LIFF was not typed perfectly.
34. Problems we faced › LIFF had high dependance with native clients. › LIFF was not typed perfectly.
35. Problems we faced › LIFF had high dependance with native clients. › LIFF was not typed perfectly. LIFF’s NPM package released ʋ(ŋ㱼ŋ)ů
36. Future Works › Web Oriented: Make developing and testing easier. › More in next section! › Improve workflows to make document better.
37. Thank you