React Native Development

JavaScript, ReactJS & React Native: An Introduction

If you’re not a developer, but you keep hearing about ReactJS or React Native and need a quick primer, this is for you. What follows is a layman’s guide to a new software architecture that is fast gaining popularity. Simply put, this will demystify both ReactJS and React Native, while providing insight as to why it’s so flexible, powerful, and on the rise.

React is an open-source JavaScript library for building user interfaces. The source code is openly shared on github and people are encouraged to voluntarily contribute to the JavaScript libraries—which are pre-written JavaScript allowing for the faster, easier development of JavaScript-based applications. Almost all JavaScript libraries are released under a copycenter or copyleft licence to ensure license-free distribution, usage and modification.

JavaScript

JavaScript

JavaScript has had a long presence on the web for many years, first developed by Netscape and later Mozilla, it became increasingly used for the development of UI for both web-based and desktop-based applications. When Flash went the way of the dodo, JavaScript was combined with CSS to create an efficient and accessible alternative to Flash-based websites. In order to run a JavaScript Web Application however, a JavaScript framework is required. This is because a library offers predefined functions whereas it is the framework that provides structure for the application and makes ‘calls to’ or ‘use of’ the code. Examples of JavaScript frameworks are: AngularJS, MeteorJS, Node.js, and Ember.js.

So what is it about JavaScript that makes it so popular that it’s used by 94.4% of all websites?

1. Client-Side Processing

This means that the code is executed on the user’s processor instead of the web server, saving bandwidth and server load.

2. Easy to Learn

The syntax of this language makes it easier for developers to learn.

3. Simple to Implement

Being able to use the same language on both front and back end makes things easier for development teams

4. Inexpensive

No special compilers or editors necessary, all a developer needs is a text editor and a browser to run JavaScript code

5. User Experience

Javascript no longer need to refresh the page to get feedback on forms or other inputs. Javascript provides real-time feedback for your user.

6. Ubiquity

Your user already has JavaScript built right into their browser. So you never have to worry whether your end user is having the same experience, or whether they have required software/add-ons, it’s all built in.

But enough about JavaScript.

React

React was born in Facebook Ads Org, created by Jordan Walke, a software engineer at Facebook. It was first deployed on Facebook’s newsfeed in 2011 and later on Instagram in 2012.

React is a library, built around the concept of components. Essentially, React provides a template language and some function hooks to render HTML. And because React is just for views (React is often described as the “V” in the “MVC structure”) the state and the logic needs to come from somewhere else. React does not necessarily prescribe a data management system, but libraries like Redux and MobX have become very popular in the React community for solving this requirement.

Why was React created?

You might wonder, if Angular, Backbone and Ember already have view layers (the V in MVC), and are complete MVCs themselves, why do we even need React? The problem is that MVC doesn’t scale well, and Facebook ran into this very problem. Their own increasingly complex codebase was becoming fragile and unpredictable and before they knew it, developers were afraid to make changes because of it. Essentially, React and Flux (the original tool that Redux was inspired by) were created because MVC was becoming unwieldy. Redux’s unilateral data flow prevents your application from accidentally entering into infinite loops and producing unexpected results. Facebook created React as a way to solve their own codebase complexity, while offering it open source to the world.

React Native

React Native

React Native uses the same design as React, but instead of wrapping the DOM, React is wrapping native mobile device components, letting you compose a mobile UI from declarative (i.e. easy to modify) components.

The reasons why you would want to develop a native application over an HTML5 app or hybrid app are for things like: offline capabilities, hardware functionality, sophisticated gesture handling and smooth animations. Though some of those things were possible through the browser, they didn’t feel the same. The reality is that the Native environment is far more powerful and flexible than anything we can reproduce in the browser environment today.

But, that power and flexibility comes at a cost. The native environment is also more hostile to developers and organizations. This is because you need two sets of knowledge—one for iOS and one for Android—and specific platform code and teams. It’s not easy to reuse anything, share or move between teams.

But, the true power of React is that it can wrap any imperative view system, not just the DOM on the web. Which means that the exact same React JavaScript in use on the web can be applied to power truly native applications, and is possible—the first release was in January 2015—for both iOS and Android.

With React Native, you are building a real mobile app—not a hybrid or HTML5 app—but one that uses UI building blocks as regular iOS and Android apps. Those blocks are just assembled using JavaScript and React. React Native wraps the fundamental native components in a way that gives you the performance of a native app as well as access to the device’s hardware with the same clean, uni-directional, data-flow architecture of React. React Native also combines smoothly with components written in Objective-C, Java or Swift. So it’s simple to write native code or build part of your app with native code, and they can integrate seamlessly.

React Native doesn’t promise to create a write once, run anywhere product. Concerns for iOS and Android will be different and their user experiences should be considered carefully on an individual basis. React Native does promise to provide a ‘learn once, write anywhere’ possibility for development teams. The drive behind it is that engineers should be able to use the same tools to build different products—and now they can.

Who is using React Native?

Currently, Facebook (obviously.), Instagram, Airbnb, Tesla, Walmart, SoundCloud and more. See who else is using React Native.

Lesley Anderson

Lesley Anderson

UX/UI Designer at A.Y. Technologies
Lesley is a caffeine dependent life-form with an eye for pixel perfection. Her skill set is varied, including user experience design, user interface design, creative strategy and content creation. She helps clients discover the behaviours and expectations of their audiences and opportunities for lasting impressions.
Lesley Anderson

Latest posts by Lesley Anderson (see all)

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

©2019 A.Y.Technologies

Log in with your credentials

Forgot your details?