7 Reasons Why Facebook’s React Native Is the Future of Hybrid App Development

• Hiring Headquarters Home
• Mobile Development
• 7 Reasons Why Facebook’s React Native Is the Future of Hybrid App Development

In the world of mobile app development, we’re always looking for shorter development cycles, quicker time to deployment, and better app performance. With two operating systems dominating the landscape, businesses creating mobile apps often face a compromise: apps that provide a better user experience, or apps that are faster to develop and run on more platforms and devices?

At the crossroads of user experience and ease of development is the hybrid mobile app—an app built with technology many developers already know (like JavaScript, or HTML5 and CSS) that’s wrapped in a container allowing it to run natively on a device.

Hybrid app frameworks have come a long way to bridge the gap between the performance of a native app and the ease of development of a web app. On the leading edge of this technology is Facebook’s React Native user interface (UI) design framework. Here’s a look at how this impressive JavaScript library is upping the ante for hybrid mobile apps.

1. IT’S GOT IOS AND ANDROID COVERED.

Initially, Facebook only developed React Native to support iOS. However with its recent support of the Android operating system, the library can now render mobile UIs for both platforms. Facebook used React Native to build its own Ads Manager app, creating both an iOS and an Android version. Both versions were built by the same team of developers.

Facebook also made React Native open-source, with the idea that compatibility with other platforms like Windows or tvOS could be worked on by the development community, so stay tuned.

2. REUSABLE COMPONENTS ALLOW HYBRID APPS TO RENDER NATIVELY.

Gone are the WebView components of other hybrid mobile apps. This is possible because React Native’s building blocks are reusable “native components” that compile directly to native. Components you’d use in iOS or Android have counterparts right in React, so you’ll get a consistent look and feel.

This component-based structure also allows you to build apps with a more agile, web-style approach to development than typical hybrid frameworks, but without any web at all. The app will have the speed, look, and functionality of a native mobile application.

Recommended React Native Development Freelancers

$125/hr

Christian Nicholson

Senior Mobile App Developer(iOS, Android, Ionic, React-Native)

$85/hr

Oliver Levenson

iOS/Android App and JS Developer (Swift/Java/React/React Native)

$65/hr

Luiz Fernando D.

Mobile App Development Expert (iOS/Android/React Native/Flutter)

$79/hr

Ben Alteneder

Expert React & React Native Developer

3. APPLY REACT NATIVE UI COMPONENTS TO AN EXISTING APP’S CODE—WITHOUT ANY REWRITING AT ALL.

This is a huge bonus for businesses that want to augment an existing app but don’t want to overhaul it. Incorporate React Native components into your app’s code. Or, if your existing hybrid app was built with Cordova and Ionic, reuse that Cordova-based code easily with a plugin.

4. IT’S ONE OF THE TOP MOBILE JAVASCRIPT FRAMEWORKS AMONG DEVELOPERS—AND GROWING.

If you know JavaScript, React Native is a quick pick-up, essentially allowing any front-end web developer to be a mobile developer on the spot. No need to learn iOS’s Swift or Java for Android—just know JavaScript, some native UI elements, platform APIs, and any other platform-specific design patterns and you’re good to go. Also included in React Native’s library are Flexbox CSS styling, inline styling, debugging, and support deploying to either the App Store or Google Play.

React is still new, but it’s maturing quickly and Facebook has stated it plans to continue investing in its growth.

5. REACT NATIVE IS ALL ABOUT THE UI.

React Native is focused solely on building a mobile UI. Compared with JavaScript frameworks like AngularJS or MeteorJS, React Native is UI-focused, making it more like a JavaScript library than a framework. The resulting UI is highly responsive and feels fluid thanks to asynchronous JavaScript interactions with the native environment. This means the app will have quicker load times than a typical hybrid app, and a smoother feel.

6. NATIVE APP DEVELOPMENT IS MUCH MORE EFFICIENT.

Whereas native app development is usually associated with inefficiency, less developer productivity, and slower time to deployment, React Native is all about bringing the speed and agility of web app development to the hybrid space—with native results.

Under React Native’s hood is Facebook’s popular ReactJS UI library for web applications. React Native brings all of ReactJS’s better app performance, DOM abstraction, and simplified programming methods to hybrid mobile development.

7. IT OFFERS THIRD-PARTY PLUGIN COMPATIBILITY, LESS MEMORY USAGE, AND A SMOOTHER EXPERIENCE.

Third-party plugins mean you won’t have to rely on a WebView for certain functions. For example, if you’re adding Google Maps functionality to your app, React Native lets you link the plugin with a native module, so you can link the map up with the device’s functions like zoom, rotate, and the compass, while using less memory and loading faster. If your app supports older operating systems (and older devices), this can help you keep the app running smoothly.

Get ahead of the curve with React Native today.

Getting started with React Native is easy—especially for JavaScript pros. Just download the open-source code from Github and make sure you’re familiar with a few tools and constructs in the React Native library that are helpful to know, including NodeJS, the CSS Flexbox system, ECMAScript 6, and JSX, a JavaScript syntax extension that’s similar to XML and used to display data.

Make your website as iPhone web application

These are a lot of tips to make your website an iPhone app so users can save it on their Home screens and access to your site faster.

Specifying a Webpage Icon for iPhone Home

We have two ways to design a custom icon that users can display on their Home screens using the Web Clip feature:

• a simple image where iPhone 1.1.3 and later automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone 1.1.3 adds:
  • rounded corners
  • drop shadow
  • reflective shine
  This is the image for Luscarpa.com:
  
  and this is how it is on iphone home screen:
  
• an image precomposed, to this image iPhone doesn’t add effects.
  This is the image precomposed for Luscarpa.com:
  
  and this is how it is on iphone home screen:
  

How we can provide this image? There are two ways:

• place an icon file in PNG format in the root document folder called apple-touch-icon.png orapple-touch-icon-precomposed.png. With this method you specify an icon for the entire website (every page on the website),
• add a link element to the webpage, as in:
  Copy this code to the clipboardView plain text
  

  1 rel="apple-touch-icon" href="/custom_icon.png"/>
  or
  Copy this code to the clipboardView plain text
  

  1 rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>
  With this code you specify an icon for a single webpage or replace the website icon with a webpage-specific icon.

Hide Safari Components

Add this line if you want that your web app/website don’t show the safari user interface components:

Copy this code to the clipboardView plain text

1 name="apple-mobile-web-app-capable" content="yes" />

Status Bar Appearance

You can change the Status Bar of web app/website using the following line of code:

Copy this code to the clipboardView plain text

1 name="apple-mobile-web-app-status-bar-style" content="black" />

There are three different colors:

1default

2black

3black-translucent

NOTE: If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Specifying a Startup Image

On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:

Copy this code to the clipboardView plain text

1 rel="apple-touch-startup-image" href="/startup.png">

Here an example of my custom startup:

The image must be a png file and his dimensions 320 x 460 pixels in portrait orientation.
NOTE: this option works only if apple-mobile-web-app-capable is set to yes

Standalone Detection

You can develope custom features or effects for your standalone version of site, you can detect it using the boolean var window.navigator.standalone from javascript.

Note & Conclusion

All these tips only works for web pages that have been saved to the home screens and opened from there, if you access to your website using safari you don’t have this customizations. Remember also that any new link will be open in new browser tab so you lost these settings.

Is my opinion that if you develop a strongly ajax-oriented web application, so to avoid the users from stressing clicking and page refresh, allowing them to use just the “first page” , all these settings can be make your app amazing.

This website uses these options, you can test them adding it to your home screen of iPhone/iPod Touch, actually I’m using wordpress so there isn’t a customization to load all site with ajax so you can see the home page like web application, but if you click on a post link you will be redirect to safari.

Resources

• Safari Dev Center – Safari Web Content Guide

How to use Flash CS 5.5, AIR 3.2, and Starling for iOS, iPhone, iPad

How to use Flash CS 5.5, AIR 3.2, and Starling for iOS, iPhone, iPad

March 10th, 2012

Goto commentsLeave a comment

With the newly released AIR 3.2 SDK, you can take advantage of Stage3D and achieve (near) native performance on iOS devices.  As an example, I get a steady 58 frames per second on an iPad 2 when rendering 400 Sprites with Starling (Sprite size: 81×140 pixels).

However, getting Flash ready to export to your iOS device and take advantage of Starling is a bit of a challenge. You need to overcome these two challenges:

1. Overlay the AIR 3.2 SDK onto Flash CS 5.5
2. Get your app to use the “direct” render mode, which is required by Starling

Here’s how.

Step One: Overlay the AIR 3.2 SDK onto Flash CS 5.5
Follow these steps

Step Two: Get Flash to use the direct render mode in iOS

Starling requires a render mode of “direct.”
Unfortunately, Flash CS 5.5 doesn’t currently support the ability to choose this render mode when building for iOS.
See here: http://screencast.com/t/bJicMLHPevq

The solution is a bit of a hack.
You need to alter your app’s XML file and then make the file read only for PC, or locked on a Mac.

1. Open your Flash project’s XML file.
   As an example, my FLA is called “starlingIpadTest.fla”, so the app XML file is called “starlingIpadTest-app.xml”.
   See here: http://screencast.com/t/fwceyJ76iZ
2. Look for the  tag. Set the render mode to “direct” like so:
   direct
3. Make the file read only (PC) or lock it (Mac).

That’s it!

You can now deploy your app and test it on your iPhone or iPad.