6 σημαντικοί λόγοι για να χρησιμοποιήσεις Angular

Η Angular 2 κυκλοφόρησε επισήμως στα τέλη του 2016 και έχει δημιουργήσει μεγάλο ενθουσιασμό στα communities των developers. Η Angular είναι ένα JavaScript Framework για τη δημιουργία διαδραστικών client side εφαρμογών που τρέχουν στον browser. Γιατί λοιπόν τόσος ενθουσιασμός? Γιατί η Angular είναι διαφορετική από τα άλλα JavaScript Frameworks και γιατί αξίζει να τη μάθει κάποιος?

1. Υψηλή παραγωγικότητα

Το Web έχει αλλάξει δραματικά τα τελευταία πέντε χρόνια. Με την ECMAScript (ES) 2015, έχουμε mudules, κλάσεις και arrow functions. Η Angular υλοποιεί αυτές τις δυνατότητες και βοηθάει στο να τα κάνει πιο εύκολο να τα χρησιμοποιήσουμε. Αν προσθέσουμε και την TypeScript, έχουμε πολύ σημαντικές δυνατότητες όπως έλεγχο, ασφάλεια και δυναμικότητα.
Έτσι η παραγωγικότητα βρίσκεται σε πολύ υψηλό επίπεδο καθώς είναι για εμάς πιο εύκολο να κάνουμε debug αλλά και να καταλάβουμε τον κώδικά μας.

2. Συνέπεια στα coding patterns

Ένα από τα σημαντικότερα πράγματα που μπορούν να αυξήσουν την παραγωγικότητα είναι τα συνεπή coding patterns, και η Angular το κάνει πολύ καλά.
Για παράδειγμα, η Angular 2 χρησιμοποιεί τα ES classes και ένα set από annotations που ονομάζονται decorators ώστε να χτιστεί η λειτουργικότητα. Άρα, για να δημιουργήσουμε ένα Angular component χρειαζόμαστε μία κλάση και τον κατάλληλο decorator. Με την ίδια λογική αν θέλουμε να δημιουργήσουμε ένα module, χρειαζόμαστε μία κλάση και έναν decorator. Το ίδιο για να φτιάξουμε φίλτρα, υπηρεσίες κ.λ.π.
Ένα ακόμα παράδειγμα συνεπών coding patterns είναι η δύναμη του dependency injection (DI). Για τη χρησιμοποίηση μιας υπηρεσίας όπως π.χ. HTTP ή Router, απλά κάνουμε inject την υπηρεσία σε κάποια κλάση που τη χρειάζεται. Η Angular κάνει το Implement του constructor-based dependency injection, άρα για να κάνουμε inject μία υπηρεσία απλά περνάμε την υπηρεσία αυτή σαν argument στον constructor της κλάσης.
Επιπλέον, η Angular χρησιμοποιεί τα γνωστά μας pattern αρχιτεκτονικής κώδικα, και κυρίως το model-view-view/model ή αλλιώς το MVVM pattern.

3. Extensive binding με την νέα Angular

Πολλές εφαρμογές client side λειτουργούν με δεδομένα. Η εφαρμογή “τραβάει” τα δεδομένα από έναν back-end server και τα παρουσιάζει χρησιμοποιώντας ένα view template. Και αν ο χρήστης κάνει Edit αυτά τα δεδομένα, τότε οι αλλαγές θα πρέπει να σταλθούν πίσω στον back-end server προς αποθήκευση. Ο κώδικας για αυτές τις διαδικασίες μπορεί να είναι πολύπλοκος και πολύπλευρος.
Με το data binding της Angular η διαδικασία είναι αρκετά εύκολη. Απλά κάντε bind τα HTML elements του template στα properties του μοντέλου στην κλάση και τα δεδομένα αυτόματα θα εμφανίζονται στην view. Και αν ο χρήστης τα αλλάξει, η Angular υποστηρίζει το λεγόμενο two-way data binding, οπότε αυτά αυτόματα γίνονται update στην κλάση.
Επιπλέον του data binding, η Angular υποστηρίζει και property binding. Αυτό επιτρέπει τον έλεγχο του DOM με το binding HTML properties με τα component class properties. Για παράδειγμα, μπορούμε να κάνουμε bind μία εικόνα σε ένα component class property, π.χ. το hideImage. Όταν hideImage είναι true, η εικόνα είναι αυτόματα invisible. Μόλις το hideImage γίνει false, αυτόματα η εικόνα εμφανίζεται.
Τέλος, η Angular υποστηρίζει και event binding, που σημαίνει ότι μπορεί να αντιδράσει σε κάποιο event που συμβαίνει στην view, όπως ένα κλικ, ένα event από ένα third party component ή τα δικά μας custom events. Απλά κάνουμε bind τα event σε μία method στην κλάση του component. Όταν συμβαίνει το event, η method καλείται.

4. Routing με πολλές δυνατότητες

Μία web εφαρμογή συνήθως δεν στηρίζεται σε μία μόνο view. Οι περισσότερες θα έχουν διάφορες views, όπως π.χ. την εισαγωγική, μία για listing, μία για details, μία για edit κ.λ.π. Πρέπει να εμφανίσουμε την κατάλληλη view κάθε φορά. Γι αυτό χρειαζόμαστε το routing.
Η Angular παρέχει πλήρως λειτουργικό routing. Ορίζουμε το route σε κάθε σελίδα της εφαρμογής. Έπειτα ενεργοποιούμε το κατάλληλο route βασιζόμενοι στις ενέργειες του χρήστη. Μπορούμε να περάσουμε δεδομένα στα routes, ώστε να ξέρουμε ότι π.χ. το details view θα παρουσιάζει το αντικείμενο με id 15.
Επίσης μπορούμε να θέσουμε permissions για τους χρήστες και τα ποιά views θα μπορούν αν δουν με κωδικό ή χωρίς. Μπορούμε να αποτρέψουμε το κλείσιμο μιας σελίδας που βρίσκεται σε κατάσταση edit data μέχρι ο χρήστης να το επιλέξει.
Τέλος, υπάρχει και η υποστήριξη lazy load routes στην οποία δεν κατεβαίνουν στον browser όλα τα routes αν ο χρήστης δεν το ζητήσει. Για παράδειγμα, αν έχουμε σε μία εφαρμογή admin διαχειριστικό περιβάλλον, αυτό μπορεί να μην κατέβει στον browser μέχρι ο ίδιος ο χρήστης να το ζητήσει.

5. Μικρό μέγεθος, μεγάλες αποδόσεις

Το μέγεθος και οι αποδόσεις συνδέονται στις web εφαρμογές. Ένα μικρότερο component χρειάζεται μικρότερο χρόνο για να κατέβει στον browser. Ένας από τους στόχους της Angular είναι να μειώσει το μέγεθος και να αυξήσει την απόδοση.
Η μείωση του μεγέθους πετυχαίνεται με διάφορους τρόπους. Αρχικά μπορούμε να κάνουμε το μέγεθος του κάθε component όσο πιο μικρό γίνεται. Έπειτα, πρέπει να οργανώσουμε τα components σε modules με τέτοιο τρόπο ώστε να μπορούν να γίνουν download μαζί. Και τέλος, μπορούμε να χρησιμοποιήσουμε το lazy loading των routes που αναφέραμε παραπάνω.
Ακόμα θα πρέπει να αναφέρουμε και το Ahead of Time (AoT) compiler. Με τη χρήση του AoT, ο compiler τρέχει μια φορά κατά τη διάρκεια του build. Ο browser κατεβάζει την pre-compiled version της εφαρμογής και την κάνει render αμεσα, χωρίς να χρειάζεται να την κάνει compile πρώτα στον browser.
Έτσι η Angular εκτελείται γρήγορα, έχει λιγότερη δουλειά και χαμηλότερο memory footprint.

6. Τεκμηρίωση και κοινότητα

Το documentation της Angular είναι εκτενές και περιλαμβάνει διάφορα επίπεδα. Από quickstart guides έως API reference κ.λ.π. Υπάρχουν recipes για κοινά tasks όπως π.χ. form validation και dependency injection.
Αλλά το καλύτερο απ’ όλα είναι τα tutorials στην Angular 2. Παρέχονται βήμα προς βήμα οδηγοί που ταυτόχρονα μας εισάγουν σε διάφορες έννοιες.
Και φυσικά, υπάρχει και το community. Μία πολύ ενεργή κοινότητα με meetups, groups, συνέδρια κ.λ.π.