Reactive Native



1. What is React Native?  

React Native is the next generation of React - a Javascript code library developed by Facebook and Instagram, which was released on Github in 2013. Native app creation means writing apps for a specific operating system.



React Native helps developers reuse code across the web and on mobile. Engineers won't have to build the same app for iOS and for Android from scratch - reusing the code across each operating system.

Android and iOS have very different codebases and startups and businesses often struggle to hire - or afford- engineers for both. Now just one developer can write across different mobile operating systems.

Facebook opened up React in 2013 and has been using its proprietary React Native code for iOS app development for over a year.



2. Why open source?  

"If we work together in the open, we can advance the state of technology together," Facebook said in a blog post yesterday evening.

Altruism aside, opting to open source code is a tricky decision. Keeping a businesses infrastructure under-wraps has commercial advantages, especially when your technology is your business model.

But the developer community is loyal to those who open up. Web engineers across the world are quick to point out a bug in the code for free.

Developing open source projects helps keep Facebook one of the most coveted companies to work for. Developers want a challenge, and a sense of giving back - and Facebook wants a large pool of talented engineers to pick its employees from.

Plus, it saves on training. If every engineer Facebook hires already knows how to write in React Native, they have a running start.

Facebook has a culture of maturing its development. Over ten years' it has scaled to serve one billion users, thousands of developers and three major platforms - iOS, Android and Web.

It's a considerable development from when the fledgling startup copied Facebook code on Harvard University's server for releases and,
"poke on it to see if it was still working every day at 10am," mobile engineering manager Bryan O'Sullivan joked earlier this year.

Yesterday's announcement cements Facebook's existence for another ten years if it continues to innovate this way.



3. How did Facebook write React Native for Android?  

The first cross-platform React Native app - ads manager - was developed by the London-based dev team, who were in the US to announce the Android release yesterday evening. Ads manager lets businesses that advertise on the social network manage their accounts and create new adverts.

React Native has only recently been proven in production and building a new app based on the framework carried some risk.

Three product engineers familiar with React set about to create an app for Android and predicted problems with the logic necessary to understand differing time zones, date formats, currencies and ad formats across the world.

This business logic was already written in JavaScript, and the team knew it wouldn't be efficient to build it all again in Objective-C to do it again in Java for Android.

Now this project has been released on Github, developers can use a single workflow to develop for iOS and Android. This means you can use the same editor and propagate it to both the iOS simulator and Android emulator at the same time.



Pictured: Text editor and iPhone and Android simulators @Facebook

Airbnb, Box, Facebook, GitHub, Google, Instagram, LinkedIn, Microsoft, Pinterest, Pixar Animation Studios, Twitter, Uber, and WhatsApp all use React code.



4. What's the Challenges with React Native?  

Working across separate iOS and Android codebases is challenging.

"When we were building the app, Facebook used this model, and all our build automation and developer processes were set up around it. However, it doesn't work well for a product that, for the most part, has a single shared JavaScript codebase," wrote Daniel Witte and Philipp von Weitershausen, engineers at Facebook in a blog yesterday.

Developers who often struggle to figure out where the master code exists and whether bugs have been fixed in all platforms may want to hold out for when Facebook opens up its unified repository. It is moving all of its code from Git to Mercurial, and will be one of the largest codebases of its kind.

Google is another web giant that understands the power of open source, recently committing to OpenStack and creating an enitrely open source container management project, Kubernetes. The project seems at odds with its own Google cloud business, but again, it knows that the benefits outweigh any loss of Google cloud customers.




5. Advantages of React Native?  

The fact that React Native actually renders using its host platform's standard rendering APIs enables it to stand out frommost existing methods of cross-platform application developement ,like Cordova or Ionic. Existing methods of writing mobile applications using combinations of JavaScript,HTML,and CSS typically render using webviews.While this approach can work, it also comes with drawbacks,especially around performance.
Additionally,they do not usually have access to the host platform's set of native UI elements.When these frame works do try to mimic native UI elements,the results usually "feel" just a little off; reverse-engineering all the fine details of things like animations takes an enormous amount of effort,and they can quickly become out of date.

In contrast, Reactive Native actually translates your markup to real,native UI elements,leveraging existing means of rendering views of whatever platform you are working with. Additionally,React works separately from the main UI thread,so your application can maintain high performance without sacrificing capability.The update cycle in React Native is the same as in React :when props or state change,React Native re-renders the views.The major differnce between React Native and React in the browser is that React Native does this by leveraging the UI libraries of its host platform, rather than using HTML and CSS markup.

For developers accustomed to working on the Web with React,this means you can write mobile apps with performance and look and feel of anative application,while using familiar tools. React Native also represents an improvement over normal mobile development in two other areas:the developer experience and cross-platform development potential.




6. Handling Multiple Platforms?  

React Native gracefully handles multiple platforms. The vast majority of the React Native APIs are cross-platform, so you just need to write one React Native component, and it will work seamlessly on both iOS and Android. Facebook claims that their Ad Manager application has 87% code reuse across the two platforms, and I wrote a flashcard app without any platform-specific code at all.

If you do want to write platform-specific code -- due to different interaction guidelines on iOS and Android, for instance, or because you want to take advantage of a platform-specific API -- that's easy, too. React Native allows you to specify platform-specific versions of each component, which you can then integrate into the rest of your React Native application.



7. React Native - Differences between Android and IOS?  

The base setup for building with Android and iOS are the same, but once you start getting into the development of your app, there are a few differences. From what I've experienced, we can probably bet on using about 80% of our code cross platform. I've heard of others using up to 90%, and I've normally heard the number being around 85%.

To use the code cross platform, you would just copy the code from your .ios.js or .android.js file, and copy it into the other. As long as there are not platform specific components, it should work.

Also:

There are a few modules that were build specifically for iOS, and there are a few that were specifically built for Android, and some of them work cross platform. For example, ActivityIndicatorIOS (https//facebook.github.io/react-native/docs/activityindicatorios.html#content) is an iOS styled element, but if you look in the component itself, you will see both ActivityIndicatorIOS.android.js and ActivityIndicatorIOS.ios.js, so it should at least work cross platform, but UI will probably not be what you would be looking for in Android.

If you install any plugins that need to access any native functionality, for example using a custom font, you will need to do a bit of work separately (on each platform) to get them working for each platform and it will not work cross platform.

Bridging will be entirely different for each platform, though this may not be something you would even have to worry about unless you needed to do something that React Native does not support out of the box. To build in IOS, you will need a Mac and Xcode. To build in Android, you will need the android SDK and some type of emulator (I use Genymotion). But keep in mind that as of now, you can't develop iOS on a Windows machine unless you use something like ExponentJS, but if you have a Mac, you can develop cross platform.



8. Are all React components usable in React Native?  

Web React components use DOM elements to display (ex. div, h1, table, etc) but these are not supported by React Native. You'll need to find libraries/components made specifically for React Native.

I doubt there are components that supports both, thus it should be fairly easy to figure out if it's made for React Native or not. As of now, if the creator does not specifically say that they made for React Native, it probably does not work on React Native.




9. Passing functions between components in React and React Native?  

I would stay away from such passing functions between components. I always use Flux architecture with ReactJs and React Native.

Keep components just to render stuff by properties and sending new actions.

You have hard dependency between components. This stuff does not scale. It will be hard to maintaine such code.

https://facebook.github.io/flux/

What i personally do is just write actions, stores, dispatcher and don't use any dependency on stuff like redux, because React Native is envolving rapidly and you never know if your dependencies will do it at same speed.



10. Difference between React Native and NativeScript, which one do you prefer and why?  

React JS for the web is fantastic. But when it comes to React Native - i felt i was boxed or caged to Reacts way of creating the views and constructing the screen there after.

With NativeScript that's not the case. The UI definition follows XML syntax. I know XML so easy to follow. When it comes to application logic - it allows ES5, TypeScript - again which i already know so i can reuse my skill. You use a subset of CSS to style your app. Again big plus point here - if you know CSS3, NS allows you to use most of the basic rule sets to style your app. Basically NS is all about open standards - you don't have to learn anything new. you use what you all ready know.



11. Are there any disadvantages to using React Native for mobile development?  

Having played around with it for a few weeks, I've found React Native to be fairly buggy. I don't think it's anywhere near production ready. A lot of features are currently still missing, for example, pin annotations for maps. Being that it's open source, there's nothing stopping you from building the feature yourself, but if you're trying to get something created quickly / for production, you're better off using developing directly for iOS or Android.




12. What is the difference between using constructor vs getInitialState in React / React Native?  

The two approaches are not interchangeable. You should initialize state in the constructor when using ES6 classes, and define the getInitialState method when using React.createClass.

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state */ };
}
}
is equivalent to

var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});



13. Re-Render on Changes?  

In addition to props, components can also have an internal state. The most prominent example of that behavior would be a click counter that updates its value when a button is pressed. The number of clicks itself would be saved in the state.

Each of the prop and state change triggers a complete re-render of the component.



14. what is a prop?  

A good analogy to define "what is a prop?" has been likened to the real life situation of when a person moves from one home to another. A moving van pulls up and all the contents of the home are loaded in the van and it drives off to be unloaded into the new house. The house is the scenery. The scenery includes the actual walls, floors, ceilings, doors- the architecture of the house. This does not move. It is stationary and permanent. The items boxed up, covered in pads, and carried out to the moving van when a person is changing residences would all be considered the props.



15. What is the difference between using constructor vs getInitialState in React / React Native?  

The two approaches are not interchangeable. You should initialize state in the constructor when using ES6 classes, and define the getInitialState method when using React.createClass.

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { /* initial state */ };
}
}
is equivalent to

var MyComponent = React.createClass({
getInitialState() {
return { /* initial state */ };
},
});




Java Interview Question

.Net Interview Question

PHP Interview Question

AngularJS Interview Questions