Details about Switch’s use of web technology and the creation of the eShop
At the end of September, the HTML 5 Conference hosted a special session about Switch and its use of web technology. HTML5Experts followed up with Nintendo by interviewing director Munetaka Tsuda and front-end engineer Yuji Horikawa from the planning and production team. During the discussion, the two developers shared some very interesting information about the creation of the Switch eShop and the system’s use of web technology.
Tsuda joined Nintendo in 2011, and has been working on directions for network services, component browser, in-console software, and more. Horikawa joined in 2013, and has been developing the eShop for digital game sales and other web services.
This interview explained how Switch uses many web-related technologies. For example, it has a browser component based on WebKit. Just like WebView in smartphones, it can be used as a browser component from games and software in the console.
Switch’s browser can be used to link with smartphones. For example, when creating a new Nintendo Account on Switch, users go until the process of inputting their email address on the console, and after that they can continue from a smartphone.
Posting captured screenshots and videos to social media also uses web gimmicks. Switch uses the browser client to send image and text data to an interim server in the cloud. Even some content pages in games use web features like HTML and CSS. The hardware can perform a seamless switch between native and web.
The team had a vision to “connect games with users worldwide.” To further highlight this connection, they’re proactively using web technology. Smartphone apps like Nintendo Switch Parental Controls and Nintendo Switch Online also use web features.
As for the eShop, it can be accessed not only from Switch, but users can also purchase software via a PC or a smartphone. Obviously web technology plays a big factor here. The smartphone and PC versions have many similarities in coding as they use a responsive feature. The Switch version uses buttons to navigate, so its coding is rather different from the rest.
The architecture for the entire eShop is unified under React as a basis. The project to develop the eShop began at the end of 2015. Since the Switch was released in March 2017, that means they had about a year to work on the project.
The keyword “immediately” is something that was stressed. When trying to establish what kind of shop they should make, it should be:
– Immediately Visible – Users can immediately see titles they want to buy. This factor is the reason why promotion articles are gathered in the news section on Switch.
– Immediately Purchasable – If users want to buy a game, they should be able to do so instantly. They’ve provided buttons in other places (like news or in-game) that can link to the eShop’s purchase page.
– Immediately Improved – A project to manage and grow the eShop in the long-term. The eShop needs to support multiple languages and regions, so they also need to make pricing and tax systems support multiple regions. Rates for a single country can also be adjusted if there’s a change in tax rate just within that country.
Considering the above points, they came to the conclusion at the end of 2015 that all of these would only be possible with web technology. Then, when choosing a library, they wanted to find one that both has good performance and can be customized. A simple page application that moves quickly between pages and also has good performance. Ultimately, they settled with a main combination of React and Redux.
One interesting note brought up is that as there are too many games, it would be too tiresome to set the background color of each game page one by one. Because of this, they devised their own algorithm to automatically determine the dominant background color for a game.
During the early phases of development, the team had a problem due to a gap in perception about components between designers and engineers/programmers and miscommunication occurred due to that. For example, when a designer said she wanted to change the design for the price as they want to emphasize the price view in some screens, the engineer/programmer ended up thinking that the feature to display price is shared between all screens so it should use the same component.
In order to solve the miscommunication, the team decided to create a mockup of the whole eShop sequence. Designers used plain HTML and CSS in making this mockup scheme. Thanks to this, engineers/programmers were able to close the misunderstanding gaps.
One more important factor is the cooperation from testers. The eShop gets very complex as they have a lot of permutations based on country/region, language, laws, currencies, payment method, and more. Having testers from all around the world check the system early gives them time to include major omissions. For example, a foreign tester pointed out the usage of cards by minors in South Africa.
When they tried combining everything from the OS to the web and run them all at once on the Switch, they had a totally unstable and slow performance. To solve this, they gathered all staff to cooperate and collect solutions to fix this problem. While the engineers and programmers said to optimize the system, the designer said to work further on the boot animation to reduce stress in user waiting time.
