PWAs vs native Apps: Wéi eng sollt Dir wielen?

Auteur: Randy Alexander
Denlaod Vun Der Kreatioun: 2 Abrëll 2021
Update Datum: 16 Mee 2024
Anonim
Kia Proceed GT 2020 - UVO 2 Update (200923 -2020-2 Gen5 Wide) - (new design, UVO app, nature sounds)
Videospiller: Kia Proceed GT 2020 - UVO 2 Update (200923 -2020-2 Gen5 Wide) - (new design, UVO app, nature sounds)

Inhalt

Wéi eng Approche sollt Dir huelen wann Dir eng App baut? Sollt Dir de PWA / Web Technologien Wee ophuelen oder sollt Dir natierlech goen a fir spezifesch Plattformen designen? Béid Optiounen hunn hir Vir- an Nodeeler, an an dësem Artikel konzentréiere mir eis op e puer vun de populäre Wiel, déi benotzt gi fir Web- an natierlech Apps ze kreéieren.

PWAs (Progressive Web Apps) aka Web Apps, gi mat populäre Webtechnologien HTML, CSS a JavaScript gebaut a schaffen an engem Webbrowser. (Kuckt e puer vun de wesentlechen HTML Tags fir bei Äre Builds ze hëllefen.) PWAs sinn effektiv mobil Websäiten déi ausgesi wéi eng App, an d'Benotzung vu Web-APIe gëtt hinnen Funktionalitéit ähnlech wéi eng gebierteg App.

Fir méi Berodung iwwer App Building, kuckt eise Post wéi Dir eng App maacht, oder wann et e Site ass deen Dir wëllt kreéieren gesinn dës Top Websäit Builder a Webhosting Servicer.

PWAs géint Native Apps: Wat ass den Ënnerscheed?

Progressiv Web Apps hunn de Virdeel datt se installéierbar sinn an op engem Apparat liewen ouni de App Store ze brauchen. An, en Deel vum Prozess ass de Web App Manifest deen Entwéckler erlaabt ze kontrolléieren wéi eng App erschéngt a wéi se gestart gëtt. Och Webdesigner / Frontend Entwéckler hunn de Fäegkeetssatz scho gebraucht fir direkt ze bauen. Et ass net néideg eng nei Sprooch ze léieren, am Géigesaz zu natierlechen Apps.


Gebierteg Apps gi gebaut mat engem spezifeschen OS am Kapp - dh. iOS an Android - a benotzt e Kader oder eng Sprooch fir dësen Zweck z'erfëllen. iOS Uwendungen benotzen normalerweis Xcode oder Swift, an Android Apps, JavaScript. Awer fir dësen Artikel konzentréiere mir eis op e puer JavaScript-baséiert Open Source Frameworks - React Native an NativeScript - déi fir béid Plattforme funktionnéieren.

D'Virdeeler vun natierlechen Apps ass datt se normalerweis besser Funktionalitéit bréngen, well se besser Geräter Hardware a Software benotzen, méi séier a méi reaktiounsfäeg sinn an Dir kritt Qualitéitsversécherung awer Bewäertungen an App Stores. Awer, et heescht bedeit ze léieren wéi ee spezifescht Framework oder Bibliothéik benotzt.

Hei kucke mir op dräi verschidden Optiounen - eng fir Web (PWAs) an zwou fir native (React Native, NativeScript) - fir eng App ze bauen. Mir lafen duerch wéi se funktionnéieren, wat se kënne maachen a kucken hir Stäerkten a Schwächen fir Iech ze entscheeden wéi eng Optioun Dir sollt wielen fir Är App ze bauen.


Progressiv Web Apps: Gebai fir de Web

Stäerkte vu PWAen

  • Apps funktionnéieren och am Browser
  • Verdeelung: Browser, Enterprise an App Stores
  • Kann React, Angular, Vue, Vanille oder aner Frameworks benotzen

Schwächen vu PWAen

  • Keen Zougang zu all natierlechen API
  • Fäegkeeten a Geschäftsverdeelung op iOS an iPadOS si limitéiert
  • Et ass a kontinuéierter Evolutioun

PWAs sinn dat aktuellt Designmuster fir performant, offline, installéierbar Apps ze kreéieren mat just dem Web Stack: HTML, CSS, JavaScript a Browser 'APIen. Dank dem Service Worker an de Web App Manifestatiounsspezifikatioune kënne mir elo eng éischtklasseg Apperfahrung kreéieren no der Installatioun fir Android, iOS, iPadOS, Windows, macOS, Chrome OS a Linux.

Fir PWAs ze kreéieren kënnt Dir all Architektur benotzen: vu Serversäit, Vanille JavaScript, React, Vue, Angular oder aner Clientseits Frameworks. Et kann eng eenzeg Säit Uwendung oder eng Multi-Säit Webapplikatioun sinn a mir definéiere wéi mir d'Benotzer ënnerstëtzen wärend offline.


An dëser Approche brauche mir d'Ressourcen vun eiser App net ze paken an z'ënnerschreiwen: mir hosten just d'Dateien an engem Webserver an de Service Aarbechter ass verantwortlech fir d'Fichier'en am Client ze cacheieren an no der Installatioun ze servéieren. Dëst bedeit och, wann eng App muss aktualiséiert ginn, ännert Dir just d'Fichieren um Server an d'Logik vum Service Worker ass verantwortlech fir se op de Benotzer Geräter ze aktualiséieren ouni User oder App Store Interventioun.

Am Sënn vun der Verdeelung ass déi meescht üblech Method de Browser. D'Benotzer installéieren d'App vum Browser mat dem Add to Home Screen oder Install Menu Element, andeems se eng Invitatioun akzeptéiere fir ze installéieren oder mat enger personaliséierter Web App User Interface op kompatibel Plattformen. Et ass derwäert ze bemierken datt Apple reng PWAs refuséiert, déi am App Store publizéiert goufen an d'Web Entwéckler encouragéiere se iwwer Safari ze verdeelen.

D'User Interface gëtt reng vun der Web Runtime geréiert, dat heescht datt de Webdesigner verantwortlech ass fir all Kontroll um Bildschierm ze maachen. Wann Dir en UI Framework benotzt, wéi zum Beispill Ionic, oder eng Material Design Bibliothéik, wäerte HTML an CSS natierlech Interfaces op Android oder iOS imitéieren awer et ass net obligatoresch.Wann Dir PWAs maacht, ass Web Performance Techniken uwennen obligatoresch fir eng gutt Benotzererfarung ze halen.

Am Sënn vun de Fäegkeeten huet e PWA nëmmen Zougang zu APIen déi am Browser-Moteur op där Plattform verfügbar sinn an et kann net mat natierleche Code verlängert ginn - mat Ausnam vun App Store PWA Verdeelungen. An dëser Matière sinn iOS an iPadOS déi méi limitéiert Plattforme fir PWAs, wärend Chrome (fir Android an Desktop OSs) méi Disponibilitéit huet a schafft schwéier fir all méiglech API u JavaScript mam Fugu Projet bäizefügen.

  • Bescht Cloud Storage: Wielt déi richteg Optioun fir Iech.

Reagéiert Mammesprooch

Stäerkte vum React Native

  • Selwecht Mustere wéi mat React.js
  • E puer Web-APIe ginn ausgesat
  • Web an Desktop Ënnerstëtzung

Schwächen vu React Native

  • Kann net Web UI Komponenten weiderbenotzen
  • Déi gebierteg Bréck brauch e bëssen Aarbecht
  • Reagéiert Erfarung ass gebraucht

React Native ass en Open-Source JavaScript-baséiert Komponent Framework, gesponsert vu Facebook, dee React Design Mustere benotzt, souwéi JavaScript Sprooch fir gebierteg Apps fir iOS, iPadOS an Android aus engem Quellcode ze kompiléieren.

Awer keng HTML Elementer ginn ugeholl fir ze rendéieren; nëmmen aner natierlech Komponente si valabel. Dofir, anstatt e div> mat engem p> an eng Input> Element mat JSX, wäert Dir e rendéieren Kuckt> mat engem Text> an eng TextInput>. Fir Styling Komponente benotzt Dir ëmmer nach CSS an de Layout gëtt definéiert duerch Flexbox.

D'Benotzeroberfläche gëtt net am Browser-DOM gemaach, awer mat den natierlechen User-Interface-Bibliothéiken op Android an iOS. Dofir, eng Knäppchen> am ReactNative gëtt eng Instanz vun UIButton op iOS an der android.widget.Button Klass op Android; et ass keng Web Runtime involvéiert am React Native.

Wéi och ëmmer, all JavaScript Code gëtt an enger JavaScript virtueller Maschinn op-Apparat ausgefouert, sou datt et kee JavaScript ass fir eng richteg natierlech Konversioun beim App ze kompiléieren. Et gëtt e Set vu bekannten APIs fir Webentwéckler, wéi de Fetch API, WebSockets an den Timer vum Browser: setInterval an requestAnimationFrame. Aner Fäegkeete ginn an der Plattform duerch personaliséiert APIen, wéi Animatiounen, agesat.

Dir kënnt e séiere React Native Projet mat zwee gratis CLIs starten: Expo oder de méi fortgeschrattenen an offiziellen ReactNative CLI. Wann Dir den offiziellen CLI benotzt, braucht Dir och Android Studio fir d'Android App an den Xcode ze kompiléieren fir datselwecht op iOS an iPadOS ze maachen, sou datt Dir e MacOS Computer fir dës Plattform braucht.

React Native kompiléiert nativen Apps fir iOS an Android, dat heescht datt d'Verdeelung vun Ärer App déiselwecht Regele wéi aner native Apps verfollegt: App Store fir ëffentlech Apps, Enterprise Verdeelung an Alpha / Beta Testen. Normalerweis kënnt Dir keng App iwwer e Browser verdeelen, obwuel React Native for Web a Microsoft's React Native fir Windows Plattformen hëllefe kënnen.

NativeScript

Stäerkten vun NativeScript

  • Gutt Tools fir Kodéierung an Testen
  • Extensiv Galerie vun Apps prett mat ze spillen
  • All Android an iOS APIe ginn a JS ausgesat

Schwächen vun NativeScript

  • Kleng Gemeinschaft
  • Kann net Web UI Komponenten weiderbenotzen
  • Keen Web, Desktop oder React Support

NativeScript ass net sou bekannt wéi React Native awer et konkurréiert am selwechte Feld: nativen iOS an Android Apps vu JavaScript a Web Frameworks. Et léisst Dir JavaScript oder TypeScript an eng XML User Interface Datei benotze fir native Apps ze kreéieren. Et ënnerstëtzt och Angular a Vue direkt aus der Këscht, also ass et eng super Léisung fir Entwéckler déi an dëse Kadere benotzt ginn.

D'Virdeeler vun NativeScript si méi kloer wann Dir Angular oder Vue benotzt. Fir Angular erstellt Dir déi selwecht Komponente wéi Dir gewinnt sidd awer mat XML amplaz HTML fir d'Schabloun, och all Datebindungen. Am XML, amplaz vun engem div> mat engem p> an eng img>, Dir wäert e placéieren StackLayout> mat engem Label> an eng Bild> Komponent.

CSS a Sass gi mat ähnleche Stiler wéi CSS am Browser ënnerstëtzt. Routing an Netzwierkmanagement ginn duerch Implementéierunge vun de Standard Angular Servicer gemaach. Fir Vue ass et eppes ähnleches; Dir schreift d'Schabloun an XML amplaz HTML an der selwechter ze benotzen Schabloun> Element an Ärer .vue Datei.

NativeScript enthält eng Sammlung vu Komponenten déi dann op eng Android oder iOS native Kontroll mappéiert ginn, also wann Dir eng Lëscht oder e Picker uweist, ass et déi natierlech App, mat der selwechter Iddi wéi a React Native.

Äre JavaScript oder TypeScript Code (transpiléiert) gëtt an enger JavaScript virtueller Maschinn mat enger Bréck op / aus dem natierlechen Ëmfeld ausgefouert. An där Bréck sinn déi ganz native APIs vun Android oder iOS / iPadOS ausgesat sou datt trotz Zougang zu Plattform APIen, kënne mir all Java oder Objective-C Code vun JavaScript / TypeScript instantiéieren oder uruffen an NativeScript marschéiert Datetypen.

NativeScript huet super Ënnerstëtzung fir Tooling, dorënner VS Code Plugins, de CLI, e Hot-Reload Testing System an eng NativeScript Spillplaz App, sou datt Dir net all Ofhängegkeete beim Test installéiere musst, souwéi e puer zousätzlech Servicer wéi en Online Spillplaz.

Schlussendlech kompiléiert NativeScript nëmmen eng App fir Android an iOS déi aus offiziellen Verdeelungskanälen an App Store installéiert kënne ginn wann Dir hire Regelen, Enterprise Verdeelung an Alpha / Beta Tester respektéiert. Normalerweis gëtt et kee Wee fir Apps aus engem Browser ze verdeelen an et gi keng Léisunge fir Desktop Apps fir dës Plattform.

Dësen Artikel gouf ursprénglech publizéiert am 325 erausginn vum Netz, de beschte verkaafte Magazin vun der Welt fir Webdesigner an Entwéckler. Kaaft 325 erausginn oder abonnéieren zum Netz.

Maacht mat am Abrëll 2020 mat eiser Opstellung vu JavaScript Superstars bei GenerateJS - d'Konferenz hëlleft Iech besser JavaScript ze bauen. Buch elo opgenerateconf.com 

Recommandéiert Iech
Wéi lecker Texturen mat Bläistëfter ze maachen
Liest Méi

Wéi lecker Texturen mat Bläistëfter ze maachen

Wann Dir léiert wéi ee till Life Artwork zeechnen a et wichteg Intere e ze kreéieren an de Betrachter mat ver chiddene Goûten ze engagéieren. Faarweg prenkel op engem Donut w&...
Déi nei Cola kann dat seet Iech wéi kal et ass
Liest Méi

Déi nei Cola kann dat seet Iech wéi kal et ass

Coca-Cola huet ee vun de bedeitend ten Logo De ignen a Verpackung de ign vun all Top Marke dobau e. Op der NAC how vun dë em Joer huet den Getränk hier teller zwee nei Verpackung de ignen vi...
Grouss, fett & freedeg: Sagmeister & Walsh's nei Annoncekampagne
Liest Méi

Grouss, fett & freedeg: Sagmeister & Walsh's nei Annoncekampagne

Wann Dir net cho mat der Aarbecht vu agmei ter & Wal h komm idd, da idd Dir fir e kreativen Geno . Gegrënnt vum tefan agmei ter a Je ica Wal h, huet d'Agence e puer vun de bedeitend ten T...