Ο καλύτερος τρόπος για να μάθετε την ανάπτυξη Web Frontend

Γιατί ανάπτυξη Ιστού;

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

Οι εφαρμογές που βασίζονται στο cloud μας επέτρεψαν να κάνουμε τη βαριά ανύψωση στο cloud και να χρησιμοποιήσουμε το πρόγραμμα περιήγησης ως γέφυρα για τη σύνδεση ισχυρών διακομιστών backend με λιγότερο ικανά και ισχυρά frontends.

Τώρα είναι η καλύτερη στιγμή για να μάθετε την ανάπτυξη ιστού εάν θέλετε να μάθετε κάτι.

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

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

Τώρα που αποδείξαμε το γεγονός ότι ο ιστός είναι ο καλύτερος τρόπος για να πάτε τώρα, ας δούμε πώς να μάθουμε την ανάπτυξη ιστού με τον καλύτερο δυνατό τρόπο.

Ο ιστός είναι τεράστιος - ξεκινήστε το μικρό και κρατήστε το μικρό

Πιθανότατα έχετε δει μεγάλο αριθμό πλαισίων JavaScript και βιβλιοθηκών εκεί όπως React, Angular, Vue, Ember, jQuery, XYZ και ούτω καθεξής.

Μερικές πολύ συνηθισμένες ερωτήσεις που λαμβάνω ως περιεχόμενο ανάπτυξης ιστοσελίδων από το YouTuber είναι οι εξής:

Πρέπει να μάθω το Χ;

Είναι το X καλύτερο από το Y;

Ποιο είναι το πεδίο εφαρμογής του Z;

Να θυμάστε πάντα δύο πράγματα για την τεχνολογία, ειδικά για τον Ιστό:

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

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

Ξεκινήστε με HTML και CSS

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

Το JavaScript ήταν μόνο μια γλώσσα δέσμης ενεργειών προγράμματος περιήγησης στην αρχή. Και παρόλο που είναι πολύ περισσότερο από αυτό τώρα, δεν αλλάζει το γεγονός ότι στον ιστό συμπληρώνει HTML και CSS.

Με τις εξελίξεις στα πρότυπα ιστού, υπάρχουν πολλά που μπορείτε να επιτύχετε μόνο στο CSS. Για πολλά πράγματα, δεν απαιτείται καν JavaScript.

Κινούμενα σχέδια; Το έχεις. Μεταφορά και απόθεση; Το HTML μπορεί να το χειριστεί αυτό. Διατάξεις; Δείτε τα API Flexbox ή Grid CSS!

Υπάρχουν τόσα πολλά πράγματα που μπορείτε να μάθετε για HTML και CSS! Μην σπεύδεις απλώς το JavaScript γιατί όλα τα ωραία παιδιά στο μπλοκ είναι στο Angular. Αυτές οι βιβλιοθήκες και τα πλαίσια δεν πηγαίνουν πουθενά. Πάρτε το χρόνο σας .

Πηγαίνετε φαρδιά ή πηγαίνετε βαθιά;

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

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

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

Λοιπόν, ποια είναι η λύση; Η απάντηση είναι, εκπληκτικά, ότι δεν κάνει κανένα. Επιλέξτε μια μικρή τεχνολογική στοίβα όπως HTML / CSS / JavaScript και πηγαίνετε αρκετά βαθιά και στα τρία. Αυτό έχει μερικά πλεονεκτήματα:

  1. Δεν θα βαρεθείτε, καθώς και οι τρεις έχουν σχετικά διαφορετικούς σκοπούς και τους γράφετε διαφορετικά.
  2. Μπορείτε να συνδυάσετε και τα τρία και να δημιουργήσετε και να δείτε κάτι νόημα γρήγορα χωρίς μήνες προσπάθειας (το οποίο συνήθως απαιτείται από άλλες γλώσσες όπως το C / C ++). Αυτό θα σας παρακινήσει να συνεχίσετε.

Μην επιλέξετε React, or Angular ή Vue

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

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

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

Δημιουργήστε ένα μικρό αλλά λειτουργικό έργο με HTML / CSS / JavaScript. Και όταν το κάνετε, δημιουργήστε ένα ακόμη και, στη συνέχεια, δημιουργήστε ένα άλλο έργο.

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

Βλέπετε, υπάρχουν πλαίσια για την εκφόρτωση επαναλαμβανόμενων εργασιών από εσάς. Δεν υπάρχουν, έτσι ώστε να αγνοείτε τι πραγματικά συμβαίνει κάτω από την κουκούλα και βασίζεστε στο γεγονός ότι είναι όλα μαγικά.

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

Κύριος ενός εμπορίου

Τώρα, όταν είστε ικανοί με HTML / CSS / JavaScript, ήρθε η ώρα να προχωρήσετε στα βιομηχανικά πρότυπα. Η αλήθεια είναι, ανεξάρτητα από το πόσο καλός είναι ένας προγραμματιστής JavaScript, θα πρέπει συχνά να συνεργάζεστε με σύγχρονα πλαίσια όπως το React - και μόνο με τις γνώσεις σας σχετικά με το JavaScript, δεν μπορείτε να το κυριαρχήσετε αμέσως.

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

Πώς μπορείτε να ρωτήσετε; Η απάντηση είναι απλή - εξαρτάται από εσάς. Δημιουργήστε ένα απλό έργο σε όλα τα μεγάλα πλαίσια (Angular, Vue και React) και δείτε ποια από αυτές σας ταιριάζει περισσότερο. Επιλέξτε ένα και μην κοιτάτε πίσω

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

Αλλά μην ξεχνάτε τους άλλους

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

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

Αυτό θα μπορούσε να περιλαμβάνει πολλά πράγματα - όπως δοκιμές μονάδας με Jest, δοκιμές από άκρο σε άκρο με Cypress, Webpack, Babel ή Parcel, λίγο devops, scripting κελύφους Linux, αναπτύξεις διακομιστών και ούτω καθεξής.

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

Προχώρα

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

Ο ιστός. Είναι. Απέραντος.

Έτσι, εάν τελειώσετε με HTML / CSS / JavaScript / React / Angular / Vue, μεταβείτε στους διακομιστές. Μάθετε για την ανάπτυξη διακομιστή, NGiNX, HAProxy, εξισορρόπηση φορτίου, ρύθμιση υποδομής cloud, τείχη προστασίας και αυτόματη κλιμάκωση.

Έγινε και αυτό; Μεταβείτε στο WebAss Assembly, τη γλώσσα για την επόμενη επανάληψη του ιστού.

Ολοκληρώθηκε η εκμάθηση WebAss Assembly; Err, δεν ξέρω τότε. Ίσως να προχωρήσετε σε άλλους τομείς προγραμματισμού ή στο μαγείρεμα; :)

συμπέρασμα

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

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

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

Ειρήνη!