No content

• 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

› LINE Front-end Framework (LIFF) › Web application › HTML, CSS, JavaScript › Integration with LINE platform › Authentication › User profile › Messaging API › JS SDK What is LIFF

LIFF Developer EndUser Who are users of LIFF? The easy of user of LIFF is linked to that of end users

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

DeX & LIFF KPI Productivity Flexibility Quality DeX Improvement

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

DeX & LIFF KPI Productivity Value Flexibility Quality Customer Satisfaction Improve developing cost DeX Improvement

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

Metrics of UX : UX Honeycomb Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable

Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IFSFJTBDPODFSOBCPVUUIF GVODUJPOBMTDBMBCJMJUZPG-*''4%,

Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable -*''JTEJ⒏DVMUUP EFCVH

Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable 5IFNFBOJOHPG"1*JT EJ⒏DVMUUPVOEFSTUBOE UISPVHIUIFEPDVNFOU

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

Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable #FTUQSBDUJDFTBSF VOLOPXO

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

1MBZHSPVOE -*''*OTQFDUPS 4UBSUFSBQQ Useful Desirable Accessible Credible (Stable) Findable (Efficiency) Valuable Usable -*/&"1*4UBUVT -*''.PDL 1MVHJOBCMF"SDIJUFDUVSF

LINE API Status https://api.line-status.info/

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

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

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

LIFF Mock Solve the inability to do unit testing, load testing Server LIFF App Mock mode Server LIFF App Enable mock mode

@line/liff-mock - Available as a LIFF plugin - All APIs are mocked - Return mock data - Be independent of the LIFF server completely

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

Local PC LIFF Browser on iPhone

@line/liff-inspector - Available as a LIFF plugin - Debug methods - DOM Inspection - Console logs - Network logs

Headless Inspector - A web inspector without UI - Intercept JS method calls, and Emit events accordingly - using Proxy API to intercept - OSS

Chrome DevTools Protocol @line/headless-inspector-core @line/headless-inspector-cdp Chrome DevTools - Convert to Chrome DevTools Protocol - Intercept JS method calls

LIFF Inspector in the future Local PC developers.line.biz Execution logs Real Device Built-in UI

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

Thank you