Περιεχόμενο
- PWAs έναντι εγγενών εφαρμογών: Ποια είναι η διαφορά;
- Προοδευτικές εφαρμογές ιστού: Δημιουργία ιστοσελίδων
- Πλεονεκτήματα των PWA
- Αδυναμίες των PWA
- Αντιδράστε εγγενείς
- Πλεονεκτήματα του React Native
- Αδυναμίες του React Native
- Εγγενής γραφή
- Πλεονεκτήματα του NativeScript
- Αδυναμίες NativeScript
Ποια προσέγγιση πρέπει να ακολουθήσετε κατά τη δημιουργία μιας εφαρμογής; Πρέπει να ακολουθήσετε τη διαδρομή τεχνολογιών PWA / Ιστού ή θα πρέπει να πάτε εγγενείς και να σχεδιάσετε συγκεκριμένες πλατφόρμες; Και οι δύο επιλογές έχουν τα πλεονεκτήματα και τα μειονεκτήματά τους, και σε αυτό το άρθρο επικεντρωνόμαστε σε μερικές από τις δημοφιλείς επιλογές που χρησιμοποιούνται για τη δημιουργία ιστού και εγγενών εφαρμογών.
Οι PWA (Progressive Web Apps) γνωστές και ως εφαρμογές ιστού, είναι κατασκευασμένες με δημοφιλείς τεχνολογίες ιστού HTML, CSS και JavaScript και λειτουργούν σε ένα πρόγραμμα περιήγησης ιστού. (Ελέγξτε μερικές από τις βασικές ετικέτες HTML για να βοηθήσετε στις εκδόσεις σας.) Οι PWA είναι αποτελεσματικά ιστότοποι για κινητές συσκευές που έχουν σχεδιαστεί για να μοιάζουν με μια εφαρμογή και η χρήση API Ιστού τους δίνει λειτουργικότητα παρόμοια με μια εγγενή εφαρμογή.
Για περισσότερες συμβουλές σχετικά με τη δημιουργία εφαρμογών, ανατρέξτε στην ανάρτησή μας σχετικά με τον τρόπο δημιουργίας μιας εφαρμογής ή εάν πρόκειται για ιστότοπο που θέλετε να δημιουργήσετε, δείτε αυτούς τους κορυφαίους κατασκευαστές ιστότοπων και υπηρεσίες φιλοξενίας ιστοσελίδων.
PWAs έναντι εγγενών εφαρμογών: Ποια είναι η διαφορά;
Οι Προοδευτικές Εφαρμογές Ιστού έχουν το πλεονέκτημα ότι μπορούν να εγκατασταθούν και να ζουν σε μια συσκευή χωρίς την ανάγκη για ένα κατάστημα εφαρμογών. Και, μέρος της διαδικασίας είναι το Web App Manifest, το οποίο επιτρέπει στους προγραμματιστές να ελέγχουν τον τρόπο εμφάνισης μιας εφαρμογής και τον τρόπο εκκίνησης. Επίσης, οι σχεδιαστές ιστοσελίδων / προγραμματιστές διεπαφών θα έχουν ήδη το απαιτούμενο σύνολο δεξιοτήτων για να ξεκινήσουν να χτίζουν αμέσως. Δεν χρειάζεται να μάθετε μια νέα γλώσσα, σε αντίθεση με τις εγγενείς εφαρμογές.
Οι εγγενείς εφαρμογές έχουν δημιουργηθεί με γνώμονα ένα συγκεκριμένο λειτουργικό σύστημα - δηλαδή. iOS και Android - και χρησιμοποιήστε ένα πλαίσιο ή γλώσσα για να εκπληρώσετε αυτόν τον σκοπό. Οι εφαρμογές iOS χρησιμοποιούν συνήθως Xcode ή Swift, και εφαρμογές Android, JavaScript. Ωστόσο, για αυτό το άρθρο επικεντρωνόμαστε σε μερικά πλαίσια ανοιχτού κώδικα που βασίζονται σε JavaScript - React Native και NativeScript - που λειτουργούν και για τις δύο πλατφόρμες.
Τα πλεονεκτήματα των εγγενών εφαρμογών είναι ότι συνήθως προσφέρουν καλύτερη λειτουργικότητα καθώς κάνουν καλύτερη χρήση ενός υλικού και λογισμικού συσκευών, είναι ταχύτερα και πιο ανταποκρινόμενα και λαμβάνετε διασφάλιση ποιότητας μέσω αξιολογήσεων στα καταστήματα εφαρμογών. Όμως, αυτό σημαίνει ότι πρέπει να μάθετε πώς να χρησιμοποιείτε ένα συγκεκριμένο πλαίσιο ή βιβλιοθήκη.
Εδώ εξετάζουμε τρεις διαφορετικές επιλογές - μία για τον ιστό (PWA) και δύο για την εγγενή (React Native, NativeScript) - για τη δημιουργία μιας εφαρμογής. Εξετάζουμε τον τρόπο λειτουργίας τους, τι μπορούν να κάνουν και εξετάζουμε τα πλεονεκτήματα και τις αδυναμίες τους για να σας βοηθήσουμε να αποφασίσετε ποια επιλογή πρέπει να επιλέξετε για να δημιουργήσετε την εφαρμογή σας.
Προοδευτικές εφαρμογές ιστού: Δημιουργία ιστοσελίδων
Πλεονεκτήματα των PWA
- Οι εφαρμογές λειτουργούν επίσης στο πρόγραμμα περιήγησης
- Διανομή: προγράμματα περιήγησης, επιχειρήσεις και καταστήματα εφαρμογών
- Μπορεί να χρησιμοποιήσει React, Angular, Vue, βανίλια ή άλλα πλαίσια
Αδυναμίες των PWA
- Δεν υπάρχει πρόσβαση σε κάθε εγγενές API
- Οι δυνατότητες και η διανομή καταστημάτων σε iOS και iPadOS είναι περιορισμένες
- Είναι σε συνεχή εξέλιξη
Τα PWA είναι το τρέχον μοτίβο σχεδιασμού για τη δημιουργία εφαρμογών υψηλής απόδοσης, χωρίς σύνδεση, με δυνατότητα εγκατάστασης χρησιμοποιώντας μόνο τη στοίβα ιστού: HTML, CSS, JavaScript και API προγραμμάτων περιήγησης. Χάρη στο service service και τις προδιαγραφές δήλωσης της εφαρμογής ιστού, μπορούμε πλέον να δημιουργήσουμε μια εμπειρία εφαρμογής πρώτης κατηγορίας μετά την εγκατάσταση για Android, iOS, iPadOS, Windows, macOS, Chrome OS και Linux.
Για να δημιουργήσετε PWA, μπορείτε να χρησιμοποιήσετε οποιαδήποτε αρχιτεκτονική: από διακομιστή, βανίλια JavaScript, React, Vue, Angular ή άλλα πλαίσια πελάτη. Μπορεί να είναι μια εφαρμογή μιας σελίδας ή μια εφαρμογή ιστού πολλαπλών σελίδων και καθορίζουμε πώς θα υποστηρίξουμε τους χρήστες ενώ είστε εκτός σύνδεσης.
Σε αυτήν την προσέγγιση, δεν χρειάζεται να συσκευάσουμε και να υπογράψουμε τους πόρους της εφαρμογής μας: φιλοξενούμε απλώς τα αρχεία σε έναν διακομιστή ιστού και ο υπεύθυνος υπηρεσίας θα είναι υπεύθυνος για την προσωρινή αποθήκευση των αρχείων στον πελάτη και θα τα εξυπηρετεί μετά την εγκατάσταση. Αυτό σημαίνει επίσης ότι εάν μια εφαρμογή χρειάζεται ενημέρωση, αλλάζετε απλά τα αρχεία στον διακομιστή και η λογική του εργαζόμενου της υπηρεσίας θα είναι υπεύθυνη για την ενημέρωσή τους σε συσκευές χρηστών χωρίς παρέμβαση χρήστη ή καταστήματος εφαρμογών.
Όσον αφορά τη διανομή, η πιο κοινή μέθοδος είναι το πρόγραμμα περιήγησης. Οι χρήστες εγκαθιστούν την εφαρμογή από το πρόγραμμα περιήγησης χρησιμοποιώντας το στοιχείο μενού Προσθήκη στην αρχική οθόνη ή εγκατάσταση, αποδεχόμενοι μια πρόσκληση για εγκατάσταση ή χρησιμοποιώντας μια προσαρμοσμένη διεπαφή χρήστη εφαρμογής ιστού σε συμβατές πλατφόρμες. Αξίζει να σημειωθεί ότι η Apple απορρίπτει καθαρά PWA που δημοσιεύονται στο App Store και ενθαρρύνει τους προγραμματιστές ιστού να το διανείμουν μέσω του Safari.
Η διεπαφή χρήστη διαχειρίζεται αποκλειστικά τον χρόνο εκτέλεσης του ιστού, που σημαίνει ότι ο σχεδιαστής ιστοσελίδων είναι υπεύθυνος για την απόδοση κάθε ελέγχου στην οθόνη. Εάν χρησιμοποιείτε ένα πλαίσιο διεπαφής χρήστη, όπως το Ionic ή μια βιβλιοθήκη υλικών σχεδίασης, τα HTML και CSS θα μιμούνται εγγενείς διεπαφές σε Android ή iOS, αλλά δεν είναι υποχρεωτικό.Όταν κάνετε PWA, η εφαρμογή τεχνικών απόδοσης ιστού είναι υποχρεωτική για να διατηρήσετε μια καλή εμπειρία χρήστη.
Όσον αφορά τις δυνατότητες, ένα PWA θα έχει πρόσβαση μόνο σε API που είναι διαθέσιμα στη μηχανή του προγράμματος περιήγησης σε αυτήν την πλατφόρμα και δεν μπορεί να επεκταθεί με εγγενή κώδικα - με εξαίρεση τις διανομές PWA app store. Σε αυτό το θέμα, το iOS και το iPadOS είναι οι πιο περιορισμένες πλατφόρμες για PWA, ενώ το Chrome (για λειτουργικά συστήματα Android και επιτραπέζιου υπολογιστή) έχει περισσότερη διαθεσιμότητα και εργάζεται σκληρά για να προσθέσει κάθε δυνατό API στο JavaScript με το έργο Fugu.
- Καλύτερη αποθήκευση cloud: Ορίστε τη σωστή επιλογή για εσάς.
Αντιδράστε εγγενείς
Πλεονεκτήματα του React Native
- Ίδια μοτίβα με το React.js
- Ορισμένα API ιστού είναι εκτεθειμένα
- Υποστήριξη Ιστού και επιτραπέζιου υπολογιστή
Αδυναμίες του React Native
- Δεν είναι δυνατή η επαναχρησιμοποίηση στοιχείων UI ιστού
- Η μητρική γέφυρα χρειάζεται κάποια δουλειά
- Απαιτείται εμπειρία αντίδρασης
Το React Native είναι ένα πλαίσιο στοιχείων ανοιχτού κώδικα που βασίζεται σε JavaScript, που χρηματοδοτείται από το Facebook, το οποίο χρησιμοποιεί μοτίβα σχεδιασμού React, καθώς και γλώσσα JavaScript για τη συλλογή εγγενών εφαρμογών για iOS, iPadOS και Android από έναν πηγαίο κώδικα.
Αλλά δεν γίνονται αποδεκτά στοιχεία HTML για απόδοση. ισχύουν μόνο άλλα εγγενή στοιχεία. Επομένως, αντί της απόδοσης a div> με ρ> και ένα εισαγωγή> στοιχείο με JSX, θα αποδίδετε ένα Προβολή> με Κείμενο> και ένα Εισαγωγή κειμένου>. Για στοιχεία στυλ, εξακολουθείτε να χρησιμοποιείτε CSS και η διάταξη ορίζεται μέσω του Flexbox.
Η διεπαφή χρήστη δεν θα αποδίδεται στο DOM ενός προγράμματος περιήγησης, αλλά χρησιμοποιώντας τις εγγενείς βιβλιοθήκες διεπαφής χρήστη σε Android και iOS. Επομένως, α Κουμπί> στο ReactNative θα γίνει μια παρουσία του UIButton σε iOS και το android.widget.Button τάξη σε Android? Δεν υπάρχει χρόνος εκτέλεσης ιστού στο React Native.
Ωστόσο, όλος ο κώδικας JavaScript θα εκτελεστεί σε μια εικονική μηχανή JavaScript στη συσκευή, επομένως δεν υπάρχει μετατροπή JavaScript σε πραγματικό εγγενή κώδικα κατά τη σύνταξη της εφαρμογής. Υπάρχει ένα σύνολο γνωστών API για προγραμματιστές ιστού, όπως το Fetch API, το WebSockets και τα χρονόμετρα του προγράμματος περιήγησης: setInterval και requestAnimationFrame. Άλλες ικανότητες αναπτύσσονται στην πλατφόρμα μέσω προσαρμοσμένων API, όπως κινούμενα σχέδια.
Μπορείτε να ξεκινήσετε ένα γρήγορο έργο React Native με δύο δωρεάν CLIs: Expo ή το πιο προηγμένο και επίσημο ReactNative CLI. Εάν χρησιμοποιείτε το επίσημο CLI, χρειάζεστε επίσης το Android Studio για να μεταγλωττίσετε και να δοκιμάσετε την εφαρμογή Android και το Xcode για να κάνετε το ίδιο σε iOS και iPadOS, οπότε θα χρειαστείτε έναν υπολογιστή macOS για αυτήν την πλατφόρμα.
Το React Native μεταγλωττίζει εγγενείς εφαρμογές για iOS και Android, πράγμα που σημαίνει ότι η διανομή της εφαρμογής σας θα ακολουθεί τους ίδιους κανόνες με άλλες εγγενείς εφαρμογές: καταστήματα εφαρμογών για δημόσιες εφαρμογές, διανομή επιχειρήσεων και δοκιμές alpha / beta. Συνήθως, δεν μπορείτε να διανείμετε μια εφαρμογή μέσω ενός προγράμματος περιήγησης, αν και οι πλατφόρμες React Native for Web και React Native για Windows της Microsoft μπορούν να βοηθήσουν.
Εγγενής γραφή
Πλεονεκτήματα του NativeScript
- Καλά εργαλεία για κωδικοποίηση και δοκιμή
- Εκτεταμένη γκαλερί εφαρμογών έτοιμων για αναπαραγωγή
- Όλα τα API Android και iOS εκτίθενται σε JS
Αδυναμίες NativeScript
- Μικρή κοινότητα
- Δεν είναι δυνατή η επαναχρησιμοποίηση στοιχείων UI ιστού
- Δεν υπάρχει υποστήριξη Ιστού, επιτραπέζιου υπολογιστή ή React
Το NativeScript δεν είναι τόσο γνωστό όσο το React Native, αλλά ανταγωνίζεται στον ίδιο τομέα: εγγενείς εφαρμογές iOS και Android από JavaScript και πλαίσια ιστού. Σας επιτρέπει να χρησιμοποιήσετε JavaScript ή TypeScript και ένα αρχείο διεπαφής χρήστη XML για τη δημιουργία εγγενών εφαρμογών. Υποστηρίζει επίσης Angular και Vue απευθείας από το κουτί, οπότε είναι μια εξαιρετική λύση για προγραμματιστές που χρησιμοποιούνται σε αυτά τα πλαίσια.
Τα πλεονεκτήματα του NativeScript είναι σαφέστερα όταν χρησιμοποιείτε Angular ή Vue. Για το Angular, δημιουργείτε τα ίδια στοιχεία που έχετε συνηθίσει, αλλά χρησιμοποιείτε XML αντί για HTML για το πρότυπο, συμπεριλαμβανομένων όλων των δεσμεύσεων δεδομένων. Στο XML, αντί για ένα div> με ρ> και ένα img>, θα τοποθετήσετε ένα StackLayout> με Ετικέτα> και ένα Εικόνα> συστατικό.
Τα CSS και Sass υποστηρίζονται με παρόμοια στυλ με το CSS στο πρόγραμμα περιήγησης. Η δρομολόγηση και η διαχείριση του δικτύου γίνονται μέσω υλοποιήσεων των τυπικών γωνιακών υπηρεσιών. Για τον Vue, είναι κάτι παρόμοιο. γράφετε το πρότυπο σε XML αντί να χρησιμοποιείτε HTML στο ίδιο πρότυπο> στοιχείο στο αρχείο .vue.
Το NativeScript περιλαμβάνει μια συλλογή στοιχείων που στη συνέχεια αντιστοιχίζονται σε εγγενές στοιχείο ελέγχου Android ή iOS, οπότε όταν αποδίδετε μια λίστα ή ένα εργαλείο επιλογής, θα είναι η εγγενής εφαρμογή, χρησιμοποιώντας την ίδια ιδέα όπως στο React Native.
Ο κώδικας JavaScript ή TypeScript (μεταγλωττισμένος) εκτελείται σε μια εικονική μηχανή JavaScript μιας συσκευής με γέφυρα προς / από το φυσικό περιβάλλον. Σε αυτήν τη γέφυρα, εκτίθενται ολόκληρα τα εγγενή API από Android ή iOS / iPadOS, οπότε παρά την πρόσβαση σε API πολλαπλών πλατφορμών, μπορούμε να δημιουργήσουμε ή να καλέσουμε οποιονδήποτε κώδικα Java ή Objective-C από JavaScript / TypeScript και το NativeScript θα ανακαλύψει τύπους δεδομένων.
Το NativeScript έχει εξαιρετική υποστήριξη για εργαλεία, συμπεριλαμβανομένων των προσθηκών κώδικα VS, του CLI, ενός συστήματος δοκιμών επανάληψης φόρτωσης και μιας εφαρμογής NativeScript playground, οπότε δεν χρειάζεται να εγκαταστήσετε όλες τις εξαρτήσεις κατά τη δοκιμή, καθώς και αρκετές πρόσθετες υπηρεσίες, όπως ένα διαδικτυακό παιδική χαρά.
Τέλος, το NativeScript συντάσσει μόνο μια εφαρμογή για Android και iOS, η οποία μπορεί να εγκατασταθεί από επίσημα κανάλια διανομής και καταστήματα εφαρμογών, εάν συμμορφώνεστε με τους κανόνες τους, την εταιρική διανομή και τις δοκιμές alpha / beta. Συνήθως δεν θα υπάρχει τρόπος διανομής εφαρμογών από πρόγραμμα περιήγησης και δεν υπάρχουν λύσεις για εφαρμογές για επιτραπέζιους υπολογιστές για αυτήν την πλατφόρμα.
Αυτό το άρθρο δημοσιεύθηκε αρχικά στις τεύχος 325 του net, το περιοδικό με τις μεγαλύτερες πωλήσεις στον κόσμο για σχεδιαστές και προγραμματιστές ιστοσελίδων. Αγορά τεύχος 325 ή Εγγραφείτε στο δίχτυ.
Ελάτε μαζί μας τον Απρίλιο του 2020 με τη σειρά των σούπερ σταρ JavaScript στο GenerateJS - το συνέδριο που θα σας βοηθήσει να δημιουργήσετε καλύτερα JavaScript. Κάντε κράτηση τώρα στιςgenerateconf.com
