Front End Developer vs Back End Developer - Ορισμός και σημασία στην πράξη

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

  • Τα πολλά επίπεδα ανάπτυξης
  • Αλλά δεν είμαστε όλοι γεμάτοι στοίβα
  • Λοιπόν, ποια είναι η διαφορά μεταξύ ανάπτυξης Front End και Back End Development;
  • Τι είναι το Front End Development;
  • Τι είναι το Back End Development;
  • Όπου τα πράγματα γίνονται ασαφή
  • Πόροι για μάθηση

Τα πολλά επίπεδα ανάπτυξης

Είτε εργάζεστε σε έναν ιστότοπο είτε σε μια εγγενή εφαρμογή iOS, όλα τα περιβάλλοντα ανάπτυξης μοιράζονται ένα κοινό θέμα - υπάρχει μια διεπαφή για μια εφαρμογή και ένα back-end.

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

Προγραμματιστής "Fullstack". pic.twitter.com/yfymQmJJgq

- Brian Holt (@holtbt) 24 Μαρτίου 2018

Αλλά δεν είμαστε όλοι γεμάτοι στοίβα

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

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

Λοιπόν, ποια είναι η διαφορά μεταξύ ανάπτυξης Front End και Back End Development;

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

Τι μοιάζουν λοιπόν;

Τι είναι το Front End Development;

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

Πώς ήταν παραδοσιακά η Front End Development;

Το Javascript κυβερνά επί του παρόντος το διαδίκτυο, αλλά αυτό δεν συνέβαινε πάντα. Αν και θα μπορούσε να χρησιμοποιηθεί για την προσθήκη μικρών κομματιών αλληλεπίδρασης σε έναν ιστότοπο, τυπικά οι διεπαφές αποδόθηκαν χρησιμοποιώντας γλώσσες templating από διακομιστή όπως το PHP που βασίζεται στο πλαίσιο και το Template Toolkit (Perl).

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

Ο τρόπος που λειτούργησε ήταν η γλώσσα templating μπόρεσε να πάρει τα δεδομένα της κατευθείαν από τον διακομιστή καθώς αποδόθηκε. Όταν ένα πρόγραμμα περιήγησης ζήτησε τη σελίδα απευθείας από την προέλευση (ο ίδιος ο διακομιστής), όποια δεδομένα θα χρειαζόταν το πρότυπο, η λογική της εφαρμογής θα παρείχε εκείνη τη στιγμή.

Μερικά από τα πιο παραδοσιακά εργαλεία διεπαφής περιλαμβάνουν:

  • Βιβλιοθήκες όπως το jQuery ή το MooTools
  • Πλαίσια ιστότοπου όπως το Wordpress
  • Απλό CSS
  • Άφθονη χρήση στοιχείων πίνακα

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

Πώς είναι το Front End Development τώρα;

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

Όταν το πρόγραμμα περιήγησης φορτώνει τη σελίδα, η σελίδα λαμβάνει ένα αρχικό έγγραφο HTML που περιλαμβάνει επίσης την ετικέτα σεναρίου στο javascript (όπως πάντα). Αλλά μόλις φορτωθεί αυτό το javascript, φτάνει σε API χρησιμοποιώντας αιτήματα προγράμματος περιήγησης που όταν ολοκληρωθούν, ενημερώστε τη σελίδα για να συμπληρώσετε κάθε είδους δυναμικά δεδομένα που συνήθως θα συνόδευατε με αυτό το πρώτο έγγραφο HTML.

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

Μερικά από τα εργαλεία διεπαφής που είναι πιο κοινά και αυξάνονται σε δημοτικότητα περιλαμβάνουν:

  • Πλαίσια διεπαφής χρήστη όπως το React ή το Vue
  • Πλαίσια ιστού όπως το Gatsby
  • Μεταγλωττιστές όπως ο Babel
  • Πακέτα όπως το Webpack
  • Εργαλεία CSS όπως το Sass

Αλλά αυτά τα API, είτε αυτά πληρώνουμε είτε δημιουργούμε εμείς, πρέπει να κατασκευαστούν κάπου . Εκεί μπαίνει το πίσω άκρο.

Τι είναι το Back End Development;

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

Πώς ήταν παραδοσιακά το Back End Development;

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

Σε κάθε αίτημα προς το διακομιστή, το backend θα εκτελούσε την πλήρη στοίβα των λειτουργιών, συμπεριλαμβανομένης της απόδοσης της διεπαφής. Χρησιμοποιώντας πλαίσια ή αρχιτεκτονικές DIY, το πίσω μέρος θα δεχόταν το αίτημα, θα καταλάβαινε τι πρέπει να κάνει με αυτό το αίτημα, να εκτελέσει οποιαδήποτε επιχειρησιακή λογική που απαιτείται με το αίτημα και να παρέχει στο front end τυχόν δεδομένα στα οποία θα χρειαστεί να εμφανίσει μια απάντηση αυτό το αίτημα.

Μερικά από τα πιο παραδοσιακά εργαλεία back end περιλαμβάνουν:

  • Διακομιστές εσωτερικού χώρου ή απομακρυσμένη διαχείριση όπως το Rackspace
  • Διακομιστές HTTP που χρησιμοποιούν Apache
  • Βάσεις δεδομένων όπως η MySQL
  • Γλώσσες από πλευράς διακομιστή όπως PHP ή Perl
  • Πλαίσια εφαρμογής όπως το Ruby on Rails

Πώς είναι το Back End Development τώρα;

Οι στοίβες οπίσθιου άκρου μοιάζουν κάπως με τον τρόπο που είχαν προηγουμένως, εκτός από τα νεότερα μοτίβα κώδικα, εκτός από το ότι πιο συχνά θα δείτε ότι οι οπίσθιες άκρες παρέχουν δεδομένα μέσω API μέσω αιτημάτων HTTP αντί απευθείας στα πρότυπα που εργάζεται η ομάδα διεπαφών.

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

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

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

Μερικά από τα εργαλεία υποστήριξης που είναι πιο κοινά και αυξάνονται σε δημοτικότητα περιλαμβάνουν:

  • Διακομιστές cloud όπως το AWS EC2
  • Υπηρεσίες χωρίς διακομιστές όπως το AWS Lambda
  • Βάσεις δεδομένων NoSQL όπως το MongoDB
  • Γλώσσες όπως Python ή javascript μέσω NodeJS
  • Πλαίσια εφαρμογών Ιστού όπως το Serverless Framework

Όπου τα πράγματα γίνονται ασαφή

Μέρος της περιστροφής με τα πίσω άκρα είναι τώρα μπορείτε να γράψετε το πίσω μέρος σας με javascript. Με την έναρξη του Node.js, δόθηκε στους προγραμματιστές η δυνατότητα να χρησιμοποιούν την αγαπημένη τους γλώσσα προγράμματος περιήγησης για να κάνουν τα περισσότερα από τα ίδια πράγματα με τα οποία ήταν συνηθισμένα και εξοικειωμένα, αλλά τώρα σε έναν διακομιστή.

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

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

Εμπρόσθιο άκρο εναντίον οπίσθιου άκρου

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

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

Πόροι για μάθηση

Πρόσοψη

  • freecodecamp.org Αποκριτική σχεδίαση Ιστού Πιστοποίηση (freecodecamp.org)
  • Αρχάριοι Javascript (beginnerjavascript.com - Wes Bos)
  • React Tutorial for Beginners (youtube.com - Προγραμματισμός με Mosh)
  • Masters End End (frontendmasters.com)

Επιστροφή

  • freecodecamp.org API και Microservices Certification (freecodecamp.org)
  • Εξαιρετικά απλή εκκίνηση σε διακομιστή (kentcdodds.com)
  • AWS Certified Cloud Practitioner Training 2019 - Ένα δωρεάν 4ωρο μάθημα βίντεο (freecodecamp.org)
  • Εισαγωγή του CS50 στην Επιστήμη των Υπολογιστών (edx.org)

Ολα τα παραπάνω

  • Πώς να γίνετε προγραμματιστής Web πλήρους στοίβας το 2020 (colbyfayock.com)
  • Egghead.io (egghead.io)
  • 100 ημέρες κώδικα (100daysofcode.com)
  • Το Bootcamp για προγραμματιστές Ιστού (udemy.com - Colt Steele)

Ακολουθήστε με για περισσότερα Javascript, UX και άλλα ενδιαφέροντα πράγματα!

  • ; Ακολούθησέ με στο τουίτερ
  • ; ️ Εγγραφείτε στο Youtube μου
  • ✉️ Εγγραφείτε στο Newsletter μου