Front-end έναντι ανάπτυξης πίσω. Ποια πρέπει να μάθετε και γιατί;

Υπάρχει τόσο πολύ buzz τώρα για να γίνει προγραμματιστής.

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

Θα πρέπει να αρχίσετε να μαθαίνετε να γίνετε πρωτοπόρος προγραμματιστής;

Ένας back-end προγραμματιστής;

Ένας πλήρης προγραμματιστής στοίβας;

Τι σημαίνουν ακόμη και αυτοί οι όροι;

Για να σας βοηθήσουμε να καταλάβετε, θα ξεκινήσουμε εξηγώντας τη διαφορά ανάμεσα στην ανάπτυξη του front-end και του back-end σε υψηλό επίπεδο.

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

Ορίστε.

Ας ξεκινήσουμε με μια αναλογία ενός καταστήματος τούβλων και κονιάματος.

Σκεφτείτε το μέσο κατάστημα. Σχεδόν όλα αυτά έχουν ένα front-end και ένα back-end.

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

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

Ένα κατάστημα που έχει ένα front-end αλλά όχι ένα back-end θα έχανε γρήγορα τα προϊόντα για τα ράφια του. Δεν θα ήταν σε θέση να τους αποθεματοποιήσει αρκετά γρήγορα.

Ένα κατάστημα που έχει ένα back-end αλλά όχι ένα front-end θα ήταν εξαιρετικά δύσκολο να πλοηγηθείτε για τους πελάτες. Το Costoco είναι ένα παράδειγμα. Στο Costco, είναι πολύ δύσκολο να βρείτε αυτό που ψάχνετε χωρίς να πάρετε έναν τόνο βοήθειας.

Τόσο το front-end όσο και το back-end είναι ζωτικής σημασίας για τη λειτουργία του καταστήματος στο σύνολό του. Κάθε άκρο εξυπηρετεί διαφορετικές ανάγκες και απαιτήσεις. Η "πλήρης στοίβα" του καταστήματος πρέπει να λειτουργήσει ώστε το κατάστημα να είναι επιτυχές.

Το ίδιο ισχύει και για εφαρμογές ιστού.

Τι είναι προγραμματιστής Front-end;

Είναι η δουλειά του προγραμματιστή του front-end να επικεντρώνεται στο laser με βάση την εμπειρία που έχει ο χρήστης όταν επισκέπτεται ιστοσελίδες. Οι προγραμματιστές του front-end συχνά συνεργάζονται στενά με τους σχεδιαστές για να μετατρέψουν τις ιδέες τους σε πραγματικότητα.

Εδώ είναι μερικές τεχνολογίες που χρησιμοποιούν οι προγραμματιστές του front-end πολύ συχνά:

Η HTML (HyperText Markup Language) είναι ο ακρογωνιαίος λίθος του ιστού. Όλες οι ιστοσελίδες και οι εφαρμογές ιστού κατασκευάζονται από έγγραφα HTML με τα οποία αλληλεπιδρά το πρόγραμμα περιήγησης. HTML είναι αρκετά εύκολο να μάθει. Έτσι, ενώ είναι τεχνικά μια τεχνολογία front-end, είναι χρήσιμο για όλους τους προγραμματιστές να έχουν τουλάχιστον ένα ορισμένο επίπεδο εξοικείωσης με αυτό.

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

Το JavaScript είναι μια γλώσσα προγραμματισμού που τρέχει μέσα σε προγράμματα περιήγησης ιστού. Οι προγραμματιστές του Front-end εστιάζουν στη σύνταξη κώδικα JavaScript που εκτελείται απευθείας μέσα σε ένα πρόγραμμα περιήγησης ιστού. Το JavaScript μπορεί να βοηθήσει στην ανάπτυξη υγρών αλληλεπιδράσεων χρηστών. Το Gmail και οι Χάρτες Google αποτελούν παραδείγματα εφαρμογών που απαιτούν πολύ JavaScript.

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

Προηγμένες πρακτικές ανάπτυξης προγραμματιστών

Εφόσον οι προγραμματιστές του front-end επικεντρώνονται σε μια στενή πτυχή της ανάπτυξης ιστού, έχουν απόψεις για το πώς πρέπει να οικοδομηθούν τα πράγματα.

Προεπεξεργαστές CSS

Το 1996, μια επιτροπή προτύπων καθόρισε αρχικά τις προδιαγραφές για τον τρόπο με τον οποίο όλοι οι φυλλομετρητές ιστού πρέπει να εμφανίζουν τις διάφορες πτυχές. Δεδομένου ότι υπάρχουν πολλοί διαφορετικοί φυλλομετρητές ιστού και θέλετε οι σελίδες να είναι συνεπείς σε όλα τα προγράμματα περιήγησης ιστού, το W3C (Κοινοπραξία World Wide Web) δημιούργησε πρότυπα.

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

Οι γλώσσες του Less και του Saas είναι οι πιο συχνά χρησιμοποιούμενες γλώσσες προεπεξεργαστών. Δείτε πώς είναι διαφορετικά:

  • Λιγότερο είναι μια διαφορετική γλώσσα από το CSS εξ ολοκλήρου. Το κανονικό CSS λειτουργεί στο Sass, αλλά υποστηρίζει και πρόσθετα χαρακτηριστικά.
  • Ο ιστότοπος Sass καλεί το sass "CSS με Superpowers".

Μόλις λάβετε μια λαβή για κανονικό CSS, τόσο ο Sass όσο και ο Λιγότερος είναι αρκετά εύκολο να σηκωθούν.

Οι προγραμματιστές γενικά χρησιμοποιούν αυτά επειδή είναι πιο ισχυροί από το κανονικό CSS και μπορούν να επιτρέψουν καθαρότερο κώδικα.

Προηγμένα μοτίβα CSS

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

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

Πλαίσια JavaScript

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

Αυτή τη στιγμή υπάρχουν τρία σημαντικά πλαίσια:

  • Το Angular αναπτύχθηκε από την Google και έχει χρησιμοποιηθεί από πολλές εφαρμογές ιστού. Η επόμενη γενιά του γωνιακού είναι γωνιακή 2, και υπάρχουν μερικές σημαντικές διαφορές μεταξύ των δύο.
  • Το Ember είναι ένα front-end πλαίσιο με προέλευση στην Apple. Η Apple δημιούργησε ένα πλαίσιο που ονομάζεται SproutCore, το οποίο μετονομάστηκε αργότερα σε Ember.
  • Το React είναι ένα front-end πλαίσιο που δημιουργήθηκε από τους μηχανικούς στο Facebook. Το οικοσύστημα του React εξελίσσεται ταχύτατα, αλλά αρχίζει να σταθεροποιείται. Το React-Fiber είναι μια πλήρης επανεγγραφή του πλαισίου που έχει σχεδιαστεί για να είναι ταχύτερη, αλλά και για να διατηρηθεί η συμβατότητα με τον παλαιότερο κώδικα React.

Άλλα αξιοσημείωτα πλαίσια είναι το Backbone & VueJS.

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

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

Μετασχηματιστές JavaScript

Τα προγράμματα περιήγησης στο Web κατανοούν το JavaScript. Ορισμένοι transpeller θα ξαναγράψουν κώδικα από άλλες γλώσσες προγραμματισμού σε JavaScript. Οι προγραμματιστές ιστού συχνά μαθαίνουν και αυτά τα εργαλεία.

Εδώ είναι μερικές κοινές transpilers:

  • Το ES6 είναι η επόμενη έκδοση του JavaScript. Είναι συμβατό με παλαιότερες εκδόσεις του JavaScript, αλλά έχει πρόσθετα χαρακτηριστικά.Το εργαλείο μετατροπής που χρησιμοποιείται για την αλλαγή του ES6 σε κανονικό κώδικα JavaScript ονομάζεται babel. Το ES6 είναι αρκετά νέο, αλλά είμαι πολύ δημοφιλής στο μέλλον του.
  • Το CoffeeScript είναι μια γλώσσα προγραμματισμού που μοιάζει με ρουμπινί και μετατρέπεται σε JavaScript. Είναι ενσωματωμένο στο πλαίσιο των σιδηροτροχιών από προεπιλογή και χρησιμοποιείται από πολλούς προγραμματιστές.
  • Το TypeScript ακολουθεί μια ριζοσπαστική προσέγγιση για να αλλάξει θεμελιωδώς τη JavaScript από μια δυναμικά-πληκτρολογημένη γλώσσα σε μια στατικά πληκτρολογημένη. Αυτό σημαίνει ότι είναι μια ουσιαστικά διαφορετική γλώσσα. Το TypeScript είναι μια πρωτοβουλία της Microsoft. Η επιτυχία της εξαρτάται σε μεγάλο βαθμό από τα ποσοστά υιοθέτησης του γωνιακού 2.

Η κατώτατη γραμμή με Front-end Ανάπτυξη

Τα πράγματα εξελίσσονται πολύ γρήγορα. Αυτό είναι συναρπαστικό. Είναι επίσης τρομακτικό.

Ο όρος Κόπωση JavaScript χρησιμοποιείται για να περιγράψει την τάση της κοινότητας JavaScript να κινηθεί προς νέα και λαμπερά αντικείμενα.

Μην ανησυχείτε πάρα πολύ για τη μη χρήση της τελευταίας τεχνολογίας.

Τι είναι ο Back-end Developer;

Οι προγραμματιστές του Front-end εστιάζουν στην εργασία με εργαλεία, τεχνολογίες και γλώσσες προγραμματισμού που τρέχουν μέσα σε προγράμματα περιήγησης ιστού. Οι back-end προγραμματιστές επικεντρώνονται σε .... οτιδήποτε άλλο.

Τι σημαίνει λοιπόν αυτό; Ας σμικρύνουμε λίγο.

Ας μιλήσουμε για το πώς λειτουργούν οι εφαρμογές ιστού.

  • Για να ξεκινήσει, ένα πρόγραμμα περιήγησης στο Web φτάνει στο Διαδίκτυο και εκτελεί αυτό που είναι γνωστό ως αίτημα HTTP GET στη διεύθυνση URL που επισκέπτεστε.
  • Η μαγεία συμβαίνει μέσω των σωλήνων στο Διαδίκτυο
  • Τελικά, θα φτάσει σε ένα διακομιστή (έναν υπολογιστή) τον οποίο εσείς ως web developer έχετε τον έλεγχο.

Είναι δική σας δουλειά ως back-end προγραμματιστής να "κάνει τη μαγεία να συμβεί" και να δώσει στο χρήστη αυτό που αναμένουν να δούμε.

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

Βάσεις δεδομένων

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

Οι βάσεις δεδομένων σας επιτρέπουν να προσθέσετε, να αφαιρέσετε, να αλλάξετε και να αποκτήσετε πρόσβαση σε πράγματα, όπως τα δεδομένα που δημιουργούνται από τους χρήστες, πιο εύκολα. Σχεδόν όλες οι εφαρμογές ιστού χρησιμοποιούν βάσεις δεδομένων και υπάρχουν δύο σημαντικοί διαφορετικοί τύποι βάσεων δεδομένων: SQL και NoSQL.

Οι περισσότερες εφαρμογές web χρησιμοποιούν βάσεις δεδομένων SQL. Είναι συνηθισμένο να δημιουργείτε εφαρμογές ιστού που σας επιτρέπουν να δημιουργείτε σειρές, να τις διαβάζετε, να τις ενημερώνετε και να τις καταστρέφετε. Αυτό ονομάζεται "CRUD" για συντομία.

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

Αρχιτεκτονική μοντέλου / προβολής / ελεγκτή. Σχεδόν όλες οι σύγχρονες εφαρμογές web ακολουθούν μια τυπική αρχιτεκτονική μοντέλου / προβολής / ελεγκτή. Το Ruby on Rails το κάνει και άλλα πλαίσια όπως το ExpressJS κάνουν επίσης. Το πλαίσιο αυτό καταργεί διαφορετικές ευθύνες μέσα σε μια εφαρμογή και επιτρέπει σε διαφορετικά τμήματα της εφαρμογής να αντιμετωπίζουν κάθε ευθύνη.

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

Η προβολή είναι η σελίδα HTML που θα πρέπει να βλέπει το πρόγραμμα περιήγησης ιστού. Ενώ η προβολή είναι ένα στοιχείο front-end, οι περισσότεροι προγραμματιστές είναι σε θέση να προσθέσουν γρήγορα κάτι σε μια ιστοσελίδα αν χρειαστεί.

Ο ελεγκτής είναι η κόλλα μεταξύ των διαφόρων άλλων τεμαχίων μιας διαδικτυακής εφαρμογής.

RESTful Αρχιτεκτονική. Το REST είναι μια ιδέα σκέψης για το υποκείμενο νόημα των αιτήσεων HTTP που είναι στην πραγματικότητα. Οι back-end προγραμματιστές είναι σε θέση να σκεφτούν μέσω του τι HTTP αιτήσεις μια εφαρμογή web θα πρέπει να περιμένουν να δουν και να ξέρουν πώς να το συνδέσετε με την εφαρμογή τους (ειδικά οι ελεγκτές τους) χρησιμοποιώντας κάτι γνωστό ως δρομολόγηση.

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

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

Η κατώτατη γραμμή με Back-end Ανάπτυξη

Οι back-end προγραμματιστές ασχολούνται με διακομιστές και βάσεις δεδομένων. Βοηθούν επίσης να μετατρέψετε τα αιτήματα HTTP σε πραγματικές απαντήσεις από το διαδίκτυο.

Εδώ είναι γιατί το να είσαι πλήρης Stack Developer είναι το καλύτερο

Οι προγραμματιστές πλήρους στοίβας είναι σε θέση να γράψουν τόσο κώδικα front-end όσο και κώδικα που εκτελείται σε διακομιστές.

Υπάρχουν πολλοί λόγοι που θα θελήσετε να εστιάσετε τις προσπάθειές σας ώστε να γίνετε πλήρης προγραμματιστής.

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

Αυτό σημαίνει ότι αν είστε ...

  • Εργασία για μια εταιρεία που προσθέτει ένα χαρακτηριστικό
  • Δημιουργώντας μια ιδέα για ένα πλευρικό έργο
  • Προσδιορισμός σφάλματος με υπάρχουσα εφαρμογή

... θα είστε σε θέση να εργαστείτε με όλες τις πτυχές του κώδικα.

Δεύτερον, ακόμα κι αν εστιάζετε περισσότερο στον κωδικό του front-end ή στον κωδικό back-end, πρέπει να έχετε ένα θεμέλιο στην άλλη όψη.

Δεν μπορείτε να είστε ένας μεγάλος προγραμματιστής στο front-end, χωρίς να μπορείτε να μιλήσετε με έναν προγραμματιστή του back-end σχετικά με τις συνέπειες των δομών βάσεων δεδομένων.

Επίσης, δεν μπορείτε να είστε ένας μεγάλος προγραμματιστής, αν δεν εκτιμάτε πώς να χτίσετε τους τύπους των RESTful API που είναι εύκολο να ενσωματωθούν οι προγραμματιστές του front-end.

Τρίτον, οι εφαρμογές ιστού θα αποτελούνται πάντοτε και από τα δύο μέρη. Για να έχετε πλήρη κατανόηση του τι συμβαίνει σε μια εφαρμογή web, θα πρέπει να έχετε μια ισχυρή κατανόηση τόσο του front-end όσο και του back-end.

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

Το ίδιο πράγμα ισχύει και για την ανάπτυξη.

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

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

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

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