$30 off During Our Annual Pro Sale. View Details »

For Improvement of Developer Experience of All LIFF App Developers

For Improvement of Developer Experience of All LIFF App Developers

Takuya Okamoto
LINE / Developer Product Management Team / Technical Product Manager
Kohei Ueno
LINE / Front-end Dev9 team / Front-end Engineer

https://linedevday.linecorp.com/2021/ja/sessions/142
https://linedevday.linecorp.com/2021/en/sessions/142
https://linedevday.linecorp.com/2021/ko/sessions/142

LINE DEVDAY 2021
PRO

November 11, 2021
Tweet

More Decks by LINE DEVDAY 2021

Other Decks in Technology

Transcript

  1. None
  2. • Technical Product Manager • LIFF/LINE Login • Former LIFF

    Front-end Tech Lead Takuya Okamoto • Front-end Engineer • LIFF / LINE Baito • Mainly engaged in improving LIFF DeX Kohei Ueno
  3. › LINE Front-end Framework (LIFF) › Web application › HTML,

    CSS, JavaScript › Integration with LINE platform › Authentication › User profile › Messaging API › JS SDK What is LIFF
  4. LIFF Developer EndUser Who are users of LIFF? The easy

    of user of LIFF is linked to that of end users
  5. Numeric target of LIFF Platform KPI KPI Action plan Quality

    Activity to reduce the change failure rate in the LIFF team Productivity Balance between the values of developed functions and the costs up to successful development Flexibility Activity to improve the service satisfaction level
  6. DeX & LIFF KPI Productivity Flexibility Quality DeX Improvement

  7. DeX & LIFF KPI Productivity Value Flexibility Quality Customer Satisfaction

    DeX Improvement
  8. DeX & LIFF KPI Productivity Value Flexibility Quality Customer Satisfaction

    Improve developing cost DeX Improvement
  9. What are good developer experience? Excerpted from UX Magazine "Effective

    Developer Experience" (2011) Whether a trust relationship has been established between the developer and the platform Whether an environment for ease of learning is provided Reference: https://uxmag.com/articles/effective-developer-experience Whether good development tools are provided Whether the provided functions including API are high-quality and easy to use
  10. Metrics of UX : UX Honeycomb Useful Desirable Accessible Credible

    (Stable) Findable (Efficiency) Valuable Usable
  11. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IFSFJTBDPODFSOBCPVUUIF

    GVODUJPOBMTDBMBCJMJUZPG-*''4%,
  12. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable -*''JTEJ⒏DVMUUP

    EFCVH
  13. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IFNFBOJOHPG"1*JT

    EJ⒏DVMUUPVOEFSTUBOE UISPVHIUIFEPDVNFOU
  14. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IFJOGPSNBUJPOPOTFSWJDF

    BWBJMBCJMJUZJTIBSEUPVOEFSTUBOE 5IFRVBMJUZPGTFSWJDFTJT EJ⒏DVMUUPHVBSBOUFF FH-PBEUFTU
  15. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable #FTUQSBDUJDFTBSF

    VOLOPXO
  16. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IFSFJTBDPODFSOBCPVUUIF

    GVODUJPOBMTDBMBCJMJUZPG-*''4%, -*''JTEJ⒏DVMUUP EFCVH 5IFNFBOJOHPG"1*JT EJ⒏DVMUUPVOEFSTUBOE UISPVHIUIFEPDVNFOU 5IFGBJMVSFJOGPSNBUJPOPG-*''JT EJ⒏DVMUUPVOEFSTUBOE 5IFRVBMJUZPGTFSWJDFTJT EJ⒏DVMUUPHVBSBOUFF FH-PBEUFTU #FTUQSBDUJDFTBSF VOLOPXO
  17. 1MBZHSPVOE -*''*OTQFDUPS 4UBSUFSBQQ Useful Desirable Accessible Credible (Stable) Findable (Efficiency)

    Valuable Usable -*/&"1*4UBUVT -*''.PDL 1MVHJOBCMF"SDIJUFDUVSF
  18. LINE API Status https://api.line-status.info/

  19. LIFF Playground https://liff-playground.netlify.app/

  20. LIFF Starter https://liff-starter.netlify.app/

  21. Plugin-able Architecture init-plugin.js app.js @liff/core @liff/init @liff/use @liff/plugin-A

  22. LIFF Mock Solve the inability to do unit testing, load

    testing Server LIFF App Mock mode Server LIFF App Enable mock mode
  23. @line/liff-mock - Available as a LIFF plugin - All APIs

    are mocked - Return mock data - Be independent of the LIFF server completely
  24. LIFF Inspector LIFF browser & LIFF Inspector - Connect LIFF

    browser and Chrome DevTools remotely Google Chrome & Chrome DevTools Chrome DevTools LIFF Inspector - Developer tools built into Google Chrome Solve the inability to debug LIFF browser
  25. Local PC LIFF Browser on iPhone

  26. @line/liff-inspector - Available as a LIFF plugin - Debug methods

    - DOM Inspection - Console logs - Network logs
  27. Headless Inspector - A web inspector without UI - Intercept

    JS method calls, and Emit events accordingly - using Proxy API to intercept - OSS
  28. Chrome DevTools Protocol @line/headless-inspector-core @line/headless-inspector-cdp Chrome DevTools - Convert to

    Chrome DevTools Protocol - Intercept JS method calls
  29. LIFF Inspector in the future Local PC developers.line.biz Execution logs

    Real Device Built-in UI
  30. Now Available LIFF Playground - https://liff-playground.netlify.app/ LINE API Status -

    https://api.line-status.info/ LIFF Starter - https://liff-starter.netlify.app/ Plugin-able Architecture LIFF Mock LIFF Inspector Create LIFF App Under In-house testing Available from early 2022 These can be found at the LINE Developers > News page
  31. Thank you