Inhoud
- PWA's versus native apps: wat is het verschil?
- Progressive web-apps: bouwen voor het web
- Sterke punten van PWA's
- Zwakke punten van PWA's
- Reageer Native
- Sterke punten van React Native
- Zwakke punten van React Native
- NativeScript
- Sterke punten van NativeScript
- Zwakke punten van NativeScript
Welke aanpak moet je volgen bij het bouwen van een app? Moet u de PWA / webtechnologieën-route inslaan of moet u native gaan en ontwerpen voor specifieke platforms? Beide opties hebben hun voor- en nadelen, en in dit artikel concentreren we ons op enkele van de populaire keuzes die worden gebruikt om web- en native apps te maken.
PWA's (Progressive Web Apps) oftewel web-apps, zijn gebouwd met populaire webtechnologieën HTML, CSS en JavaScript en werken in een webbrowser. (Bekijk enkele van de essentiële HTML-tags om u te helpen bij uw builds.) PWA's zijn in feite mobiele websites die zijn ontworpen om eruit te zien als een app, en het gebruik van web-API's geeft ze functionaliteit die vergelijkbaar is met een native app.
Zie ons bericht over het maken van een app voor meer advies over het maken van apps, of als het een site is die u wilt maken, bekijk dan deze topwebsitebouwers en webhostingservices.
PWA's versus native apps: wat is het verschil?
Progressive Web Apps hebben het voordeel dat ze installeerbaar zijn en live op een apparaat kunnen worden gebruikt zonder dat er een app store nodig is. En een deel van het proces is het Web App Manifest waarmee ontwikkelaars kunnen bepalen hoe een app wordt weergegeven en hoe deze wordt gelanceerd. Ook hebben webontwerpers / front-end-ontwikkelaars al de vaardigheden die nodig zijn om onmiddellijk te beginnen met bouwen. In tegenstelling tot native apps is het niet nodig om een ​​nieuwe taal te leren.
Native apps zijn gebouwd met een specifiek besturingssysteem in gedachten, dwz. iOS en Android - en gebruik een raamwerk of taal om dat doel te bereiken. iOS-applicaties gebruiken meestal Xcode of Swift, en Android-apps, JavaScript. Maar voor dit artikel concentreren we ons op een aantal op JavaScript gebaseerde open source-frameworks - React Native en NativeScript - die voor beide platforms werken.
De voordelen van native apps zijn dat ze doorgaans betere functionaliteit bieden, omdat ze beter gebruik maken van de hardware en software van een apparaat, sneller en responsiever zijn en u kwaliteitsborging krijgt via beoordelingen in app-winkels. Maar het zal betekenen dat je moet leren hoe je een specifiek raamwerk of een specifieke bibliotheek moet gebruiken.
Hier kijken we naar drie verschillende opties - een voor web (PWA's) en twee voor native (React Native, NativeScript) - voor het bouwen van een app. We bekijken hoe ze werken, wat ze kunnen doen en kijken naar hun sterke en zwakke punten om u te helpen beslissen welke optie u moet kiezen om uw app te bouwen.
Progressive web-apps: bouwen voor het web
Sterke punten van PWA's
- Apps werken ook in de browser
- Distributie: browser-, bedrijfs- en app-winkels
- Kan React, Angular, Vue, vanilla of andere frameworks gebruiken
Zwakke punten van PWA's
- Geen toegang tot elke native API
- De mogelijkheden en winkeldistributie op iOS en iPadOS zijn beperkt
- Het is in voortdurende evolutie
PWA's zijn het huidige ontwerppatroon om hoogwaardige, offline, installeerbare apps te maken met alleen de webstack: HTML, CSS, JavaScript en browser-API's. Dankzij de servicemedewerker en de manifestspecificaties van de webapp kunnen we nu een eersteklas app-ervaring creëren na installatie voor Android, iOS, iPadOS, Windows, macOS, Chrome OS en Linux.
Om PWA's te maken, kunt u elke architectuur gebruiken: van server-side, vanilla JavaScript, React, Vue, Angular of andere client-side frameworks. Het kan een applicatie met één pagina of een webapplicatie met meerdere pagina's zijn en we bepalen hoe we gebruikers offline gaan ondersteunen.
Bij deze aanpak hoeven we de bronnen van onze app niet te verpakken en te ondertekenen: we hosten de bestanden gewoon op een webserver en de servicemedewerker is verantwoordelijk voor het cachen van de bestanden in de client en serveert ze na installatie. Dit betekent ook dat als een app moet worden bijgewerkt, u gewoon de bestanden op de server wijzigt en de logica van de servicemedewerker verantwoordelijk is voor het bijwerken ervan op de apparaten van gebruikers zonder tussenkomst van de gebruiker of de app store.
Qua distributie is de meest gebruikte methode de browser. Gebruikers installeren de app vanuit de browser met behulp van het menu-item Toevoegen aan startscherm of Installeren, door een uitnodiging voor installatie te accepteren of door een aangepaste gebruikersinterface van een webapp op compatibele platforms te gebruiken. Het is vermeldenswaard dat Apple pure PWA's die in de App Store zijn gepubliceerd, afwijst en webontwikkelaars aanmoedigt om deze via Safari te verspreiden.
De gebruikersinterface wordt puur beheerd door de webruntime, wat betekent dat de webdesigner verantwoordelijk is voor het weergeven van elk besturingselement op het scherm. Als u een UI-framework gebruikt, zoals Ionic, of een Material Design-bibliotheek, zullen HTML en CSS native interfaces op Android of iOS nabootsen, maar dit is niet verplicht.Bij het doen van PWA's is het toepassen van webprestatietechnieken verplicht om een ​​goede gebruikerservaring te behouden.
In termen van mogelijkheden heeft een PWA alleen toegang tot API's die beschikbaar zijn in de browser-engine op dat platform en kan deze niet worden uitgebreid met native code - met uitzondering van app store PWA-distributies. In deze kwestie zijn iOS en iPadOS de beperktere platforms voor PWA's, terwijl Chrome (voor Android en desktop-OS's) meer beschikbaarheid heeft en er hard aan wordt gewerkt om met het Fugu-project elke mogelijke API aan JavaScript toe te voegen.
- Beste cloudopslag: kies de juiste optie voor jou.
Reageer Native
Sterke punten van React Native
- Dezelfde patronen als met React.js
- Sommige web-API's zijn zichtbaar
- Web- en desktopondersteuning
Zwakke punten van React Native
- Kan web-UI-componenten niet hergebruiken
- De native bridge heeft wat werk nodig
- Reactervaring is nodig
React Native is een open-source JavaScript-gebaseerd componentraamwerk, gesponsord door Facebook, dat React-ontwerppatronen en JavaScript-taal gebruikt om native apps voor iOS, iPadOS en Android te compileren vanuit één broncode.
Maar HTML-elementen worden niet geaccepteerd voor weergave; alleen andere native componenten zijn geldig. Daarom, in plaats van een div> met een p> en een invoer> element met JSX, dan render je een Bekijk> met een Tekst> en een TextInput>. Voor stylingcomponenten gebruik je nog steeds CSS en de lay-out wordt gedefinieerd via Flexbox.
De gebruikersinterface wordt niet weergegeven in de DOM van een browser, maar met behulp van de native gebruikersinterfacebibliotheken op Android en iOS. Daarom een Knop> in ReactNative wordt een instantie van UIButton op iOS en de android.widget.Button les op Android; er is geen webruntime betrokken bij React Native.
Alle JavaScript-code wordt echter uitgevoerd in een virtuele JavaScript-machine op het apparaat, dus er is geen JavaScript naar echte native code-conversie bij het compileren van de app. Er is een reeks bekende API's voor webontwikkelaars, zoals de Fetch API, WebSockets en de timers van de browser: setInterval en requestAnimationFrame. Andere mogelijkheden worden op het platform geïmplementeerd via aangepaste API's, zoals animaties.
U kunt een snel React Native-project starten met twee gratis CLI's: Expo of de meer geavanceerde en officiële ReactNative CLI. Als je de officiële CLI gebruikt, heb je ook Android Studio nodig om de Android-app te compileren en te testen en Xcode om hetzelfde te doen op iOS en iPadOS, dus je hebt een macOS-computer nodig voor dat platform.
React Native compileert native apps voor iOS en Android, wat betekent dat de distributie van uw app dezelfde regels volgt als andere native apps: app stores voor publieke apps, enterprise distributie en alpha / beta testing. Normaal gesproken kunt u een app niet via een browser distribueren, hoewel React Native for Web en Microsoft's React Native voor Windows-platforms kunnen helpen.
NativeScript
Sterke punten van NativeScript
- Goede tools voor coderen en testen
- Uitgebreide galerij met apps die klaar zijn om mee te spelen
- Alle Android- en iOS-API's worden weergegeven in JS
Zwakke punten van NativeScript
- Kleine gemeenschap
- Kan web-UI-componenten niet hergebruiken
- Geen ondersteuning voor web, desktop of React
NativeScript is niet zo bekend als React Native, maar het concurreert op hetzelfde gebied: native iOS- en Android-apps van JavaScript en webframeworks. Hiermee kunt u JavaScript of TypeScript en een XML-gebruikersinterfacebestand gebruiken om native apps te maken. Het ondersteunt ook direct Angular en Vue, dus het is een geweldige oplossing voor ontwikkelaars die aan deze frameworks gewend zijn.
De voordelen van NativeScript zijn duidelijker wanneer u Angular of Vue gebruikt. Voor Angular maakt u dezelfde componenten die u gewend bent, maar gebruikt u XML in plaats van HTML voor de sjabloon, inclusief alle gegevensbindingen. In de XML, in plaats van een div> met een p> en een img>, je plaatst een StackLayout> met een Label> en een Afbeelding> component.
CSS en Sass worden ondersteund met vergelijkbare stijlen als CSS in de browser. Routing en netwerkbeheer worden gedaan door middel van implementaties van de standaard Angular-services. Voor Vue is het iets soortgelijks; u schrijft de sjabloon in XML in plaats van HTML in dezelfde te gebruiken sjabloon> element in uw .vue-bestand.
NativeScript bevat een verzameling componenten die vervolgens worden toegewezen aan een native besturingselement voor Android of iOS, dus wanneer u een lijst of een kiezer weergeeft, is dit de native app, met hetzelfde idee als in React Native.
Uw JavaScript- of TypeScript-code (transpiled) wordt uitgevoerd in een virtuele JavaScript-machine op het apparaat met een brug naar / van de native omgeving. In die bridge worden de volledige native API's van Android of iOS / iPadOS weergegeven, dus ondanks dat we toegang hebben tot platformonafhankelijke API's, kunnen we elke Java- of Objective-C-code van JavaScript / TypeScript instantiëren of aanroepen en NativeScript zal gegevenstypen rangschikken.
NativeScript biedt geweldige ondersteuning voor tooling, waaronder VS-code plug-ins, de CLI, een hot-herlaadtestsysteem en een NativeScript-speeltuin-app, zodat u tijdens het testen niet alle afhankelijkheden hoeft te installeren, evenals verschillende aanvullende services, zoals een online speelplaats.
Ten slotte compileert NativeScript alleen een app voor Android en iOS die kan worden geïnstalleerd vanuit officiële distributiekanalen en app-winkels als u zich houdt aan hun regels, bedrijfsdistributie en alfa / bètatests. Meestal is er geen manier om apps vanuit een browser te distribueren en zijn er geen oplossingen voor desktop-apps voor dit platform.
Dit artikel is oorspronkelijk gepubliceerd in kwestie 325 van net, 's werelds best verkochte tijdschrift voor webontwerpers en -ontwikkelaars. Kopen kwestie 325 of abonneren vangen.
Bezoek ons ​​in april 2020 met onze line-up van JavaScript-supersterren op GenerateJS - de conferentie die u helpt om beter JavaScript te bouwen. Boek nu bijgenerateconf.comÂ
