Πώς είναι να μαθαίνεις JavaScript το 2016

κατά τη σύνταξη αυτού του άρθρου. Δεν δημιουργήθηκαν πλαίσια JavaScript Το παρακάτω είναι εμπνευσμένο από το άρθρο «It's the future» από το Circle CI. Μπορείτε να διαβάσετε το πρωτότυπο εδώ . Αυτό το κομμάτι είναι απλώς μια γνώμη και, όπως κάθε πλαίσιο JavaScript, δεν πρέπει να λαμβάνεται πολύ σοβαρά υπόψη. Γεια, πήρα αυτό το νέο έργο ιστού, αλλά για να είμαι ειλικρινής δεν έχω κωδικοποιήσει πολύ τον ιστό εδώ και μερικά χρόνια και άκουσα ότι το τοπίο άλλαξε λίγο. Είστε ο πιο ενημερωμένος προγραμματιστής ιστού εδώ, σωστά; -Ο πραγματικός όρος είναι Front End engineer, αλλά ναι, είμαι ο σωστός τύπος. Κάνω web το 2016. Οπτικοποιήσεις, συσκευές αναπαραγωγής μουσικής, ιπτάμενα drones που παίζουν ποδόσφαιρο, όπως το πείτε. Μόλις επέστρεψα από το JsConf και το ReactConf, επομένως γνωρίζω τις πιο πρόσφατες τεχνολογίες για τη δημιουργία εφαρμογών ιστού. Δροσερός. Πρέπει να δημιουργήσω μια σελίδα που να εμφανίζει την πιο πρόσφατη δραστηριότητα από τους χρήστες, επομένως πρέπει απλώς να λάβω τα δεδομένα από το τελικό σημείο REST και να τα εμφανίσω σε κάποιο είδος πίνακα με δυνατότητα φιλτραρίσματος και να την ενημερώσω εάν αλλάξει κάτι στον διακομιστή. Σκεφτόμουν μήπως χρησιμοποιούσα το jQuery για να ανακτήσω και να εμφανίσω τα δεδομένα; -Θεέ μου όχι, κανείς δεν χρησιμοποιεί πια jQuery. Θα πρέπει να δοκιμάσετε να μάθετε το React, είναι 2016. Ω, εντάξει. Τι είναι το React; -Είναι μια πολύ ωραία βιβλιοθήκη που φτιάχτηκε από μερικά παιδιά στο Facebook, φέρνει πραγματικά τον έλεγχο και την απόδοση στην εφαρμογή σας, επιτρέποντάς σας να χειρίζεστε πολύ εύκολα οποιεσδήποτε αλλαγές προβολής. Αυτό ακούγεται προσεγμένο. Μπορώ να χρησιμοποιήσω το React για να εμφανίσω δεδομένα από τον διακομιστή; -Ναι, αλλά πρώτα πρέπει να προσθέσετε το React και το React DOM ως βιβλιοθήκη στην ιστοσελίδα σας. Περιμένετε, γιατί δύο βιβλιοθήκες; -Έτσι, το ένα είναι η πραγματική βιβλιοθήκη και το δεύτερο είναι για χειρισμό του DOM, το οποίο τώρα μπορείτε να περιγράψετε στο JSX. JSX; Τι είναι το JSX; -Το JSX είναι απλώς μια επέκταση σύνταξης JavaScript που μοιάζει πολύ με XML. Είναι κάπως άλλος τρόπος να περιγράψουμε το DOM, σκεφτείτε το ως καλύτερο HTML. Τι συμβαίνει με την HTML; -Είναι 2016. Κανείς πλέον δεν κωδικοποιεί απευθείας την HTML. Δικαίωμα. Τέλος πάντων, αν προσθέσω αυτές τις δύο βιβλιοθήκες, τότε μπορώ να χρησιμοποιήσω το React; -Όχι ακριβώς. Πρέπει να προσθέσετε το Babel και, στη συνέχεια, μπορείτε να χρησιμοποιήσετε το React. Άλλη βιβλιοθήκη; Τι είναι η Βαβέλ; -Ω, το Babel είναι ένα transpiler που σας επιτρέπει να στοχεύετε συγκεκριμένες εκδόσεις JavaScript, ενώ κωδικοποιείτε σε οποιαδήποτε έκδοση JavaScript. Δεν χρειάζεται να συμπεριλάβετε τη Babel για να χρησιμοποιήσετε το ReactJS, αλλά εκτός και αν το κάνετε, έχετε κολλήσει στη χρήση του ES5, και ας είμαστε αληθινοί, είναι 2016, θα πρέπει να κωδικοποιείτε στο ES2016+ όπως κάνουν τα υπόλοιπα ωραία παιδιά. ES5; ES2016+; Εδώ χάνομαι. Τι είναι το ES5 και το ES2016+; -ES5 σημαίνει ECMAScript 5. Είναι η έκδοση που στοχεύει τους περισσότερους ανθρώπους αφού έχει εφαρμοστεί από τα περισσότερα προγράμματα περιήγησης στις μέρες μας. ECMAScript; -Ναι, ξέρετε, το πρότυπο scripting JavaScript βασίστηκε το 1999 μετά την αρχική του κυκλοφορία το 1995, τότε όταν η JavaScript ονομαζόταν Livescript και εκτελούνταν μόνο στο Netscape Navigator. Ήταν πολύ ακατάστατο τότε, αλλά ευτυχώς τώρα τα πράγματα είναι πολύ ξεκάθαρα και έχουμε, για παράδειγμα, 7 εκδόσεις αυτής της υλοποίησης. 7 εκδόσεις. Για αληθινό. Και τα ES5 και ES2016+ είναι; -Η πέμπτη και έβδομη έκδοση αντίστοιχα. Περίμενε, τι έγινε με το έκτο; -Εσ6 εννοείς; Ναι, εννοώ, κάθε έκδοση είναι ένα υπερσύνολο της προηγούμενης, οπότε αν χρησιμοποιείτε το ES2016+, χρησιμοποιείτε όλες τις δυνατότητες των προηγούμενων εκδόσεων. Δικαίωμα. Και γιατί να χρησιμοποιήσετε το ES2016+ έναντι του ES6 τότε; -Λοιπόν, ΜΠΟΡΕΙΤΕ να χρησιμοποιήσετε το ES6, αλλά για να χρησιμοποιήσετε δροσερές λειτουργίες όπως το async και το await, πρέπει να χρησιμοποιήσετε το ES2016+. Διαφορετικά, έχετε κολλήσει με γεννήτριες ES6 με κορουτίνες για να μπλοκάρετε ασύγχρονες κλήσεις για σωστή ροή ελέγχου. Δεν έχω ιδέα τι μόλις είπες, και όλα αυτά τα ονόματα προκαλούν σύγχυση. Κοιτάξτε, απλώς φορτώνω μια δέσμη δεδομένων από έναν διακομιστή, μπορούσα να συμπεριλάβω απλώς το jQuery από ένα CDN και απλώς να λάβω τα δεδομένα με κλήσεις AJAX, γιατί δεν μπορώ να το κάνω; -Είναι 2016 φίλε, κανείς δεν χρησιμοποιεί πια jQuery, καταλήγει σε ένα σωρό κωδικούς σπαγγέτι. Όλοι το ξέρουν αυτό. Δικαίωμα. Επομένως, η εναλλακτική μου είναι να φορτώσω τρεις βιβλιοθήκες για να ανακτήσω δεδομένα και να εμφανίσω έναν πίνακα HTML. -Λοιπόν, συμπεριλαμβάνετε αυτές τις τρεις βιβλιοθήκες, αλλά τις ομαδοποιείτε με έναν διαχειριστή λειτουργιών για να φορτώσετε μόνο ένα αρχείο. βλέπω. Και τι είναι ένας διαχειριστής μονάδων; -Ο ορισμός εξαρτάται από το περιβάλλον, αλλά στο διαδίκτυο συνήθως εννοούμε οτιδήποτε υποστηρίζει μονάδες AMD ή CommonJS. Riiight. Και η AMD και το CommonJS είναι…; -Ορισμοί. Υπάρχουν τρόποι για να περιγράψετε πώς πρέπει να αλληλεπιδρούν πολλές βιβλιοθήκες και κλάσεις JavaScript. Ξέρετε, εξαγωγές και απαιτεί; Μπορείτε να γράψετε πολλά αρχεία JavaScript που ορίζουν το AMD AMD ή CommonJS και μπορείτε να χρησιμοποιήσετε κάτι όπως το Browserify για να τα ομαδοποιήσετε. Εντάξει, αυτό είναι λογικό… νομίζω. Τι είναι το Browserify; -Είναι ένα εργαλείο που σας επιτρέπει να ομαδοποιήσετε τις εξαρτήσεις που περιγράφονται στο CommonJS σε αρχεία που μπορούν να εκτελεστούν στο πρόγραμμα περιήγησης. Δημιουργήθηκε επειδή οι περισσότεροι άνθρωποι δημοσιεύουν αυτές τις εξαρτήσεις στο μητρώο npm. μητρώο npm; -Είναι ένα πολύ μεγάλο δημόσιο αποθετήριο όπου έξυπνοι άνθρωποι βάζουν κώδικα και εξαρτήσεις ως λειτουργικές μονάδες. Σαν ένα CDN; -Όχι πραγματικά. Μοιάζει περισσότερο με μια κεντρική βάση δεδομένων όπου ο καθένας μπορεί να δημοσιεύσει και να κατεβάσει βιβλιοθήκες, ώστε να μπορείτε να τις χρησιμοποιήσετε τοπικά για ανάπτυξη και στη συνέχεια να τις ανεβάσετε σε ένα CDN αν θέλετε. Α, σαν τον Μπάουερ! -Ναι, αλλά είναι 2016 τώρα, κανείς δεν χρησιμοποιεί πια τον Bower. Ω, κατάλαβα… οπότε πρέπει να κατεβάσω τις βιβλιοθήκες από το npm; -Ναί. Έτσι, για παράδειγμα, εάν θέλετε να χρησιμοποιήσετε το React, κατεβάζετε τη λειτουργική μονάδα React και την εισάγετε στον κώδικά σας. Μπορείτε να το κάνετε αυτό για σχεδόν κάθε δημοφιλή βιβλιοθήκη JavaScript. Α, σαν Angular! -Angular είναι τόσο 2015. Αλλά ναι. Το Angular θα ήταν εκεί, μαζί με το VueJS ή το RxJS και άλλες ενδιαφέρουσες βιβλιοθήκες του 2016. Θέλετε να μάθετε για αυτά; Ας μείνουμε στο React, ήδη μαθαίνω πάρα πολλά πράγματα. Λοιπόν, αν χρειαστεί να χρησιμοποιήσω το React, το ανακτώ από αυτό το npm και μετά χρησιμοποιώ αυτό το Browserify; -Ναί. Αυτό φαίνεται υπερβολικά περίπλοκο να αρπάξεις ένα σωρό εξαρτήσεις και να τις συνδέσεις μαζί. -Γι' αυτό, χρησιμοποιείτε έναν διαχειριστή εργασιών όπως το Grunt ή το Gulp ή το Broccoli για να αυτοματοποιήσετε την εκτέλεση του Browserify. Μπορείτε ακόμη και να χρησιμοποιήσετε τη Mimosa. Γρυλλισμός; Χαψιά; Μπρόκολο; Μιμόζα; Για το διάολο μιλάμε τώρα; -Διευθυντές εργασιών. Αλλά δεν είναι πια cool. Τα χρησιμοποιήσαμε όπως το 2015, μετά χρησιμοποιήσαμε τα Makefiles, αλλά τώρα τυλίγουμε τα πάντα με το Webpack. Makefiles; Νόμιζα ότι χρησιμοποιήθηκε κυρίως σε έργα C ή C++. -Ναι, αλλά προφανώς στον Ιστό μας αρέσει να κάνουμε τα πράγματα περίπλοκα και μετά να επιστρέφουμε στα βασικά. Το κάνουμε αυτό κάθε χρόνο περίπου, απλώς περιμένετε, πρόκειται να κάνουμε συναρμολόγηση στο διαδίκτυο σε ένα ή δύο χρόνια. Στεναγμός. Ανέφερες κάτι που λέγεται Webpack; -Είναι ένας άλλος διαχειριστής λειτουργιών για το πρόγραμμα περιήγησης, ενώ είναι και ένας τρόπος εκτέλεσης εργασιών. Είναι σαν μια καλύτερη έκδοση του Browserify. Ω, ΟΚ. Γιατί είναι καλύτερα; -Λοιπόν, ίσως όχι καλύτερα, είναι απλώς πιο γνωμικό για το πώς πρέπει να συνδέονται οι εξαρτήσεις σας. Το Webpack σάς επιτρέπει να χρησιμοποιείτε διαφορετικούς διαχειριστές λειτουργιών και όχι μόνο CommonJS, όπως για παράδειγμα εγγενείς μονάδες που υποστηρίζονται από το ES6. Είμαι εξαιρετικά μπερδεμένος με όλο αυτό το CommonJS/ES6. -Όλοι είναι, αλλά δεν πρέπει να σε νοιάζει πια το SystemJS. Ιησούς Χριστός, ένα άλλο ουσιαστικό-js. Εντάξει, και τι είναι αυτό το SystemJS; -Λοιπόν, σε αντίθεση με το Browserify και το Webpack 1.x, το SystemJS είναι ένα δυναμικό πρόγραμμα φόρτωσης λειτουργιών που σας επιτρέπει να συνδέετε πολλές ενότητες σε πολλά αρχεία αντί να τις ομαδοποιείτε σε ένα μεγάλο αρχείο. Περιμένετε, αλλά σκέφτηκα ότι θέλαμε να δημιουργήσουμε τις βιβλιοθήκες μας σε ένα μεγάλο αρχείο και να το φορτώσουμε! -Ναι, αλλά επειδή το HTTP/2 έρχεται τώρα τα πολλαπλά αιτήματα HTTP είναι στην πραγματικότητα καλύτερα. Περιμένετε, δεν μπορούμε απλώς να προσθέσουμε τις τρεις αρχικές βιβλιοθήκες για το React;; -Όχι πραγματικά. Εννοώ, θα μπορούσατε να τα προσθέσετε ως εξωτερικά σενάρια από ένα CDN, αλλά θα πρέπει να συμπεριλάβετε το Babel τότε. Στεναγμός. Και αυτό είναι κακό σωστά; -Ναι, θα περιλαμβάνατε ολόκληρο τον πυρήνα της βαβέλ και δεν θα ήταν αποτελεσματικός για παραγωγή. Κατά την παραγωγή, πρέπει να εκτελέσετε μια σειρά από προκαθορισμένες εργασίες για να ετοιμάσετε το έργο σας που κάνουν το τελετουργικό για να καλέσετε τον Σατανά να μοιάζει με συνταγή με βραστά αυγά. Πρέπει να ελαχιστοποιήσετε τα στοιχεία, να τα αμορφώσετε, να ενσωματώσετε css πάνω από το πάσο, να αναβάλετε σενάρια, καθώς και- Το πήρα, το πήρα. Επομένως, εάν δεν συμπεριλάβατε τις βιβλιοθήκες απευθείας σε ένα CDN, πώς θα το κάνατε; -Θα το μετέφραζα από το Typescript χρησιμοποιώντας έναν συνδυασμό Webpack + SystemJS + Babel. Δακτυλόγραφο; Νόμιζα ότι κωδικοποιούσαμε σε JavaScript! -Το Typescript IS JavaScript, ή καλύτερα, ένα υπερσύνολο JavaScript, πιο συγκεκριμένα JavaScript στην έκδοση ES6. Ξέρεις, εκείνη την έκτη εκδοχή για την οποία μιλήσαμε πριν; Νόμιζα ότι το ES2016+ ήταν ήδη ένα υπερσύνολο του ES6! ΓΙΑΤΙ χρειαζόμαστε τώρα αυτό το πράγμα που ονομάζεται Typescript; -Ω, γιατί μας επιτρέπει να χρησιμοποιούμε JavaScript ως γλώσσα πληκτρολόγησης και να μειώνουμε τα σφάλματα χρόνου εκτέλεσης. Είναι 2016, θα πρέπει να προσθέτετε μερικούς τύπους στον κώδικα JavaScript. Και το Typescript προφανώς το κάνει αυτό. -Η ροή επίσης, αν και ελέγχει μόνο για πληκτρολόγηση, ενώ το Typescript είναι ένα υπερσύνολο JavaScript που πρέπει να μεταγλωττιστεί. Αναστεναγμός… και η ροή είναι; -Είναι ένας έλεγχος στατικού τύπου που φτιάχνουν κάποια παιδιά στο Facebook. Το κωδικοποίησαν σε OCaml, γιατί ο λειτουργικός προγραμματισμός είναι φοβερός. OCaml; Λειτουργικός προγραμματισμός; -Είναι αυτό που χρησιμοποιούν τα cool παιδιά στις μέρες μας φίλε, ξέρεις, 2016; Λειτουργικός προγραμματισμός; Λειτουργίες υψηλής τάξης; Κάρυ; Καθαρές λειτουργίες; Δεν έχω ιδέα τι μόλις είπες. -Κανείς δεν το κάνει στην αρχή. Κοιτάξτε, απλά πρέπει να ξέρετε ότι ο λειτουργικός προγραμματισμός είναι καλύτερος από το OOP και αυτό θα πρέπει να χρησιμοποιήσουμε το 2016. Περιμένετε, έμαθα OOP στο κολέγιο, νόμιζα ότι ήταν καλό; -Το ίδιο και η Java πριν την αγοράσει η Oracle. Εννοώ ότι το OOP ήταν καλό στο παρελθόν, και εξακολουθεί να έχει τις χρήσεις του σήμερα, αλλά τώρα όλοι συνειδητοποιούν ότι η τροποποίηση των καταστάσεων ισοδυναμεί με το να κλωτσάς μωρά, οπότε τώρα όλοι μετακινούνται σε αμετάβλητα αντικείμενα και λειτουργικό προγραμματισμό. Παιδιά Haskell το αποκαλούσαν εδώ και χρόνια, -και μην ξεκινήσω με τα παιδιά της Elm- αλλά ευτυχώς τώρα στον ιστό έχουμε βιβλιοθήκες όπως η Ramda που μας επιτρέπουν να χρησιμοποιούμε λειτουργικό προγραμματισμό σε απλή JavaScript. Βάζεις ονόματα για χάρη του; Τι στο διάολο είναι η Ράμντα; -Οχι. Ράμντα. Σαν Λάμδα. Ξέρεις, εκείνη τη βιβλιοθήκη του David Chambers; David ποιος; -Ντέιβιντ Τσάμπερς. Ωραίος τύπος. Παίζει ένα κακό παιχνίδι Coup. Ένας από τους συντελεστές του Ramda. Θα πρέπει επίσης να ελέγξετε τον Erik Meijer εάν θέλετε σοβαρά να μάθετε λειτουργικό προγραμματισμό. Και ο Erik Meijer είναι…; -Επίσης, λειτουργικός προγραμματιστής. Φοβερός τύπος. Έχει ένα σωρό παρουσιάσεις όπου κάνει σκουπίδια Agile ενώ χρησιμοποιεί αυτό το περίεργο χρωματιστό πουκάμισο. Θα πρέπει επίσης να ελέγξετε μερικά από τα πράγματα από τους Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani- Εντάξει. Θα σε σταματήσω εκεί. Όλα αυτά είναι καλά και ωραία, αλλά νομίζω ότι όλα αυτά είναι τόσο περίπλοκα και περιττά για την απλή ανάκτηση δεδομένων και την εμφάνισή τους. Είμαι σίγουρος ότι δεν χρειάζεται να γνωρίζω αυτούς τους ανθρώπους ή να μάθω όλα αυτά για να δημιουργήσω έναν πίνακα με δυναμικά δεδομένα. Ας επιστρέψουμε στο React. Πώς μπορώ να ανακτήσω τα δεδομένα από τον διακομιστή με το React; -Λοιπόν, στην πραγματικότητα δεν λαμβάνετε τα δεδομένα με το React, απλώς εμφανίζετε τα δεδομένα με το React. Ω, ανάθεμά μου. Τι χρησιμοποιείτε λοιπόν για την ανάκτηση των δεδομένων; -Χρησιμοποιείτε το Fetch για να ανακτήσετε τα δεδομένα από τον διακομιστή. λυπάμαι; Χρησιμοποιείτε το Fetch για να ανακτήσετε τα δεδομένα; Όποιος ονομάζει αυτά τα πράγματα χρειάζεται έναν θησαυρό. -Το ξέρω σωστά; Λήψη είναι το όνομα της εγγενούς υλοποίησης για την εκτέλεση XMLHttpRequests σε έναν διακομιστή. Α, λοιπόν AJAX. -Το AJAX είναι απλώς η χρήση των XMLHttpRequests. Αλλά σίγουρα. Το Fetch σάς επιτρέπει να κάνετε AJAX βασισμένο σε υποσχέσεις, τις οποίες στη συνέχεια μπορείτε να επιλύσετε για να αποφύγετε την κόλαση της επανάκλησης. Κόλαση επανάκλησης; -Ναι. Κάθε φορά που εκτελείτε ένα ασύγχρονο αίτημα στον διακομιστή, πρέπει να περιμένετε την απόκρισή του, η οποία σας αναγκάζει να προσθέσετε μια συνάρτηση σε μια συνάρτηση, η οποία ονομάζεται πυραμίδα επανάκλησης από την κόλαση. Οκ. Και αυτό το πράγμα υπόσχεσης το λύνει; -Πράγματι. Με τον χειρισμό των επιστροφών κλήσεων μέσω υποσχέσεων, μπορείτε να γράψετε πιο κατανοητό κώδικα, να τους κοροϊδέψετε και να τους δοκιμάσετε, καθώς και να εκτελέσετε ταυτόχρονες αιτήσεις ταυτόχρονα και να περιμένετε μέχρι να φορτωθούν όλα. Και αυτό μπορεί να γίνει με το Fetch; -Ναι, αλλά μόνο εάν ο χρήστης σας χρησιμοποιεί ένα αειθαλές πρόγραμμα περιήγησης, διαφορετικά θα πρέπει να συμπεριλάβετε ένα Fetch polyfill ή να χρησιμοποιήσετε το Request, το Bluebird ή το Axios. Πόσες βιβλιοθήκες πρέπει να ξέρω για όνομα του θεού; Πόσοι είναι από αυτούς; -Είναι JavaScript. Πρέπει να υπάρχουν χιλιάδες βιβλιοθήκες που να κάνουν όλες το ίδιο πράγμα. Γνωρίζουμε βιβλιοθήκες, στην πραγματικότητα, έχουμε τις καλύτερες βιβλιοθήκες. Οι βιβλιοθήκες μας είναι τεράστιες και μερικές φορές συμπεριλαμβάνουμε φωτογραφίες του Guy Fieri σε αυτές. Μόλις είπες Guy Fieri; Ας το τελειώσουμε. Τι κάνουν αυτές οι βιβλιοθήκες Bluebird, Request, Axios; -Είναι βιβλιοθήκες για την εκτέλεση XMLHttpRequests που επιστρέφουν υποσχέσεις. Η μέθοδος AJAX του jQuery δεν άρχισε επίσης να επιστρέφει υποσχέσεις; -Δεν χρησιμοποιούμε πλέον τη λέξη «J» το 2016. Απλώς χρησιμοποιήστε το Fetch και συμπληρώστε το πολυ όταν δεν είναι σε πρόγραμμα περιήγησης ή χρησιμοποιήστε το Bluebird, το Request ή το Axios. Στη συνέχεια, διαχειριστείτε την υπόσχεση με αναμονή σε μια ασύγχρονη λειτουργία και έκρηξη, έχετε τη σωστή ροή ελέγχου. Είναι η τρίτη φορά που αναφέρεις το await αλλά δεν έχω ιδέα τι είναι. -Το Await σάς επιτρέπει να αποκλείσετε μια ασύγχρονη κλήση, επιτρέποντάς σας να έχετε καλύτερο έλεγχο για το πότε γίνεται λήψη των δεδομένων και συνολικά αυξάνοντας την αναγνωσιμότητα του κώδικα. Είναι φοβερό, απλά πρέπει να βεβαιωθείτε ότι έχετε προσθέσει την προκαθορισμένη ρύθμιση του σταδίου 3 στη Βαβέλ ή χρησιμοποιείτε συναρτήσεις συντακτικού-ασυγχρονισμού και πρόσθετο μετασχηματισμού-ασυγχρονισμού-σε-γεννήτρια. Αυτό είναι τρελό. -Όχι, τρελό είναι το γεγονός ότι πρέπει να προμεταγλωττίσετε τον κώδικα Typescript και στη συνέχεια να τον μεταγράψετε με το Babel για να χρησιμοποιήσετε το await. Τι; Δεν περιλαμβάνεται στο Typescript; -Στην επόμενη έκδοση, αλλά από την έκδοση 1.7 στοχεύει μόνο το ES6, οπότε αν θέλετε να χρησιμοποιήσετε το await στο πρόγραμμα περιήγησης, πρέπει πρώτα να μεταγλωττίσετε τον κώδικα Typescript που στοχεύει το ES6 και, στη συνέχεια, το Babel που στοχεύει στο ES5. Σε αυτό το σημείο δεν ξέρω τι να πω. -Κοίτα, είναι εύκολο. Κωδικοποιήστε τα πάντα σε Typescript. Όλες οι λειτουργικές μονάδες που χρησιμοποιούν το Fetch τις μεταγλωττίζουν για να στοχεύσουν το ES6, τις μεταφέρουν με το Babel σε μια προεπιλογή σταδίου 3 και τις φορτώνουν με το SystemJS. Εάν δεν έχετε Fetch, συμπληρώστε το πολυ ή χρησιμοποιήστε Bluebird, Request ή Axios και χειριστείτε όλες τις υποσχέσεις σας με αναμονή. Έχουμε πολύ διαφορετικούς ορισμούς για το easy. Λοιπόν, με αυτό το τελετουργικό πήρα τελικά τα δεδομένα και τώρα μπορώ να τα εμφανίσω με το React σωστά; -Η αίτησή σας πρόκειται να χειριστεί τυχόν αλλαγές κατάστασης; Ε, δεν νομίζω. Απλά πρέπει να εμφανίσω τα δεδομένα. -Ω, δόξα τω Θεώ. Διαφορετικά θα έπρεπε να σας εξηγήσω το Flux και υλοποιήσεις όπως Flummox, Alt, Fluxible. Αν και για να είμαι ειλικρινής θα πρέπει να χρησιμοποιείτε το Redux. Απλώς θα πετάξω πάνω από αυτά τα ονόματα. Και πάλι, πρέπει απλώς να εμφανίσω δεδομένα. -Α, αν απλώς εμφανίζετε τα δεδομένα, δεν χρειαζόσασταν το React για αρχή. Θα τα πήγαινες καλά με έναν κινητήρα προτύπων. Πλάκα μου κάνεις; Πιστεύετε ότι αυτό είναι αστείο; Έτσι συμπεριφέρεστε στα αγαπημένα σας πρόσωπα; -Απλώς εξήγησα τι θα μπορούσατε να χρησιμοποιήσετε. Στάση. Απλά σταματήστε. -Εννοώ, ακόμα κι αν χρησιμοποιεί απλώς τη μηχανή προτύπων, θα χρησιμοποιούσα έναν συνδυασμό Typescript + SystemJS + Babel, αν ήμουν στη θέση σου. Πρέπει να εμφανίσω δεδομένα σε μια σελίδα, όχι να εκτελέσω το αρχικό μοιραίο MK του Sub Zero. Απλώς πες μου τι κινητήρα template να χρησιμοποιήσω και θα το πάρω από εκεί. -Είναι πολλά, ποια είσαι εξοικειωμένη; Ουφ, δεν θυμάμαι το όνομα. Ήταν πολύ καιρό πριν. -jΠρότυπα; jQote; ΚΑΘΑΡΟΣ; Ε, δεν χτυπάει το κουδούνι. Άλλο ένα; -Διαφάνεια; JSRender; MarkupJS; KnockoutJS; Αυτό είχε αμφίδρομο δέσιμο. Άλλο ένα; -PlatesJS; jQuery-tmpl; Τιμόνι; Μερικοί άνθρωποι το χρησιμοποιούν ακόμα. Ισως. Υπάρχουν παρόμοια με το τελευταίο; -Μουστάκι, υπογράμμιση; Νομίζω ότι τώρα ακόμη και το lodash έχει ένα για να είμαι ειλικρινής, αλλά αυτά είναι κάπως του 2014. Λάθος.. ίσως ήταν πιο καινούργιο. -Νεφρίτης; DustJS; Οχι. -DotJS; EJS; Οχι. -Νούντζουκς; ECT; Οχι. -Μα, σε κανέναν δεν αρέσει η σύνταξη του Coffeescript πάντως. Νεφρίτης; Όχι, είπες ήδη Jade. -Εννοούσα Pug. Εννοούσα τον Τζαντ. Θέλω να πω, ο Jade είναι πλέον Pug. Στεναγμός. Όχι. Δεν μπορώ να θυμηθώ. Ποιο θα χρησιμοποιούσατε; -Πιθανώς μόνο εγγενείς συμβολοσειρές προτύπου ES6. Αφήστε με να μαντέψω. Και αυτό απαιτεί ES6. -Σωστός. Το οποίο, ανάλογα με το πρόγραμμα περιήγησης που χρησιμοποιώ, χρειάζεται το Babel. -Σωστός. Το οποίο, αν θέλω να συμπεριλάβω χωρίς να προσθέσω ολόκληρη τη βιβλιοθήκη του πυρήνα, πρέπει να το φορτώσω ως ενότητα από το npm. -Σωστός. Κάτι που απαιτεί Browserify ή Wepback ή πιθανότατα αυτό το άλλο πράγμα που ονομάζεται SystemJS. -Σωστός. Το οποίο, εκτός και αν είναι το Webpack, θα έπρεπε ιδανικά να το διαχειρίζεται ένας εκτελεστής εργασιών. -Σωστός. Αλλά, επειδή θα έπρεπε να χρησιμοποιώ λειτουργικό προγραμματισμό και γλώσσες δακτυλογράφησης, πρέπει πρώτα να προμεταγλωττίσω το Typescript ή να προσθέσω αυτό το Flow thingy. -Σωστός. Και μετά στείλτε το στη Βαβέλ αν θέλω να το χρησιμοποιήσω το await. -Σωστός. Έτσι μπορώ να χρησιμοποιήσω το Fetch, τις υποσχέσεις και τον έλεγχο της ροής και όλη αυτή τη μαγεία. -Απλώς μην ξεχάσετε να γεμίσετε το Fetch εάν δεν υποστηρίζεται, το Safari εξακολουθεί να μην μπορεί να το χειριστεί. Ξέρεις τι. Νομίζω ότι τελειώσαμε εδώ. Στην πραγματικότητα, νομίζω ότι τελείωσα. Τελείωσα με τον Ιστό, τελείωσα τελείως με το JavaScript. -Εντάξει, σε λίγα χρόνια όλοι θα κάνουμε κωδικοποίηση στο Elm ή στο WebAssembly. Απλώς θα επιστρέψω στο backend. Απλώς δεν μπορώ να χειριστώ αυτές τις πολλές αλλαγές και εκδόσεις και εκδόσεις και μεταγλωττιστές και transpilers. Η κοινότητα JavaScript είναι τρελή αν πιστεύει ότι κάποιος μπορεί να συμβαδίσει με αυτό. -Σε ακούω. Τότε θα πρέπει να δοκιμάσετε την κοινότητα Python. Γιατί; -Ακούσατε ποτέ για την Python 3; Ενημέρωση: Ευχαριστώ για την επισήμανση τυπογραφικών σφαλμάτων και λαθών, θα ενημερώσω το άρθρο όπως σημειώθηκε. Συζήτηση στο HackerNews και στο Reddit .