Rexxar: Douban's thoughts on hybrid development

Some time ago, Douban open-sourced its hybrid development framework Rexxar. Douban can be said to be one of the earliest companies in China to practice HTML5. As early as 2013, they applied the concept of Web Component, which was still advanced at the time, to develop the CardKit mobile UI framework. In mobile development, Douban also adopted a hybrid development model, and Rexxar is the result of their practice and thinking. I interviewed Guo Lin, one of the main developers of Rexxar, to see their thoughts on hybrid development.

[[178034]]

The reason why Douban uses hybrid development is that they need to provide iOS, Android, and mobile Web versions of the page at the same time. Compared with developing three versions at the same time, using hybrid development can obviously have great advantages in code reuse, development costs and efficiency. Under the premise of weighing the performance experience, using hybrid development is a very realistic choice.

What is Rexxar

Rexxar is a hybrid development framework for mobile terminals. It supports Android, iOS and mobile Web.

Rexxar consists of three main parts:

• Rexxar-web: Front-end code library. Includes a set of packaging, debugging, and publishing tools, as well as common front-end components and calls to widgets implemented by Rexxar Container.
• Rexxar-Router: Routing table, assigning each page a server-side link and a local URI, accessing the page through the routing table.
• Rexxar-container: An enhanced version of WebView that encapsulates some Native API support, including OAuth authorization, image caching, etc.

Rexxar is now open source and is divided into 3 projects. You can use only one of them to develop code for the corresponding platform:

https://github.com/douban/rexxar-web

https://github.com/douban/rexxar-android

https://github.com/douban/rexxar-ios

Notes on hybrid development

Many teams have practiced hybrid development. From what everyone has shared, the key points are as follows:

• Enhanced WebView: Native WebView is basically a transplant of the browser kernel of the PC platform, but it is not completely suitable for mobile scenarios, and various hardware APIs are not natively supported by HTML5. Therefore, various hacks and enhancements of WebView came into being, and even third-party services based on enhanced WebView appeared.
• Routing: In-app jumps have become more complicated due to the addition of WebView. At the same time, due to the problems caused by componentization and modularization, routing has also become a focus of discussion.
• Cache: Mobile network conditions are poor, and resource caching and preloading are necessary for user experience.
• Communication: Communication between HTML5 and Native. This can be achieved using the bridge API provided by the system, but there are still some pitfalls and security issues in the application.

Most of these problems already have best practices, and Rexxar is one of the solutions. There are generally two solutions in hybrid development: pure browser solution and front-end template rendering container solution. Rexxar is between the two.

The designers of Rexxar have a clear definition of the use scenarios of Rexxar: the page is heavily display-oriented and lightly interactive. Therefore, except for relatively simple applications, if you pursue a high user experience, it is probably difficult to complete it with only Rexxar, or some other hybrid development.

Rexxar provides clear and easy-to-use interfaces for extended functions. The project also provides several examples of extending Rexxar functions, and the documentation is relatively complete. Guo Lin and his team also used the same interface to make some extensions in Douban App, but because these extensions were deeply tied to the business of Douban App, they were not included in the Rexxar project.

Rexxar's client-side implementation is actually a WebView customized with more functions. Moreover, Rexxar uses the system's WebView. Therefore, it has no effect on the size of the App. However, Rexxar also has the memory problem caused by using many WebViews at the same time, which needs to be paid attention to.

There are two types of Rexxar's Crash:

• One is a JavaScript error, which is a problem with the application logic. They capture this type of error in WebView and then send it back to the server through the App's log system.
• One is the Crash of WebView. This kind of error cannot be captured by WebView itself. It is now collected by native Crash collection systems such as fabric and Umeng.

Since Rexxar was launched, JavaScript and WebView related error logs and crash reports have increased. The proportion is related to the number of Rexxar pages, which has been changing, but has never exceeded 10%. However, since the majority of Douban Apps are native pages, the proportion of crashes caused by Rexxar is not large.

They are also studying how to locate Rexxar page errors in a mobile environment, how to debug, how to fix these errors, and incorporate them into the infrastructure.

Why not use PhonGap/Cordova

There are already mature solutions in hybrid development, such as PhoneGap and its successor Cordoba. Why does Douban want to reinvent the wheel?

Guo Lin said that if the Hybrid solution is defined as the mixed use of front-end and native technologies, then they believe that PhoneGap/Cordova is not strictly a Hybrid solution, because its goal is to fully use front-end technologies to develop mobile applications, rather than a mixed use of front-end and native technologies. However, including Cordova, React Native, and Rexxar all have the same goal: to use front-end technologies to develop mobile applications and improve engineering efficiency.

Douban actually used PhoneGap to develop a mobile app and put it on the AppStore. This app is called Douban Musician. Therefore, Douban already has some understanding and experience of PhoneGap/Cordova. Why did they create a "wheel" called Rexxar when developing Douban App? This is because they do not fully agree with the concept of PhoneGap/Cordova. The starting point of Rexxar is different from that of PhoneGap/Cordova.

The PhoneGap/Cordova project is very ambitious. It hopes to use front-end technology to complete mobile development. Therefore, it can be seen that it tries its best to let the front-end technology complete as much development work as possible, and only provides interfaces available to the front-end for native system functions that cannot be directly called by the front-end. The mainstream PhoneGap/Cordova project implements all business logic in a WebView, with the goal of allowing developers to complete all development work of a mobile application using only front-end technology. This approach requires a premise: front-end technology can solve all the needs of mobile development. They believe that the concept of PhoneGap/Cordova is a bit too idealistic or too radical at this stage.

Rexxar is relatively practical, or conservative. Guo Lin said that they still believe that at this stage, or even in the distant future, front-end technology is unlikely to completely replace native technology in mobile development. But at the same time, they also admit that there are always some functions in mobile development that are suitable for front-end technology. In their understanding, front-end technology and native technology should coexist. In mobile development, front-end technology will not completely replace native technology; and with the addition of front-end technology, the efficiency of mobile development will be improved. Based on this understanding, Douban developed Rexxar.

As you can see, Rexxar is based on using front-end technology in a native project, rather than using front-end technology for the entire project. They even provide a solution where part of a page is completed using Rexxar and part is implemented using native technology. Douban hopes to make up for the shortcomings of native development in this regard with the excellent typesetting capabilities, development speed, and versatility of front-end technology. Today, when WeChat is the main content sharing channel, this also brings an additional benefit: Rexxar pages can be used smoothly in WeChat.

In summary, if Rexxar and PhoneGap/Cordova are compared, the big goal is the same: using front-end technology to develop mobile applications. The implementation technology stack is similar: using WebView and providing interfaces to call native functions. However, the starting points are different. PhoneGap/Cordova is committed to using front-end technology completely for mobile development; Rexxar is committed to partially using front-end technology in mobile projects.

Mobile developers need to learn front-end technology

Currently, Douban Mobile Team has about 10 client engineers, half of whom are iOS and half are Android engineers. There is also an excellent front-end engineer who specializes in supporting hybrid development in Douban App. He is responsible for the development of Rexxar Web and provides infrastructure. At the same time, if there are some more complex businesses to be implemented with Rexxar, he will also participate in and guide business development.

Using hybrid development technologies such as Rexxar makes the team's technology stack lean towards front-end technology. Therefore, the ideal configuration is to add a more outstanding front-end engineer to the team to handle infrastructure development and solve difficult problems. At the same time, the entire team needs to understand the advantages of hybrid development, recognize this change in development methods, and be willing to learn and adjust their own technology stack.

In projects, Douban will give priority to using Rexxar in appropriate scenarios. In the team, they encourage non-front-end engineers to learn and use front-end technologies. To this end, they have organized internal training on front-end technologies to enable willing non-front-end engineers to have the basic ability to use front-end technologies for daily development. In the daily development of Douban App, most Rexxar pages are completed by client engineers, and front-end engineers will help with code review and solve difficult problems.

Rexxar vs React Native

When Douban actually used Rexxar, it used React as the front-end framework. Guo Lin explained that Rexxar itself had no requirements for the choice of front-end framework, but they chose React to implement the business layer. At that time, React Native had not been released. After understanding RN, they did not deny the possibility of using RN.

In their view, React Native is also a technical solution for developing mobile applications using front-end technology, which is consistent with their purpose of developing Rexxar. However, Rexxar still stays in the browser engine, while Facebook radically breaks away from the heavy browser engine and builds their own bridge from the Web to Native, which is a very bold solution.

After the release of React Native, they immediately organized research, conducted small-scale practice, and communicated with peers. The conclusion is that at this stage, React Native is still a little immature. For some teams with special technology stacks, such as those with rich Web experience and excellent front-end engineers, but lack of client engineers, React Native is a technical choice to quickly enter the mobile application market. However, in terms of the situation of Douban App and the current status of React Native, they still insist on staying in WebView when using front-end technology for mobile application development and will not use React Native.

Of course, React Native has been developing and improving. If, one day, React Native and React can be ported at the code level, they may try to migrate from WebView to React Native. After all, the performance of WebView is still weaker than native.

Summary and Outlook

Douban App and R&D team have gone through a process of development from small to large. Rexxar is a solution to solve engineering efficiency in this process. Using Rexxar in Douban mobile development has indeed improved their development efficiency to a certain extent. In the past, a page required two engineers, iOS and Android, to develop it once each. Now only one engineer needs to write the front-end code once, and it can even be applied to mobile web sites. There are also efficiency advantages in the development of front-end technology interface development. The hot deployment capability allows them to avoid the review process of releasing mobile applications and makes the bug fixing process more convenient.

Douban open-sourced the Rexxar project because, on the one hand, improving engineering efficiency in mobile development is a common problem, and their practical results have proved that Rexxar has indeed helped improve engineering efficiency. Therefore, they believe that Rexxar should be able to provide some reference directions for everyone. On the other hand, it is to improve the quality of the project itself. No solution is perfect, and Rexxar still has many problems. Open-sourcing this project has prompted them to improve the code quality of the entire project. At the same time, it is also easier to hear everyone's opinions and suggestions.

Although Rexxar still has some problems and limitations in use, the Douban App team has still gained a lot from limited use. In the future, they will continue to promote the use of Rexxar in Douban's mobile development. Guo Lin said that for the future development of Rexxar, they mainly focus on two aspects:

• On the one hand, there is infrastructure, such as how to better monitor problems that occur on Rexxar pages in products, and how to debug and solve bugs that occur on Rexxar pages. If you want to use Rexxar in large projects, these infrastructures should be equipped;
• On the other hand, Rexxar still runs in the browser engine. The browser engine, as an intermediate layer, improves engineering efficiency, but also limits its scope of use due to performance issues. Therefore, they will spend some effort to improve the operating efficiency of Rexxar. For example, the iOS version of Rexxar has been paying attention to the possibility of migrating from UIWebView to WKWebView.

Reference articles:

Douban hybrid development practice http://lincode.github.io/Hybrid-Rexxar

Douban's hybrid development framework Rexxar http://lincode.github.io/Rexxar-OpenSource

Modularization practice of Douban App http://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112821&idx=1&sn=2987ba2c9d68e3982e795d9eeb15f82b

"CardKit & DOMO UI - The Crossroads of Technology and Design in the Mobile Era" Technical Edition https://www.douban.com/note/347692465/

Douban Artist App's PhoneGap Practice http://www.infoq.com/cn/news/2013/10/douban-artist-PhoneGap-practice