Γωνιακές Βέλτιστες Πρακτικές - Αύγουστος 2017 Έκδοση

(Αυτή η ανάρτηση δημοσιεύτηκε από https://fluin.io/blog/angular-best- practices-august-2017)

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

Βέλτιστη πρακτική 1: Χρησιμοποιήστε το CLI

Σήμερα, ο γωνιακός CLI είναι ο καλύτερος τρόπος για την κατασκευή γωνιακών εφαρμογών. Πολλοί προγραμματιστές ξεκίνησαν με το Angular πριν το CLI ήταν έτοιμο για primetime, αλλά το CLI είναι εκπληκτικό για τη συντριπτική πλειοψηφία των προγραμματιστών, των νεοσύστατων επιχειρήσεων και των μεγάλων επιχειρησιακών ομάδων.

Ξεκινώντας ένα νέο έργο; Δημιουργήστε το με το CLI.

Εργασία σε ένα υπάρχον έργο; Δημιουργήστε ένα νέο έργο με το CLI και στη συνέχεια μετακινήστε τον υπάρχοντα σας κώδικα στο / src / app /.

npm install -g @ γωνιακό / cli
Νέο έργο μου

Το CLI διαθέτει εργαλεία σκαλωσιάς (γνωστά και ως «σχηματικά») για τη δημιουργία νέων έργων και τη δημιουργία νέου κώδικα για εσάς, αλλά αυτά δεν είναι το κύριο όφελος. Το κύριο πλεονέκτημα του CLI είναι ο τρόπος με τον οποίο αυτοματοποιεί τον αγωγό κατασκευής τόσο για ζωντανή ανάπτυξη με ng serve, όσο και για κώδικα παραγωγής που θα στείλατε σε browsers με ng build -prod

Το ng build -prod θα εκμεταλλευτεί πάντοτε όσες βέλτιστες πρακτικές μπορεί να ενεργοποιήσει αυτόματα η γωνιακή ομάδα. Αυτό σημαίνει ότι αυτή η εντολή θα πάρει πιο ισχυρό με την πάροδο του χρόνου με λειτουργίες όπως οι εργαζόμενοι στο service ή το γωνιακό εργαλείο βελτιστοποίησης.

Βέλτιστη πρακτική 2: Εγκατάσταση επέκτασης κώδικα Vs του John Papa

Ο κώδικας του Visual Studio είναι ένα εκπληκτικό IDE για την κατασκευή γωνιακών εφαρμογών. Μία από τις μεγαλύτερες ευχές που μπορείτε να κάνετε για τον εαυτό σας είναι να εγκαταστήσετε το Essential γωνιακό πακέτο επέκτασης του John Papa.

Αυτό κάνει την εργασία με τον γωνιακό κώδικα του Visual Studio καλύτερα από ποτέ.

Αυτό το πακέτο περιλαμβάνει τα ακόλουθα εξαιρετικά εργαλεία:

  1. Η γωνιακή υπηρεσία γλωσσών - Παρέχει γνώση προτύπων και γωνιακής ολοκλήρωσης και έλεγχο σφαλμάτων σχετικά με την εφαρμογή σας
  2. EditorConfig - Συνδέει τη διαμόρφωση VSCode με το .editorconfig που δημιουργούμε αυτόματα για εσάς ως μέρος ενός νέου έργου CLI
  3. Bracket Pair Colorizer - Αντί για την τυπική επισήμανση σύνταξης, αυτή η επέκταση χρωματίζει αγκύλες, παρενθέσεις και σγουράκια με βάση το ένθετο στρώμα τους. Οι οπτικές ενδείξεις για τη φωλιά είναι μια τεράστια βοήθεια όταν εργάζεστε με περίπλοκο κώδικα.

Βέλτιστη πρακτική 3: Μην εγγραφείτε στα παρατηρήματά σας στα στοιχεία

Πολλοί προγραμματιστές που δουλεύουν με τους Obspectables για πρώτη φορά θέλουν να εγγραφούν και να αποθηκεύσουν τα δεδομένα τοπικά κάπου.

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

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

Μην το κάνετε αυτό:

...
πρότυπο: `
    {{localData | json}}
`)
κλάση εξαγωγής MyComponent {
    localData;
    κατασκευαστής (http: HttpClient) {
        http.get ('μονοπάτι / προς / μου / api.json')
        .subscribe (δεδομένα => {
            this.localData = δεδομένα.
        });
    }}
}}

Αντ 'αυτού κάνουμε αυτό

...
πρότυπο: `
    {{δεδομένα | async | json}}
`)
κλάση εξαγωγής MyComponent {
    δεδομένα;
    κατασκευαστής (http: HttpClient) {
        this.data = http.get ('μονοπάτι / στο / my / api.json');
    }}
}}

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

Ο σωλήνας Async θα ακυρώσει τις αιτήσεις HTTP, εάν δεν χρειάζονται πλέον τα δεδομένα, αντί να ολοκληρώσουν, να επεξεργαστούν και στη συνέχεια να μην κάνουν τίποτα μαζί τους.

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

Ακολουθούν μερικά παραδείγματα πιο προηγμένων στρατηγικών για την παρακολούθηση:

Ο αγωγός Async σημαίνει ότι αργότερα αν αλλάξετε μια απλή κλήση HTTP με κάτι πιο περίπλοκο σαν ένα σύνολο δεδομένων σε πραγματικό χρόνο, όπως το Firebase, ο κωδικός του προτύπου σας δεν χρειάζεται να αλλάξει.

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

Βέλτιστη πρακτική 4: Μην ξεχνάτε SEO και Analytics

Οι ιστότοποι και οι εφαρμογές είναι ισχυρές εξαιτίας του τρόπου με τον οποίο οι μηχανές αναζήτησης όπως το Google μπορούν να τις αναπροσαρμόσουν και να μοιραστούν το περιεχόμενό σας με τον κόσμο.

Τα προϊόντα του Analytics μπορούν να σας βοηθήσουν να κατανοήσετε τις ανάγκες και τις συμπεριφορές των χρηστών σας.

Για να ρυθμίσετε και τα δύο αυτά, ας συμπεριλάβουμε το απόσπασμα του Google Analytics στο index.html και αντικαταστήσουμε τον κώδικα παρακολούθησης και αφαιρώντας την αρχική προβολή σελίδας που περιλαμβάνουν από προεπιλογή.