Βέλτιστες πρακτικές για τη δημιουργία αντιφατικών εφαρμογών - Μέρος 1

Εικόνα 1: Αφηρημένη εικόνα με λογότυπο React

Αν είστε νέοι στον κόσμο του React Native, υπάρχουν κάποιες παγίδες που ίσως θέλετε να αποφύγετε, ενώ σε ορισμένες άλλες περιπτώσεις θα πρέπει να κάνετε επιλογές εκ των προτέρων ίσως χωρίς να ξέρετε πόσο σημαντικό είναι.

Παρακάτω έχω καταρτίσει μια λίστα με τις καλύτερες πρακτικές από την προσωπική μου εμπειρία, την οποία ελπίζω ότι θα βρείτε χρήσιμες :-)

Χρησιμοποιήστε το Expo-Kit μόνο αν γνωρίζετε ακριβώς τι κάνετε

Η Expo είναι μια ελεύθερη και ανοιχτή αλυσίδα εργαλείων για το React Native. Είναι ίσως το καλύτερο κιτ για εφαρμογές React Native, αλλά έρχεται με περιορισμούς.

Χρησιμοποιήστε το Expo:

  • Αν θέλετε μια γρήγορη παιδική χαρά και να μην δημιουργήσετε το χώρο αποθήκευσης της εφαρμογής σας. Απλά δημιουργήστε μια νέα εφαρμογή με τη βοήθεια του πακέτου δημιουργίας-αντίδρασης-native-app.
  • Εάν έχετε κάνει εκτεταμένη έρευνα για την εφαρμογή που πρόκειται να χτίσετε και όλες οι απαιτήσεις της μπορούν να καλυφθούν από τις προσφερόμενες λύσεις της Expo.
  • Εάν δεν διαθέτετε υπολογιστή Mac και θέλετε να δημιουργήσετε την εφαρμογή σας και για το iPhone. Είναι η μόνη εναλλακτική λύση για την οικοδόμηση εκτελεστικών IPA.

Μην χρησιμοποιείτε την Expo:

  • Εάν είστε νέοι στο React Native και νομίζετε ότι αυτός είναι ο τρόπος "πρέπει" να πάτε. Ελέγξτε αν ανταποκρίνεται στις ανάγκες σας πρώτα.
  • Εάν σχεδιάζετε να χρησιμοποιήσετε πακέτα RN τρίτου μέρους που έχουν προσαρμοσμένες φυσικές μονάδες. Η Expo δεν υποστηρίζει αυτή τη λειτουργία και στην περίπτωση αυτή, θα πρέπει να εκτοξεύσετε το Expo-Kit. Κατά τη γνώμη μου, αν πρόκειται να βγάλετε οποιοδήποτε κιτ, μην το χρησιμοποιήσετε στην πρώτη θέση. Θα κάνει πιθανώς τα πράγματα πιο δύσκολα από ό, τι αν δεν χρησιμοποιούσατε το κιτ καθόλου.

Γενικά πιστεύω ότι το Expo είναι ένα εξαιρετικό εργαλείο και χρησιμοποιώ το Expo Snack για να μοιραστώ αποσπάσματα κώδικα RN. Αλλά αυτή τη στιγμή μπορεί να βοηθήσει μόνο για την κατασκευή ορισμένων τύπων εφαρμογών.

Πώς να διαμορφώσετε τους φακέλους / τα αρχεία της εφαρμογής σας

Η διάρθρωση της διδασκαλίας της εφαρμογής Αντανακλαστική εφαρμογή δεν διαφέρει από τη διάρθρωση της εφαρμογής σας React. Έτσι, αν είστε εξοικειωμένοι με αυτό, μπορείτε να κολλήσετε με την υπάρχουσα λογική σας. Αλλά αν δεν είστε, ίσως θα βρείτε χρήσιμη τη λογική που προτείνεται παρακάτω:

Εικόνα 2: Δομή αρχείου / φακέλου για εφαρμογή Reactive Native
  • Προσθέστε ένα φάκελο στη ρίζα που ονομάζεται "app"
  • Δημιουργία φακέλων μέσα στην εφαρμογή:

περιουσιακά στοιχεία - χρησιμοποιώ έως και 3 φακέλους εδώ: γραμματοσειρές, εικονίδια και εικόνες

εξαρτήματα - Εδώ θα τοποθετήσετε όλα τα κοινόχρηστα στοιχεία React. Συνήθως αυτά τα στοιχεία είναι αυτά που ονομάζουμε "dummy", που δεν έχουν λογική κατάσταση και μπορούν να επαναχρησιμοποιηθούν εύκολα σε ολόκληρη την εφαρμογή.

προβολές - Αυτές είναι οι οθόνες εφαρμογών μας, αυτές που πλοηγούμε από το ένα στο άλλο. Αυτά είναι επίσης συστατικά React, αλλά είναι αυτά που ονομάζουμε δοχεία, επειδή περιέχουν τη δική τους κατάσταση.

modules - Υπάρχουν κομμάτια που δεν έχουν αντίστοιχο τμήμα προβολής (JSX). Τυπικά παραδείγματα είναι η ενότητα χρωμάτων (περιέχει όλα τα χρώματα εφαρμογών) και τη λειτουργική μονάδα utils (περιέχει λειτουργίες χρησιμότητας που επαναχρησιμοποιούνται).

υπηρεσίες - Αυτές είναι οι λειτουργίες που καλύπτουν τις κλήσεις API.

i18n - Αυτές είναι οι μεταφραστικές συμβολοσειρές για χρήστες διαφορετικής γλώσσας και τοπικής γλώσσας

Όλες οι εφαρμογές απαιτούν κάποιο τύπο ρύθμισης παραμέτρων, οπότε συνήθως δημιουργώ ένα αρχείο που ονομάζεται config.js και το έβαλα εκεί. Εάν το αρχείο ρυθμίσεων φτάσει σε πολλές γραμμές, τότε μπορούμε να δημιουργήσουμε ένα φάκελο config και να διαχωρίσουμε το config στα αρχεία.

Εάν διαθέτετε βιβλιοθήκη κρατικού διαχειριστή, θα χρειαστείτε επίσης φακέλους για τις δομές του. Στην περίπτωση του Redux, χρησιμοποιούνται 2 άλλοι φάκελοι, ένας για δράσεις και ένας για μειωτήρες. Αν δεν χρησιμοποιείτε εξωτερικό πακέτο και προτιμάτε να χρησιμοποιήσετε το API Context's Context, θα δημιουργήσετε τους δικούς σας παροχείς, οι οποίοι μπορούν να τοποθετηθούν είτε σε φάκελο μονάδων είτε σε νέο φάκελο που ονομάζεται παροχέας.

Επιλέξτε μια βιβλιοθήκη πλοήγησης σύμφωνα με τις ανάγκες σας από την αρχή

Δυστυχώς, το RN δεν έχει παράσχει ακόμη μια σταθερή λύση ή ακόμα και αντικατάσταση του παλαιού στοιχείου Navigator, επομένως εστιάζουμε τώρα στις λύσεις της κοινότητας. Έτσι, αν πρόκειται να ξεκινήσετε ένα έργο, θέλετε να μάθετε ποια βιβλιοθήκη πλοήγησης θα χρησιμοποιήσετε και αν θα είναι η σωστή για εσάς.

Συνολικά υπάρχουν δύο τύποι βιβλιοθηκών πλοήγησης. Οι πλοηγούς JavaScript και οι εγγενείς πλοηγούς. Οι χαρακτήρες JavaScript γράφονται στο JavaScript, ενώ οι εγγενείς είναι γραμμένες ως φυσικές μονάδες της αντίστοιχης πλατφόρμας (Android, iOS) και γεφυρωμένες σε λειτουργικές μονάδες JavaScript για να μπορέσουν να χρησιμοποιηθούν στον κώδικα. Οι πρώτες είναι πολύ πιο εύκολες στη ρύθμιση, ενώ οι τελευταίες είναι πολύ πιο επιδόσεις. Περάστε το χρόνο για να καταλάβετε ποια από αυτά χρειάζεστε και στη συνέχεια να επιλέξετε ένα από τα πολλά εκεί έξω.

Ο Spencer Carli έχει κάνει μια σπουδαία δουλειά που επεξεργάζεται τις τρέχουσες επιλογές πλοήγησης στο React Native world σε αυτό το άρθρο που σας προτείνω να διαβάσετε. Οι κυριότερες επιλογές είναι το React Navigation ως λύση JavaScript και το React Native Navigation ως native λύση.

Χρησιμοποιήστε μια βιβλιοθήκη περιτύλιξης CSS-in-JS για ευκολία

Σε React Native, το CSS είναι γραμμένο σε JavaScript. Είναι κάτι για το οποίο δεν έχουμε καμία επιλογή. Προσωπικά, αντί να χρησιμοποιώ τη μέθοδο StyleSheet.create και τον κώδικα CSS ως καθαρό JavaScript, προτιμώ να χρησιμοποιώ τη βιβλιοθήκη Styled Components. Τα Styled Components καθιστούν το CSS να αισθάνεται ξανά διαισθητικό και να κάνει το JSX να φαίνεται πιο σημασιολογικό.

Πρόσφατα, έγραψα ένα άρθρο σχετικά με το γιατί προτιμώ να χρησιμοποιώ Styled Components σε εφαρμογές Native React, ώστε να μπορείτε να ρίξετε μια ματιά για περισσότερες λεπτομέρειες.

Αποφασίστε έγκαιρα πώς θέλετε να γίνει "κλίμακα" της εφαρμογής σας σε διάφορες συσκευές και μεγέθη οθόνης

Οι πιθανότητες είναι ότι αναπτύσσετε μια εφαρμογή για περισσότερα από ένα μέγεθος συσκευής και μέγεθος οθόνης. Τώρα εδώ υπάρχουν δύο επιλογές σχετικά με τον τρόπο προσέγγισης του σχεδιασμού / ανάπτυξης.

Μπορείτε να επιλέξετε να έχετε διαφορετικό UI / UX ανάλογα με το μέγεθος της οθόνης. Αυτή είναι ίσως η καλύτερη επιλογή για τους περισσότερους τύπους εφαρμογών, αλλά απαιτεί μεγάλη προσπάθεια επειδή υπάρχουν πολλές οθόνες που πρέπει να σχεδιαστούν και να εφαρμοστούν. Το μέγεθος των οθονών μπορεί να αναγνωριστεί μέσω του API διαστάσεων. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε ένα πακέτο τρίτου μέρους που παρέχει ορισμένα βοηθητικά προγράμματα από το κουτί, όπως React Native Response UI.

Ή μπορείτε να επιλέξετε να έχετε το ίδιο UI / UX που θα κλιμακώνεται αναλογικά για όλα τα μεγέθη οθόνης. Αυτή είναι η καλύτερη επιλογή όταν, για παράδειγμα, αναπτύσσετε ένα παιχνίδι. Και πάλι, μπορείτε να χρησιμοποιήσετε ένα πακέτο τρίτου μέρους για να το επιτύχετε όπως το React Native Respive Screen.

Αποποίηση ευθύνης: Είμαι ο κατασκευαστής του React Native Response Screen πακέτο.

Προσεγγίστε κινήσεις με προσοχή

Οι κινούμενες εικόνες είναι πολύ σημαντικές για εφαρμογές για κινητά, αλλά η απόδοση του React Native δεν είναι ακόμη καλύτερο.

Προκειμένου να προστατευθείτε από την παροχή κακών αποτελεσμάτων, πρέπει πάντα να δοκιμάσετε κινούμενα σχέδια στη συσκευή - ο εξομοιωτής δεν παρέχει σωστή ανατροφοδότηση. Πρέπει επίσης να χρησιμοποιήσετε το prop useNativeDriver (με τιμή που έχει οριστεί σε αληθινό) όπου κι αν βρίσκεστε, επειδή θα σας βοηθήσει να επιτύχετε καλύτερη απόδοση.

Για περισσότερες συμβουλές σχετικά με τον τρόπο επίτευξης καλύτερων επιδόσεων, δείτε αυτό το προηγούμενο άρθρο μου.

Έχετε επίσης κατά νου ...

  1. Αντιμετωπίστε Native δεν έχει στοιχεία DOM. Αντ 'αυτού, έχουμε να κάνουμε με φυσικά στοιχεία.
  2. Σχετικά με το CSS:
  • Δεν υποστηρίζονται όλες οι ιδιότητες. τουλάχιστον όχι ακόμα. Ελέγξτε την τεκμηρίωση για περισσότερες πληροφορίες: Προβολή συμβόλων στυλ, στυλ εικόνας στυλ, στυλ κειμένου Props
  • Οι ιδιότητες στενογραφίας δεν λειτουργούν καλά, έτσι προτιμούν πάντοτε τις συγκεκριμένες ιδιότητες (δηλαδή το περιθώριο κάτω, το περιθώριο κέρδους, το περιθώριο-άκρο, το περιθώριο-δεξιά αντί του περιθωρίου)
  • Δεν υποστηρίζονται όλες οι ιδιότητες ποσοστιαίες τιμές. Για να αναφέρουμε μερικά: το περιθώριο, το πλάτος των συνόρων και την ακτίνα των συνόρων. Και αν κάποιος προσπαθήσει να ορίσει μια ποσοστιαία τιμή, το RN είτε θα το αγνοήσει εντελώς είτε η εφαρμογή θα καταρρεύσει.
  • Το RN παρέχει στήριξη από το κουτί. Μάθετε και χρησιμοποιείτε όποτε μπορείτε. Εσύ είσαι ο καλύτερος σύμμαχος του CSS!

Τι νομίζετε;

Τι πιστεύετε για αυτό το άρθρο; Ποιες άλλες βέλτιστες πρακτικές έχετε κατά νου; Προσθέστε την προοπτική και τις ιδέες σας στην παρακάτω ενότητα σχολίων.

Εάν σας άρεσε αυτό το άρθρο, μη διστάσετε να το χτυπήσετε αυτό το κουμπί για να βοηθήσετε τους άλλους να το βρουν.

Σχετικά με μένα

Γεια σου, είμαι ο Τάσος. ένας μηχανικός λογισμικού που αγαπά τον ιστό και επί του παρόντος λειτουργεί πολύ με το React Native and React. Είμαι ο συνιδρυτής του γραφείου λογισμικού Coded Lines, όπου αναλαμβάνουμε έργα end-to-end για κινητά και web με έμφαση στο μάρκετινγκ εντός εφαρμογής. Αν ακούγεται αυτό που ψάχνετε, παρακαλώ επικοινωνήστε μαζί μου εδώ: tasos.maroudas@codedlines.com. Ευχαριστώ που περάσατε :)

___________________________________________________________________

Ευχαριστώ

Ο Γιώργος Καρμπουλόνις για απόδειξη ανάγνωσης