30 days react native from zero to ios/android dual platform release summary

Preface

I have nearly a decade of technical background, in addition to app development on the back end, the front end, etc. are familiar with, recently do an app project requires iOS, Android two platforms are required, can only bite the bullet. In fact, very early to develop the app is also very early contact with Android, iOS native development, Hybrid, HTML5 WebApp and other development but has not done a complete project, more just technical verification and try. This time the project was successfully launched on the basis of the RN technology for iOS and Android two platform apps, project cycle due to iOS audit (first submitted review, modified four times to pass) and their vacation time spent 1.5 months, the actual project code development is about one months.

App Features

Since it is not possible to reveal too much information on a business project, app features include list pages, search pages, HTML5 games, HTML Web pages, and image applications, and the following are application interfaces. If you need to test the app please add a message or send me e-mail: cbcye#live.com

Selection

I have previously said that I have a set of technical background also tried a variety of different development methods. App-based feature requirements I can use native or hybrid or HTML5 ways. First of all, since iOS and Android both need to be published and I don't have time to start learning iOS and Android from scratch. But the biggest problem is that I've been trying to learn, but the big question is that the interface layout of the two native ways gives me the biggest hurdle, the language, the grammar is not a problem for an experienced programmer, Generally like UI layout syntax and the framework is the biggest hurdle. Second, because there are some native operating hardware interface requirements, so there is no pure HTML5 webapp way.

Focus on the development of hybrid, a few years ago contacted Phonegap+jquery Mobile, Sencha touch Learning for some time and try to phonegap+jquery Mobile to do a small internal application, but because in phonegap+ JQuery Mobile's compatibility with Android is too much to give up; Sencha touch is packaged too badly; Ionic uses angular JS study for a period of time or can not easily so also give up (so that the framework of learning cost is actually higher than the language itself) and the most important thing is that these hybrid products or framework encapsulation is too closed so that if there is a problem, you will be difficult to solve. This is why I choose to abandon these hybrid solutions, of course, these experiences recently was a year ago, early or four or five years ago, the impression is not necessarily in line with the situation, but because there is no more time to understand so the first give up.

Finally inadvertently search to react native let me a bright, RN introduced himself to search, I here only talk about my selection of considerations:

1, RN is a Facebook project, an open source project has a large team of maintenance is quite important

2, the way RN is used in JS to invoke the native module in theory generally, the performance should be relatively close to the original (this point in some test reports also have a corresponding description), of course, this way of the workload is very large.

3, the community is too active, the official version two weeks to release, in the development process of the problem can be answered in time

In addition to not used before this frame has enough curiosity, try to feel also can, try to try on to the release.

How the development process is getting started

As the saying goes ax, but do a project in fact there is not much time to let you learn technology, so you need to quickly get started, fortunately there is a big wave predecessors have been collated out to learn notes and share, for me the biggest help is the Oriental Yao Teacher's video series (free version), Two days to see 50 episodes basically JSX grammar +rn basic knowledge even mastered, and also purchased the RN Chinese network one months of pay group Services (90 yuan/month), the main technical pit when the community people answer the efficiency is very low, especially at the beginning of the time there are experts to help answer will save a lot of time, It did prove very effective later. Finally in the development process also spent more than 300 RMB purchased an Indian team of native Starter Pro as a development framework and UI framework, time can also be based on their free version of native Starter Kit to develop, but this mainly saves Redux learning time , directly on the frame immediately can be used even though I don't know how redux works.

Development methods

Development methods are also important, because it is easy to use a new technology can not solve the problem, it is possible to abandon the technology or a program, Before I tried to use RN to do a WebView framework package but in the communication between the native WebView and JS, there are some functions that call the phone, such as saving pictures to albums and selecting album Pictures. Because of that time to RN unfamiliar can only give up all based on WebView way to do. And it is possible that a functional requirement is implemented with the technical solution of iOS but can not be solved when the Android does not support or encounter problems, the project is encountered in the process of Android WebView performance is low and fragmented serious problems.

So the right development posture is to do technical validation for key features and to do both iOS and Android two platforms, rather than rushing to follow the function module for development. Then step by step to tamp down the function module. If the feature technology is verified by completing the iOS version first then do Android version (on the time of the audit to do Android version).

Those technical pits

1. ListView Performance Issues

The ListView performance issue was not felt at the time of validation, but when the data was added up, a list item with pictures, captions, descriptions, and buttons was shown, In 300 of the data will appear when the very card situation iOS more serious than Android by trying each of the methods to be ineffective can only be adjusted on demand to reduce data to 50, in order to obtain a better experience. Temporary use of Sglistview in the project to replace the official listviwe. At present, the issue to the RN 0.33 version has not been resolved, and temporarily did not go from the original source code to solve the problem of the official solution (the official has put on the agenda)

2, iOS loading picture problem

Because RN all rely on a JS main process in running so after the first launch of the app to load the network data and pictures and can not be displayed all at once can only display a full picture, and this problem is more obvious on iOS than on Android. The problem has not been solved for the time being.

3, performance issues

About performance issues It is strongly recommended that you read the official documentation on performance tuning recommendations again for a good performance problem, In particular, the documentation mentions the use of the Interactionmanager.runafterinteractions callback method to handle time-consuming tasks so that the UI is not obvious that the blunt effect is very effective, do not test performance during debugging, you can use the release mode in iOS to test performance.

4, WebView performance problems

WebView because there are a lot of scenes in the project need to use so is also the most important, the problem on iOS is small, in addition to the development period to feel that the WebView occupied memory (the actual release version of memory consumption acceptable) other is acceptable, Of course on iOS can also use Wkwebview to replace, but because at that time will not expand JS Read Wkwebview page Title property (real-time is not just loaded completed title), so can only use the default WebView.

But WebView's problems became prominent on the Android platform, and then there was no way to encapsulate crosswalk Xwalk WebView way to provide and combine: React-native-crosswalk-webview and React-native-webview-bridge two items in Crosswak WebView on the project expands the method of reading the current title of WebView (before also passing the detour to change Webview-bridge use crosswalk WebView but the complexity of high failure to give up. ）

5. Application Package Size

The package size was more than 10 m when the iOS package was finished, it felt acceptable and was submitted to Apple for review as soon as possible, so it didn't take time to optimize, with the hot update feature.

Android APK package due to the encapsulation of the crosswalk become packet unusually large, arm and x86 two versions of the package is about 52M, only the arm version of the package is 27M, If crosswalk is not encapsulated, the packet size is only around 5.3M (removing useless fonts and optimizing the picture), stating that the packet size of Rn is acceptable.

Summarize

In the development of the one months in fact, many times you want to worry about meeting can not fill out the pit and failed, fortunately, the framework to compare to the force basically you only need to learn a part of the knowledge can solve the specific problems and not all have to learn. Since I have not done the native development so "nit-picking" is not as partial to the hybrid framework as part of the native programmer, nor is it too steep for a part of the front-end programmer to think that the cost of learning is too high. Just as a user to use RN Development program experience can play a 70 points, as a programmer to the concept of RN if you want to iOS and Android two platform are re-use code, I think it is more good thinking and framework, the project self-written code reuse in more than 90%.

So it is highly recommended that your next app be developed using RN!

30 days react native from zero to ios/android dual platform release summary