tasoskakour

Καλησπέρα!

Καλώς ορίσατε σε ένα ακόμη άρθρο. Σήμερα θα σας δείξω τα εργαλεία JavaScript (JS stack) που χρησιμοποιώ για την ανάπτυξη εφαρμογών και υπηρεσιών.

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

Front-end React

Για το κομμάτι του Front-end ενός project υπάρχει ένας ξεκάθαρος νικητής: React. Όπως αναφέρει η Wikipedia: "H React είναι μια front-end JavaScript βιβλιοθήκη ανοιχτού κώδικα για την ανάπτυξη διεπαφών η οποία συντηρείται από το Facebook και μια κοινότητα προγραμματιστών και εταιρειών".

Εδώ και 3 χρόνια χρησιμοποιώ React και τη λατρεύω πραγματικά. Κάποια από τα πράγματα που μου αρέσουν στην React είναι:

• Πόσο εύκολα και με λίγες γραμμές κώδικα μπορώ να χωρίσω την εφαρμογή μου σε επιμέρους τμήματα (components).
• Βρίσκω το μοτίβο της ρής δεδομένων μιας κατεύθυνσης (Unidirectional data flow), πιο απλό και καθαρό για αποσφαλμάτωση από ότι το μοτίβο δυο κατευθύνσεων. Ρίξτε μια ματιά σε ένα κώδικα AngularJS και θα καταλάβετε τι εννοώ...
• Ποτέ μου δεν αγάπησα τις κλάσεις. Με συγχωρείτε Java/Angular φίλοι μου! 😁
• Με τη χρήση των React hooks, όλα τα functional components είναι ουσιαστικά απλές συναρτήσεις που "επιστρέφουν" περιεχόμενο το οποίο τελικά γίνεται render! Πόσο κουλ είναι αυτό;

Και απλώς για να δώσω έμφαση στο τελευταίο, ρίξτε μια ματιά στον κώδικα παρακάτω και θα καταλάβετε τι εννοώ. Ακόμη και αν ποτέ δεν έχετε προγραμματίσει σε React θα είστε σε θέσει να κατανοήσετε ότι το Hello είναι μια συνάρτηση που παίρνει το name σαν όρισμα και επιστρέφει ένα στοιχείο <div> και τελικά όταν καλείται από το App component θα κάνει render το "Γειά σου Τάσο".

const Hello = ({ name = "stranger" }) => <div>Γειά σου {name}</div>

const App = () => <Hello name="Τάσο">

Material-UI για Styling

Τα τελευταία 2 χρόνια χρησιμοποιώ Material-UI το οποίο βασικά είναι ένα σετ από React Components τα οποία έχουν σχεδιαστεί με τέτοιο τρόπο ώστε να ακολουθούν τις κατευθυντήριες γραμμές που έχει θέσει η Google στο Material Design.

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

Αυτό που μου αρέσει στο Material-UI είναι το ότι το βρίσκω εξαιρετικά εύκολο να χρησιμοποιώ τα components που παρέχουν σαν "βάση" έχοντας τη δυνατότητα να τα προσαρμόσω όπως εγώ θέλω. Φυσικά υπάρχουν στιγμές που νιώθω πώς αυτή η τεράστια βιβλιοθήκη είναι υπερβολή για μικρά projects και ίσως βολεύει περισσότερο σε τέτοιες περιπτώσεις να χρησιμοποιηθεί ένα utility-CSS framework όπως το tailwind, το οποίο παρεπιπτόντως είναι και αυτό που χρησιμοποιώ για αυτό το blog! 🙂

Back-end: Node

Ουσιαστικά, ξεκίνησα την "καριέρα" μου στην ανάπτυξη εφαρμογών με την Node. Πιστεύω ότι στις μέρες μας, είναι εξαιρετικά σύνηθες ένας web developer που χρησιμοποιεί μοντέρνα εργαλεία JS για το front-end (π.χ React/Angular) να χρησιμοποιεί ένα JavaScript framework για το back-end επίσης. Νομίζω ότι αξίζει να παραθέσω το επόμενο απόφθεγμα για να εκφράσω το πώς νιώθω για την JavaScript! 🥰

Any application that can be written in JavaScript, will eventually be written in JavaScript.
- Jeff Atwood, 2007

Μου αρέσει το γεγονός ότι μπορώ να σχεδιάζω και να δημιουργώ εφαρμογές γραμμένες σε μια γλώσσα τόσο για το front-end όσο και για το back-end. Επιπροσθέτως, η επικοινωνία και η συνεργασία σε μια ομάδα από προγραμματιστές είναι ευκολότερη εάν όλοι χρησιμοποιούν την ίδια γλώσσα προγραμματισμού. Μερικές φορές εάν συμμετέχω μόνο στο front-end μέρος ενός project, είμαι σε θέση να μπορώ να δίνω ανατροφοδότηση και συμβουλές στους developers του back-end και το αντίστροφο.

Τεχνικά μιλώντας, δεν μου αρέσουν τα πολυ-νηματικά frameworks όπως PhP, Python, Java κλπ. Με την Node έχεις ένα νήμα και χρησιμοποιείς callbacks σε κλήσεις Εισόδου/Εξόδου χωρίς αναμονή (Non-blocking I/O) για να υποστηρίξεις τα "παράλληλα" αιτήματα. Και με αυτό το σχεδιασμό η Node είναι πολύ γρήγορη, όμως ένα αρνητικό που έχει είναι ότι βαριοί υπολογισμοί και άλλες απαιτητικές εργασίες του επεξεργαστή "κολλάνε" όλη την ουρά γεγονότων μέχρι την ολοκλήρωση. Για αυτό το λόγο πρέπει να είμαστε προσεκτικοί όταν χρησιμοποιούμε την Node (π.χ) με βαριές διαδικασίες Machine Learning. Θα ήταν καλύτερο να υπολογίζουμε αυτούς τους υπολογισμούς σε μια άλλη υπηρεσία η οποία τελικά απλώς θα τροφοδοτεί την διεργασία της Node με τα τελικά αποτελέσματα.

Βάση Δεδομένων: MongoDB

Δεν έχω και πολλά να πώ για ποιο λόγο χρησιμοποιώ MongoDB για τα περισσότερα από τα projects μου. Το γεγονός ότι είναι μια NoSQL βάση δεδομένων που χρησιμοποιεί JSON-like (Javascript Object Notation) αντικείμενα την καθιστούν τέλειο ζευγάρι με το back-end που είναι γραμμένο σε JavaScript (Node) 😏

Φυσικά σε αυτό το σημείο πρέπει να πώ ότι σύμφωνα με το "Law of the instrument", "Είναι δελεαστικό, όταν το μόνο εργαλείο που έχεις είναι ένα σφυρί, να τα αντιμετωπίζεις όλα σαν να είναι καρφιά!". Αυτό σημαίνει ότι η MongoDB δεν ταιριάζει απόλυτα σε όλες τις περιπτώσεις. Ταιριάζει με τις περισσότερες περιπτώσεις, αλλά γενικά μιλώντας όταν δουλέυεις σε ένα πραγματικό και μεγάλο project λογικά θα χρειαστεί να χρησιμοποιήσεις διαφορετικού τύπου βάσεις δεδομένων για κάθε κομμάτι της εφαρμογής. Για παράδειγμα ίσως χρησιμοποιείς MongoDB για να αποθηκέυεις απλές πληροφορίες για την οντότητα των χρηστών σου, Apache Cassandra για την αποθήκευση big-data δεδομένων και ElasticSearch για μηχανή αναζήτησης.

API: GraphQL και Apollo

Τώρα πια για τα περισσότερα projects μου χρησιμοποιώ GraphQL για την ανάπτυξη των APIs. Φυσικά ακόμη χρησιμοποιώ REST API συστήματα (με Express) σε μικρότερα projects ή αν ταιριάζει καλύτερα στην περίπτωση.

Αυτό που λατρεύω στην GraphQL (καθώς και πολλά άλλα), είναι ότι ξέρεις ακριβώς τι δεδομένα παίρνεις όταν καλείς το API. Για παράδειγμα ρίξτε μια ματιά στα 2 κομμάτια κώδικα παρακάτω.

Στο πρώτο κομμάτι, ο κώδικας φέρνει του χρήστες από ένα GraphQL API και συγκεκριμένα ζητάει τα πεδία id, username, email, friends και συγκεκριμένα για τους friends ζητάει τα id, username. Αρκετά ξεκάθαρο έτσι; Επίσης, δεν υπάρχει επιπλέον overhead (overfetch) για τα πεδία που δεν θέλεις να πάρεις. Και θα μπορούσες να το πάς ένα βήμα παραπέρα και να ζητήσεις τους φίλους των φίλων μέσα στον resolver getUsers και μετά τους φίλους των φίλων των φίλων και πάει λέγοντας! 😎

query {
  getUsers {
    id
    username
    email
    friends {
      id
      username
    }
  }
}

Τώρα ρίξτε μια ματιά στην παρακάτω περίπτωση όπου χρησιμοποιείται ένας απλός REST-API server. Δεν λέει και πολλά έτσι; Απλώς εκτελεί ένα GET αίτημα στο μονοπάτι των /users. Ο client δεν ξέρει ακριβώς ποια πεδία τελικά θα πάρει και ίσως πάρει πεδία τα οποία δεν ζήτησε καθόλου (overfetch) ή ίσως να μην πάρει καθόλου κάποια πεδία τα οποία ζήτησε (underfetch)!

GET /users

Φυσικά στο παραπάνω απλοποιημένα παράδειγμα θα μπορούσε να υπάρχει η εναλλακτική και να παίρναμε τους users κάπως έτσι:

GET /users?fields=id,username,email,friends[id],friends[username]

Αλλά αυτό πρώτον είναι άσχημο και δεύτερον θα έπρεπε να υπάρξει custom σχεδιασμός στο back-end για να δουλέψει και θα πρέπει να γνωστοποιηθεί σε όλη την ομάδα των back-end και front-end developers για να κάνουν τις απαραίτητες αλλαγές στον κώδικα. Δεν είναι universal λύση!

Ακόμη ένα τεράστιο θετικό της GraphQL είναι ότι σου παρέχει ένα αυτόματα παραγόμενο API documentation που περιέχει όλες τις οντότητες, τα πεδία, τα queries και τα mutations!

Με λίγα λόγια, χρησιμοποιώντας GraphQL (τις περισσότερες φορές) παίρνεις τα δεδομένα που θέλεις στο σωστό σημείο αποφεύγοντας bugs και ενισχύοντας την παραγωγικότητα.

Μου αρέσει να χρησιμοποιώ GraphQL με τον Apollo και τον ApolloClient όπου παρέχει μια πολύ ωραία εμπειρία συγγραφής κώδικα μέσα στα React components μου.

Έχοντας πει όλα αυτά, θα κλείσω γράφοντας ένα παράδειγμα χρησιμοποιώντας τον Apollo Client μέσα σε ένα React component:

import { gql, useQuery } from "@apollo/client";

const SayHelloToMe = () => {
  const { loading, error, data } = useQuery(gql`
    {
      me {
        username
      }
    }
  `);

  if (loading) return <text>Loading...</text>;
  if (error) return <text>Error! ${error.message}</text>;
  if (!data || !data.me) return <text>Could not find you :(</text>;

  return <text>Hello {data.me.username}</text>;
};

Deployments: Netlify & Heroku

Για τις πλατφόρμες deployment προτιμώ να χρησιμοποιώ Netlify για το front-end και Heroku για το back-end αν και είναι λίγο ακριβό μετά τη συνδρομή "Hobby", απαιτεί όμως μηδαμινή προσπάθεια για να σηκώσεις μια εφαρμογή σε αυτό. Εάν θέλω κάτι πιο ελεγχόμενο για τον server χρησιμοποιώ AWS Elastic Beanstalk αν και απαιτεί περισσότερη συντήρηση και παραμετροποίηση.

Τέλος

Ευχαριστώ που διαβάσατε έως εδώ! Αφήστε ένα σχόλιο παρακάτω για να πείτε ποιες είναι οι δικές σας προτιμήσεις στα εργαλεία που χρησιμοποιείτε! Επίσης μη ξεχάσετε να κάνετε ένα Like εάν σας άρεσε το άρθρο και εγγραφή για να σας στέλνω όλο το καινούργιο μου υλικό μέσω e-mail!

Τα λέμε σύντομα 🙂