Innehåll
- PWAs vs Native apps: Vad är skillnaden?
- Progressiva webbappar: Bygg för webben
- Styrkor av PWA
- Svagheter i PWA
- Reagera Native
- Styrkor för React Native
- Svagheter i React Native
- NativeScript
- Styrkor i NativeScript
- Svagheter i NativeScript
Vilket tillvägagångssätt ska du ta när du bygger en app? Ska du följa PWA / webbteknikvägen eller ska du gå native och designa för specifika plattformar? Båda alternativen har sina fördelar och nackdelar, och i den här artikeln koncentrerar vi oss på några av de populäraste valen som används för att skapa webb- och inbyggda appar.
PWAs (Progressive Web Apps), alias webbappar, är byggda med populära webbteknologier HTML, CSS och JavaScript och fungerar i en webbläsare. (Kolla in några av de viktigaste HTML-taggarna för att hjälpa dig med dina byggnader.) PWA är effektivt mobila webbplatser som är utformade för att se ut som en app, och användningen av webb-API: er ger dem funktioner som liknar en inbyggd app.
För mer råd om appbyggande, se vårt inlägg om hur man skapar en app, eller om det är en webbplats du vill skapa, se dessa toppwebbplatsbyggare och webbhotell.
PWAs vs Native apps: Vad är skillnaden?
Progressiva webbappar har fördelen att de kan installeras och lever på en enhet utan att det behövs någon appbutik. Och en del av processen är Web App Manifest som gör det möjligt för utvecklare att kontrollera hur en app visas och hur den startas. Webbdesigners / frontend-utvecklare har redan den kompetens som krävs för att börja bygga omedelbart. Det finns inget behov av att lära sig ett nytt språk, till skillnad från inbyggda appar.
Inbyggda appar är byggda med ett specifikt operativsystem i åtanke - dvs. iOS och Android - och använd ett ramverk eller språk för att uppfylla detta syfte. iOS-applikationer använder vanligtvis Xcode eller Swift, och Android-appar, JavaScript. Men för den här artikeln koncentrerar vi oss på ett par JavaScript-baserade ramar med öppen källkod - React Native och NativeScript - som fungerar för båda plattformarna.
Fördelarna med inbyggda appar är att de vanligtvis ger bättre funktionalitet eftersom de utnyttjar enhetens hårdvara och programvara bättre, är snabbare och mer lyhörd och du får kvalitetssäkring genom betyg i appbutiker. Men det kommer att innebära att man måste lära sig att använda ett specifikt ramverk eller bibliotek.
Här tittar vi på tre olika alternativ - ett för webben (PWAs) och två för native (React Native, NativeScript) - för att bygga en app. Vi går igenom hur de fungerar, vad de kan göra och tittar på deras styrkor och svagheter för att hjälpa dig att bestämma vilket alternativ du ska välja att bygga din app.
Progressiva webbappar: Bygg för webben
Styrkor av PWA
- Appar fungerar också i webbläsaren
- Distribution: webbläsare, företag och appbutiker
- Kan använda React, Angular, Vue, vanilj eller andra ramar
Svagheter i PWA
- Ingen åtkomst till varje inbyggt API
- Förmåga och butiksdistribution på iOS och iPadOS är begränsade
- Det är i kontinuerlig utveckling
PWA är det nuvarande designmönstret för att skapa högpresterande, offline, installerbara appar med bara webbstacken: HTML, CSS, JavaScript och webbläsares API: er. Tack vare servicearbetaren och webbapp-manifestspecifikationerna kan vi nu skapa en förstklassig appupplevelse efter installation för Android, iOS, iPadOS, Windows, macOS, Chrome OS och Linux.
För att skapa PWA: er kan du använda vilken arkitektur som helst: från serversidan, vanilj JavaScript, React, Vue, Angular eller andra ramar på klientsidan. Det kan vara en en-sidig applikation eller en flersidig webbapplikation och vi definierar hur vi ska stödja användare medan de är offline.
I det här tillvägagångssättet behöver vi inte paketera och signera resurserna i vår app: vi är bara värd för filerna på en webbserver och servicearbetaren ansvarar för att cachelagra filerna i klienten och servera dem efter installationen. Detta betyder också att om en app behöver uppdateras, ändrar du bara filerna på servern och servicearbetarens logik kommer att vara ansvarig för att uppdatera dem på användarnas enheter utan användar- eller appbutikintervention.
När det gäller distribution är den vanligaste metoden webbläsaren. Användare installerar appen från webbläsaren med hjälp av menyn Lägg till på startskärmen eller Installera, genom att acceptera en inbjudan att installera eller genom att använda ett anpassat användargränssnitt för webbappar på kompatibla plattformar. Det är värt att notera att Apple avvisar rena PWA som publicerats i App Store och uppmuntrar webbutvecklare att distribuera den via Safari.
Användargränssnittet hanteras enbart av webbkörningstiden, vilket innebär att webbdesignern är ansvarig för att återge varje kontroll på skärmen. Om du använder ett UI-ramverk, till exempel Ionic, eller ett materialdesignbibliotek, efterliknar HTML och CSS inbyggda gränssnitt på Android eller iOS men det är inte obligatoriskt.När du gör PWA är det obligatoriskt att använda webbprestanda tekniker för att behålla en bra användarupplevelse.
När det gäller förmågor kommer en PWA endast att ha tillgång till API: er som är tillgängliga i webbläsarmotorn på den plattformen och det kan inte utökas med inbyggd kod - med undantag för appbutikens PWA-distributioner. I denna fråga är iOS och iPadOS de mer begränsade plattformarna för PWA, medan Chrome (för Android och stationära operativsystem) har mer tillgänglighet och jobbar hårt för att lägga till alla möjliga API till JavaScript med Fugu-projektet.
- Bästa molnlagring: Välj rätt alternativ för dig.
Reagera Native
Styrkor för React Native
- Samma mönster som med React.js
- Vissa webb-API: er är exponerade
- Webb- och skrivbordsstöd
Svagheter i React Native
- Det går inte att återanvända webbgränssnittskomponenter
- Den inbyggda bron behöver lite arbete
- Reagera erfarenhet behövs
React Native är en JavaScript-baserad komponentram med öppen källkod, sponsrad av Facebook, som använder React-designmönster samt JavaScript-språk för att sammanställa inbyggda appar för iOS, iPadOS och Android från en källkod.
Men inga HTML-element accepteras för rendering; endast andra inbyggda komponenter är giltiga. Därför istället för att göra en div> med en p> och en ingång> element med JSX, kommer du att göra en Visa> med en Text> och en Textinmatning>. För stylingkomponenter använder du fortfarande CSS och layouten definieras via Flexbox.
Användargränssnittet återges inte i webbläsarens DOM utan använder de inbyggda användargränssnittsbiblioteken på Android och iOS. Därför är en Knapp> i ReactNative blir en instans av UIButton på iOS och android.widget.Button klass på Android; det finns ingen webbkörning involverad i React Native.
Emellertid kommer all JavaScript-kod att köras i en virtuell JavaScript-maskin på enheten, så det finns ingen JavaScript till riktig inbyggd kodkonvertering när du kompilerar appen. Det finns en uppsättning välkända API: er för webbutvecklare, såsom Fetch API, WebSockets och webbläsarens timers: setInterval och requestAnimationFrame. Andra förmågor distribueras på plattformen via anpassade API: er, till exempel animationer.
Du kan starta ett snabbt React Native-projekt med två gratis CLI: Expo eller den mer avancerade och officiella ReactNative CLI. Om du använder den officiella CLI behöver du också Android Studio för att kompilera och testa Android-appen och Xcode för att göra detsamma på iOS och iPadOS, så du behöver en macOS-dator för den plattformen.
React Native sammanställer inbyggda appar för iOS och Android, vilket innebär att distributionen av din app följer samma regler som andra inbyggda appar: appbutiker för offentliga appar, företagsdistribution och alfa / beta-testning. Vanligtvis kan du inte distribuera en app via en webbläsare, även om React Native for Web och Microsofts React Native for Windows-plattformar kan hjälpa till.
NativeScript
Styrkor i NativeScript
- Bra verktyg för kodning och testning
- Omfattande galleri med appar redo att spela med
- Alla Android- och iOS-API: er är exponerade i JS
Svagheter i NativeScript
- Litet samhälle
- Det går inte att återanvända webbgränssnittskomponenter
- Inget webb-, skrivbords- eller React-stöd
NativeScript är inte lika känt som React Native men det konkurrerar inom samma område: inbyggda iOS- och Android-appar från JavaScript och webbramar. Det låter dig använda JavaScript eller TypeScript och en XML-användargränssnittsfil för att skapa inbyggda appar. Det stöder också Angular och Vue direkt ur lådan, så det är en bra lösning för utvecklare som är vana vid dessa ramar.
Fördelarna med NativeScript är tydligare när du använder Angular eller Vue. För Angular skapar du samma komponenter som du är vana vid men använder XML istället för HTML för mallen, inklusive alla databindningar. I XML, istället för a div> med en p> och en img>, kommer du att placera en StackLayout> med en Etikett> och en Bild> komponent.
CSS och Sass stöds med liknande stilar som CSS i webbläsaren. Routing och nätverkshantering görs genom implementeringar av standard Angular-tjänster. För Vue är det något liknande; du skriver mallen i XML istället för att använda HTML i samma mall> element i din .vue-fil.
NativeScript innehåller en samling komponenter som sedan mappas till en Android- eller iOS-native-kontroll, så när du gör en lista eller en plockare blir det den inbyggda appen med samma idé som i React Native.
Din JavaScript- eller TypeScript-kod (transpilerad) körs i en virtuell JavaScript-maskin på enheten med en bro till / från den ursprungliga miljön. I den bron exponeras hela inbyggda API: er från Android eller iOS / iPadOS så trots att vi har tillgång till plattforms-API: er kan vi starta eller ringa någon Java- eller Objective-C-kod från JavaScript / TypeScript och NativeScript kommer att samordna datatyper.
NativeScript har bra stöd för verktyg, inklusive VS-kod-plugins, CLI, ett testsystem för hot-reload och en NativeScript-lekplatsapp, så du behöver inte installera alla beroenden under testningen, samt flera ytterligare tjänster som en online lekplats.
Slutligen sammanställer NativeScript bara en app för Android och iOS som kan installeras från officiella distributionskanaler och appbutiker om du följer deras regler, företagsdistribution och alfa / beta-testning. Vanligtvis finns det inget sätt att distribuera appar från en webbläsare och det finns inga lösningar för stationära appar för denna plattform.
Denna artikel publicerades ursprungligen i nummer 325 of net, världens bästsäljande tidning för webbdesigners och utvecklare. köpa nummer 325 eller prenumerera till nätet.
Följ med oss i april 2020 med vårt sortiment av JavaScript-superstjärnor på GenerateJS - konferensen som hjälper dig att bygga bättre JavaScript. Boka nu pågenerateconf.com
