Tartalom
- PWA-k és natív alkalmazások: Mi a különbség?
- Progresszív webalkalmazások: Webépítés
- A PWA erősségei
- A PWA-k gyengeségei
- React Native
- A React Native erősségei
- A React Native gyengeségei
- NativeScript
- A NativeScript erősségei
- A NativeScript gyengeségei
Melyik megközelítést kell alkalmaznia az alkalmazás készítésekor? Ha a PWA / web technológiák útvonalát választaná, vagy natívan kellene elindulnia, és konkrét platformokra kellene terveznie? Mindkét lehetőségnek megvannak az előnyei és hátrányai, és ebben a cikkben néhány népszerű választásra összpontosítunk, amelyeket webes és natív alkalmazások létrehozásához használnak.
A PWA-k (Progressive Web Apps), azaz a webalkalmazások, népszerű HTML-technológiákkal, CSS-sel és JavaScript-sel készülnek, és webböngészőben működnek. (Nézzen meg néhány alapvető HTML-címkét, amelyek segítenek a buildjeiben.) A PWA-k gyakorlatilag olyan mobil webhelyek, amelyeket úgy alakítottak ki, hogy egy alkalmazásnak tűnjenek, és a webes API-k használata olyan funkciókat biztosít nekik, mint egy natív alkalmazás.
Az alkalmazásépítéssel kapcsolatos további tanácsokért olvassa el az alkalmazás készítésével kapcsolatos bejegyzésünket, vagy ha létrehozni kívánt webhelyről van szó, tekintse meg ezeket a legfontosabb webhely-építőket és webtárhely-szolgáltatásokat.
PWA-k és natív alkalmazások: Mi a különbség?
A progresszív webalkalmazásoknak az az előnye, hogy telepíthetők és egy eszközön élhetnek, anélkül, hogy alkalmazásboltra lenne szükségük. A folyamat része pedig a Webalkalmazások manifesztuma, amely lehetővé teszi a fejlesztők számára, hogy ellenőrizzék az alkalmazás megjelenését és indítását. Ezenkívül a webdesignereknek / az elülső fejlesztőknek már megvan a szükséges készségük az azonnali építkezés megkezdéséhez. A natív alkalmazásoktól eltérően nincs szükség új nyelv megtanulására.
A natív alkalmazások egy adott operációs rendszert szem előtt tartva készülnek - pl. iOS és Android - és keretet vagy nyelvet használjon ennek a célnak a teljesítéséhez. Az iOS alkalmazások általában Xcode vagy Swift, illetve Android alkalmazások, JavaScript használatát használják. Ehhez a cikkhez azonban néhány JavaScript-alapú, nyílt forráskódú keretrendszerre összpontosítunk - a React Native és a NativeScript - amelyek mindkét platformon működnek.
A natív alkalmazások előnye, hogy jellemzően jobb funkcionalitást hoznak, mivel jobban használják ki az eszközök hardverét és szoftverét, gyorsabbak és érzékenyebbek, és minőségbiztosítást kapnak az értékelések ellenére az alkalmazásboltokban. De ez azt jelenti, hogy meg kell tanulnunk egy adott keretrendszer vagy könyvtár használatát.
Itt három különböző lehetőséget nézünk meg - egyet a webes (PWA) és kettőt a natív (React Native, NativeScript) számára - egy alkalmazás felépítéséhez. Bemutatjuk, hogyan működnek, mit tehetnek, és megvizsgáljuk erősségeiket és gyengeségeiket, hogy segítsünk eldönteni, melyik lehetőséget választja az alkalmazás felépítéséhez.
Progresszív webalkalmazások: Webépítés
A PWA erősségei
- Az alkalmazások a böngészőben is működnek
- Forgalmazás: böngésző, vállalati és alkalmazásboltok
- Használhatja a React, Angular, Vue, vanilla vagy más kereteket
A PWA-k gyengeségei
- Nincs hozzáférés minden natív API-hoz
- Korlátozottak a képességek és az áruházak terjesztése az iOS és iPadOS rendszereken
- Folyamatosan fejlődik
A PWA-k a jelenlegi tervezési minták, amelyek nagy teljesítményű, offline, telepíthető alkalmazásokat hoznak létre csak a webverem segítségével: HTML, CSS, JavaScript és a böngészők API-jai. A szolgáltató munkatársának és a webalkalmazás-nyilvántartási specifikációinak köszönhetően most első osztályú alkalmazás-élményt teremthetünk az Android, iOS, iPadOS, Windows, macOS, Chrome OS és Linux telepítése után.
PWA létrehozásához bármilyen architektúrát használhat: szerveroldali, vanilla JavaScript, React, Vue, Angular vagy más kliensoldali keretrendszerektől. Ez lehet egyoldalas vagy többoldalas webalkalmazás, és meghatározzuk, hogyan fogjuk támogatni a felhasználókat offline állapotban.
Ebben a megközelítésben nem kell csomagolnunk és aláírnunk az alkalmazás erőforrásait: csak a fájlokat tároljuk egy webszerveren, és a szerviz dolgozó felelős lesz a fájlok gyorsítótárba helyezéséért az ügyfélben, és a telepítés után kiszolgálja őket. Ez azt is jelenti, hogy ha egy alkalmazás frissítésre szorul, akkor csak meg kell változtatnia a fájlokat a kiszolgálón, és a szolgáltató logikája felelős lesz a felhasználók eszközén történő frissítéséért a felhasználó vagy az alkalmazásbolt beavatkozása nélkül.
A terjesztés szempontjából a leggyakoribb módszer a böngésző. A felhasználók az alkalmazást a böngészőből telepítik a Hozzáadás a kezdőképernyőhöz vagy a Telepítés menüpont használatával, meghívás elfogadásával a telepítéshez vagy egyéni webalkalmazás felhasználói felület használatával kompatibilis platformokon. Érdemes megjegyezni, hogy az Apple elutasítja az App Store-ban közzétett tiszta PWA-kat, és arra ösztönzi a webfejlesztőket, hogy terjesszék azokat a Safari-n keresztül.
A felhasználói felületet kizárólag a web futásideje kezeli, ami azt jelenti, hogy a web-tervező felelős az egyes vezérlők megjelenítéséért a képernyőn. Ha felhasználói felületet (például Ionic) vagy Anyagtervezési könyvtárat használ, a HTML és a CSS utánozza a natív interfészeket Android vagy iOS rendszeren, de ez nem kötelező.PWA-k végrehajtásakor a webes teljesítménytechnikák alkalmazása kötelező a jó felhasználói élmény megőrzése érdekében.
Ami a képességeket illeti, a PWA csak az adott platform böngészőmotorjában elérhető API-khoz férhet hozzá, és nem bővíthető natív kóddal - az alkalmazásbolt PWA terjesztéseinek kivételével. Ebben a kérdésben az iOS és az iPadOS a korlátozottabb platform a PWA-k számára, míg a Chrome (Android és asztali operációs rendszerekhez) nagyobb rendelkezésre állással rendelkezik, és keményen dolgozik, hogy minden lehetséges API-t hozzáadjon a JavaScript-hez a Fugu projekttel.
- A legjobb felhőtárolás: Válassza ki a megfelelő lehetőséget.
React Native
A React Native erősségei
- Ugyanazok a minták, mint a React.js-nél
- Egyes webes API-k ki vannak téve
- Webes és asztali támogatás
A React Native gyengeségei
- A webes felhasználói felület összetevőit nem lehet újra felhasználni
- A bennszülött hídnak kell némi munka
- Reagálási tapasztalatra van szükség
A React Native egy nyílt forráskódú JavaScript-alapú komponens keretrendszer, amelyet a Facebook szponzorál, és amely a React tervezési mintákat, valamint a JavaScript nyelvét használja az iOS, iPadOS és Android natív alkalmazások összeállításához egy forráskódból.
A megjelenítéshez azonban nem fogadunk el HTML elemeket; csak más natív komponensek érvényesek. Ezért ahelyett, hogy a div> val,-vel p> és a bemenet> elemet a JSX-sel, akkor a Nézet> val,-vel Szöveg> és a Szövegbevitel>. Stíluskomponensekhez továbbra is CSS-t használ, és az elrendezést a Flexbox segítségével határozza meg.
A felhasználói felület nem jelenik meg a böngésző DOM-ban, de az Android és iOS operációs rendszer natív felhasználói felületeinek könyvtárát használja. Ezért a Gomb> a ReactNative-ben az UIButton példánya lesz az iOS-en és a android.widget.Button osztály Androidon; a React Native nem tartalmaz webes futást.
Mindazonáltal az összes JavaScript-kód egy eszközön lévő JavaScript virtuális gépben fog végrehajtódni, így az alkalmazás összeállításakor nincs JavaScript-val valós natív kódkonverzió. Van egy sor jól ismert API a webfejlesztők számára, például a Fetch API, a WebSockets és a böngésző időzítői: setInterval és requestAnimationFrame. Egyéb képességeket egyéni API-k, például animációk segítségével telepítenek a platformon.
Elindíthat egy gyors React Native projektet két ingyenes CLI-vel: Expo vagy a fejlettebb és hivatalos ReactNative CLI. Ha a hivatalos CLI-t használja, akkor az Android Stúdióra is szüksége van az Android alkalmazás és az Xcode összeállításához és teszteléséhez, hogy ugyanezt tegye iOS és iPadOS rendszereken is, ezért MacOS számítógépre lesz szüksége ehhez a platformhoz.
A React Native natív alkalmazásokat állít össze iOS-re és Android-ra, ami azt jelenti, hogy az alkalmazás terjesztése ugyanazokat a szabályokat fogja követni, mint a többi natív alkalmazás: nyilvános alkalmazások alkalmazásboltjai, vállalati terjesztés és alfa / béta tesztelés. Általában nem terjeszthet egy alkalmazást böngészőn keresztül, bár a React Native for Web és a Microsoft React Native for Windows platformjai segíthetnek.
NativeScript
A NativeScript erősségei
- Jó eszközök a kódoláshoz és a teszteléshez
- Kiterjedt galéria alkalmazásokkal, amelyek készen állnak a játékra
- Az összes Android és iOS API elérhető a JS-ben
A NativeScript gyengeségei
- Kis közösség
- A webes felhasználói felület összetevőit nem lehet újra felhasználni
- Nincs webes, asztali vagy React támogatás
A NativeScript nem annyira ismert, mint a React Native, de ugyanazon a területen versenyez: natív iOS és Android alkalmazások JavaScriptből és webkeretekből. Lehetővé teszi a JavaScript vagy a TypeScript és egy XML felhasználói felület fájl használatát natív alkalmazások létrehozásához. A dobozon kívül támogatja az Angular és a Vue szoftvert is, így remek megoldás az ilyen keretekhez szokott fejlesztők számára.
A NativeScript előnyei egyértelműbbek, ha az Angular vagy a Vue programot használja. Az Angular esetében ugyanazokat az összetevőket hozza létre, amelyekhez szokott, de a sablonhoz HTML helyett XML-t használ, beleértve az összes adat-összerendelést. Az XML-ben az a helyett div> val,-vel p> és egy img>, akkor elhelyez egy StackLayout> val,-vel Címke> és egy Kép> összetevő.
A CSS és a Sass a böngészőben található CSS-hez hasonló stílusokkal támogatott. Az útválasztás és a hálózatkezelés a standard Angular szolgáltatások megvalósításával történik. Vue számára ez valami hasonló; a sablont XML-be írja, ahelyett, hogy HTML-t használna ugyanabban sablon> elem a .vue fájlban.
A NativeScript összetevők gyűjteményét tartalmazza, amelyek azután egy Android vagy iOS natív vezérlőhöz vannak hozzárendelve, így amikor egy listát vagy egy kiválasztót renderel, akkor az a natív alkalmazás lesz, ugyanazzal az ötlettel, mint a React Native-ban.
A JavaScript vagy a TypeScript kódot (átültetve) egy eszközön lévő JavaScript virtuális gépben hajtják végre, amelynek hídja van a natív környezetbe. Ebben a hídban az Android vagy az iOS / iPadOS teljes natív API-i vannak kitéve, így annak ellenére, hogy hozzáférünk a platformokon átívelő API-khoz, bármely Java vagy Objective-C kódot példányosíthatunk vagy meghívhatunk a JavaScript / TypeScript-ből, a NativeScript pedig át fogja adni az adattípusokat.
A NativeScript nagyszerű támogatást nyújt az eszközökhöz, beleértve a VS-kód beépülő modulokat, a CLI-t, a hot-reload tesztelő rendszert és a NativeScript játszótér alkalmazást, így tesztelés közben nem kell telepítenie az összes függőséget, valamint számos további szolgáltatást, például egy online játszótér.
Végül a NativeScript csak akkor állít össze olyan alkalmazást Androidra és iOS-re, amelyet a hivatalos terjesztési csatornákról és alkalmazásboltokból lehet telepíteni, ha betartja azok szabályait, a vállalati terjesztést és az alfa / béta tesztelést. Általában nem lehet terjeszteni az alkalmazásokat egy böngészőből, és erre a platformra nincsenek megoldások az asztali alkalmazások számára.
Ezt a cikket eredetileg itt tették közzé 325. szám of net, a világ legkeresettebb weblaptervezők és -fejlesztők magazinja. megvesz 325. szám vagy Iratkozz fel netezni.
Csatlakozzon hozzánk 2020 áprilisában a JavaScript szupersztárok kínálatával a GenerateJS-en - a konferencián, amely segít a jobb JavaScript felépítésében. Foglaljon most itt:generateconf.com
