Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Why You Should Consider React Native For Your Mobile App

Like many others, I was initially skeptical of Facebook and Instagram’s React1. Initial demos of React’s JavaScript language extension, JSX, made many developers uneasy. For years we had worked to separate HTML and JavaScript, but React seemed to combine them. Many also questioned the need for yet another client-side library in an ocean full of them.

react native

As it turns out, React has proved tremendously successful, both on my own projects, and with many others around the web, including large companies like Netflix2. And now with React Native3, the framework has been brought to mobile. React Native is a great option for creating performant iOS and Android apps that feel at home on their respective platforms, all while building on any previous web development experience.

Further Reading on SmashingMag Link

This article will explain why I think you should consider using React Native, by providing an overview of the framework and what I believe to be its best features.

React Overview Link

Described by its creators as “A JavaScript library for building user interfaces”, React focuses on the view portion of your application. In more concrete terms, this means that when writing a React Native app, your view code will consist of writing React components, which are small pieces of code that describe how a portion of your app should look based on some set of input data. Let’s look at a small example component which can be used to display a simple button. (I am omitting styles for the sake of clarity.)

const Button = React.createClass({
	propTypes: {
		onPress: React.PropTypes.func.isRequired,
		text: React.PropTypes.string.isRequired,
	},

	render() {
		return (
			<TouchableOpacity onPress={this.props.onPress} style={...}>
				<Text style={...}>{this.props.text}</Text>
			</TouchableOpacity>
		);
	}
});

This Button component has two pieces of input data: onPress, which is a callback function for when the button is pressed; and text, which is the string to display inside the button. The XML-like structure8 you see returned by the render function is called JSX, which is syntactic sugar for React function calls. And TouchableOpacity and Text are existing components that are included with React Native. Now that this Button component has been created, it can be used many times throughout the application, with consistent behavior and styling.

While this is a simple example, it demonstrates how a React app is built, piece by piece. Continuing in this manner, you can create components that represent increasing layers of abstraction. For example, you might create a ButtonGroup component that contains several connected buttons. And building on top of that, you can write components that represent entire screens. Even as your app gets significantly larger, components remain understandable and manageably sized at each level.

Truly Native Link

Most mobile apps built with JavaScript use Cordova9, or a framework built on top of it, such as the popular Ionic10 or Sencha Touch11. With Cordova, you have the ability to make calls to native APIs, but the bulk of your app will be HTML and JavaScript inside a WebView. While you can approximate native components – and it is certainly possible to build a great UI with HTML and JS – no Cordova app will match the look and feel of a real native app. The little things – like scrolling acceleration, keyboard behavior, and navigation – all add up and can create frustrating experiences for your customers when they don’t behave as expected.

Although you still write JavaScript with React Native, the components you define will end up rendering as native platform widgets. If you are familiar with React for the web, you’ll feel right at home. And if you have written apps in Java or Objective-C, you’ll immediately recognize many of React Native’s components.

React’s best feature when it originally launched for the web was making your app’s view layer a pure output of state. As a developer, this means that instead of imperatively making changes to view components (for example, programmatically altering the text or color of a button by calling a function on it), you simply define what your view should look like based on input data, and React intelligently makes the changes for you when the state changes.

This shift in thinking can drastically simplify building UIs12. We’ve all used apps where the UI enters a weird unintended state after taking a path the developer didn’t expect. With React, bugs like this are much easier to track down. You don’t have to think as much about the user’s path through the system, instead focusing on making sure your view declarations can handle all possible shapes for your app’s state. This is a much easier problem to solve – and to test for. It is also more easily understood by the computer, so improvements to static analysis and type systems will only make these bugs easier to find.

React Native component definitions look and behave pretty much just like React for web components, but target native UI widgets instead of HTML. So instead of using a <div>, you would use a <View> (which on iOS gets rendered to a native UIView, and on Android, android.view). When your components’ data changes, React Native will calculate what in your view needs to be altered, and make the needed calls to whatever native UI widgets are displayed.

And it is fast! JavaScript isn’t as fast as native code can be, but for most tasks, JavaScript and React Native are more than capable of keeping your app running at 60 frames per second. Under the hood, your JavaScript code is run on its own thread, separate from the main UI thread. So even when your app is running complex logic, your UI can still be smoothly animating or scrolling at 60fps, so long as the UI isn’t blocked by the JS thread.

Many software frameworks promise that they will let you make a great app for Android and iOS, but the product frequently ends up somewhere in the middle without feeling truly native to either. By embracing the native platforms while still letting your app share the majority of its codebase between platforms, React Native enables developers to make awesome native apps their customers will love, without the increase in budget building two separate apps could entail.

Ease Of Learning Link

One of React’s greatest strengths is how readable it is, even to those unfamiliar with it. Many frameworks require that you learn a long list of concepts that are only useful within that framework, while ignoring language fundamentals. React does its absolute best to do the opposite. As an example, consider the difference between rendering a portion of a list of friends in React Native vs Ionic (AngularJS).

With Ionic, you use the ngRepeat13 directive. Let us say we have an array of friends, each of which contains the following fields: first_name, last_name and is_online. But we only want to show those friends that are currently online. Here is our controller:

function FriendCtrl($scope) {
	$scope.friends = [
		{
			first_name: 'John',
			last_name: 'Doe',
			is_online: true,
		},
		{
			first_name: 'Jane',
			last_name: 'Doe',
			is_online: true,
		},
		{
			first_name: 'Foo',
			last_name: 'Bar',
			is_online: false,
		}
	];
}

And here is our view:

<div ng-controller="FriendCtrl">
	<ul>
		<li ng-repeat="friend in friends | filter:{is_online:true}">
			{{friend.last_name}}, {{friend.first_name}}
		</li>
	</ul>
</div>

If you aren’t familiar with Ionic/AngularJS, this code snippet raises some immediate questions. What is $scope? What is the syntax for filter? And how would I add additional behavior, like sorting the list of friends?

With React Native, you make use of your existing knowledge of language fundamentals, using the built-in filter14 and map15 functions.

const DemoComponent = React.createClass({
	render() {
		const friends = [
			{
				first_name: 'John',
				last_name: 'Doe',
				is_online: true,
			},
			{
				first_name: 'Jane',
				last_name: 'Doe',
				is_online: true,
			},
			{
				first_name: 'Foo',
				last_name: 'Bar',
				is_online: false,
			}
		];

		return (
			<View>
				{friends
					.filter(f => f.is_online)
					.map(f => <View>{f.last_name}, {f.first_name}</View>)}
			</View>
		);
	}
});

While the React Native snippet still raises some questions (What does React.createClass do? What is render?), the fact that the bulk of the code here is just regular JavaScript means it will be more understandable and maintainable to newcomers.

As an experienced developer, using standard language features you already know will save you time, and make your code more understandable to other developers. But just as importantly, if you are less experienced with JavaScript, React serves as an excellent teaching tool. If you haven’t yet learned how to use map or filter, learning React will teach you those too. Learning ngRepeat only teaches you ngRepeat.

And that is before considering multiplatform mobile development. While there will be some pieces of platform-specific code in a React Native project that targets both iOS and Android, the majority will be shared and all of it will be understandable to a JavaScript developer.

Vibrant Ecosystem Link

Since the majority of your React Native code is just plain JavaScript, it reaps the benefits of all the advancements in the language and its ecosystem. Instead of waiting on your framework developers to implement all the array manipulation functions you want, why not just use lodash16? For manipulating or displaying dates and times, just use Moment.js17. And all those amazing new ES6 language features18 you’ve been waiting to try out? Not only is React a great fit, their use is encouraged!

Thanks to its declarative views, certain libraries are particularly suited for use with React Native. One I’d be remiss not to mention is redux19. Described as a “predictable state container”, redux is an awesome library for manipulating your application’s state. Redux is highly testable, and encourages writing small functions that are explicit about what data they change. Once your state changes are written this way, your app can take advantage of powerful features, like global undo/redo20 and hot reloading21.

Developer Experience Link

Happy developers are productive developers, and React Native has a great development environment. Instead of repeatedly waiting for your code to compile and your app to restart while making tiny edits, changes to a React Native codebase are made to your running app without the need to restart (see a demo of that here22).

And if you’ve written any JavaScript before, you’re probably already familiar with the Chrome developer tools. When running React Native in development mode, you can attach to your desktop Chrome browser, so you’ll be right at home with its debugger and profiling tools. Attaching to Chrome works either in the simulator or connected to a physical device.

For creating your app’s layout, React Native uses flexbox23. While every layout engine has its own learning curve, upsides and downsides, React Native’s support for flexbox means you can use the exact same layout code for Android, iOS and web, instead of learning three different engines.

And Beyond! Link

React Native apps consist entirely, or close to that, of JavaScript. If you let your mind wander, this opens up a world of opportunities.

Code Sharing Link

We’ve already discussed how React Native can share code between Android and iOS, but what about the web? Anything in a React project that doesn’t directly tie to a native platform is already sharable. Think about an app that can render on the server, in a web browser, or on Android or iOS – all driven by one shared codebase. While we aren’t quite there yet, the community is working on it. Keep an eye on the react-native-web24 project.

Live Updates Link

Anyone who has shipped an iOS app has experienced the frustration of waiting for App Store approval. With React Native, it is possible to do live updates to your app without going through the App Store – much like for a web app. Since the bulk of your app will be JavaScript, you can fetch updates on the fly over the network. There are already services to help with this like AppHub25, or you could build it yourself. As long as your app is aware of what version it is running and knows how to check the server for a newer version, you can publish updates to your app whenever you like. Long app approval times aren’t a problem on Android, but you can still use live updates as a way of guaranteeing your customers have the latest and greatest version of your app installed.

Conclusion Link

Between the ease of development, quality of the apps built with it, and the richness of the platform and ecosystem, I’ve had a lot of fun learning and building with React Native. If you want to learn more, check out the links below!

Resources Link

(da, jb, ml, og)

Footnotes Link

  1. 1 http://facebook.github.io/react/
  2. 2 http://techblog.netflix.com/2015/01/netflix-likes-react.html
  3. 3 https://facebook.github.io/react-native/
  4. 4 https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/
  5. 5 https://www.smashingmagazine.com/2015/01/basic-test-automation-for-apps-games-and-mobile-web/
  6. 6 https://www.smashingmagazine.com/2016/03/server-side-rendering-react-node-express/
  7. 7 https://www.smashingmagazine.com/2015/05/client-rendered-accessibility/
  8. 8 https://www.smashingmagazine.com/2014/02/applying-xsl-transformations-to-responsive-web-design/
  9. 9 https://cordova.apache.org/
  10. 10 http://ionicframework.com/
  11. 11 https://www.sencha.com/products/touch/
  12. 12 https://www.smashingmagazine.com/2016/06/designing-modular-ui-systems-via-style-guide-driven-development/
  13. 13 https://docs.angularjs.org/api/ng/directive/ngRepeat
  14. 14 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
  15. 15 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
  16. 16 https://lodash.com/
  17. 17 http://momentjs.com/
  18. 18 https://github.com/lukehoban/es6features
  19. 19 http://redux.js.org/
  20. 20 http://rackt.org/redux/docs/recipes/ImplementingUndoHistory.html
  21. 21 https://www.youtube.com/watch?v=xsSnOQynTHs
  22. 22 https://www.youtube.com/watch?v=7rDsRXj9-cU&t=22m56s
  23. 23 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
  24. 24 https://github.com/necolas/react-native-web
  25. 25 https://apphub.io/
  26. 26 https://www.youtube.com/watch?v=7rDsRXj9-cU
  27. 27 https://facebook.github.io/react-native/docs/tutorial.html#content
  28. 28 http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome
  29. 29 http://ricostacruz.com/cheatsheets/react.html

↑ Back to top Tweet itShare on Facebook

Clayton Anderson is a partner at The BHW Group in Austin, TX. Outside of work, he is a total music nerd, and enjoys reading, Belgian beers, and playing board games.

  1. 1

    $scope isnt used at all anymore in Angular. You write normal JavaScript with the properties as public you want to access in the view.

    > With React Native, you make use of your existing knowledge of language fundamentals

    And then you use JSX… No you don’t make use of your existing knowledge of the language fundamentals.

    Also Angular 2 will be a complete game changer when it releases since it can live entirely in a web worker and thus completly decouple the view from the framework. At angular connect they said that you will be able to use native/jsx/angular views in the future as well.

    I am a big fan of SmashingMagazine but this article isn’t up to the standards.

    -15
    • 2

      Ahamed Imran

      April 7, 2016 11:11 am

      This is exactly that raised my eyebrows too. It is kind of deprecated in AngularJS now and Angular 2 won’t be using it at all. And as you mention JSX is also a new thing and you still need to use some unfamiliar attributes such as as className (for classes) and htmlFor(for the label ‘for’ attribute). So there’s a small learning curve right there.

      -9
    • 3

      Brian Duffey

      April 7, 2016 4:29 pm

      I’m sorry, but while you raise valid points if this article claimed to be an unbiased expose on both Angular and React, that is not what this article is. It is an opinion piece on why you should consider React Native over other libraries. It even says this in the opening paragraph if the title wasn’t enough of a clue. I love Angular as much as the next person, but from what I’ve seen thus far of React, it does use a closer language to JS than other similar libraries. It was very easy for me to learn as opposed to Angular 1 (and maybe Angular 2 since that changed things) and JSX isn’t required at all to use it if you would just rather use the plain JavaScript.

      That being said, JSX seems like a very easy and powerful “icing on the cake” and as it is essentially HTML “JS-ified”, I don’t see why that should be a problem for any developer who already knows JS. I get that you love Angular but the points in this article are all justified in an article meant to try and convince someone to take a closer look at React, and I thought it was well-done, albeit a bit light on more examples/demos/images.

      28
    • 4

      I think you’re missing the point of the article. Native mobile app development has some annoying particularities that React Native tries to solve by bringing the web ecosystem to the native world, such as using polyfills to access JS libraries, NPM as dependency management tool, flexbox as layout engine and so on. The author is trying to prove that React Native has a fantastic ecosystem if you decide to develop native apps for mobile devices – especially if you want to be more productive.

      The examples regarding AngularJS is because Ionic 1 still uses the first version of Angular. Obviously, the next version of Ionic will be powered by Angular 2, but the project is still in beta.

      JSX is optional. No need to use if you don’t want to.

      18
      • 5

        The example is outdated regardless. Ionic is using Angular 1.5. The example in the post feels like 2013 Angular 1.1 code.

        The sad thing is, the post can make the point of learning javascript by using reduce and map and generally being close to javascript without attacking other frameworks.

        This is not a tribe of gorillas where the new young alpha has to challenge the old silverback. React can be good without having to put down Angular first.

        4
        • 6

          I disagree. Healthy criticism of other frameworks should be encouraged. If you disagree with the specific criticism then you can respond to it.

          Criticism is a necessary ingredient for progress.

          11
  2. 7

    And what about NativeScript? Seems that it has all the advantages of React Native and much more. It is relatively new but maybe it is the future of mixing JS/CSS with mobile apps? What is your opinion?

    9
    • 8

      George Edwards

      April 7, 2016 3:41 pm

      I certainly agree the NativeScript is worth looking at, way better at interacting with Hardware APIs, i.e. Bluetooth, camera, GPS etc. Similarly, much closer from a development / learning curve perspective to what you might be used to on Web Design. They are keeping up to date with Angular 2 and have a strong working relationship with the Angular team leads. With the beginnings of Windows support too! I think it is definitely worth a look, just be aware that the community is still in it’s infancy, so examples and tutorials aren’t yet abundant.

      5
    • 9

      Mike Gleason

      July 28, 2016 8:44 pm

      And what about Fuse (https://www.fusetools.com)? It’s got native code, live-reload, terrific animation, etc… and an awesome developer experience – almost to the point where a designer could use it.

      But it’s still a bit immature. There are things (like playing sounds) which haven’t been implemented that you do actually need and have to work around – though the workarounds aren’t bad. And there are things (like native components, e.g. tab-bars) which have not been implemented – likely because they aren’t cross-platform and so you may need to choose an alternative.

      That said, it’s so much faster to develop in Fuse it’s worth looking at.

      0
  3. 10

    Personally I prefer Java over JavaScript although I did take a look at React Native and it’s OK. But then I checked out Codename One after reading this article: http://www.codenameone.com/blog/java-is-superior-to-react-native-in-practically-every-way.html

    That article was a bit over the top but after I tried their product I can see what they are talking about. React Native is more of a write once port (painfully) everywhere. Not a write once run anywhere and while that last mile does come with a price I’m an all or nothing guy…

    -14
  4. 11

    I am big fan of RN and have been following it’s growth from the get go, I must admit that I am loving the whole idea of cross-platform code.

    One thing that is not entirely true in this article is that you can use the same styles for your mobile app and your web app, Flexbox is implemented as polyfill inside RN and not all of the attributes have been implemented, i.e. row-reverse. If you’re interested in a cross-platform app using all the goodies you mentioned in your post you can check out https://github.com/tosFa/react-cross-platform-boardgame-example

    1
  5. 12

    Thanks for the article. Do you know any real apps I can take a look at which built with React native?

    2
  6. 13

    Robert Greene

    April 11, 2016 11:36 pm

    I don’t think I would EVER use react or any other Phone Gap like framework for an iOS application. Its just gross.

    -11
    • 14

      Paul Francis

      April 12, 2016 3:38 am

      React isn’t a “Phone Gap like framework.” That is the whole point. It doesn’t run in a webview, so it does not suffer the problems that often plague hybrid apps.

      8
  7. 15

    rajan twanabashu

    April 14, 2016 6:32 am

    I was really feeling hard time to accept react native to consider for development. But after reading this post, I must at least give it a try and decide. Thanks man , very good article.

    6
  8. 16

    FX Bayu Anggara

    May 31, 2016 5:00 pm

    I’ve built several apps using Ionic V1. Works beautifully on local browser testing, but it takes pains to my phone. I’m facing such a lacking performance with Ionic V1. Thanks for this article. This helps me to understand how ReactNative works.

    1
  9. 17

    Thank you very much for this post, which give us an overview of this framework ! In the jungle of web and mobile frameworks, it’s hard to make a choice. It seems that React Native is a great one for someone who wants to build quality apps, without spending inconciderate time to learn specific syntaxes. I intend to develop my first mobile app, and I think React Native + Firebase as backend is a wise choice to begin.
    Thanks again for the article.

    1
  10. 18

    Sherpadesk team

    July 15, 2016 2:32 pm

    Thanks for article.
    As example of my hybrid app – I did our site is completely on Ionic2 beta.8 (Angular2 base)
    http://m.sherpadesk.com/

    I have hybrid app too and I did some optimizations and got **417ms loading time**.
    Look at report https://tools.pingdom.com/#!/DW6Td/http://m.sherpadesk.com/17
    Also Site size decreased **600% (3Mb -> 500 Kb)**
    User interaction response speed improved **2000% (2 seconds -> 100ms)**

    Good recommendations: http://blog.angular-university.io/how-to-run-angular-2-in-production-today/36

    I’ll post all my gulp settings and link to appstore here: http://www.sherpadesk.com/blog/

    2

↑ Back to top