Wege mit React Native zu arbeiten
(click here for the english version of this article — englische Version hier)
Es gibt bestimmt viele Webentwickler, die mobile Apps entwickeln wollen. Aber wer hat schon ausreichend Zeit, Sprachen wie Java, Kotlin oder Swift zu lernen? Sie wollen die Sprache nutzen, die sie bereits täglich einsetzen und (vielleicht) auch lieben: JavaScript. Es gibt mehrere Frameworks, um Apps mit JavaScript zu entwickeln: Cordova (früher Phonegap), Ionic, NativeScript, React Native und bestimmt noch mehr. Dies sind alles Open Source Frameworks mit eigenen Vor- und Nachteilen.
Mit Cordova und Ionic wird eine App ähnlich wie eine Webanwendung mit HTML, CSS und JavaScript entwickelt. Ergebnis ist eine App, die den Code wie ein Browser ausführt, nur eben in einer WebView. Es ist jedoch schwierig, solche Apps auf dem gleichen Qualitätsniveau wie „echte“ native Apps zu erstellen. Das Aussehen entspricht häufig nicht dem gewohnten und unterschiedlichen Look&Feel von Android und iOS, die Performance ist oft suboptimal und es mangelt an nativen Funktionen wie z.B. Touchgesten.
NativeScript und React Native hingegen ermöglichen die Entwicklung echter nativer Apps mit JavaScript. UI-Elemente sind nativ und nicht bloß mit HTML und CSS nachempfunden wie bei Cordova und Ionic. Mit beiden Frameworks können Apps sowohl für Android als auch für iOS implementiert werden. React Native, das von Facebook entwickelt wurde, unterstützt allerdings weitere Plattformen wie z.B. Apple TV und entspricht konzeptuell ReactVR (Virtual Reality). Neben Facebook und Instagram setzen viele namhafte Unternehmen bereits React Native ein, darunter Airbnb, Tesla und Uber. Mit einer großen Entwickler-Community und Vielseitigkeit erscheint React Native als zukunftssicherer Ansatz, um native Apps mit JavaScript umzusetzen.
Zusätzlich könnte React Native auch für iOS-Entwickler attraktiv sein, die Apps für Android entwickeln möchten (oder umgekehrt). Und außerdem erhalten Entwickler deutlich schnelleres Feedback während der Entwicklung als im Vergleich zu den herkömmlichen Vorgehensweisen, native Apps mit XCode oder Android Studio zu entwickeln. Habe ich erwähnt, dass mit React Native simultan für Android und iOS entwickelt werden kann?
Es gibt drei unterschiedliche Ansätze, mit React Native zu arbeiten: eine vollständige oder eine leichtgewichtige Installation, und es ist sogar möglich, einfache mobile Apps direkt im Browser zu entwickeln, ohne irgendetwas zu installieren. Es folgt nun eine Beschreibung dieser drei Ansätze.
Es gibt keine Ausreden, React Native nicht auszuprobieren.
React Native im Browser
Um einen ersten Eindruck von React Native zu erhalten, ist nur ein Browser mit Internetverbindung nötig. Ein Klick auf https://snack.expo.io/ genügt und es kann losgehen!
Einfacher als mit Expo Snack kann der Zugang zu einer komplexen Technologie wohl kaum sein. Es gibt keine Ausreden, React Native nicht auszuprobieren. Expo Snack ist ein fabelhaftes Tool mit Editor, Vorschau für iOS und Android und der Option, Beispiele zu speichern und diese mit anderen zu teilen. Ermöglicht wird dies durch die Werkzeuge von Expo, mit denen React Native ergänzt werden kann. Neben einem SDK mit zusätzlichen UI-Komponenten und APIs wird auch eine App angeboten, mit der diese Online-Beispiele direkt auf dem Smartphone ausgeführt werden. Natürlich für Android und iOS und das alles Open Source!
Es gibt aber auch ein paar Einschränkung. So kann immer nur eine Komponente entwickelt werden und es steht meistens nur eine ältere Version von Expo und damit auch von React Native zur Verfügung. Aber insgesamt ist Expo Snack eine fantastische Möglichkeit, um React Native (kennen) zu lernen, kleine Experimente durchzuführen und Beispiele mit anderen zu teilen. Expo Snacks lassen sich auch zu Dokumentationszwecken in Webseiten einbetten. Eine Variante von Expo Snacks wird von der Cloud-Entwicklungsumgebung repl.it verwendet. Dort wird sogar ein interaktives 5-Minuten-Tutorial für React Native im Browser angeboten.
Leichtgewichtige Installation mit expo-cli
Expo Snacks sind faszinierend aber für die Entwicklung nicht-trivialer Apps mit React Native wird eine Installation des Frameworks auf dem Rechner benötigt. Seit März 2017 gibt es glücklicherweise einen leichtgewichtigen Ansatz, React Native mit wenig Aufwand zu installieren, dank einer Kollaboration zwischen den Entwicklern von Facebook und Expo. Einzige Voraussetzung ist eine Installation von Node.js, was aber bei den meisten Webentwicklern gegeben sein sollte.
Hierfür werden zwei Werkzeuge benötigt: das Kommandozeilentool expo-cli und die bereits erwähnte Expo-App. Die offizielle Dokumentation zu React Native beschreibt das Vorgehen im Detail. Dies dauert nur wenige Minuten und die so erstellten App-Projekte können leicht durch das Scannen eines QR-Codes in der Expo-App direkt auf Android oder iOS getestet werden. Tatsächlich ermöglicht dieser Ansatz auch die Entwicklung von iPhone-Apps auf Linux- oder Windows-Rechner, also ohne Mac! Lediglich ein iOS-Gerät mit der Expo-App wird benötigt. Dies ist unmöglich, wenn iPhone-Apps mit Swift und XCode entwickelt werden.
Auch bei diesem Ansatz gibt es einige Einschränkungen. Expo unterstützt in der Regel nicht die neueste Version von React Native und es können (noch?) keine Bibliotheken mit nativen Abhängigkeiten eingebunden werden. Es ist aber jederzeit möglich, ein Projekt aus der Expo-Umgebung „auszuwerfen“ (mit expo eject), was auch dann erforderlich ist, wenn die App in den AppStores veröffentlicht werden soll.
Vollständige Installation von React Native
Schließlich noch ein paar Worte zur vollständigen Installation von React Native. Je nach Ausgangssituation müssen hierfür bis zu mehrere Stunden Zeit investiert werden. Für die Android-Version der App wird Android Studio mit dem Android SDK benötigt und wer für das iPhone entwickeln möchte, kommt nicht an einem Mac mit XCode und den zugehörigen Tools vorbei. Das Vorgehen hierfür ist wiederum in der Dokumentation zu React Native beschrieben.
Der Nachteil dieses Ansatzes ist offensichtlich der hohe einhergehende Aufwand. Die beiden anderen Ansätze wurden daher ins Leben gerufen, um neugierigen (Web)Entwicklern einen schnellen und unkomplizierten Zugang zu React Native zu ermöglichen. Die vollständige Installation wird für die „echte“ produktive Arbeit mit React Native benötigt. So werden alle Funktionen mit der neuesten Version zugänglich und die App kann in den AppStores veröffentlicht werden.
Wer also React Native ausprobieren möchte, kann dies ohne extra Aufwand mit Expo Snack im Browser erreichen. Für erste Schritte in der Entwicklung mit React Native ist expo-cli gedacht und wer ernsthaft an der schnellen, plattformübergreifenden Entwicklung mit React Native interessiert ist, wird schließlich eine vollständige Installation durchführen — dies lohnt sich auch wenn es relativ mühsam ist.
Mehr zu React Native gibt es in meinem Buch oder meinem Video-Kurs.
