Ο προγραμματισμός στο επίπεδο του front end βρίσκεται πλέον σε μια ξέφρενη πορεία ανάπτυξης και έχει δημιουργήσει ένα εξαιρετικά ανταγωνιστικό περιβάλλον. Είναι ένας κόσμος με περισσότερες καλές επιλογές από ποτέ, όπου οι δυνατότητες και οι ανάγκες μπορούν να δημιουργήσουν υπηρεσίες και προϊόντα που παλαιότερα φανταζόμασταν ως μη πραγματοποιήσιμα.

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

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

Τα JavaScript Frameworks που θα εξετάσουμε

  • AngularJS
  • Angular
  • Ember
  • Meteor
  • React
  • VueJS

AngularJS

Η old-school Angular 1 δεν έχει πάει πουθενά. Είναι εύκολο να την θεωρήσουμε ξεπερασμένη μιας και ο διάδοχός της έχει ήδη εξελιχτεί και παρουσιάζει τρομερές προοπτικές. Αυτός όμως δεν είναι ο παράγοντας αξίας, καθώς είναι ήδη στην αγορά πολύ περισσότερο καιρό και η ευκολία χρήσης με την οποία ξεκίνησε την βοήθησε να διεισδύσει σε πολλά projects που είναι αυτή τη στιγμή live και λειτουργικά.

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

Η εξήγηση για την μεγάλη χρήση της AngularJS είναι απλή. Η AngularJS χρησιμοποιεί JavaScript, απλή απλούστατη Javascript. Δεν χρησιμοποιεί ούτε ES6/ES2015 ούτε TypeScript. Δεν βασίζεται σε πολύπλοκα εργαλεία ανάπτυξης και ανάλυσης. Δεν υπάρχει κανένα μυστήριο κρυμμένο από πίσω της. Είναι πολύ καλά δομημένη και δοκιμασμένη στο να λύνει προβλήματα. Προσφέρει σταθερότητα, εξαιρετικό οικοσύστημα ερωτήσεων/απαντήσεων, λύσεων, modules, tutorials και stack overflow answers. Είναι η λύση με τα περισσότερο περιεχόμενο για βοήθεια και εκμάθηση.

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

Angular

Angular ονομάζουμε την έκδοση 2 και τις επόμενες που είναι οι αντικαταστάτες της AngularJS (Angular 1). Η Angular λοιπόν, προσφέρει ένα εξαιρετικά μοντέρνο περιβάλλον ανάπτυξης με εξαιρετικές επιδόσεις, καλύτερη αρχιτεκτονική και πιο σύγχρονες λύσεις. Αυτό φαίνεται από την αρχή με το Command Line Interface (CLI) που μας βοηθάει στις διαδικασίες ανάπτυξης νέων projects μέσω boilerplates αλλά και κατά τη διάρκεια της εξέλιξης ενός project. Είναι ένα framework που τα περιλαμβάνει όλα.

Είναι επίσης το framework που πραγματικά φέρνει την TypeScript σε εξέχουσα θέση. Η TypeScript έχει ένα ανερχόμενο πρότυπο που επιτρέπει στους developers να δουλεύουν σε μία κανονική strict γλώσσα, η οποία είναι πολύ πιο εύκολο να αναλυθεί και να απασφαλματοποιηθεί.

Επιπλέον, η Angular είναι το πρώτο framework που πραγματικά κάνει implement τα Observables, τα οποία είναι ένα βήμα πιο πάνω από τα Promises. Είναι εξαιρετικά δυνατά για “streams” και live updated σε πραγματικό χρόνο, δεδομένα.

Για μεγάλες εφαρμογές που θα χρειαστούν αρκετή λειτουργικότητα όπως routers, state management, συνδέσεις με API’s κ.λ.π, είναι καλύτερο να έχεις ένα περιεκτικό framework παρά να συνδυάζεις αμφίβολης ποιότητας modules από διαφορετικούς προγραμματιστές..

Και φυσικά, αυτή τη στιγμή η Angular είναι αναμφίβολα το μεγαλύτερο θέμα στον χώρο, με την μεγαλύτερη υποστήριξη, την μεγαλύτερη κοινότητα και το μεγαλύτερο εμπορικό ενδιαφέρον.

Ember

Το ember έχει την φήμη του δύσκολου για εκμάθηση framework. Στην πραγματικότητα, είναι ένα από τα πιο αποδοτικά JavaScript frameworks για διάφορους λόγους. Κατ’ αρχάς υπάρχει το Ember CLI. Άλλα frameworks περιλαμβάνουν και αυτά CLI, αλλά το ember το έχει αναπτύξει ένα βήμα παραπάνω.

Είναι επίσης ένα περιεκτικό περιβάλλον ανάπτυξης, που μπορεί να διαχειριστεί διεργασίες όπως scaffolding, boilerplate generation, serving, testing, dependecy management, deployment και builds. Είναι πάρα πολύ γρήγορο και χρησιμοποιεί αυστηρά conventions, τα οποία αποτελούν άλλο ένα πλεονέκτημά του, αφού μειώνει την ανάγκη ρυθμίσεων ή τους πλεονασμούς μέσα από μία ξεκάθαρα ορισμένη λογική defaults. Για τον λόγο αυτό, οι εφαρμογές Ember συνήθως μοιάζουν ίδιες, έχουν την ίδια δομή, το ίδιο build chain και παρόμοια set λειτουργικότητας.

Το Ember αναπτύσσεται ραγδαία και συνεχώς. Ήταν ένας από τους πρωτοπόρους των τεχνολογιών όπως ES6 και Promises, ενώ είναι γνωστό για την προθυμία του να κάνει deprecate ακόμα και κεντρικές λειτουργίες για χάρη των build in functionalities.

Ένα όμως από τα πιο δυνατά του χαρακτηριστικά είναι η τρομερή ευκολία χρήσης και η πολύ καλή εμπειρία ανάπτυξης.

Meteor

To meteor δεν είναι απλό front end framework. Είναι ένα full stack framework. Αυτό σημαίνει ότι έχει ένα περιεκτικό JavaScript framework για το front end αλλά μπορεί να σταθεί και ως back end framework. Οι νεότερες εκδόσεις του meteor υποστηρίζουν επίσημα React και Angular για το front end.

Ο σύγχρονος τρόπος χρήσης των frameworks είναι μέσω του διαμοιρασμού των ρόλων. Το front end αναλαμβάνει το κομμάτι της εμφάνισης των δεδομένων ενώ ένα backend με API αναλαμβάνει την διαχείριση των δεδομένων. Αυτό σημαίνει ότι στην πραγματικότητα υπάρχουν δύο εφαρμογές και πιθανότατα γραμμένες σε διαφορετική γλώσσα, κάτι που μπορεί να σημαίνει και ανάγκη επιπλέον προγραμματιστών Το meteor είναι μία γλώσσα σε όλη τη διαδρομή από τη βάση δεδομένων έως τον browser του χρήστη.

Αλλά δεν σταματάει μόνο εκεί. Το meteor έχει ως στόχο το cross platform development, δηλαδή εφαρμογές που παίζουν σε browser, σε mobile platforms (Android, iOS) αλλά και σε dektop!

Το meteor υποστηρίζει add-ons μέσω command line (Smart Packages) ενώ αναλαμβάνει το compile από LESS/SASS κώδικα, μετατροπή από coffeescript, minification κ.λ.π..

Τέλος, να αναφέρουμε ότι έχει μία ξεκάθαρη αρχιτεκτονική τύπου MVC (model – view – controller).

Συμπερασματικά, το meteor κάνει ότι υπόσχεται, υψηλή διαδραστικότητα, μεγάλη ταχύτητα, realtime εφαρμογές που αναπτύσσονται με μία ενιαία γλώσσα.

React

Το React θα μπορούσαμε να το χαρακτηρίσουμε ως ένα από τα μεγαλύτερα σοκ που υπέστη η JavaScript τα τελευταία χρόνια. Δημιουργήθηκε από το Facebook ως ένα view layer και εισήγαγε την έννοια του Virtual DOM. Το vdom είναι μία αναπαράσταση της πραγματικής κατάστασης του DOM που αποθηκεύεται στην μνήμη. Η χρησιμοποίηση του vdom αντί για το πραγματικό DOM για συγκρίσεις και ενημερώσεις, σημαίνει απίστευτη αύξηση της απόδοσης.

Το React είναι “hot” αυτή τη στιγμή, και όχι μόνο εξαιτίας των προγραμματιστών. Οι μεγαλύτερες εταιρίες αυτή τη στιγμή το χρησιμοποιούν για το κομμάτι του front end. Κολοσσοί όπως AirBnB, Netflix, Atlassian, Paypal, Experia κ.λ.π. αλλά και publishers όπως BBC, NBC, NYT, βασίζονται σε αυτό.

Το React είναι ένα μόνο κομμάτι του παζλ, αφού δημιουργεί έναν πυρήνα γύρω από τον οποίο σχεδιάζονται λύσεις για κάθε ανάγκη, από τα Single Page Applications έως τα Simple Web Components.

Έχει σπάσει το καλούπι με διάφορα χαρακτηριστικά του. Το σύστημά του βασίζεται σε σύστημα components που επιστρέφουν JSX, μία δομή που μοιάζει με XML και η οποία βάζει τον κώδικα του layout κατευθείαν μέσα στον JavaScript κώδικα του component, δημιουργώντας μία αρμονική ολότητα.

Το React έχει επίσης εισαγάγει έναν αριθμό από καινοτομίες που βρίσκουν εφαρμογή σε διάφορα συστήματα, όπως το Redux. Το Redux είναι ένα pattern διαχείρισης states που επιτρέπει την συνεπή αναπαράσταση δεδομένων της εφαρμογής. Θα μιλήσουμε για το Redux περισσότερο σε επόμενο άρθρο, όπως και για το Flux, μία άλλη αρχιτεκτονική προσέγγιση με έμφαση στους κινδύνους του λεγόμενου “two-way binding”.

Η ζήτηση σε παγκόσμιο επίπεδο για developers είναι πολύ μεγάλη, λίγο χαμηλότερη από αυτήν της AngularJS (Angular 1).

VueJS

Το VueJS είναι το νέο παιδί στον τομέα των δημοφιλών frameworks αν και το προφίλ του δεν είναι τόσο υψηλό όσο των υπολοίπων. Με αυτό ως δεδομένο, το VueJS είναι το ταχύτερα αναπτυσσόμενο framework με στοιχεία ενός νέου “σταρ”. Ταιριάζει σε καταστάσεις παρεμφερείς με του React. Ίσως δεν μπορούμε να το ονομάσουμε ένα framework, αλλά σίγουρα μία βιβλιοθήκη που αναλαμβάνει το View κομμάτι μιας αρχιτεκτονικής MVC ή MVVM.

Τα πλεονεκτήματά του είναι πολλά. Έχει ως στόχο να χρησιμοποιείται ως ένα progressive framework στο οποίο κομμάτια μπορούν να προστεθούν ανά πάσα στιγμή. Αρχικά, μπορεί να φορτώσει μέσω CDN και χρησιμοποιείται για τη δημιουργία απλών components. Κατά την ανάπτυξή του προστίθενται νέες λειτουργίες, όπως router, state management, http abstraction κ.λ.π, αλλά τίποτα από αυτά δεν πρέπει να γίνει εξ’ αρχής.

Οπότε έχει πολύ μικρό learning curve, αφού δεν χρειάζεται να μάθει κάποιος ένα ολόκληρο framework προκειμένου να λύσει μικρά προβλήματα. Μπορεί ο καθένας να ξεκινήσει με μικρή λειτουργικότητα για την λύση απλών προβλημάτων και να προσθέσει πολυπλοκότητα όταν αυτή χρειαστεί.

Επιπλέον, το VueJS είναι γρήγορο, πολύ πολύ γρήγορο. Αν εξαιρέσουμε το React με το Virtual DOM, το VueJS έχει κάνει εξαιρετική δουλειά στο optimization.

Τέλος, να αναφέρουμε ότι η επιτυχία του VueJS οφείλεται κατά ένα μέρος στην υποστήριξη της κοινότητας του Laravel framework, το οποίο και έχουν αναπτύξει αρκετά ώστε να είναι πολύ εύκολη η χρήση του.

Συμπέρασμα

Για την επιλογή του “σωστού” framework πρώτο ρόλο θα πρέπει να παίζουν οι ανάγκες του project αλλά σίγουρα και οι δυνατότητες μελλοντικών επεκτάσεων που μπορεί να χρειαζόμαστε. Μην αφήνετε το πάθος σας να υπερασπίζεται επιλογές που μπορεί να μην αρμόζουν στις ανάγκες ενός project. Επιλέξτε με προσοχή και μην σταματάτε να παρακολουθείτε τις εξελίξεις.

Με χαρά θα ακούσουμε τις δικές σας απόψεις/εμπειρίες.