Inhalt
- PWAs vs. native Apps: Was ist der Unterschied?
- Progressive Web-Apps: Bauen für das Web
- Stärken von PWAs
- Schwächen von PWAs
- Native reagieren
- Stärken der Reaktion Native
- Schwächen von React Native
- NativeScript
- Stärken von NativeScript
- Schwächen von NativeScript
Welchen Ansatz sollten Sie beim Erstellen einer App wählen? Sollten Sie den Weg der PWA / Web-Technologien einschlagen oder sollten Sie nativ werden und für bestimmte Plattformen entwerfen? Beide Optionen haben ihre Vor- und Nachteile. In diesem Artikel konzentrieren wir uns auf einige der gängigen Optionen, die zum Erstellen von Web- und nativen Apps verwendet werden.
PWAs (Progressive Web Apps), auch bekannt als Web-Apps, werden mit den gängigen Webtechnologien HTML, CSS und JavaScript erstellt und arbeiten in einem Webbrowser. (Schauen Sie sich einige der wichtigsten HTML-Tags an, um Ihre Builds zu unterstützen.) PWAs sind effektiv mobile Websites, die so gestaltet sind, dass sie wie eine App aussehen. Durch die Verwendung von Web-APIs erhalten sie Funktionen, die denen einer nativen App ähneln.
Weitere Tipps zum Erstellen von Apps finden Sie in unserem Beitrag zum Erstellen einer App. Wenn es sich um eine Website handelt, die Sie erstellen möchten, lesen Sie diese Top-Website-Ersteller und Webhosting-Services.
PWAs vs. native Apps: Was ist der Unterschied?
Progressive Web Apps haben den Vorteil, dass sie installierbar sind und auf einem Gerät ausgeführt werden können, ohne dass ein App Store erforderlich ist. Teil des Prozesses ist das Web-App-Manifest, mit dem Entwickler steuern können, wie eine App angezeigt und wie sie gestartet wird. Außerdem verfügen Webdesigner / Front-End-Entwickler bereits über die erforderlichen Fähigkeiten, um sofort mit dem Erstellen zu beginnen. Im Gegensatz zu nativen Apps muss keine neue Sprache gelernt werden.
Native Apps werden unter Berücksichtigung eines bestimmten Betriebssystems erstellt. iOS und Android - und verwenden Sie ein Framework oder eine Sprache, um diesen Zweck zu erfüllen. iOS-Anwendungen verwenden normalerweise Xcode oder Swift und Android-Apps JavaScript. In diesem Artikel konzentrieren wir uns jedoch auf einige JavaScript-basierte Open Source-Frameworks - React Native und NativeScript -, die für beide Plattformen funktionieren.
Die Vorteile nativer Apps bestehen darin, dass sie in der Regel eine bessere Funktionalität bieten, da sie die Hardware und Software eines Geräts besser nutzen, schneller und reaktionsschneller sind und Sie durch Bewertungen in App Stores eine Qualitätssicherung erhalten. Es bedeutet jedoch, dass Sie lernen müssen, wie Sie ein bestimmtes Framework oder eine bestimmte Bibliothek verwenden.
Hier sehen wir uns drei verschiedene Optionen an - eine für Web (PWAs) und zwei für native (React Native, NativeScript) - zum Erstellen einer App. Wir gehen durch, wie sie funktionieren, was sie können und untersuchen ihre Stärken und Schwächen, um Ihnen bei der Entscheidung zu helfen, welche Option Sie für die Erstellung Ihrer App wählen sollten.
Progressive Web-Apps: Bauen für das Web
Stärken von PWAs
- Apps funktionieren auch im Browser
- Distribution: Browser-, Unternehmens- und App-Stores
- Kann React, Angular, Vue, Vanilla oder andere Frameworks verwenden
Schwächen von PWAs
- Kein Zugriff auf jede native API
- Die Funktionen und die Verteilung der Geschäfte unter iOS und iPadOS sind begrenzt
- Es ist in ständiger Entwicklung
PWAs sind das aktuelle Entwurfsmuster zum Erstellen leistungsfähiger, offline und installierbarer Apps, die nur den Webstack verwenden: HTML, CSS, JavaScript und Browser-APIs. Dank des Service Workers und der Manifest-Spezifikationen für Web-Apps können wir jetzt nach der Installation für Android, iOS, iPadOS, Windows, MacOS, Chrome OS und Linux ein erstklassiges App-Erlebnis erstellen.
Zum Erstellen von PWAs können Sie eine beliebige Architektur verwenden: von serverseitigem, Vanille-JavaScript-, React-, Vue-, Angular- oder anderen clientseitigen Frameworks. Es kann sich um eine einseitige Anwendung oder eine mehrseitige Webanwendung handeln. Wir definieren, wie Benutzer offline unterstützt werden sollen.
Bei diesem Ansatz müssen wir die Ressourcen unserer App nicht verpacken und signieren: Wir hosten die Dateien lediglich auf einem Webserver, und der Servicemitarbeiter ist dafür verantwortlich, die Dateien im Client zwischenzuspeichern und nach der Installation bereitzustellen. Dies bedeutet auch, dass Sie, wenn eine App aktualisiert werden muss, nur die Dateien auf dem Server ändern und die Logik des Servicemitarbeiters dafür verantwortlich ist, sie auf den Geräten der Benutzer zu aktualisieren, ohne dass Benutzer oder App Store eingreifen müssen.
In Bezug auf die Verteilung ist die häufigste Methode der Browser. Benutzer installieren die App über den Browser, indem sie den Menüpunkt Zum Startbildschirm hinzufügen oder Installieren verwenden, eine Einladung zur Installation annehmen oder eine benutzerdefinierte Web-App-Benutzeroberfläche auf kompatiblen Plattformen verwenden. Es ist erwähnenswert, dass Apple im App Store veröffentlichte reine PWAs ablehnt und Webentwickler ermutigt, diese über Safari zu verbreiten.
Die Benutzeroberfläche wird ausschließlich von der Web-Laufzeit verwaltet. Dies bedeutet, dass der Webdesigner für das Rendern jedes Steuerelements auf dem Bildschirm verantwortlich ist. Wenn Sie ein UI-Framework wie Ionic oder eine Material Design-Bibliothek verwenden, ahmen HTML und CSS native Schnittstellen unter Android oder iOS nach, dies ist jedoch nicht obligatorisch.Bei PWAs ist die Anwendung von Webleistungstechniken obligatorisch, um eine gute Benutzererfahrung zu gewährleisten.
In Bezug auf die Fähigkeiten hat ein PWA nur Zugriff auf APIs, die in der Browser-Engine auf dieser Plattform verfügbar sind, und kann nicht mit nativem Code erweitert werden - mit Ausnahme von PWA-Distributionen im App Store. In dieser Angelegenheit sind iOS und iPadOS die eingeschränkteren Plattformen für PWAs, während Chrome (für Android- und Desktop-Betriebssysteme) mehr Verfügbarkeit bietet und hart daran arbeitet, mit dem Fugu-Projekt jede mögliche API zu JavaScript hinzuzufügen.
- Bester Cloud-Speicher: Wählen Sie die richtige Option für Sie.
Native reagieren
Stärken der Reaktion Native
- Gleiche Muster wie bei React.js
- Einige Web-APIs sind verfügbar
- Web- und Desktop-Unterstützung
Schwächen von React Native
- Web-UI-Komponenten können nicht wiederverwendet werden
- Die native Brücke braucht etwas Arbeit
- Reaktionserfahrung ist erforderlich
React Native ist ein von Facebook gesponsertes Open-Source-Framework für JavaScript-basierte Komponenten, das React-Entwurfsmuster sowie die JavaScript-Sprache verwendet, um native Apps für iOS, iPadOS und Android aus einem Quellcode zu kompilieren.
Zum Rendern werden jedoch keine HTML-Elemente akzeptiert. Nur andere native Komponenten sind gültig. Anstatt a zu rendern div> mit einer p> und ein Eingabe> Element mit JSX, werden Sie ein rendern Ansicht> mit einer Text> und ein TextInput>. Für das Styling von Komponenten verwenden Sie weiterhin CSS und das Layout wird über Flexbox definiert.
Die Benutzeroberfläche wird nicht im DOM eines Browsers gerendert, sondern verwendet die nativen Benutzeroberflächenbibliotheken unter Android und iOS. Daher a Taste> in ReactNative wird eine Instanz von UIButton unter iOS und dem android.widget.Button Klasse auf Android; In React Native ist keine Web-Laufzeit beteiligt.
Der gesamte JavaScript-Code wird jedoch in einer virtuellen JavaScript-Maschine auf dem Gerät ausgeführt, sodass beim Kompilieren der App keine Konvertierung von JavaScript in echten nativen Code erfolgt. Es gibt eine Reihe bekannter APIs für Webentwickler, wie die Fetch-API, WebSockets und die Timer des Browsers: setInterval und requestAnimationFrame. Andere Funktionen werden auf der Plattform über benutzerdefinierte APIs bereitgestellt, z. B. Animationen.
Sie können ein schnelles React Native-Projekt mit zwei kostenlosen CLIs starten: Expo oder die erweiterte und offizielle ReactNative CLI. Wenn Sie die offizielle CLI verwenden, benötigen Sie auch Android Studio, um die Android-App zu kompilieren und zu testen, und Xcode, um dies auch unter iOS und iPadOS zu tun. Daher benötigen Sie einen MacOS-Computer für diese Plattform.
React Native kompiliert native Apps für iOS und Android. Dies bedeutet, dass für die Verteilung Ihrer App dieselben Regeln gelten wie für andere native Apps: App Stores für öffentliche Apps, Unternehmensverteilung und Alpha / Beta-Tests. Normalerweise können Sie eine App nicht über einen Browser verteilen, obwohl React Native für Web und die React Native für Windows-Plattformen von Microsoft hilfreich sein können.
NativeScript
Stärken von NativeScript
- Gute Werkzeuge zum Codieren und Testen
- Umfangreiche Galerie mit Apps, mit denen Sie spielen können
- Alle Android- und iOS-APIs sind in JS verfügbar
Schwächen von NativeScript
- Kleine Gemeinde
- Web-UI-Komponenten können nicht wiederverwendet werden
- Keine Web-, Desktop- oder React-Unterstützung
NativeScript ist nicht so bekannt wie React Native, konkurriert jedoch auf demselben Gebiet: native iOS- und Android-Apps aus JavaScript und Web-Frameworks. Sie können JavaScript oder TypeScript und eine XML-Benutzeroberflächendatei verwenden, um native Apps zu erstellen. Angular und Vue werden sofort unterstützt, sodass es eine großartige Lösung für Entwickler ist, die an diese Frameworks gewöhnt sind.
Die Vorteile von NativeScript werden klarer, wenn Sie Angular oder Vue verwenden. Für Angular erstellen Sie dieselben Komponenten, die Sie gewohnt sind, verwenden jedoch XML anstelle von HTML für die Vorlage, einschließlich aller Datenbindungen. In der XML anstelle von a div> mit einer p> und ein img>, Sie werden ein platzieren StackLayout> mit einer Beschriftung> und ein Bild> Komponente.
CSS und Sass werden mit ähnlichen Stilen wie CSS im Browser unterstützt. Routing und Netzwerkmanagement erfolgen durch Implementierung der Standard-Angular-Dienste. Für Vue ist es etwas Ähnliches; Sie schreiben die Vorlage in XML, anstatt HTML in derselben zu verwenden Vorlage> Element in Ihrer .vue-Datei.
NativeScript enthält eine Sammlung von Komponenten, die dann einem nativen Android- oder iOS-Steuerelement zugeordnet werden. Wenn Sie also eine Liste oder eine Auswahl rendern, handelt es sich um die native App, die dieselbe Idee wie in React Native verwendet.
Ihr JavaScript- oder TypeScript-Code (transpiliert) wird in einer virtuellen JavaScript-Maschine auf dem Gerät mit einer Brücke zur / von der nativen Umgebung ausgeführt. In dieser Bridge werden die gesamten nativen APIs von Android oder iOS / iPadOS verfügbar gemacht, sodass wir trotz des Zugriffs auf plattformübergreifende APIs jeden Java- oder Objective-C-Code von JavaScript / TypeScript instanziieren oder aufrufen können und NativeScript Datentypen marshallt.
NativeScript bietet eine hervorragende Unterstützung für Tools, einschließlich VS-Code-Plugins, der CLI, eines Hot-Reload-Testsystems und einer NativeScript-Spielplatz-App, sodass Sie beim Testen nicht alle Abhängigkeiten installieren müssen, sowie mehrere zusätzliche Dienste wie Online Spielplatz.
Schließlich kompiliert NativeScript nur eine App für Android und iOS, die über offizielle Vertriebskanäle und App Stores installiert werden kann, wenn Sie deren Regeln, Unternehmensverteilung und Alpha / Beta-Tests einhalten. Normalerweise gibt es keine Möglichkeit, Apps über einen Browser zu verteilen, und es gibt keine Lösungen für Desktop-Apps für diese Plattform.
Dieser Artikel wurde ursprünglich in veröffentlicht Ausgabe 325 of net, das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. Kaufen Ausgabe 325 oder abonnieren sich vernetzten.
Besuchen Sie uns im April 2020 mit unserer Reihe von JavaScript-Superstars bei GenerateJS - der Konferenz, die Ihnen hilft, besseres JavaScript zu erstellen. Buchen Sie jetzt beigenerateconf.com
