Summary

Onsen UI is a perfect solution for developing hybrid apps. That’s because our priority is performance and ease of use. Onsen UI is fully open source, and never locks you in. It also provides the option of deploying your apps to the server to use as a tool to build a high-performance website.

Onsen UI website

Development Process

1. Story

2015 Summer, I went back to my country, Japan, for 2 months during Summer vacation. For the first time in my life, I worked, this case interned, for a Japanese company. The company develops the framework for growing market of hybrid applications. Hybrid applications are web applications where developers can develop WebView-based applications for both iOS and Android. Onsen UI is their open source framework and its performance and ease of use are well-known.

My internship started out the boss passing me a task to bring Material Design implementations to Onsen UI on the very first day. As you might guess, I was surprised. I was not fluent with this whole hybrid applications but I had to believe that I could and started to do some research right away.

At the time, Onsen UI carried iOS look and feel and most components only supported iOS use case. Supporting Material Design was one of the big changes had to be made for releasing Onsen UI ver.2.

2. Design Specifications

material_design

I started out researching Google’s Material Design guidelines. During the researching process, I found there are two cases. One is to make new components just for Material Design, and the other is to modify existing components to give look and feel for Material Design so I listed them all.

Now onto each component’s specification, first and most important component of Material Design was called Floating Action Button.

The specification contains multiple parts:

Use case How we use Floating Action Button
Requirements How we want it to act
Future Enhancements What can be done to make it better
Examples Visual examples
Elements What contains within the component

  • Attributes
  • modifier
  • Methods
  • Properties
  • Events

I’m not going into each detail but specification process is what makes implementation part easier.

3. Implementation

For this implementation process, it consisted extra steps just because it was my first time exposing both hybrid frameworks and Git, version control.

a. Internal Structure

Onsen UI was originally build based on top of AngularJS. However, Onsen UI ver.2 decided to reimplement all components as Web Components instead of AngularJS directives in order to have better compatibilities for all other libraries.

Web Components, in this case, are written in ES6 and so I spent few days studying ES6 and their differences.

b. Git

I’ve learned it and I’ve used it, but never in a large organization, especially in open source community. During the implementation process, I had a few conflicts that could be solved if I knew better. As the project went on, I got used to and Git was not a problem anymore.

c. Coding

With those obstacles in my way, I manage to make the first component, Floating Action Button.

floating_action_button

4. Verification

After implementing components, I tested multiple devices to make sure all components are compatible with all platforms.
iOS and Android have different WebView capabilities. Some components did not behave as I expected. I used Test & Evaluation method to squash bugs one by one.

At the end, I could cover most components of Material Design into Onsen UI.

5. Maintenance

Onsen UI is still maintained by the team I worked with, and I still check their repository often.

Conclusion

To summarize, this internship opportunity helped me many of the aspects of working in a large organization. On top of that, it taught me what is like to develop frameworks. We developers should always care about readability and performance.

The components I contributed to are now on Onsen UI ver.2’s core feature.
You can take closer look of most of the components and details of Onsen UI at Onsen UI ver.2 website