Πώς να γίνετε προγραμματιστής Web πλήρους στοίβας το 2020

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

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

  • Πρώτα απ 'όλα, τι κάνει πραγματικά έναν προγραμματιστή πλήρη στοίβα;
  • Πριν βουτήξουμε, ας μιλήσουμε για αυτό το επίκεντρο
  • Λοιπόν, από πού ξεκινάμε;
  • Πρόσοψη
  • Επιστροφή
  • DevOps και το σύννεφο
  • Τι γίνεται με το σχεδιασμό;
  • Άλλα πράγματα εάν μόλις ξεκινήσετε
  • Άλλα πράγματα αν ψάχνετε περισσότερα

Πρώτα απ 'όλα, τι κάνει πραγματικά έναν προγραμματιστή πλήρη στοίβα;

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

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

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

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

Από πού ήρθαμε

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

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

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

Πού είμαστε και πού πηγαίνουμε

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

Υπηρεσίες όπως το AWS Lambda σάς επιτρέπουν να δημιουργήσετε μια «λειτουργία» που επεξεργάζεται απλή είσοδο και έξοδο. Συνδέστε το στο API Gateway και έχετε αμέσως ένα τελικό σημείο με το οποίο μπορείτε να συνδεθείτε χωρίς να χρειάζεται να διαχειριστείτε πραγματικά έναν διακομιστή.

Άλλοι όπως το S3 σάς επιτρέπουν να απορρίψετε HTML, CSS, JS, εικόνες και άλλα στατικά στοιχεία στον χώρο αποθήκευσης και να εξυπηρετήσετε τον ιστότοπο απευθείας από αυτόν. Τίποτα δεν γίνεται επεξεργασία στο διακομιστή, απλώς εξυπηρετείτε τα στατικά αρχεία στον πελάτη.

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

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

Οι ομάδες DevOps διαχειρίζονται πλέον πόρους και αναπτύξεις cloud. Οι προγραμματιστές Backend δημιουργούν τώρα API και κώδικα που διασυνδέεται με υπηρεσίες χρησιμοποιώντας εργαλεία όπως λειτουργίες lambda. Και οι προγραμματιστές διεπαφής εργάζονται κυρίως σε εφαρμογές React ή Vue Building Javascript που προσεγγίζουν τις υπηρεσίες που δημιούργησαν οι προγραμματιστές backend. Αναμφισβήτητα, αυτό μπορεί ή όχι να περιλαμβάνει πράγματα όπως το CSS, αλλά αυτό είναι ένα άλλο κουτί σκουληκιών σχετικά με τον τίτλο που λειτουργεί «επίσημα» που εμπίπτει (spoiler: εξαρτάται από την ομάδα).

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

Πριν βουτήξουμε, ας μιλήσουμε για αυτό το επίκεντρο

Μπορεί να είναι αρκετά δελεαστικό να θέλεις να βυθίσεις και να καλύψεις το πλήρες φάσμα ενός προγραμματιστή πλήρους στοίβας, αλλά υπάρχει κάτι που πρέπει να πούμε σχετικά με την εστίαση. Αυτή είναι η βάση της έκφρασης «jack of all trades, master of none», όπου προσπαθείτε να μάθετε λίγο από κάθε μέρος της πλήρους στοίβας και ποτέ να μην κυριαρχείτε τίποτα.

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

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

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

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

Λοιπόν, από πού ξεκινάμε;

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

Όσον αφορά τη στοίβα, θα βασιστούμε στις αρχιτεκτονικές χωρίς διακομιστές / JAMstack, καθώς αυτό θα συνεχίσει να αυξάνεται. Και αν τα μάθετε, θα σας κάνει να είστε πιο εμπορεύσιμοι μόνο με τον αριθμό των θέσεων εργασίας που εμφανίζονται γύρω του.

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

Ενώ μπορεί να εργάζεστε στο React και να νιώθετε άνετα με την τρέχουσα εργασία σας (αυτό είναι εντάξει!), Η επόμενη δουλειά σας μπορεί να είναι βαριά στο Vue ή "έκπληξη!" ο επικεφαλής της ομάδας σας θέλει να ξαναγράψει την εφαρμογή στο Svelte. Προσπαθήστε να καταλάβετε γιατί χρησιμοποιείτε πρώτα ένα πλαίσιο διεπαφής χρήστη και πώς σας βοηθά να λύσετε το πρόβλημα που αντιμετωπίζετε.

Τώρα ας πάμε σε αυτό ...

Πρόσοψη

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

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

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

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

Τι πρέπει να μάθω λοιπόν;

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

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

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

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

Ξεκινώντας με τη Δημιουργία εφαρμογής React ή το Gatsby θα σας βοηθήσει ακόμη και να δημιουργήσετε εύκολα μια εφαρμογή React και να μπείτε αμέσως σε μια θέση όπου μπορείτε να παίξετε τον κώδικα.

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

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

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

Πόροι

  • freecodecamp.org Αποκριτική σχεδίαση Ιστού Πιστοποίηση //www.freecodecamp.org/learn
  • "Βάλτε το Javascript: Μάθετε πρώτα HTML & CSS" //www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/
  • Εισαγωγή MDN στο Javascript //developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
  • Απλώς μάθημα email Javascript //justjavascript.com/
  • JSRobot Learning Game //lab.reaal.me/jsrobot/
  • reactjs.org Εισαγωγή στο React //reactjs.org/tutorial/tutorial.html
  • Tutorials gatsbyjs.org //www.gatsbyjs.org/tutorial/

Επιστροφή

Στον κόσμο του JAMstack, το back end θα αναφέρεται γενικά στα API που χρησιμοποιούν οι διεπαφές μας για να δημιουργήσουν δυναμικές εμπειρίες αλληλεπιδρώντας με τελικά σημεία από τον πελάτη (όπως αυτά στα CRUD APIs). Η δυνατότητα υποβολής αυτών των αιτημάτων από τον πελάτη θα καταργήσει την ανάγκη να γίνει οποιαδήποτε από αυτήν την επεξεργασία πριν από την προβολή της σελίδας στο πρόγραμμα περιήγησης.

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

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

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

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

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

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

Τι πρέπει να μάθω λοιπόν;

Εάν εργάζεστε ήδη για να μάθετε Javascript από την πρώτη πλευρά των πραγμάτων, συνεχίστε χρησιμοποιώντας το Javascript για το backend σας. Περιστρέψτε ένα λάμδα χρησιμοποιώντας τις λειτουργίες Netlify, όπου απλώς πρέπει να εστιάσετε στον κώδικα και το Netlify φροντίζει τα υπόλοιπα (όπως στην πραγματικότητα να δημιουργήσετε και να αναπτύξετε τη λειτουργία σας).

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

Ίσως δημιουργήστε ένα τελικό σημείο που μπορεί να στείλει ένα tweet χρησιμοποιώντας το Twitter API (αλλά μην το κάνετε κατάχρηση). Μάθετε πώς μπορείτε να δημιουργήσετε μια βάση δεδομένων και να ρυθμίσετε τη λειτουργία σας για διασύνδεση με αυτήν σε ένα μοτίβο CRUD, το οποίο θα σας δώσει μια πιο ρεαλιστική περίπτωση χρήσης για το πώς μια τυπική εφαρμογή μπορεί να αλληλεπιδράσει με ένα backend.

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

Πόροι

  • "Εξαιρετικά απλή εκκίνηση σε διακομιστή" //kentcdodds.com/blog/super-simple-start-to-serverless
  • "Δημιουργία εφαρμογών CRUD χωρίς διακομιστές με λειτουργίες Netlify & FaunaDB" //www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/

DevOps και το σύννεφο

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

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

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

Και αυτό αλλάζει συνεχώς! Δεδομένης της έκρηξης χωρίς διακομιστή, εμφανίστηκε το πλαίσιο χωρίς διακομιστή που διαχειρίζεται πολλά από αυτά με έναν ευκολότερο τρόπο, γεγονός που οδηγεί ακόμη και την AWS να δημιουργήσει τη δική της λύση SAM. Εργαλεία όπως η Jenkins υπάρχουν εδώ και λίγο καιρό για το CI / CD μέρος των πραγμάτων, αλλά τώρα βλέπετε ότι οι Github, Gitlab και άλλοι πάροχοι ελέγχου πηγής παρέχουν τις δικές τους λύσεις και εργαλεία όπως το CircleCI που συνδέονται απευθείας με το έργο σας.

Επίσης, δεν είναι ακόμα τέλειο - η σύνταξη προτύπων CloudFormation είναι τρομακτική. Η συγγραφή σεναρίων αυτοματοποίησης επίσης δεν είναι η πιο διασκεδαστική, αν και είναι εξαιρετικά ικανοποιητική όταν λειτουργεί!

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

Τι πρέπει να μάθω λοιπόν;

Εάν αυτή είναι η πρώτη φορά που ρυθμίζετε κάτι τέτοιο, ξεκινήστε με το Netlify. Ρυθμίστε μια εφαρμογή React ή ακόμα και ένα απλό αρχείο HTML σε ένα αποθετήριο Github, συνδέστε το σε έναν νέο λογαριασμό Netlify και παρακολουθήστε το να αναπτύσσεται.

Από εκεί, ή εάν έχετε ήδη λίγη εμπειρία, αρχίστε να είστε περίεργοι για το τι συμβαίνει πίσω από τα παρασκήνια. Το Netlify πιθανότατα παίρνει τον κωδικό σας, εκτελώντας τις εντολές που έχετε ρυθμίσει (όπως yarn build) σε ένα εικονικό περιβάλλον, ρίχνοντας τα αρχεία που είναι ενσωματωμένα στον χώρο αποθήκευσης όπως το S3 και βάζοντας ένα CDN μπροστά του, όπως το CloudFront για να εξυπηρετεί από ένα τελικό σημείο.

Πρώτα δοκιμάστε να το κάνετε χειροκίνητα από τον υπολογιστή σας χρησιμοποιώντας την κονσόλα AWS και το CLI τους και, στη συνέχεια, γράψτε ένα σενάριο για να αυτοματοποιήσετε ολόκληρη τη διαδικασία ενσωμάτωσης με το Circle CI στο έργο Github αντί για το Netlify για να το χρησιμοποιήσετε πραγματικά στο AWS.

Η λήψη αυτής της εγκοπής θα περιλαμβάνει υπηρεσίες στροβιλισμού με τις οποίες μπορεί να διασυνδέεται το back end σας. Έχετε μια βάση δεδομένων που χρησιμοποιούν οι υπηρεσίες σας; Μπορείτε να αυτοματοποιήσετε την περιστροφή της βάσης δεδομένων χρησιμοποιώντας σενάρια CloudFormation ή bash.

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

Και όλα αυτά ισχύουν για οποιονδήποτε πάροχο cloud ή CI / CD, όχι μόνο AWS και Circle CI. Διαλέξτε το αγαπημένο σας εργαλείο cloud και ροής εργασίας και εκτελέστε το. Το θέμα είναι, αρχίστε να κοιτάζετε τις ανάγκες του έργου σας και ανακαλύψτε τι πραγματικά συμβαίνει στα αυτοματοποιημένα μέρη της στοίβας. Αυτό θα σας βοηθήσει να μάθετε περισσότερα και να γίνετε πιο επινοητικοί για τις ανάγκες του έργου σας.

Πόροι

  • "Ένας οδηγός βήμα προς βήμα: Ανάπτυξη στο Netlify" //www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/
  • «Ρύθμιση στατικού ιστότοπου» //docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html
  • "AWS Certified Cloud Practitioner Training 2019 - Ένα δωρεάν 4ωρο βίντεο" //www.freecodecamp.org/news/aws-certified-cloud-practitioner-training-2019-free-video-course/
  • Δείτε τους πόρους Javascript στο Front End παραπάνω

Τι γίνεται με το σχεδιασμό;

Ναι, πρέπει να κατανοήσετε τα βασικά στοιχεία του σχεδιασμού. Όχι, δεν χρειάζεται να είσαι σχεδιαστής.

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

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

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

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

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

Τι πρέπει να μάθω λοιπόν;

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

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

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

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

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

Πόροι

  • Σχεδιασμός για προγραμματιστές //thoughtbot.com/upcase/design-for-developers
  • Hack Design //hackdesign.org
  • Σχεδιασμός για χάκερ //designforhackers.com/
  • Εισαγωγή στην Προσβασιμότητα στον Ιστό //webaim.org/intro/

Άλλα πράγματα εάν μόλις ξεκινήσετε

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

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

Τι πρέπει να μάθω λοιπόν;

Πρώτα πράγματα πρώτα, ρυθμίστε το πρόγραμμα επεξεργασίας κώδικα. Το Visual Studio Code είναι όλη η οργή αυτή τη στιγμή, αλλά υπάρχουν και άλλοι που θα σας εξυπηρετήσουν ανάλογα με τις προτιμήσεις σας όπως το Atom ή το Sublime Text. Θα βρείτε ακόμη και IDE που βασίζονται σε σύννεφο όπως το Repl.it ή μπορείτε απλά να ξεκινήσετε με ένα χαμηλότερο εμπόδιο εισόδου παίζοντας στο CodePen ή στο JSFiddle.

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

Θα θελήσετε να εξοικειωθείτε με μερικές από τις βασικές εντολές του git όπως η προσθήκη νέων αλλαγών καθώς και οι κλάδοι και πώς να τα χρησιμοποιήσετε. Το Git είναι ένας τεράστιος κόσμος, δεν χρειάζεται να το μάθετε αμέσως, θα μάθετε γρήγορα ότι υπάρχει μια ατελείωτη ποσότητα νέων πραγμάτων για να μάθετε στο ταξίδι σας για να αποκτήσετε το git fu.

Για πολλά εργαλεία που θα χρησιμοποιήσετε, υπάρχουν διαθέσιμα GUI όπως το GitKraken, αλλά θα εξακολουθείτε να είστε λίγο περιορισμένοι με ό, τι μπορείτε να κάνετε. Η εκμάθηση των προεπιλεγμένων τερματικών στο μηχάνημά σας ή η λήψη άλλων επιλογών όπως το iterm2 (η προτίμησή μου) ή το Xterm.js θα είναι το καλύτερο στοίχημά σας. Μπόνους: θα αισθάνεστε σαν χάκερ ταινιών κάθε φορά που το χρησιμοποιείτε (ή είναι μόνο εγώ;).

Πόροι

  • Ξεκινώντας με τον Visual Studio Code //www.codecademy.com/articles/visual-studio-code
  • Πόροι Git από το Github //try.github.io/
  • Μάθετε git με διακλάδωση του παιχνιδιού //learngitbranching.js.org/
  • Εισαγωγή στη γραμμή εντολών Mac //blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line

Άλλα πράγματα αν ψάχνετε περισσότερα

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

Δοκιμές και οι διαφορετικές μεθοδολογίες

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

Εργαλεία προγράμματος περιήγησης όπως το Chrome DevTools

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

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

HTTP και τρόπος εντοπισμού σφαλμάτων αιτήσεων στον πίνακα δικτύου

Δεδομένου ότι ο ιστός βασίζεται στο Διαδίκτυο, η εφαρμογή σας θα υποβάλλει τελικά αιτήματα σε άλλους διακομιστές. Όταν συμβεί αυτό, η κατανόηση του σημείου chokepoints ή ο τρόπος με τον οποίο υποβάλλεται ένα αίτημα μπορεί να σας βοηθήσει να καταλάβετε γιατί η εφαρμογή σας φαίνεται καθυστερημένη ή γιατί το κουμπί αποθήκευσης δεν λειτουργεί.

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

Διαχειριστές λογισμικού και πακέτων ανοιχτού κώδικα

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

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

Τι άλλο?

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

Είσαι φωτιά! Τράβηγμα όλα μαζί

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

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

Από εδώ, θα πρέπει να μπορείτε να δημιουργήσετε:

  • Μια διεπαφή εφαρμογής ιστού που εκτελείται στο πρόγραμμα περιήγησης
  • Υπηρεσίες backend στις οποίες η εφαρμογή ιστού μπορεί να υποβάλλει αιτήματα μέσω τελικών σημείων
  • Γράψτε ένα σενάριο για σύνδεση σε ένα εργαλείο CI / CD για να αυτοματοποιήσετε τη διαδικασία κατασκευής και ανάπτυξης
  • Μπόνους: Λάβετε καλές αποφάσεις σχετικά με το πώς φαίνεται η διεπαφή σας, ώστε οι χρήστες να μπορούν πραγματικά να το χρησιμοποιήσουν!

Βγείτε και χτίστε! Μοιραστείτε μαζί μας το αναπτυξιακό σας ταξίδι στο Twitter χρησιμοποιώντας το hashtag #codejourney. Θα θέλαμε πολύ να μάθουμε περισσότερα για το πού ήσουν και τι έχετε χτίσει ή για το πού πηγαίνετε και για το τι θέλετε να χτίσετε.

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

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