Advantages of Cross-platform: • Reduced development cost & time • Better code reuse and maintenance • Allows to launch on more than one platform • Disadvantages of Cross-platform: • Sluggish performance • Don’t get “natural” native app feel • Platform specific UI / UX issues
– no “One Size Fits All” • Native apps and cross-platform apps both have their own place • Each mobile project should be evaluated separately • Clients’ budget and expected timeframe plays a vital role
for building user-interfaces • Its – Declarative and Component-based • React was inspired by XHP, which is a component framework for PHP • The problem with XHP was: dynamic web applications require many roundtrips to the server and XHP didn’t solve this • React was created by Jordan Walke, a software engineer at Facebook, with intension to take XHP to the browser using JavaScript. And the result was ReactJS • In the MVC paradigm, React is just the View (V) part.
first one to address this seriously, making it a faster UI rendering library • It works by storing the application state internally, and re-rendering the content to the browser (DOM Manipulation) only when when the state changes • React App has a shape of a tree of components. When an update happens, it usually only affects a sub-tree. React only re-renders this sub-tree and not the entire page. • Facebook built an effective “diff-ing” algorithm which understands when the state tree has changed. • The initial conventional approach of “diff-ing” has an O(n^3) complexity where n is the number of nodes in the tree. For a large web-application with 10K DOM nodes, the “diff-ing” of tree would require 17 minutes on a 1 GHz CPU. • Facebook engineers were, initially, able to optimize it to O(n^2) complexity but later were able to achieve O(n) complexity by using a Hash map of DOM elements containing unique keys
Declarative is saying – what you want • Imperative is saying – how to achieve it Declarative A tower of 3 blocks Imperative 1. Put block A 2. Put block B on A 3. Put block C on B
in one direction: Handle Event -> Update State -> Re-render to Virtual DOM -> Reconcile Browser DOM • In other words, if you create a form that updates state, when you update the form you’ll have to use onChange on the element and dispatch a function. • Two-way binding on the other hand, directly links the state to the element, so if one changes, the other immediately changes as well. • React doesn’t allow HTML to change the component. The HTML can only raise events which the component responds to.
for building native apps with React. • React Native comes with all the core concepts of React discussed earlier • Its still coded in JavaScript and most importantly, the mobile apps developed with React Native don’t run inside a WebView / UIWebView • Currently, supports iOS and Android • React Native allows faster app building by eliminating the need to recompile the code each time you make some change. It allows to run new code while retaining the existing application state. • Uses same fundamental UI building blocks as regular iOS and Android apps. • It combines smoothly with components written in Java, Objective-C or Swift.