RSS

LINE on Firefox OS

by LINE Engineer on 2014.5.20


[日本語バージョン]

Development for the Firefox OS version of LINE began during the second half of 2013, and the app was officially released in February of the following year. LINE for Firefox OS is currently used in 19 countries around the world, and ranks high in the apps with the most number of downloads in the Firefox Marketplace. This unique version of the LINE app has also received favorable reviews from users, and it is the only app in the Popular Top 7 to maintain a consistent four-star rating.

The Firefox OS version of LINE may be receiving rave reviews, but the creation process for the app was no bed of roses. This article goes into detail on how LINE for Firefox OS was born and engineered, as well as a scene look into the blood, sweat, and tears that went into improving the app’s performance.

The Story Begins With Web OSes

The Web OS buzzword attracted a lot of attention at the 2013 Mobile World Congress. Firefox OS (“FxOS”), Tizen, Ubuntu, and Sailfish were all introduced at the conference, and Mozilla unveiled two devices featuring FxOS – Keon and Peak. Both of these were developer preview devices designed to give app creators a way to test software on the new mobile OS, but even so, Firefox was way ahead of the other OSes.

Peak and Keon devices featuring Firefox OS

Image 1: Peak and Keon devices featuring Firefox OS

Back to the Starting LINE

Development for the FxOS version of LINE began in October, 2013. The big issue looming in the back of everyone’s mind when the project started was the performance aspect. The target device offered pretty unimpressive levels of performance at the time, and many on the LINE development team wondered if they could even get the web version of LINE to function well on a device that it was not natively designed for. All those fears melted away once the project started rolling forward. Everyone was pleasantly surprised when the structure of the FxOS version of LINE was completed faster than any other platform.

The first build was created in less than two months. The QA process started soon after, and a stable version of the app was ready with just one month’s worth of testing. The fact that FxOS was a web platform was a defining factor behind the speed of the development process. Normally the process devotes a long period of time to adapting the app to the UI Guide, but because we were dealing with a web platform, CSS and HTML fulfilled this role for us, saving our team countless hours of development time. The lack of cumbersome additional build processes also helped streamline things by making it quick and easy to check changes made in the app.

Chile Today, Hot Tamale: The Trip to South America

The FxOS device was released with an early pre-installed version of LINE in Chile, Colombia, Mexico, Peru, Spain, Uruguay, and Venezuela. Our development team selected the three countries with the least developed communication infrastructures, and set off on a journey to Chile, Peru, and Mexico with the Firefox device in-hand.

When our team conducted a network test in Chile, we found that the network conditions were extremely different than what we were used to dealing with in Korea. Each message took an average of 3 to 4 seconds to send, a small eternity in messaging app time. We set to work finding a way to send messages faster. When we arrived in Peru, we stumbled upon what later became known as the “Peru Miracle”, in which we built and applied an asynchronous send message system.

We hammered out a plan that allowed us to remove the step that tells the user the message is being sent from the existing message sending process. We presented our plan, and the decision was made to adopt the change. We modified the internal logic and enhanced the UI to reflect the new flow. As a result, the app could now send messages at lightning fast speeds of 0.3 to 0.4 seconds, a rate ten times faster than normal. In addition to this revolutionary change, we found we were also facing an issue in Chile and Peru where SMS verification messages were not being delivered to their recipients, or the message would be filled with nonsensical characters if it arrived at all. We ended up adding a server side check to the process to resolve the issue.

Unstable network conditions in Chile

Image 2: Unstable network conditions in Chile

The most interesting part of the trip was that what we were doing was not limited to simple testing. This venture is an excellent example of how on-site tests lead directly to improved products. If we had conducting testing in Korea alone, there is very little chance that we would have even thought of making a change like the one we did in Peru at such an early stage in the game.

LINE Takes the Firefox Marketplace by Storm

We returned from the South American excursion in high spirits, and LINE v1.0.0 was released in the Firefox Marketplace on January 26, 2014. Over 3,000 people downloaded the app the first day without a pixel of advertising on our parts. The app rocketed to one of the overall top ten apps in the marketplace within two weeks of being released. By its third week, the app was firmly entrenched in the top four for the entire Firefox Marketplace.

LINE shines in the Firefox Marketplace

Image 3: LINE shines in the Firefox Marketplace

The official figures for the number of FxOS devices sold were in the range of 300,000 units. However, given the fact that a significant portion of the purchased devices were targeted towards application developers and not general users, the actual number of people using FxOS devices was considerably less than the number floating around in the media.

Mobile World Congress 2014

Shortly after LINE was released in the Firefox Marketplace, the Mozilla Corporation contacted us to say they wanted to set up a demo station for the FxOS version of the LINE app in their event booth at the Mobile World Congress. They were planning to promote LINE to the attendees of the MWC, giving them a chance to use a demo of the app themselves. They also requested that we send someone who could talk with VIPs who visited the Mozilla booth and share their experiences during the development of the LINE app. We left for Spain on February 22 as official staff of the 2014 Mobile World Congress.

Presentation targeted towards VIPs attending MWC

Image 4: Presentation targeted towards VIPs attending MWC

We got the chance to meet a lot of people who stopped by the Mozilla booth during the four days we were able to spend with their staff at MWC. Space inside the booth was limited, so we were given a corner to set up our display. It was not the most prominent position in the conference center, but that did not stop the event attendees from coming to hear about our app. To our pleasant surprise, we were floored by countless numbers of visitors every day. They tried out the devices we had on display and asked us all sorts of questions.

One of the most interesting questions we received was from a fellow developer who shared with us that they were trying to create an app, but they were unable to make any progress because the app kept crashing. The distressed developer wanted to know how the development process worked at LINE, along with details on the steps leading up to the release of the product. The visitor also asked us for advice on the debugging process.

We were caught up in a discussion with other staff members at the time that left us unable to answer the question as thoroughly as we would have liked. If the developer that asked us that question at the WMC is reading this blog right now, we would like to add the following statement. “You have to rely on console.log and ADB log for debugging when developing for FxOS. Especially when you get an error in worker, where addressing issues and testing fixes are notoriously difficult, choosing logs for each line of code and checking them that way is a relatively quick and efficient method of dealing with errors.” We hope you see this!

The Mozilla booth at MWC being overrun with visitors

Image 5: The Mozilla booth at MWC being overrun with visitors

Out of all the Web OSes that garnered attention last year (FxOS, Sailfish, Tizen, and Ubuntu), the only one currently selling devices ready for general public use is FxOS. Alcatel, Hauwei, LG, and ZTE are all producing FxOS devices, and both ZTE and Alcatel showcased new models at MWC 2014.

Firefox OS Version Updates

Mozilla officially unveiled FxOS 1.3 in 2014 at the Mobile World Congress. “Open C”, the new model being produced by ZTE, featured FxOS 1.3 and was displayed in the Mozilla booth as well. We developed the LINE app for FxOS version 1.0, but when OS 1.1 was released in the middle of the development process, we made the necessary adjustments to integrate our app with the new version of the OS. The biggest difference between OS 1.0 and 1.1 is that the update allowed the use of push notifications. Another surprise was that Mozilla announced OS 1.3 at the MWC without ever making mention of OS 1.2.

OS 1.3 featured a game-changing update in scrolling functionality. The basic scrolling feature was enhanced simply by updating the OS and without changing the actual performance of the device. However, when it comes to dealing with long data lists of mammoth proportions, the story changes significantly. For such lists, the level of performance a developer can get from the device does not so much depend on the basic scrolling feature as it does how the app itself is engineered. This is exactly the issue we will be tackling in the next section.

Improved Performance and the Second Scheduled Release

The timing for releasing an app is decided by the market itself, and not the developers and designers who created the service. This is why it is so extremely important to release a service at just the right time. The FxOS version of LINE is no exception to this rule – it was released at just the right time. At this point in time, the performance aspect of the app still remained untouched. We put a lot of effort into modifying many different parts of LINE for FxOS in order to supplement the app’s performance.

As a result of these modifications, LINE’s initial loading speed increased by 30%. We also worked on the loading time for lengthy chats with friends, slashing the time down to as little as a tenth of what it was. Modifying the app’s logic played an important role in this success, but the results also reflect the fact that we were taking full advantage of over 10 years’ worth of Web UI integration know-how. One excellent example of this is the way we avoided using redundant portions of libraries which only slow the app down, and instead used the DOM API to improve the app’s performance.

Taking advantage of pre-existing libraries may make the development process easier, but there comes a time when you have to pay for what you get. This concept is reflected in the equivalence principle. In the same way, we presented to the market an app with improved performance that also made free stickers available to users for our second release. We are still worked on enhancing the performance aspect of the app, and it keeps getting better a little at a time.

Free stickers and gift features

Image 6: Free stickers and gift features

Firefox Developer Conference 2014

Mozilla Korea held a conference for web developers in Seoul at the COEX center on April 10. As part of the day’s events, we gave a presentation on our experiences engineering the LINE app on the FxOS platform, sharing the knowledge we gained from the process. We talked at length dispelling common misconceptions about developing for FxOS as well as correct methods of using the API available with the OS. We also went into great detail explaining Indexed DB and Web Worker, the two parts of the LINE app that took up the most time during development, and talked with the audience about how to build conventional app-like applications for Firefox devices.

Presenting at the Firefox DevCon in Seoul.

Image 7: Presenting at the Firefox DevCon in Seoul.

We also talked with lots of people interested in joining our team at LINE, giving impromptu job advice during breaks and the time set aside to try out the FxOS devices firsthand. We received a lot of positive feedback from the people we talked with at the conference. There were also many members of the event staff with only a rudimentary understanding of FxOS devices, so we took some time to offer tips for using the devices in addition to talks about possible job opportunities.

Improvised Work Fair for LINE

Image 8: Improvised Work Fair for LINE

The Future of LINE for Firefox OS

Both ZTE and Alcatel unveiled dual core devices at MWC 2014. Mozilla gained significant ground in the South American and European markets in the second quarter, and also made clear their plans to release devices in multiple countries in Africa, China, Japan, Russia, and across Southeast Asia in the third and fourth quarters of this year.

Mozilla’s plan for releasing devices in 2014

Image 9: Mozilla’s plan for releasing devices in 2014

FxOS is making its first strides into the market, and LINE has been with the new OS every step of the way. Despite the fact that LINE responded to needs for an FxOS version of its app more quickly than any of our competitors, the performance of the app itself still fails to measure up to the iOS and Android versions of LINE on many accounts. Our team continues to tackle these issues one at time, keeping a close ear to what our users want and need. The FxOS version of LINE will continue to grow as the market for the OS expands

We have been granted the unique chance to experience all these things firsthand. Who knew that watching the app you created blossom into something special could be so much fun? If you are reading this blog right now and you thought for even a second that you might want to share in the joys of this job with us, you owe it to yourself to contact LINE today. We have a whole world full of experiences waiting to share with you.

[日本語バージョン]