What is React Native? By High School Technology Services myhsts.org React Native • React Native is a JavaScript framework for writing real, natively rendering mobile applications for iOS and Android. It’s based on React, ’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms. In other words: web developers can now write mobile applications that look and feel truly “native,” all from the comfort of a JavaScript library that we already know and love. Plus, because most of the code you write can be shared between platforms, React Native makes it easy to simultaneously develop for both Android and iOS. Abstracting React from the DOM DOM • Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. For web developers, this text is an HTML code, and the DOM is simply called HTML DOM. Elements of HTML become nodes in the DOM.

Cont..  Virtual DOM to abstract react Like the actual DOM, the Virtual DOM is a node tree that lists elements and their attributes and content as objects and properties. React’s render() method creates a node tree from React components and updates this tree in response to mutations in the data model, caused by actions. • Each time the underlying data changes in a React app, a new Virtual DOM representation of the is created • This is where things get interesting. Updating the browser’s DOM is a three-step process in React. • Whenever anything may have changed, the entire UI will be re-rendered in a Virtual DOM representation. • The difference between the previous Virtual DOM representation and the new one will be calculated. • The real DOM will be updated with what has actually changed. This is very much like applying a patch.

Advantages of React Native Cont.. • 5 Key advantages of React Native are as follows: 1. Community-driven The development of the React Native framework actually started as a effort in 2013, responding to the need of the developer community: it was looking for a mobile alternative that would combine the advantages of development with the power and agility of the native React environment. This resulted in React Native, a framework created by Facebook, and supported and continuously pushed forward by the development community. There are considerable advantages to using such a community-driven environment like the availability of a huge team of enthusiastic JS and native developers willing to share their knowledge and expertise and huge catalogs of freely available components. Cont.. 2. Maximum code reuse & cost saving By using React Native, you can use the same code for deployment on iOS as well as on Android. This means a huge saving in development time and cost. Theoretically, the development effort could be cut by half. In practice, the cost saving will be a little lower but still more than interesting enough to make the investment worth your while. According to recent calculations, about 90% of the code can be reused between Android and iOS, but it would be wise to calculate some extra time for practical modifications as well. Cont.. 3. Live reload React Native might be considered as the mobile next step after React: It builds on the React ideas and allows you to create powerful mobile applications. In fact, React Native features an interesting extra that you will not find in the native frameworks: the ‘live reload’ feature, enabling you to immediately see the result of the latest change that you have made to the code. If you have two windows opened – one containing the code and the other showing a mobile screen as a result of the code – you can immediately see the effect of what you have changed in one screen, on the other screen. Cont.. 4. Strong performance for mobile environments The React Native architecture is very well tuned to mobile devices. It makes use of the GPU (Graphics Processing Unit), while native platforms are more ‘CPU (Central Processing Unit) intensive’. Compared to hybrid technologies – which was the only option for cross-platform in the past – React Native is superfast.

Cont.. 5. Modular and intuitive architecture similar to React The same advantage that was already mentioned for using React can be highlighted here: the modular and intuitive interface makes it very easy for other developers to delve into someone else’s project and build upon it. This increases the flexibility within a development team, and makes it easier to create updates and upgrades to web applications. Additionally, testers will need less time to understand the programming logic and build appropriate testing scenarios. This will lead to valuable time-savings, which is a message that any customer and/or CFO loves to hear. Especially when this advantage is extended from web to mobile and vice versa.

Native vs Web Apps • It is rare to find a mobile app development enthusiast who has not come across or made a wrong decision because of being tangled in the mesh that the world of technical mobility experts has been seeing. A mesh that is also called — comparison between Native,Hybrid & development. Cont.. • Native Apps • Native apps are the one that are designed for a specific operating system, which can be either Android or iOS. These are developed in either Swift/Objective — C for iOS Apps or Java, when developing an app for Android. • When you invest in Native mobile app development, you get an app that is responsive to an operating system and interacts with the in-built device features like Camera and GPS etc. The responsiveness that Native apps come with, ensures that your users get an app that has very low learning curve and offers them an experience that is highly intuitive

Cont.. • Hybrid Apps • Hybrid apps are those that are developed using a single code language for multiple platform. When you invest in Hybrid application development, what you get is an app that runs on both Android and iOS. You can achieve the device specific interactions with the help of plugins that are made for the specific operating system. The biggest benefit that Hybrid apps come with is that their development process is highly cost effective.

Cont..  Web Apps (PWA) • Written in JavaScript and HTML5, Progressive Web Apps are nothing but that are developed to be responsive for the mobile users. The most cost effective of the lot, PWAs are also on a much safer spot when the time comes and the app bubble finally bursts. • Also, since they need no installation on the device, they are ideal for the users who suffers with low memory space syndrome. • Now that we have seen both what each of the app type means and the benefits that they all come with, individually, it is time to look at some of the drawbacks that comes attached.

React Native vs React Web React.js • React.js often referred to as React or ReactJS is a JavaScript library responsible for building a hierarchy of UI components or in other words, responsible for the rendering of UI components. It provides support for both frontend and server-side.

Cont..  Business advantages while working with React: • DOM (document object model) is a viewing agreement on data inputs and outputs. React’s virtual DOM is faster than the conventional full refresh model, since the virtual DOM refreshes only parts of the page. The interesting part is, the team at Facebook wasn’t aware that partially refreshing a page would prove faster. Facebook was just looking for a way to reduce their re-build time, and partial DOM refresh was just a happy consequence. This increases performance and faster programming. • You can reuse code components in React JS, saving you a lot of time. • The rendering of your pages completely, from the server to the browser will improve the SEO of your web app. • It improves the debugging speed making your developer’s life easier. • Even to those unfamiliar with React, it is easily readable.Many frameworks require you to learn an extensive list of concepts which are only useful within the framework. React strives to do the opposite. • You reap the benefit of all the advancements in the Java language and its ecosystem.

Cont..  React Native • React Native is a framework for building native applications using JavaScript. React Native compiles to native app components, which makes it possible for you to build native mobile applications. In React JS, React is the base abstraction of React DOM for the web platform, while with React Native, React is still the base abstraction but of React Native. So the syntax and workflow remain similar, but the components are different.

Cont..  Business advantages of using React Native: • React Native comes with Native Modules and Native components that improve performance. Unlike Cordova, PhoneGap, and other cross-platform frameworks that render code via WebView, React Native renders certain code components with native API’s. • React Native comes with all the advantages that React.js brought you. React.js focuses on a better UI, so those benefits remain. • You don’t have to build the same application for iOS and Android, separately as React Native allows your developers to reuse the common logic layer. • React Native’s component-based structure allows developers to build apps with a more agile, web- style approach to development than most hybrid frameworks, and without any web at all. • If you know JavaScript, React Native will be easy to pick-up, allowing most front-end web developer to be a mobile developer. All you need to know is JavaScript, platform APIs, some native UI elements, and any other platform-specific design patterns and you’re set. • No need to overhaul your old app. All you have to do is add React Native UI components into your existing app’s code, without having to rewrite.

Cont..  Conslusion • React is a framework for building applications using JavaScript. React Native is an entire platform allowing you to build native, cross-platform mobile apps, and React.js is a JavaScript library you use for constructing a high performing UI layer. React.js is the heart of React Native, and it embodies all React’s principles and syntax, so the learning curve is easy. The platform is what gave rise to their technical differences. Like the browser code in React is rendered through Virtual DOM while React Native uses Native API’s to render components on mobile. React uses HTML and with React Native, you need to familiarize yourself with React Native syntax. React Native doesn’t use CSS either. This means you’ll have to use the animated API which comes with React Native to animate different components of your application. • Bottom line, React is ideal for building dynamic, high performing, responsive UI for your web interfaces, while React Native is meant to give your mobile apps a truly native feel.

Looking Forward In the next session we will cover the chapter Getting Started including following topics: • Installing React Native • iOS setup – XCode • Run an example project in iOS simulators

Thank You By High School Technology Services myhsts.org