[MUSIC] Let us now briefly talk about hybrid mobile app development. What exactly is hybrid mobile app development and how does react native fit into the overall picture in hybrid mobile development. As we already know there are two dominant mobile app platforms, Android and iOS. Now these platforms, if you wish to double up mobile applications you could go the native way using the native development environments and the native tools to double up applications for these two platforms and their corresponding languages, Java or Code Line in case of Android and Objective-C or Swift in case of iOS. Now, this gives you the full ability to access all the features of the native platform in order to make use of them within your mobile application, but of course this means that if you need to develop a mobile app targeting both the platforms, then you need to have two separate code bases targeting each of the two platforms and then do the development in two different languages for each of the two platforms. Now, the mobile app development community has approached this problem trying to resolve the issue of having to maintain separate core bases. Instead, the question is, can we do mobile app development using a single cord base but still be able to target both the platforms? Now one easy approach to take in this case is to use the mobile website as a way of reaching into the mobile platform. So this is where we allow the mobile device users to use their built in browser to be able to access a mobile site. Thus the users are able to obtain information directly from the mobile website. This of course means that their application itself is fully hosted in the mobile browser and with a a slower side being supported by us and this is obviously the slowest way of reaching into the mobile platform. And also, this approach has very limited capability of reaching into that native device features of either of the two mobile platforms, of course this is improving day by day. Nowadays using the mobile browser approach you can get access to a lot more of the native capabilities. Including things like location and even local storage on that mobile device. But still there are limitations on what you can get access to within that mobile devices themselves. Now the other approach that people have adopted is to use what is called as the hybrid mobile application development with the WebView being used for this purpose. Now in this case, with the WebView both iAndroid and iOS have a WebView which is a widget that is part of both the platforms that you can use when you design the user interface for your mobile application. So part of the screen can be occupied by the WebView widget and once that WebView widget is included in your screen layout then you can easily target the content within the WebView widget using the standard web technologies like HTML, CSS, and JavaScript. And also even going to the extent of using frameworks like Bootstrap to design the content with responsive approach. But of course, this approach is too slow compared to the native approach. And it doesn't get access to all the capabilities of the devices. Now an example of using this approach would be the ionic framework which also uses the Cordova framework underneath for getting access to the Native device capabilities. Now interestingly, a lot of the native capabilities can easily be leveraged through the Cordova framework and be able to access that within the WebView of your applications. Now, so this is the other approach. But again, there are limitations again to using this approach. Now, looking at this, the mobile app development community design yet another way of reaching into that mobile platform. What it's called is a compiled, interpreted or a VM Hybrid based approach. In this case, what we realize is that both Both Android and iOS have a built in JavaScript engine which they leverage for supporting their browsers. So if we can then leverage this JavaScript engine that is part of both Android and also iOS. In case of Android it is the V8 engine and in case of iOS it is the JavaScript code. Now, if we can write our applications using JavaScript but then be able to run this JavaScript application on top of the virtual machine, of the JavaScript virtual machine that is included in both the platforms, then we will be able to get access into the native device capabilities. There have been many attempts at using this approach for getting access to that mobile device native capabilities. React native and NativeScript are two such examples of use of this compiled or interpreted or the VM Hybrid approach. Let's talk briefly about these two approaches, the Hybrid approach with the WebView and the Compiled Interpreted or a VM Hybrid approach in the little more detail in the next slide. So again, talking about the Hybrid App development approaches. As I mentioned in the previous slide, you have the WebView approach where you can still use the HTML, CSS and JavaScript to design your user interface and then be able to run this code in the WebView that is included in the layout of your application. And as I mentioned, ionic plus Cordova, our PhoneGap is an example of this kind of an approach. Now the advantage of using this is that you get a mobile app which feels native, or at least neo-native because you can install the mobile app on to the mobile device and so it'll fill part of the mobile devices various applications that are already installed. And so the user invokes app just like they invoke in native mobile application. This is contrast to using the mobile web approach where you expect the user to first fire up a browser and then type in the address of the mobile site and then go and actively access the mobile site. So the WebView approach is already getting closer to a native way of providing access to the application. Now, again, as I mentioned in the previous slide, the WebView approach has limitations. Now this is where the compiled,interpreted and hybrid approach has been adopted and in this case we maintain the major code off of an application code base in a single language. Typically JavaScript, for example, when you use react native or you use a native script. The code is itself written in JavaScript. Actually it's the business logic code is written in JavaScript. Then you get access to the native widgets on the tool platforms to layout the user interface. Now, exactly how is this done in react native? We will talk about that in the next lecture in this lesson. So again, as I have already mentioned, React Native and NativeScript are two approaches that use JavaScript as the language of choice for development and then be able to access it in the native device capabilities. There are other platforms like Appcelerator Titanium, Xamarin, which uses C sharp as an approach for doing development, Embarcadero FireMonkey and many more in the mobile development world. So again, summarizing, there are different types of frameworks that are aimed to build hybrid apps. So again, whether you use the WebView approach or the compiled approach that we talked about in the previous slide. So Frameworks that use HTML5 content to target like Ionic + Cordova or Ionic + Phonegap. Frameworks like React Native and NativeScript which still allow you to do your application development in JavaScript and then be able to access the Native device capabilities by leveraging the Native UI widgets while doing the user interface layout. Similarly, you have frameworks like Unity, which is used for doing 3D games environment. Unity is based upon CSharp or JavaScript as their approach but it is purely targeted at developing mobile games. Kivy, which is a python based approach and similarily libgdx, which uses Java and more game oriented and targeted at the android platform. An then you have commercial frameworks like Xamarin or Emcarcadero. Xamarin using CSharp as the language of development choice. Talking about the advantages of the hybrid approach, of course you already probably realized that some of the advantages of the hybrid approach you have a single core base. And you can leverage the existing skips if you are already a well versed JavaScript developer, then doing applications in react native or not a native script is fairly straight forward for you because you can leverage your JavaScript skills for doing development. In this course we will actually learn about how React Native leverages JavaScript plus the React framework to enable us to double up React Native applications. Similarly, you have a single code base which enables you to target multiple platforms, Android and IOS in this case. And thirdly, you have reduced development time and cost because you have a single code base and the fact that you are able to reuse your existing development skills means that you don't need to train originally in three different platforms to be able to target the web and the two mobile platforms for your use. Also, they provide you with an easy way of targeting various form factors all the way from a web browser in a standard computer using the web technologies, than you can target the tablets and the mobile devices using responsive web design and so on. And also you can get access to some of the native features on the mobile device. And also with the ability of local storage both using mobile web, as well as using the WebView approach. As well as using the compiled approach that we have talked about. You get access to the native storage capabilities on the mobile devices. Typically you get access to something like a key value storage which enables you to store data on your mobile device itself for providing offline capabilities. And also, the fact that you are able to double up your mobile app and then be able to release the mobile app on the specific app stores, whether it is the Google Playstore or the iOS or the Apple store, means that you get immediate access to the mobile users that typically download applications from these stores and install on their mobile devices. So the visibility that you gain by doing a WebView app or a compiled app using either React Native, or NativeScript, or one of the other approaches, means that you are able to reach into the stores and get access to the mobile device as opposed to simply designing a mobile website where you expect the user to actively fire the browser to reach out to your mobile website. Of course, the Hybrid Approach comes with its own set of drawbacks. Now of course, as I've been mentioning, there are issues like performance issues that you will encounter. But for most, typical use cases that you will see, for mobile applications, this may not be a problem. The performance issues manifest themselves a lot more in cases where you are doing high performance games, or 3-d games for your mobile devices. Now, that is where it may be better off to go native or at least use a gaming engine like Unity for developing 3D games and so on. The increased time and effort to be able to mimic the native UI feel, look and feel, again this is mitigated significantly with platforms like ionic plus cordova where ionic provides you with a major look and feel capability, and automatically adapts to the native look and feel of the tool platforms. Similarly, react native and native script, since they are all leveraging the native devices, UI rejects, that UI looks very much like a native application so you would be to tell the difference between a react native application as opposed to a fully native application. One more downside as I have emphasized, is that you may not be able to get access to all the native device features but again this is becoming less and less of an issue because many of the platforms are able to leverage most of the native device capabilities including things like the sensors built into your mobile devices. So which means that you would pretty soon hardly see any difference in terms of this particular issue, being able to get access to the native device capabilities. Now, one minor issue that we need to keep in mind is that when you use the hybrid approach there is that little bit of risk that the Apple store may reject your application, although increasingly we are finding less of a concern in this particular issue, because there are, indeed, a lot of applications that are designed using React Native MEGAscript. And Ionic that are already on both the Android, as well as the iOS stores. So, this may be less of a concern as time goes by. You will be surprised that many of the mobile applications that you use are actually hybrid mobile applications without you even realizing that they are indeed Hybrid mobile applications. Take Facebook as an example, it is completely done using react native. Now where do hybrid approaches shine? In terms of their use cases? Now typically, hybrid approaches are again, as I said, is not suitable for all kinds of applications. But many use cases for mobile applications. Do not require true native capabilities, so you need to evaluate the target users, and the platforms of choice, and the app requirements, and be able to decide how you approach this platform. And for many content driven applications like business and productivity applications, enterprise applications, and even media applications. Like for example Spotify. Can you tell whether Spotify is a native app or a hybrid mobile app? Think about that question. So, these kind of apps definitely shine by using the hybrid approach. With this quick introduction to hybrid mobile application development, let's delve into React Native in the rest of this course. [MUSIC]
