React Native

React Native ist ein quelloffenes UI-Framework zur Erstellung von Applikationen für Android, Android TV, iOS, macOS, tvOS, Web, Windows und UWP, welches von Meta Platforms, Inc. entwickelt wird. Es ermöglicht Entwicklern, native Systemfunktionen bei der Entwicklung mit dem React-Framework zu verwenden. Es wird unter anderem bei Facebook, Microsoft und Shopify zur Entwicklung der eigenen Android- und iOS-Applikationen verwendet.

Geschichte

In 2012 kommentierte Mark Zuckerberg: "Der größte Fehler, den wir als Unternehmen gemacht haben, war zu sehr auf HTML im Gegensatz zu nativer Entwicklung zu setzen". Die Nutzung von HTML5 in der mobilen Facebook-App sorgte laut eigener Aussage für Instabilität und eine insgesamt langsamere Applikation. Er versprach zugleich, Facebook würde bald eine bessere mobile Nutzungserfahrung schaffen.

Jordan Walke, der zu dieser Zeit bei Facebook arbeitet, fand einen Weg, UI-Elemente in iOS aus einem JavaScript Thread, welcher im Hintergrund läuft, zu erzeugen. Dies bekam die Basis für das React-Framework. Facebook entschied sich dazu, einen internen Hackathon abzuhalten, um diesen Prototypen zu perfektionieren und künftig native Mobile-Apps mit dieser Technologie entwickeln zu können.

Nach Monaten der Entwicklung, veröffentlichte Facebook die erste Version in 2015 auf der React JavaScript Configuration Konferenz. Während einer technischen Keynote erklärte Christopher Chedeau, dass Facebook React Native bereits produktiv in einigen der eigenen Apps, der Group App und der Ads Manager App, verwendete.

Implementierung

Die Funktionsprinzipien von React Native sind quasi identisch zu React, mit der Ausnahme, dass React Native nicht den DOM über den Virtual DOM manipuliert. Es läuft in einem Hintergrundprozess (welcher das vom Entwickler geschriebene JavaScript interpretiert) direkt auf dem Endgerät und kommuniziert mit dem Betriebssystem über serialisierte Daten, welche gestapelt über eine asynchrone Brücke ausgetauscht werden.

React-Komponenten abstrahieren den nativen Code und interagieren mit System-APIs mittels Reacts deklarativem UI-Programmierparadigma und JavaScript. TypeScript wird bei der Entwicklung moderner React Native Applikationen aufgrund der erhöhten Typsicherheit jedoch oft gegenüber JavaScript bevorzugt.

Obwohl das Styling in React Native eine ähnliche Syntax zu CSS nutzt, verwendet es kein HTML oder CSS.  Statt dessen werden Nachrichten des JavaScript-Threads verwendet, um native Views zu manipulieren.

React Native ist auch für Windows and macOS verfügbar, welches derzeit jeweils von Microsoft weiterentwickelt wird.

„Hello World“ Beispiel

Ein „Hello, World“ Programm kann in React Native wie folgt implementiert werden:

import { AppRegistry, Text } from 'react-native';
import * as React from 'react';

const HelloWorldApp = () => {
  const [count, setCount] = React.useState(0);
  
  const incrementCount = () => {
	setCount(count + 1);
  };

  return (
    <div>
        <Text>Hello world!</Text>
        <h5>{count}</h5>
		<button type={'button'} onClick={incrementCount}>
			Increase Count
		</button>
    </div>
  );
}

export default HelloWorldApp;

AppRegistry.registerComponent('HelloWorld', () => HelloWorldApp);

Siehe auch

• React
• NativeScript
• Xamarin
• Titanium SDK
• Apache Cordova
• Flutter (Software)
• Qt (Bibliothek)
• Codename One

Literatur

• Bonnie Eisenman: Learning React Native. O'Reilly, 2016, ISBN 978-1-4919-2900-1. 

[[Kategorie:Programmierung]]