! This post is also available in the following language. Japanese

[Team & Project] Introducing the Team Developing Web Front-end for LINE User Services

The Team & Project series introduces each department and project in the LINE development organization, providing detailed information on their roles, structures, technology stacks, future issues, and roadmaps.

In this article, we’d like to introduce you to the team that is responsible for the web front-end of our user services. We spoke with Daisuke Shimizu, Ryota Agata, and Leonard Ken Orihara from the Front-end Development Center.

*This article is a translation of a Japanese article published in May 2020.

A Zoom meeting of the team developing web front-end for user services

— First, please introduce yourselves.

Shimizu: After working for a systems development company where I was responsible for library systems and the development of financial and logistics systems, I joined NAVER Japan (now LINE) as a front-end engineer in May 2009. I was involved in the front-end development of the search service, and after the launch of the LINE app, I was responsible for front-end development of various web services and product development for platforms like the JavaScript SDK. I am currently the Senior Manager of UIT (User Interface Technology) Dept. 1 within the Front-end Development Center.

Agata: I joined what was then NAVER Japan in April 2010 as a new graduate. As soon as I joined the company, I was involved in the development of various services as a front-end engineer, and now I am the Manager of Front-end Dev Team 3 within UIT Dept. 1.

Orihara: I joined LINE in November 2018 after working as an engineer and UX designer at an advertising agency. Since then I have been responsible for front-end development for LINE NEWS.

Please tell us why you came to LINE and your motivation for work.

Shimizu: At the company I worked for before, I was responsible for a whole range of things, ranging from infrastructure to the server side and the front-end. At that time, services like Google Maps were becoming more popular and web front-end was blossoming. Since then, I have been interested in front-end development.

I found a vacancy for a front-end developer position at NAVER Japan, and since there are not many companies with a specialized front-end development organization, I wanted to specialize in front-end development for my career. In addition, my association with the development of the library search service made me realize that I wanted to be involved in the front-end development of search services, which led me to join the company.

Agata: When I was studying, I was good at PHP and Flash, so when I started looking for a job, I wanted to find a place where I could utilize that experience. At that time, when I went to an NHN Japan recruitment exam, I also had a chance to attend a recruiting session of NAVER Japan. I chose NAVER Japan because I wanted to do something interesting, and the company’s approach towards replacing (or making LINE services comparable to) Google Search seemed challenging and novel to me.

Orihara: At my previous job, I worked in development and user testing for about six months––determining UI and UX based on data. The initiative itself was a huge project, but with only a few dozen users as a B-to-B service, it was hard to grow the user base. I am very keen to make the services that I develop available to more people and I have high hopes that LINE, which already has many users, will help me achieve this goal.

Shimizu: When you think of LINE apps, you probably think of native applications that are designed for iOS and Android, but there are also many parts that are created with WebView. Front-end development of an application such as LINE, which is used by huge users, requires thinking about various aspects and coming up with diverse ideas on the development side to make it easy for a large number of users to use.

For example, if the server API required for a single-page application (SPA) returns an error, the front-end engineer must take responsibility for it, which includes conveying the appropriate information to the user.

In addition, accessibility and UI/UX issues must be addressed in many cases, taking into account differences in various countries and user environments. That experience is only possible on a huge platform such as LINE, and I think it’s one of the most rewarding aspects of the job.

Agata: In my front-end development work, I sometimes focus on one service, but since LINE has many family services, I also take cross-cutting responsibility for multiple services. Family services development is done by every project team, but we often encounter similar issues. I like the collaboration between developers that arises as a result and that I am in the middle of the problem-solving process. It is also very stimulating and interesting to hear the varied opinions of development members of different nationalities.

Orihara: When you see the actual number of users accessing the LINE app, you quickly realize that it’s huge. I feel very happy when I realize that the service I developed is reaching a lot of people, such as when I implement a new feature, and my family and friends say, “Hey, I see you have added a new feature in your app!” or when I see people using LINE NEWS on the train. If I’m around someone who is using it, I can’t help but stare at them all the time to see how they are using it (laughs).

From top left: Mr. Shimizu, Senior Manager of UIT Dept. 1 within the Front-End Development Center; Mr. Agata, team manager of Front-End Dev 3, UIT Dept. 1; Mr. Orihara, responsible for the front-end development of LINE NEWS

― Please tell us about the structure and roles of your team.

Shimizu: There are two main organizations within the Front-End Development Center: UIT Dept. 1 and UIT Dept. 2. UIT Dept. 1 includes the members working at the Tokyo office, and UIT Dept. 2 includes the members of the other domestic offices in Kyoto and Fukuoka. Each department is divided into several teams.

Besides our teams in Japan, we have groups of front-end engineers in Korea, Taiwan, and Vietnam, and we sometimes collaborate on projects with them. We work together and share techniques, mainly through online chat and workshops.

We are active in front-end development in three main areas.

The first is consumer services such as LINE NEWS, LINE LIVE, LINE Gifts and LINE Coupons. The second area is business services such as the official LINE account and LINE careers, and the third area is product development for engineers, including JavaScript SDKs such as the LINE Front End Framework (LIFF) and the maintenance of internal tools.

Of these, consumer services make up the largest share, and we mainly develop applications that are deployed in WebView in LINE apps. In addition to developing pure web apps with HTML, JavaScript, and CSS, we also work with client teams on parts that work with iOS and Android. The teams are not divided based on the service; depending on the size of the project and other conditions, multiple teams may sometimes be involved in a single service in a cross sectoral way. It is also common for several relatively small projects to be assigned to a single team simultaneously.

Please introduce your team members.

Shimizu: As an organization, our main role is front-end development, but there are many members who contribute additional skills and expertise in this area. For example, Mr. Orihara, who is responsible for LINE NEWS, is involved in improving the user experience from an engineer’s perspective and draws from his previous experience as a user experience designer.

There are also members who are active in the field of accessibility, conducting research, developing guidelines, and holding study sessions within their organizations.
There are many areas of front-end development that require peripheral knowledge these days, and I think it’s a great advantage for an organization to have team members with excellent skills in such diverse areas.

Shimizu talks about the team

Please tell us about the technologies and development environments you use.

Shimizu: Basically, we use OSS products like Vue.js, React, TypeScript, and Sass in many cases, so I don’t think that our tools and environment vastly differ from the trends in the industry. Members assigned to a project have some discretion, so new tools and systems can be introduced if the team agrees.
Once a year, we also conduct a survey among our internal front-end engineers regarding their development environment. For the 2019 survey, please refer to this document.

On the other hand, in some cases, in-house development is absolutely necessary for service optimization and business advantage. For example, we have our own platform for measuring the effectiveness of our web services and analyzing data. Members of the Front-end Development Center were involved in the development of this proprietary analytics platform.
Why LINE’s Front-end Development Team Built the Web Tracking System

Many services, such as LINE NEWS, use this platform to analyze data and make improvements to their services. I think the opportunity to be involved in the design and development of a proprietary platform that collects such a large amount of data is one of the biggest opportunities that only LINE can offer.

Please tell us about the details of front-end development.

Orihara: I would like to introduce to you how the front-end of LINE NEWS is developed.

What is LINE NEWS?

LINE NEWS is supported by a very large number of users.
・ 71 million monthly active users*
・ Over 14 billion PVs per month*
*All figures are as of March 31, 2020

It is calculated that more than half of the 126.1 million people in Japan (Statistics Bureau, Ministry of Internal Affairs and Communications, 2019) view LINE News. There are few services in Japan that have so many MAUs. LINE NEWS provides not only news, but also many other types of content such as weather, traffic information, evacuation information, happiness of the day, and sports announcements as a medium to convey information.

New content has been added recently, such as LINE MOOK, which lets users read magazines as if they were holding them in their hands, and VISION––a new video platform. We will discuss the development of some of this content.

LINE NEWS Architecture

The area called News Tab refers to the screen where articles line up at the top of LINE NEWS. You can tap on the news title or image to go to the article screen. News Tab is an SPA built with React and Flux. On the other hand, the article screens mainly use Vue.js and Vuex. Since there are many functions within LINE NEWS, each has a different architecture.

Newly developed content

J.League Announcements

One of the tasks of LINE NEWS is to provide up-to-date news about the J.League and other sports. If you are interested in soccer, you can follow the LINE NEWS soccer announcements alongside the exciting matches on TV. In addition to viewing highlights, you can instantly see comments and details about the players’ actions in each scene.

To implement the radar plot functionality that displays the stats for both teams, we initially planned to use an external data visualization library.

However, many of these libraries are relatively large, and had we only planned to use the radar chart for the J.League announcements feature.

So we thought, “If it is just an SVG radar chart, it shouldn’t be too hard to implement. Since the functionality is limited, we can just implement it!” So we decided to create our own custom component to draw the SVG. While there were some unique elements, such as calculating angles using SVG notation, it was more lightweight and simpler to implement than introducing a library.

VISION
VISION is a video viewing feature designed specifically for smartphones.

This feature, which plays different videos one after another with a single swipe, was also made with web. There were some challenges in creating a carousel with up to 15 video elements that could be swiped to switch to the next video with web. Among other things, it took a long time to fix performance-related issues, such as sluggish carousel operation on lower-end devices, long delays before autoplay, and autoplay not starting at all. During the weekly development consultations of the LINE NEWS UIT team, we discussed the implementation of VISION and devised the following solutions:

・ Add a process that pauses video playback while you are swiping in the carousel.
・Normally, only images––not all 15 video elements––are mounted, and video elements are only mounted when necessary.
This greatly improved performance and allowed us to achieve high quality performance even on older models. Even when I had problems that I couldn’t solve on my own, I was able to find solutions because there is an environment at LINE where I can ask the people around me.

What are the future challenges for the team?

Shimizu: As a native application, LINE is a communication tool used by many users, and we are currently promoting the concept of “Life on LINE” to support all aspects of users’ lives on the platform. For this reason, we are actively developing our services in new areas such as AI and fintech. We offer many of our services as web applications because we cannot meet the required pace of business and improvement by developing them all as native applications.

However, with the growing number of services and organizations, there are differences between services in terms of quality and user experience. To address these issues, we are working on topics such as establishing development platforms for front-end developers, including the analytics platform mentioned earlier, the JavaScript SDK, UI frameworks that use web components, and accessibility.

Agata: The services that my team is primarily responsible for, LINE LIVE and LINE Points, have been around for a very long time and the legacy code is becoming increasingly obvious. In recent years, we have also gradually increased the number of developers responsible for the services. We recently expanded the review environment and added another person or two to share the load.

We have been making incremental improvements, but I think we are approaching the point where we need to be a little bolder and update our development environment.

Until recently, LINE LIVE was focused on the app, so there was an issue with the web part not keeping up with the functionality of the app. With the SP web version, you can at least watch videos, but since you are not logged in, you cannot comment or buy coins.

Since the web has the advantage of being easy to access, some people think that minimal functionality is enough when the app is the center of attention. However, at the same time, trends are always changing as device performance improves and the expressive capabilities of web browsers increase. As a front-end web developer, I think the fact that we haven’t updated these things is a problem.

Agata talks about the challenges for the team

Orihara: At LINE NEWS, thanks to the strong wishes and efforts of our members, we were able to replace the development environment with modern development environments like TypeScript and React Hooks. By clearly defining the environment in which tests are written and the criteria for writing tests, we laid the foundation for maintaining good code quality.

On the other hand, not all members are responsible for modernizing the development environment, so all members had to catch up with the new technologies. In addition, it is necessary for the entire team to be integrated and have a common understanding of how to write tests, what to test, and at what granularity the code should be split.

Currently, we have to force a common understanding by saying, “Let’s use modern technologies proactively” or “Let’s write tests based on the standards we have set.” This means that members need to use their personal time to catch up, and for members unfamiliar with modern technologies, it’s hard to estimate the man-hours required for new development.

Please tell us about your efforts to address these issues and your future goals.

Agata: In our project, there is no particular approach. We have to prioritize solving the problems caused by the increasing number of development members. So we are pushing the adoption of TypeScript, Test, and CI to eliminate miscommunication between developers and the dependence on specific individuals. The number of cases where TypeScript is used in the company is increasing and we can see that it improves the quality of reviews, so we want to actively introduce it.

LINE LIVE is app-centric, so we don’t have a lot of resources to invest in web. However, we are always consulting with designers and planners to improve the user experience. We are improving search so users can find the live videos that they want to watch, and we are improving overall performance through refactoring.

As we improve the user experience, we are gradually converting existing UI components to web components. This work is mainly done by members who specialize in web components.

Web components are a standard technology for web, so in some cases they offer performance advantages. We can use Vue or React, and even if we stop using these component-based frameworks in the future, the web component-based components will remain. It is an attempt to glance into the future. Likewise, we are improving the user experience of LINE Points. For example, we added animations and introduced a skeleton screen to improve speed when using LINE Points. We also presented this measure at a UIT event.

As for future goals, in the short term we are still working on migrating from JS to TypeScript and improving the CI environment, among other things. We also have plans to migrate pages developed as a service in our own implementation of WebView to LIFF. In the long term, we can say that this is the first step in a plan to re-implement our original implementation of LINE in a way that more closely resembles the web standard. In this way, we hope to make our services more resilient to changes in the environment.

– Related Links (in Japanese) –
Discussing the conversion of LINE NEWS, a huge service with 12 billion PVs, to TypeScript
UIT#4 Web in App Web that behaves like a native application

Orihara talks about his efforts to solve problems

Orihara: In our team, we have a schedule that forces us to spend 90 minutes a week catching up with modern technologies.

We also spend an hour each week as a team aligning our approach to writing code. During this time, we work together to identify the parts of the current code that we are not happy with. We discuss the design, asking ourselves whether there a better way to write the code. When one engineer takes the helm and sets the direction of the project, it tends to become dependent on one person. As a result, others may not like the way the code is written, which would lead to dissatisfaction among members. We use this time to thoroughly explain the merits of our coding style to all members and then decide on a policy that everyone agrees with. We try to be as democratic as possible and not make it difficult for people to express their opinions. As a future goal, while improving the development environment, we plan to continue rolling out the overall modernization of the already partially modernized code. Simultaneously, we plan to promote efforts to align our members’ skills and perceptions.

Finally, please give a message to those interested in web front-end development for user services?

Shimizu: The Front-end Development Center has members with different backgrounds and specializations, and I think it’s an environment where you can obtain a lot of inspiration as an engineer. There is a lot of experience to gain and many challenges to overcome when developing web applications on the huge LINE platform. So if you are interested, let’s take on the challenge together.

Agata: We are a front-end team, but when we have an idea, we don’t limit ourselves to this and we share our opinions. We think about many things before finally expressing them on the web front-end. If you are interested, please join us.

Orihara: The LINE NEWS service has a huge number of users. I think there are very few products of this scale that can be developed with web in Japan, even in the form of an app. If you really want to work on B-to-C services, let’s take on the challenge together!

LINE’s user services web front-end development team is looking for new members.

Front-end engineer/Front-end Development Center