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

Transcript

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 5IFSF
    JT
    B
    DPODFSO
    BCPVU
    UIF
    GVODUJPOBM
    TDBMBCJMJUZ
    PG
    -*''
    4%,
12. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable
    -*''
    JT
    EJ⒏DVMU
    UP
    EFCVH
13. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IF
    NFBOJOH
    PG
    "1*
    JT
    
    EJ⒏DVMU
    UP
    VOEFSTUBOE
    
    UISPVHI
    UIF
    EPDVNFOU
14. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IF
    JOGPSNBUJPO
    PO
    TFSWJDF
    BWBJMBCJMJUZ
    JT
    IBSE
    UP
    VOEFSTUBOE 5IF
    RVBMJUZ
    PG
    TFSWJDFT
    JT
    EJ⒏DVMU
    UP
    HVBSBOUFF
    
    FH
    
    -PBE
    UFTU
15. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable #FTU
    QSBDUJDFT
    BSF
    VOLOPXO
16. Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IFSF
    JT
    B
    DPODFSO
    BCPVU
    UIF
    GVODUJPOBM
    TDBMBCJMJUZ
    PG
    -*''
    4%,
    -*''
    JT
    EJ⒏DVMU
    UP
    EFCVH 5IF
    NFBOJOH
    PG
    "1*
    JT
    
    EJ⒏DVMU
    UP
    VOEFSTUBOE
    
    UISPVHI
    UIF
    EPDVNFOU 5IF
    GBJMVSF
    JOGPSNBUJPO
    PG
    -*''
    JT
    EJ⒏DVMU
    UP
    VOEFSTUBOE 5IF
    RVBMJUZ
    PG
    TFSWJDFT
    JT
    EJ⒏DVMU
    UP
    HVBSBOUFF
    
    FH
    
    -PBE
    UFTU #FTU
    QSBDUJDFT
    BSF
    VOLOPXO
17. 1MBZHSPVOE -*''
    *OTQFDUPS 4UBSUFS
    BQQ 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