Introduction: Hybrid App (hybrid mobile application) development refers to a development model between Web-app and Native-App. It has both “the advantages of a good user interaction experience with Native App” and “the advantages of cross-platform development of Web App”. Many people know that React Native is Facebook’s open source framework. You can directly use Javascript to develop native apps. This article will discuss specific practical issues in development.
Previously, we have mentioned React Native in many articles. This mobile elite development club will have a more in-depth discussion around Hybrid App and React Native, hoping to Give some suggestions to our developer classmates. The article is compiled by Zhu Yali, and the IT operation and maintenance management platform OneAPM is responsible for the review. The following is the discussion content:
Host-Donghui: Hello everyone, today our topic is Hybrid App and React Native. Welcome everyone to speak actively.
Weipeng Chen-Astra iOS: I want to know the attitude and evaluation of the students who have used React Native on this technology?
Guo Pinghong: It seems that Ctrip, Ping An Technology and Tmall are all using React Native, indicating that there is still a market.
Host-Donghui: The performance of React Native on Android does not seem to be very good, right?
Lobster: The first loading of React Native is very slow. It’s better to have a cache. Others are okay. The difficulty of landing is that you don’t know whether the client is developed or the front-end is done. .
Guo Pinghong: React Native effectively solves the problem of sexual dysfunction in H5, which is very good. Just like the idea of React Native: leaReact Native once, write anywhere .
James: Personal understanding, the launch of React Native should be to unify the development model of the mobile terminal.
Luo Fei: Can you share the status quo of your company’s use of Hybrid or React Native, and how do you use it?
Li Binggen: The status quo is: Most of them can be done with React Native, and only a few require native support. Of course, it is also related to our project. Because the functions we are doing now are relatively simple, our main work is dealing with one problem: displaying good things on one platform, and the same code on another platform will not work. Then there is the adaptation to different screens. I haven’t encountered anything particularly difficult yet. Today, see if anyone uses it for large-scale mature projects? Learn from the experience.
Rory He: The cost of learning React Native requires technology is actually higher.
frankphper: Is the front end turned into a “money” end because of React Native?
Kiss Xiaojin: I saw Ali open source a few days ago, and the effect can be referred to the Taobao and Juhuasuan brand groups. https://github.com/alibaba/LuaViewSDK.
In fact, in the field of mobile APP development, it is not flexible (Native) to release the ultimate experience, and there is no ultimate experience (H5) if it is flexible release. Is there a technical solution that can balance the ultimate experience and flexible release? LuaView can perfectly solve the above two problems, but you need to learn the lua language.
Host-Donghui: You can also talk about issues such as practice, usage scenarios, and benefits.
Kiss Xiaojin: The usage scenario is generally that the e-commerce business needs to go online flexibly to promote large-scale activities.
Li Binggen: http://reactnative.cn/docs/0.21/getting-started.html You can look at the documentation here and buy another primer. Generally The project development is almost complete.
Du Pengfei Qianfeng Android: Isn’t it easier to directly use WebView and ordinary web pages?
Guo Pinghong: In that case, there are problems with performance and functionality.
Shawn: I think there are currently three forms of Hybrid development:
1. One part of native development + part of H5 development, bridged through WebView;
2 . Pure H5 development, when local functions are needed, use third-party packaging tools such as HBuilder+;
3. Use H5 or JS to develop, but finally compiled into Native applications, such as ReactNative, APICloud, Cocos2d-js, Unity3D-js, etc. There is also a form of Webview+Runtime, which is generally used for H5 game acceleration, such as Tencent X5 browser, UC, etc. have built-in Runtime;
jia_dongxu: Cordova+ionic can be used angular. V2 optimizes a lot of mobile terminals, and angular will also release 2. It is said that mobile is optimized. I wonder if the performance of the official version of ionic2 and angular2 will improve a lot?
True brother: However, Ionic does not perform well on Android phones.
Guo Pinghong: Ionic is a bit stuck, but iOS is better.
Shawn: The performance of the mobile terminal is a problem, and the traditional PC terminal solution should not be used on the mobile phone.
Chai Mingkun: It seems that Angular 2.0’s support and rendering of Native Apps is based on React Native. We also require frequent changes to a certain module. Recently, we are studying and evaluating the use of React-Native.
James: Ionic2 nightly is already available. Ionic2 completely adopts angularjs2 and uses typescript es6, which will greatly improve the performance. Angularjs2 has also optimized the mobile terminal, and React Native should be used by large manufacturers or small scales at present.
True brother: The operation of dom is too frequent, especially the two-way data binding, which is not realistic. If you need to iterate quickly, you can consider React Native. If you pay special attention to experience and performance, it is recommended to use Native.
Li Binggen: Some time ago, an outsourcing company specifically promoted React Native, claiming that the basic things have been packaged again, if they can really achieve the level they claim , The development of general APP is super fast. For many general APPs, the core competitiveness is business, and they don’t care about the APP itself, how fast it comes. Of course, everyone may not be willing to do this kind of development.
I used to have a company that did a year of rapid iteration, and found a business that really had users willing to use it, and then started to optimize it. It was a tragedy to optimize at the beginning and find that no one is using it after the optimization.
Dou Jingxuan: The key is the need for customization or Native development, so there will be no substitutes. It is not so easy to run a React Native project, and basic Node knowledge is required.
I won’t change my name until I win the Wimbledon championship: Will this cause most companies to be willing to use React Native, thereby reducing development costs?
Li Binggen: Of course, this is the tragedy of the company. Developers don’t care. The company can go to the next one, anyway, if you have practiced your skills. Our new colleague who came two days ago has already been responsible for the animation development of React Native. Generally speaking, it is easy to get started.
Shawn: That is to say, large companies pursue user experience. If cost and development efficiency are not considered, they will still do it natively.
True brother: React Native also belongs to a development model. In fact, the advantages and disadvantages are obvious. React Native can only call the native interface, but cannot extend the native. Extensions can only be written in Native, React Native is better than ionic1, but now you need to look at typescript to learn ionic2 or angular2.
jia_dongxu: The shortcomings of React Native, the Android experience is too bad, very stuck.
Li Binggen: For the card problem, the development mode needs to be turned off. It will be much better. Then, the page can still be properly optimized.
Dou Jingxuan: If there are a group of people who encapsulate all the popular components on the market and open them up, the promotion will be very fast.
I won’t change my name until I win the Wimbledon championship: That means if you need custom controls, React Native can’t do it?
True brother: Yes, React Native cannot do interface development.
Dou Jingxuan: React Native provides methods for customizing components, which needs to be developed by Native.
Li Binggen: Use the native seal layer for React Native. Android is not very familiar with it. iOS is very simple. Of course, it may also be because the function I made is relatively simple.
Chai Mingkun: When React Native uses View, these Views must be locally customized and related methods are exposed to JS so that the JS side can be used normally.
Zhang Chunming: Is React Native adopted? I generally think this way: Can we achieve rapid iteration, can adapt to various abnormal modifications of the product (control modification), and it is easy to track and locate problems. At this stage, we are more inclined to mixed development, and then take what we need.
Shawn: So currently, there is no perfect solution. That is to say, if you need to do it natively, we will use the native one. Where the advantage of H5 is, use H5. , This is called hybrid development!
Guo Pinghong: React Native has no problems in terms of performance and functionality. The main learning curve is steep and there are few people who will use it.
Dou Jingxuan: Hybrid is limited to WebView. If there are bugs in WebView, you can’t do anything.
Long Zhihui: Haven’t some of Tmall’s businesses been transformed with React Native?
Guo Pinghong: Tmall has encapsulated React Native.
Chai Mingkun: If I remember correctly, the discovery module of Qzone is React Native.
True brother: What technology does not affect performance, but also achieves functions and improves user experience?
Dou Jingxuan: I think what to use depends on the developer’s decision. If you use React Native and Hybrid for an advertising campaign page, it is really not as good as a WebView H5 native to do it. I have been to the Hybrid pit for a year in 15 years, and I started to dig into the React Native pit in 16 years.
Long Zhihui: Add frosted glass locally! In fact, the programming idea is the same. The main purpose of React Native or Hybrid is often to break through the client review limit and achieve the purpose of code reuse, avoiding writing three copies of code (Android, iOS, Web) for the same business.
Guo Pinghong: I found that the dynamic library used by 12306 also bypassed Apple’s review.
True brother: Actually, I think React Native is more like an idea, not just a framework. The learning framework is mainly to learn the author’s thoughts, such as angular.
Dou Jingxuan: Yes, it is thought, component development.
I won’t change my name until I won the Wimbledon championship: I think it’s okay for React Native to do some modules, but if it’s a complete replacement for native, I think it’s not right Too exaggerated?
True brother: In fact, they are all MVVM, which can’t be replaced. It’s just that the ability to achieve the same effect in a relatively short period of time has little impact on performance. It will take a long time to divide.” Now it has been completely overthrown. If it were unified, there might not be so many new ideas.
Long Zhihui-iOS: Every year iOS and Android system updates will open a large number of new APIs, using third-party ones will always slow down, performance and user experience The client is the first priority.
Shawn: Do you think Cocos2d supports JS? Unity3d officially recommends JS. Although the current object-oriented JS is not thorough, you can’t publish ECMAScript6. Just use JS. Even better, the key is that React Native supports ES6 by default.
Tang Tao: I think the React Native or Hybrid solution is suitable for products with strong operations, such as e-commerce and tools, which are temporarily unnecessary. Everyone chooses the technical solution. When you can refer to.
Long Zhihui-iOS: I don’t know what technology will be used for WeChat’s application account? React Native?
James: WeChat’s application number uses JS, and WeChat has WebView.
Long Zhihui-iOS: That is still Hybrid. If WeChat also open sourced the JS framework, it would be the second React Native.
Shawn: Tencent will not abandon the standard, and the WeChat application account is definitely the time when H5 emerged.
Long Zhihui-iOS: Actually, I think React Native is a bit like Cocos2d-x. It encapsulates the components of each platform and writes it in C++ once, and it can be transplanted to each Platform.
Luo Fei: Thank you very much for the discussion. Due to time, today’s discussion ends here. We can have more exchanges in the future, thank you again.
The domestic ITOM management platform OneAPM is committed to helping enterprise users provide full-stack performance management and IT operation and maintenance management services, and logs can be completed with a single probe Analysis, security protection, APM basic component monitoring, integrated alarms, and big data analysis functions. To read more excellent articles, please visit OneAPM official technical blog
This article is transferred from OneAPM official blog
Introduction: Hybrid App (hybrid mobile application) development refers to a development model between Web-app and Native-App. It has both “Native App’s good user interaction experience “Advantages” and “Advantages of Web App Cross-platform Development”. Many people know that React Native is Facebook’s open source framework. You can directly use Javascript to develop native apps. This article will discuss specific practical issues in development.
Previously, we have mentioned React Native in many articles. This mobile elite development club will have a more in-depth discussion around Hybrid App and React Native, hoping to Give some suggestions to our developer classmates. The article is compiled by Zhu Yali, and the IT operation and maintenance management platform OneAPM is responsible for the review. The following is the discussion content:
Host-Donghui: Hello everyone, today our topic is Hybrid App and React Native. Welcome everyone to speak actively.
Weipeng Chen-Astra iOS: I want to know the attitude and evaluation of the students who have used React Native on this technology?
Guo Pinghong: It seems that Ctrip, Ping An Technology and Tmall are all using React Native, indicating that there is still a market.
Host-Donghui: The performance of React Native on Android does not seem to be very good, right?
Lobster: The first loading of React Native is very slow. It’s better to have a cache. Others are okay. The difficulty of landing is that you don’t know whether the client is developed or the front-end is done. .
Guo Pinghong: React Native effectively solves the problem of sexual dysfunction in H5, which is very good. Just like the idea of React Native: leaReact Native once, write anywhere .
James: Personal understanding, the launch of React Native should be to unify the development model of the mobile terminal.
Luo Fei: Can you share the status quo of your company’s use of Hybrid or React Native, and how do you use it?
Li Binggen: The status quo is: Most of them can be done with React Native, and only a few require native support. Of course, it is also related to our project. Because the functions we are doing now are relatively simple, our main work is dealing with one problem: displaying good things on one platform, and the same code on another platform will not work. Then there is the adaptation to different screens. I haven’t encountered anything particularly difficult yet. Today, see if anyone uses it for large-scale mature projects? Learn from the experience.
Rory He: The cost of learning React Native requires technology is actually higher.
frankphper: Is the front end turned into a “money” end because of React Native?
Kiss Xiaojin: I saw Ali open source a few days ago, and the effect can be referred to the Taobao and Juhuasuan brand groups. https://github.com/alibaba/LuaViewSDK.
In fact, in the field of mobile APP development, it is not flexible (Native) to release the ultimate experience, and there is no ultimate experience (H5) if it is flexible release. Is there a technical solution that can balance the ultimate experience and flexible release? LuaView can perfectly solve the above two problems, but you need to learn the lua language.
Host-Donghui: You can also talk about issues such as practice, usage scenarios, and benefits.
Kiss Xiaojin: The usage scenario is generally that the e-commerce business needs to go online flexibly to promote large-scale activities.
Li Binggen: http://reactnative.cn/docs/0.21/getting-started.html You can look at the documentation here and buy another primer. Generally The project development is almost complete.
Du Pengfei Qianfeng Android: Isn’t it easier to directly use WebView and ordinary web pages?
Guo Pinghong: In that case, there are problems with performance and functionality.
Shawn: I think there are currently three forms of Hybrid development:
1. One part of native development + part of H5 development, bridged through WebView;
2 . Pure H5 development, when local functions are needed, use third-party packaging tools such as HBuilder+;
3. Use H5 or JS to develop, but finally compiled into Native applications, such as ReactNative, APICloud, Cocos2d-js, Unity3D-js, etc. There is also a form of Webview+Runtime, which is generally used for H5 game acceleration, such as Tencent X5 browser, UC, etc. have built-in Runtime;
jia_dongxu: Cordova+ionic can be used angular. V2 optimizes a lot of mobile terminals, and angular will also release 2. It is said that mobile is optimized. I wonder if the performance of the official version of ionic2 and angular2 will improve a lot?
True brother: However, Ionic does not perform well on Android phones.
Guo Pinghong: Ionic is a bit stuck, but iOS is better.
Shawn: The performance of the mobile terminal is a problem, and the traditional PC terminal solution should not be used on the mobile phone.
Chai Mingkun: It seems that Angular 2.0’s support and rendering of Native Apps is based on React Native. We also require frequent changes to a certain module. Recently, we are studying and evaluating the use of React-Native.
James: Ionic2 nightly is already available. Ionic2 completely adopts angularjs2 and uses typescript es6, which will greatly improve the performance. Angularjs2 has also optimized the mobile terminal, and React Native should be used by large manufacturers or small scales at present.
True brother: The operation of dom is too frequent, especially the two-way data binding, which is not realistic. If you need to iterate quickly, you can consider React Native. If you pay special attention to experience and performance, it is recommended to use Native.
Li Binggen: Some time ago, an outsourcing company specifically promoted React Native, claiming that the basic things have been packaged again, if they can really achieve the level they claim , The development of general APP is super fast. For many general APPs, the core competitiveness is business, and they don’t care about the APP itself, how fast it comes. Of course, everyone may not be willing to do this kind of development.
I used to have a company that did a year of rapid iteration, and found a business that really had users willing to use it, and then started to optimize it. It was a tragedy to optimize at the beginning and find that no one is using it after the optimization.
Dou Jingxuan: The key is the need for customization or Native development, so there will be no substitutes. It is not so easy to run a React Native project, and basic Node knowledge is required.
I won’t change my name until I win the Wimbledon championship: Will this cause most companies to be willing to use React Native, thereby reducing development costs?
Li Binggen: Of course, this is the tragedy of the company. Developers don’t care. The company can go to the next one, anyway, if you have practiced your skills. Our new colleague who came two days ago has already been responsible for the animation development of React Native. Generally speaking, it is easy to get started.
Shawn: That is to say, large companies pursue user experience. If cost and development efficiency are not considered, they will still do it natively.
True brother: React Native also belongs to a development model. In fact, the advantages and disadvantages are obvious. React Native can only call the native interface, but cannot extend the native. Extensions can only be written in Native, React Native is better than ionic1, but now you need to look at typescript to learn ionic2 or angular2.
jia_dongxu: The shortcomings of React Native, the Android experience is too bad, very stuck.
Li Binggen: For the card problem, the development mode needs to be turned off. It will be much better. Then, the page can still be properly optimized.
Dou Jingxuan: If there are a group of people who encapsulate all the popular components on the market and open them up, the promotion will be very fast.
I won’t change my name until I win the Wimbledon championship: That means if you need custom controls, React Native can’t do it?
True brother: Yes, React Native cannot do interface development.
Dou Jingxuan: React Native provides methods for customizing components, which needs to be developed by Native.
Li Binggen: Use the native seal layer for React Native. Android is not very familiar with it. iOS is very simple. Of course, it may also be because the function I made is relatively simple.
Chai Mingkun: When React Native uses View, these Views must be locally customized and related methods are exposed to JS so that the JS side can be used normally.
Zhang Chunming: Is React Native adopted? I generally think this way: Can we achieve rapid iteration, can adapt to various abnormal modifications of the product (control modification), and it is easy to track and locate problems. At this stage, we are more inclined to mixed development, and then take what we need.
Shawn: So currently, there is no perfect solution. That is to say, if you need to do it natively, we will use the native one. Where the advantage of H5 is, use H5. , This is called hybrid development!
Guo Pinghong: React Native has no problems in terms of performance and functionality. The main learning curve is steep and there are few people who will use it.
Dou Jingxuan: Hybrid is limited to WebView. If there are bugs in WebView, you can’t do anything.
Long Zhihui: Haven’t some of Tmall’s businesses been transformed with React Native?
Guo Pinghong: Tmall has encapsulated React Native.
Chai Mingkun: If I remember correctly, the discovery module of Qzone is React Native.
True brother: What technology does not affect performance, but also achieves functions and improves user experience?
Dou Jingxuan: I think what to use depends on the developer’s decision. If you use React Native and Hybrid for an advertising campaign page, it is really not as good as a WebView H5 native to do it. I have been to the Hybrid pit for a year in 15 years, and I started to dig into the React Native pit in 16 years.
Long Zhihui: Add frosted glass locally! In fact, the programming idea is the same. The main purpose of React Native or Hybrid is often to break through the client review limit and achieve the purpose of code reuse, avoiding writing three copies of code (Android, iOS, Web) for the same business.
Guo Pinghong: I found that the dynamic library used by 12306 also bypassed Apple’s review.
True brother: Actually, I think React Native is more like an idea, not just a framework. The learning framework is mainly to learn the author’s thoughts, such as angular.
Dou Jingxuan: Yes, it is thought, component development.
I won’t change my name until I won the Wimbledon championship: I think it’s okay for React Native to do some modules, but if it’s a complete replacement for native, I think it’s not right Too exaggerated?
True brother: In fact, they are all MVVM, which can’t be replaced. It’s just that the ability to achieve the same effect in a relatively short period of time has little impact on performance. It will take a long time to divide.” Now it has been completely overthrown. If it were unified, there might not be so many new ideas.
Long Zhihui-iOS: Every year iOS and Android system updates will open a large number of new APIs, using third-party ones will always slow down, performance and user experience The client is the first priority.
Shawn: Do you think Cocos2d supports JS? Unity3d officially recommends JS. Although the current object-oriented JS is not thorough, you can’t publish ECMAScript6. Just use JS. Even better, the key is that React Native supports ES6 by default.
Tang Tao: I think the React Native or Hybrid solution is suitable for products with strong operations, such as e-commerce and tools, which are temporarily unnecessary. Everyone chooses the technical solution. When you can refer to.
Long Zhihui-iOS: I don’t know what technology will be used for WeChat’s application account? React Native?
James: WeChat’s application number uses JS, and WeChat has WebView.
Long Zhihui-iOS: That is still Hybrid. If WeChat also open sourced the JS framework, it would be the second React Native.
Shawn: Tencent will not abandon the standard, and the WeChat application account is definitely the time when H5 emerged.
Long Zhihui-iOS: Actually, I think React Native is a bit like Cocos2d-x. It encapsulates the components of each platform and writes it in C++ once, and it can be transplanted to each Platform.
Luo Fei: Thank you very much for the discussion. Due to time, today’s discussion ends here. We can have more exchanges in the future, thank you again.
The domestic ITOM management platform OneAPM is committed to helping enterprise users provide full-stack performance management and IT operation and maintenance management services, and logs can be completed with a single probe Analysis, security protection, APM basic component monitoring, integrated alarms, and big data analysis functions. To read more excellent articles, please visit OneAPM official technical blog
This article is transferred from OneAPM official blog