@ryotah, @yutapon, @tokuda109, and @dwj are four crucial members of the Merpay Frontend Team, which provides frontend support. In this interview, we discuss what they’re currently working on, their technology stack, future aspirations, and more. Read on for more details on the technology being used to develop the Merpay frontend!
This interview was conducted by @afroscript from the Engineering Office.
Introductions
— First of all, please introduce yourselves.
@ryotah: I joined Merpay in August 2018. I used to work as a frontend engineer developing reservation/customer management services for restaurants, and I also worked in game development. Since joining the company, I’ve been working on development of the merchant admin screen, as well as the customer support (CS) tools used internally.
I’m currently developing a CS tool for Mercoin, one of our group companies.
@yutapon: I joined the company in September 2018, just a short while after @ryotah. Before that, I worked as a frontend engineer at an online media company, where I was involved in developing a screen for managing article writing.
At Merpay, I’m involved in development and operation of the merchant application form, as well as DevOps for merchant support (MS) tools used in screening/management.
@tokuda109: I joined the company in October 2019. Before that, I worked as a frontend engineer for an ebook service and a curation site. At Merpay, I am working on stabilizing regression testing, with a focus on coupon development. I’m now involved in a wide range of tasks, such as improving frontend performance, improving technology testing and evaluation methods, and supporting the NFT project.
@dwj: I joined Merpay in February 2020. I’m from Italy. My family is Japanese, and I came to Japan in 2018. Before joining Merpay, I was a frontend engineer at Shiftbrain. I was in charge of CS tool development when I first joined Merpay, and now my main tasks are internal tool development and build tool optimization.
The four major qualities of the Frontend Team
— Please tell us what the Frontend Team is currently working on.
@tokuda109: Merpay was released in February 2019, with major feature development only now finally beginning to slow down. We’ve entered the product quality improvement phase now. The Frontend Team has established four major product quality issues, which we work on improving every day: testing, performance, accessibility, and security. Since around summer 2020, we’ve been using a dashboard tool called Looker to visualize metrics related to these four major quality issues.
— What metrics are you monitoring specifically?
@tokuda109: For testing, we look at coverage and success rate. We receive an alert from Slack if a test fails, so that we can make improvements the moment the success rate drops.
For performance, we measure the following four metrics.
- LCP (Largest Contentful Paint)
- CLS (Cumulative Layout Shift)
- TBT (Total Blocking Time)
- TTI (Time to Interactive)
Although Web Vitals recommends measuring LCP, CLS, and FID (First Input Delay), you can’t get any real values for FID unless you measure it in the actual user environment. Instead, we measure TBT and TTI, which are the closest indicators to FID.
@dwj: As for accessibility, we look at KPIs based on the WCAG standard, which is an international standard. Currently, our system is at AA Level in this standard, and I think we’ve been able to maintain a good balance.
@yutapon: For security, we’ve installed a GitHub App called WhiteSource Scan on each of the GitHub repositories managed by the Frontend Team, which posts the number of vulnerabilities remaining in the packages we use on GitHub Issues. We keep a monthly record of this number, and we track how many vulnerabilities are eliminated.
— What technical challenges or difficulties are you facing?
@tokuda109: For performance, it is difficult to determine why performance degrades, which is an issue. If you don’t know how the web browser is behaving, how JavaScript is being executed, or what kind of processing a library is performing, you won’t be able to find the bottleneck. The difficulty comes from having to understand all of this.
For testing, the difficulty is that the test environment constantly breaks down. Within Merpay’s systems, various microservices function in collaboration. If the test environment includes a microservice that’s being implemented or if it runs out of resources, that can cause the test environment to break down. We currently handle this by simply retrying, but we’re looking into really bolstering our testing.
@dwj: As for accessibility, there are no major technical difficulties because the setup and implementation is simple. However, we are struggling to find time to work on improving accessibility while developing product features. Currently, we decide what improvements we should do and make sure we have time to work on them at the beginning of each quarter.
@yutapon: Personally, I pay close attention to checking security when introducing a new company-wide tool. We use Go for development throughout the company, so we’re frequently introducing tools suited for development in Golang. I research what kinds of settings are required so that these tools can also be applied to frontend development, or whether there is any specific sample code available, and I share that with the team. I hope this will help provide everyone with some peace of mind and help them use the tools safely.
Technologies and development environments
— What types of technologies and tools are being used by the Frontend Team?
@yutapon: It might be helpful to refer to this diagram.
We mostly use Nuxt2 for the frontend. We use Jest for unit testing and Cypress for integration and regression testing. We use mock APIs for integration testing, but do not use them for regression testing, with the goal of running a series of e2e tests that include backend API behavior.
For MS (merchant support) tools, we make sure that the person adding integration testing is different from the person implementing the feature. We write tests based only on specifications, without looking at implementation. This way, if the person implementing the feature mixes up specifications, we can discover it during testing. We first began trying this around June 2021, and it’s been working well.
— Have you introduced any tools recently that you find particularly helpful?
@yutapon: The automatic merge function provided by Renovate is very useful. It will automatically update packages in our development repositories, as long as the test is passed. We used to update these manually, but we’ve made good use of the automatic merge function since the number of repositories has increased.
*FYI: Renovatebot/Renovate: Universal dependency update tool that fits into your workflows.
— How do you get the team to start using new tools like this?
@yutapon: I’ll try using the tool myself, then write up a document summarizing its use and share it during Frontend sync, which is a team meeting we hold every week. We’re generally free to introduce tools, as long as they don’t use external systems or require signing agreements.
The future of the Frontend Team
— What are your future plans?
@ryotah: We really have a lot of repositories now, and the cost of maintaining them (including updating packages) is growing. The number of repositories we need to maintain is growing even as the amount of immediate development work is shrinking, so it’s difficult to scale up. We’re currently looking into whether we can use monorepos to improve this.
@yutapon: The beta version of Nuxt3 has been released, and we expect the RC version to be released soon. It’ll soon be time to prepare to migrate to Nuxt3/Vue3. The syntax is going to change, so this will be a major change. It should be very interesting from a technical perspective.
I want us to continue to work as a team to improve quality. Recently, we’ve been using various tools and creating guidelines for secure development. Simply understanding how to use a tool is not enough. I think we also need to understand why a tool is being used. I feel we do a lot of good by educating people about the reasons for using a particular tool.
@tokuda109: I want to migrate to Nuxt3/Vue3, too. There are some points with regards to performance, however, that we need to discover on our own, as there isn’t much external knowledge available. We’ve collected some information, and we are currently working on consolidating this information on the engineering blog(Available only in Japanese). However, I don’t think we’re quite there yet, and so I’d really like to get some great results here.
@dwj: Our team is making daily improvements to enhance the quality and performance of our products.
We continue to take on challenges while exploring new tools such as Vite, Nx, and pnpm and development strategies. Migrating to Nuxt3/Vue3 will significantly improve the development experience and product performance, but we will need to carefully proceed with our migration plan so that services are not negatively impacted.
What type of person would be a good fit for the Frontend Team?
— What type of person do you think would be a good fit for the Frontend Team?
@tokuda109: The Frontend Team has established four major product quality issues, which we work on improving every day: testing, performance, accessibility, and security. I think anyone interested in any of these areas could do well here.
We also continue to use English more often in the Frontend Team. The team creates plenty of opportunities for junior engineers to study English, and members take turns facilitating our Frontend sync meetings, so we recommend our team to anyone who wants to use English at work.
— Thank you!
Hiring Information
The Merpay Frontend Team is currently looking for new members. If you are at all interested in joining us, please take a look at the application guidelines on Mercari Careers.
