This article was originally published on August 29, 2016, in BuildInsider.
There are a huge number of UI libraries for the Web, which makes it difficult to choose one. How did Yayoi, makers of PC accounting software, choose one for cloud service development? We asked them that, and for some background information.
So, how should one select a UI library?
To answer this question, we talked to enterprises that are getting into cloud service development about their experience in selecting a library for themselves. We tried to get some detailed insight into this question.
This time we talked to Yayoi Co., Ltd. (hereafter, referred to as “Yayoi”) which develops business software packages like Yayoi Kaikei, a PC accounting software package. When it comes to “accounting software”, Yayoi is the first name that comes to the mind of many people.
As you can see in the above image, the design of Yayoi cloud services is similar to a desktop-based application, for example, Microsoft Excel. Did they use an OSS based UI library which has high compatibility with Web standard technology? The answer is “No”. They selected a paid product called “Wijmo” by GrapeCity.
Why did they opt for a paid library (Wijmo) rather than going for a free OSS UI library? According to Yayoi, their motive was “to achieve good quality services at low cost”. How did they consider the issues that they faced in introducing the same?
What is the reason behind selecting a paid library?
Going right to the point, we asked why they selected the paid Wijmo library for cloud services.
The first point that came up was the “time limitation in creating controls from scratch,” (Mr. Hashimoto). Then he mentioned the “evaluation and research that was done on three libraries.”
Merits of Wijmo
According to Mr. Sawamura, the selection process has been going on since Wijmo 3 was introduced. They focused on the following things at that time:
- Appearance and functionality of controls
- Reliable support service
In “Transaction Entry Screen (Image 2),” a large amount of data needs to be displayed in the grid. Hence, speed was an important aspect for us (Mr. Sawamura).
We were also interested in “Reliable support service.” “Though there are many software packages available in the domestic market, most of them are just Japanese versions of products created by overseas enterprises that have their sales office in Japan. Obviously, support services will be provided with any paid product. But, in the case of Wijmo, it is developed and sold by GrapeCity, which has headquarters in Japan itself. Their development center is overseas, but as their headquarters are based in Japan, I think their support for Japanese users would be exceptional as compared to other companies. We got an in-depth (smile) response for our technical queries, to an extent we can’t even imagine with other products. As far as the responsibility in development risk of the product is concerned, there is a sense of security.” (Mr. Sawamura).
Issues in introducing Wijmo
There were some concerns as well in introducing a third-party component.
- Blackboxing third party components
- Handling the bugs in components
- Whether replacements are available on every version upgrade
- Learning cost
As mentioned earlier, Yayoi said there were no concerns regarding bug handling in the library, as Wijmo has their base in Japan. “Obviously, they handled the bugs, but they were also quite open to listen to and to understand our needs, which is something that is definitely not there in the overseas products,” (Mr. Sawamura).
Wijmo licensing is on subscription model, so there is no cost of replacement on upgrade.
As far as learning cost was concerned, Wijmo is so simple that all the controls can be displayed with just few lines of code. Then, we could reduce the effort of developing the client side in Yayoi by creating Razor helper methods internally (discussed later).
After overcoming such issues, and “after considering the speed of maintenance and support in future,” (Mr. Hashimoto), they decided to go for Wijmo in Yayoi.
Mr. Kubo said that they have the following environment for cloud service development in Yayoi.
- IDE： Visual Studio 2015
- Web server/DB server： Azure
- Client： all-important browsers
- Framework： ASP.NET MVC 5, Wijmo etc.
Instead of using client side frameworks like AngularJS etc., we use a combination of ASP.NET MVC 5 and Wijmo for server side rendering of the UI which is quite distinctive (using Razor for view engine).
I also asked them which controls and library exactly they used.
For example, most of the parts in Yayoi’s cloud service used the FlexGrid control (Image 3). By using FlexGrid, “we could do various things like merging the cells horizontally, showing multiple rows as a group, placing a check box in a cell, etc.,” said Mr. Kubo. As shown in the example below, they have a screen which is comparable to the desktop version of application.
To achieve this kind of screen, a lot of controls were customized at Yayoi. The Calendar was one such control. “An accounting software package needs to follow the accounting period of an enterprise, for example with April as the beginning and March as end. We have done customizations throughout the application as per the accounting process of Japan” (Mr. Kubo).
The overwhelming part is how this ComboBox in image 4 has been extended to a dropdown.
There may be people who will think “where is the dropdown?” The maximum portion of the screen above is a customized dropdown (red highlighted box). “It is not that we built our requirements to fit in with the third-party component. User productivity does not go up if we try to match our requirements with the features of the control. The keystone of our product development is to provide added value to users by customizing the controls,” said Mr. Kubo.
Moreover, this dropdown seems to be “even more powerful than the packaged version.” “There are many users who are used to the packaged version of Yayoi and they look for a similar experience in the cloud service as well. We have put in a lot of effort for this,” laughed Mr. Kubo.
Yayoi also uses a calculation feature (Shown in the red frame in the following image. The calculation result is displayed in the right pane). “This calculator is displayed with the help of Wijmo popup. We developed the rest on our own. That is because a calculator is simply essential in an accounting software,” (Mr. Sawamura).
Yayoi also used the CollectionView class. This class is mainly for handling data on the client side and is used with FlexGrid, etc.
There are other merits as well to the CollectionView class. For example, the change tracking feature. “As CollectionView class has a change tracking feature, only the data changed in the grid is passed to the server. As compared to using the FlexGrid control itself, there are many benefits of changing the grid data source into CollectionView,” said Mr. Sawamura.
Next, we will discuss the knowledge required to use Wijmo in a real product and the techniques used to customize the controls.
Know-how about using Wijmo
As Mr. Kubo mentioned earlier, third party components must be customized for product development. The version upgrades for Wijmo also need to be tracked. Although it is not necessary to follow the components’ version blindly, the newer version will introduce new features, support new environments (latest browsers etc.), and provide bug fixes etc., so it is better to use the latest version possible to improve the overall quality of the product.
Customizing Wijmo controls by inheriting
To resolve this trade-off, Yayoi inherited Wijmo controls and then handled the customization through these inherited controls. Currently, “customized inherited controls” are being used throughout Yayoi. By bringing inheritance hierarchy into the picture, when Wijmo upgrades, the upgraded content can be reflected in the extended controls as well, just by replacing the Wijmo files.
Using the helper methods
As mentioned earlier, Yayoi’s developed their cloud service application using ASP.NET MVC 5. Mr. Kubo says, “We created helper methods to use Wijmo 5 controls easily through Razor, which is a view engine of Wijmo 5. Our engineers use these controls through helper methods only.”
There are some merits to this approach.
Mr. Kubo first mentioned that using Razor makes it possible to restrict the editable properties and usable methods. “In real development, engineers can change in between development cycles, and not everyone is thoroughly experienced with the controls. In such a situation, restrictions can be added to the editable properties and usable methods so that usage of a control can be restricted to an extent. This way, incorrect use of the controls can be reduced. It is a main bonus in the team development environment.”
So, it is OK if programmers are not used to the client side, because they can call the helper methods in Razor,” (Mr. Sawamura)
Another benefit is that screens do not need to be changed while adding a feature to the control. “Most of the specification changes could be done by using control inheritance and helper methods. Along with that, we could also reduce the effort while maintaining the quality (Mr. Kubo).
.NET developers and TypeScript
Mr. Sawamura indicated that the important point at the time of migration is differentiating between, “Common code in the application” and “Code for an individual screen.” “It is difficult to estimate the impact if the areas containing lots of inheritance are re-written by engineer who is not thoroughly knowledgeable about the product architecture. The risk involved is high in this case. Obviously, a developer with good knowledge should convert the common portion. On the other hand, the individual screen code can be handled by the respective developer in-charge of that screen as the impact is limited to a particular screen,” (Mr. Sawamura).
Naturally, migrating the common portion to TypeScript should be the highest priority. “If the common portion has been converted to TypeScript properly including static typing, then it is OK to go slowly with the conversion of individual screens,” (Mr. Sawamura). When you get to the stage of converting screens to the TypeScript base, and try to use the converted common part from the screen side, it gets easier to convert screens as you get to know “what went wrong” through the type errors etc. that occur during transpiling the TypeScript code. After that, “You can even go stage by stage once you have shared the conversion policy as ‘Let us match to the function arguments and property types on the shared side as they have been already finalized,'” (Mr. Sawamura).
Selection of technology
Currently, you are using ASP.NET MVC in Yayoi’s cloud service. Didn’t you think about introducing the latest client side frameworks which are trending these days?
“Can’t really say after selection (laugh),” Mr. Kubo. “At the time we decided to introduce Wijmo, options like Angular, React etc. were not that practical,” (Mr. Kubo and Mr. Sawamura).
Moreover, Yayoi has tried to reduce the development team’s burden of client side programming as much as possible by using control inheritance and helper methods. In doing so, they have created a stable environment in which to use Wijmo controls.
Hope this article will be useful for the engineers who are struggling with the selecting a UI library for development of their Web based products or services.
Copyright© 2017 Digital Advantage Corp. All Rights Reserved.