Warum Sie React Native für die Programmierung Ihrer App nutzen sollten?

Warum Sie React Native für die Programmierung Ihrer App nutzen sollten?

Anfangs war ich wie die meisten skeptisch, gegenüber der Nutzung von Facebook’s React. Demos der Erweiterung von React Java Script Programmiersprache, JSX machten einige Entwickler unruhig. Jahrelang arbeitete man mit HTML und Java Script separat, bis React diese scheinbar kombinierte. Einige stellten auch in Frage, ob es von Nöten sei, dass es eine weitere Kundenbasierte Library gebe, bei all den bereits existierenden Library’s.

Wenn du Interesse an Entwicklungskosten von Apps hast lies diesen Artikel: ALLES ZUM THEMA APP ENTWICKLUNG UND DEN VERBUNDENEN KOSTEN

Wie sich aber herausstellte, erwies sich React einerseits für unsere eigenen Projekte, wie auch für die unserer Kunden, als die beste Lösung. Selbst Firmen wie Netflix oder Skype nutzen React. Mit React Native, ist das framework auch perfekt für die App Programmierung. React Native ist eine großartige alternative um perfomance starke Apps zu entwickeln, die sich sowohl auf Android als auch iOS zu Hause fühlen.

Komme ich nun dazu euch einen Überblick über das Framework zu verschaffen und über meine Lieblings features zu berichten. Beschrieben wird React wie folgt von seinen Entwicklern: “ A JavaScript library for building user interfaces”, React setzt seinen Fokus auf die Ansicht der Applikation. Das heißt, wenn man einen React Code schreibt, wird der angezeigte Code aus geschriebenen React Komponenten, welche kleine Teile sind, die beschreiben wie die App aussehen wird.

Betrachten wir ein kleines Beispiel, welches dafür verwendet werden kann um einen einfachen Button anzuzeigen.

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>

);

}

});

Diese Button Komponente hat zwei Teile von Input Data: onPress, welches eine callback funktion für den Fall das der Button gedrückt wurde ist; und text, welches für die Ansicht des Buttons verantwortlich ist.

Die XML-like structure heißt JSX, welches syntactic sugar für React Funktions calls ist. Und TouchableOpacity und Text, sind existierende Komponenten, welche React Native bereitstellt.

Nach der Erstellung der Button Komponente, kann diese immer wieder in der Applikation verwendet werden, mit wiederkehrendem style und verhalten. 😉

Dieses einfache Beispiel demonstriert wie eine React App aufgebaut ist. „Stück für Stück.“ Auch wenn die App in seiner funktionsweise wächst, bleiben die einzelnen Komponenten verständlich und auf jedem level managebar.

NATIVE VS HYBRID-APPS. WAS SOLL MAN IN 2017 AUSWÄHLEN?

Wahrhaftig Nativ

Die meisten Apps, welche mit JavaScript geschrieben sind nutzen Cordova, oder ein framework welches darauf aufbaut, sowie die beliebten frameworks Ionic or Sencha Touch.

Aber keine Cordova App wird jemals an das Gefühl einer richtigen Nativen App herankommen. Scrolling, Tastaturverhalten und Navigation können frustrierende Erfahrungen mit sich bringen, wenn diese nicht wie erwartet funktionieren. Auch wenn man immer noch mit JavaScript in React Native schreibt, werden die Komponenten als Native Platform widgets gerendert. Und wenn Ihr Apps in Java oder Objective C geschrieben habt, werdet ihr einige React Native Komponenten sofort erkennen.

Leichtigkeit des Lernens

Eine der größten Stärken von React ist das Leseverständnis, selbst für Programmierer die noch nicht damit gearbeitet haben. Viele andere Frameworks verlangen einem erstmal ab, eine lange Liste von Konzepten zu erlernen, welch nichts mit den Sprachgrundbausteinen zu tun haben. Als Beispiel vergleichen wir einmal den Unterschied zwischen dem rendern einer Liste von Freunden in React Native und Ionic (Angular JS)

Mit Ionic bentzt man ngRepeat Direktiv.

Lass uns annehmen wir haben eine Ordnung für Freunde. Jedes Feld beinhaltet die folgenden Felder: first_name, last_name and is_online. Aber wir wollen nur diese anzeigen, welche auch gerade online sind. Hier ist unser 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,

}

];

}

Und hier ist unsere Ansicht:

<div ng-controller=“FriendCtrl“>

<ul>

<li ng-repeat=“friend in friends | filter:{is_online:true}“>

{{friend.last_name}}, {{friend.first_name}}

</li>

</ul>

</div>

Wenn man aber mit Ionic/Angular JS nicht vertraut ist, stellt man sich direkt einige Fragen.

Was ist $scope? Was ist der syntax für ein filter? Und wie kann ich weitere Verhalten hinzufügen, wie z.B. das Sortieren der Freundesliste?

Mit React Native, kann man auf bereits existierendes Wissen der Sprache zurückgreifen, Benutzung der filter und map Funktionen.

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>

);

}

});

Dadurch das der Hauptteil normales JavaScript ist und nur einige kleine Teile anders sind, ist React Native für alle Programmierer verständlicher und gerade auch für Anfänger benutzerfreundlich. React ist also auch ein sehr gutes Lerntool, wenn man z.B. nicht weiß wie man Map oder Filter nutzt. React bringt einem auch diese Funktionen näher.

Entwickler Erfahrungen

„Glückliche Entwickler sind produktive Entwickler“, und React Native hat eine gute Entwicklerumwelt. Anstatt dauernd darauf zu warten das der code kompiliert wird und du die App bei jeder kleinen Änderung neustarten musst, werden Änderungen in deiner React Native Codebase in der laufenden App gemacht. (Eine kleine Demo kannst du hier sehen).

Und wenn du schon mit JavaScript gearbeitet hast, kennst du wahrscheinlich auch die Chrome Entwickler Tools. Während man React Native in Entwickler Modus laufen lässt, kannst du dies an deinen Desktop Chrome browser knüpfen, also kannst du gleichzeitig deine debugger tools und profiling tools nutzen. Für das Layout nutzt React Native flexbox. Während jeder Layout Motor verschieden ist, bedeutet React Natives unterstützung für flexbox, das man den gleichen Layout Code für Android, iOS und web nutzen kann.

WARUM ES SINN MACHT EIN WIRKUNGSVOLLES MVP ZU ENTWICKELN

CODE SHARING

Wir haben uns bereits angeschaut wie man Code zwischen iOS und Android via React nutzen kann, aber geht das auch über das Web. Alles in React was nicht an eine Native Komponente gebunden ist, ist bereits teilbar. Stell dir eine App vor, die über Server gerendert werden kann, oder über Webbrowser, oder Android oder iOS, die alle durch eine geteilte codebase betrieben werden. Soweit sind wir noch nicht, aber die Community arbeitet darauf hin, in unaufhaltbaren Schritten.

Unsere Schlussfolgerung

Durch die Leichtigkeit der Entwicklung, die Qualität der Apps, und die Vielfalt der Plattform und dessen Umwelt, hat unser Team von Applaunch.io stets Spaß am Lernprozess und der Entwicklung mit React Native. Wenn ihr jetzt noch mehr über React Native lernen wollt, dann klickt die folgenden links. Wenn Ihr eine App in React Native programmiert haben möchtet, jedoch nicht die Zeit und Muße dann wendet euch einfach an unser Team und wir helfen euch jederzeit gerne.

Comments

comments

Die Kommentare sind geschloßen.