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

LIFF SDK: Actions for DX Improvements

LIFF SDK: Actions for DX Improvements

Eebedc2ee7ff95ffb9d9102c6d4a065c?s=128

LINE DevDay 2020

November 26, 2020
Tweet

Transcript

  1. None
  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