An Overview of React Native

Here at the Betica Blog, we recently provided a high level overview of React.js, a JavaScript library that makes creating web user interfaces an easier process. This time out our eyes are trained on React Native, a version of React aimed at achieving the same goal for mobile app development. Its cross platform support allows developers to quickly target iOS, Android, and the Universal Windows Platform.

If your organization includes mobile platforms as one of its development targets, React Native just might the tool to streamline your application engineering efforts. Let’s take a closer look at the framework to see if it belongs in your team’s toolbox.

Spawned in the Forge of Facebook

Since React.js began its life as an internal Facebook project before becoming open source, it stands to reason that React Native grew out of this original initiative. It was first announced in early 2015, with its open source debut taking place in March of that year. Facebook still serves in a leadership role with the overall project and the framework is used in the social network’s own mobile apps.

React Native leverages the same Architecture as React.js

If your software development group already uses React.js for web development and is hoping to add mobile apps to its arsenal, React Native is a perfect choice. Since both use the same design concepts, your developers should quickly come up to speed with Native. It also facilitates the porting of web applications to the most popular mobile platforms, in addition to Microsoft’s UWP.

It is important to note that mobile apps developed using React Native aren’t just web pages viewed in Safari for iOS or the Android version of Chrome. Instead, expect an app running “close to the metal” just like it was written using Objective-C, Swift, or Java. This becomes a powerful option for development shops hoping to target iOS or Android without investing in additional programmer training to close a mobile skills gap.

In a similar manner as React.js, React Native lets programmers construct mobile apps using JavaScript in combination with the React framework. Tags in the JavaScript code are translated into the relevant mobile control on the targeted platform. For example, the React Native <ScrollView> tag is converted to either the iOS UIScrollView or the Android ScrollView control when compiled.

Other Useful React Native Features

In addition to making the mobile app development process more efficient, React Native also sports other features useful for software engineers. Hot Reloading lets modify your code while retaining the current application state. This saves the time spent recompiling your app, which provides a nice productivity boost during crunch time.

If your team is already familiar with native mobile app development in Java or Objective-C, with pre-built components ready to go, it is easy to include those pieces within a React Native project. Ultimately, React Native can serve a similar purpose as its older brother does for web development – the rapid development of the user interface framework for a mobile app.

If your shop is involved in mobile app development, React Native is definitely worthy of further exploration if you aren’t already using the tool. It lets your team use its familiarity with JavaScript to accomplish much more. It is also a boon for organizations targeting both the web and mobile with a similar codebase.

Thanks for checking out this edition of the Betica Blog. Keep coming back for additional insights from the software development world!

An Overview of React.js

React – better known as React.js – is a JavaScript library used in many modern web applications. It facilitates the building of responsive user interfaces, able to perform well in highly scalable environments. The library’s functionality combined with its relative ease of use has led to a massive growth in popularity among developers over the last few years.

We’re going to provide a high-level overview of React.js to see if it makes sense on your own company’s web development projects. Expect additional articles on the topic in the future, including a look at React for mobile – React Native.

A Short History of React.js

Jordan Walke, an engineer at Facebook, first developed the React framework in 2011. After getting used on the social network’s news feed, the company then implemented it on its Instagram network the following year. The framework became open source in 2013 at JSConf US, a JavaScript user conference.

The previously mentioned React Native first became available in 2015. In addition to supporting the Android and iOS mobile platforms, this framework also works with Microsoft’s Universal Windows Platform (UWP).

Earlier this year, Facebook announced plans to re-architect React into a new framework, known as React Fiber. While currently used in places on the social network, Fiber is expected to be publicly available by the end of the year. It promises a performance boost in addition to backwards compatibility.

A Closer Look at React.js’s Major Features

The original need for React.js involved creating a library suitable for responsive, data-driven web applications that are highly scalable. Considering the massive user base and resultant throughput of Facebook, it makes sense React saw its genesis at that social network.

The framework lets developers create component-based structures able to manage their own state. When combined with the virtual DOM (the HTML Document Object Model) and support for one-way dataflow, this makes it easier to build data-driven user interfaces for a scalable environment. React is able to seamlessly manage the user interface; only rendering those components with changed data.

React is essentially agnostic when it comes to an application’s chosen technology stack. This facilitates using the framework in one small part of an existing web application without affecting the rest of its architecture. If your organization is curious about React.js, taking this approach is a great way to learn the library before implementing it across the entire application.

JSX, a markup language somewhat similar to XML or HTML, is the primary means for defining user interface components in React.js. Since it is optional, programmers can still use raw JavaScript to achieve the same result, but JSX code is more concise and readable. It is also easy to access the component’s state and thus rendering its display whenever this underlying state changes.

While this overview only scratches the surface of what’s possible with React.js, leverage these insights to better determine whether the framework makes sense as part of your organization’s web development toolbox. If you are in the business of building extremely responsive web apps that are highly scalable, React probably belongs in your stack.

Thanks for checking out the Betica Blog. Keep coming back for additional news, stories, and insights from the wide world of software development!