Psst! Εδώ είναι γιατί ο ReasonReact είναι ο καλύτερος τρόπος για να γράψετε το React

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

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

Για να το βελτιώσουμε, πρέπει πρώτα να προσδιορίσουμε τα προβλήματά του. Λοιπόν, ποιο είναι το κύριο πρόβλημα του React ως βιβλιοθήκη JavaScript;

Το React δεν είχε αρχικά αναπτυχθεί για JavaScript

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

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

Το React βασίζεται στις αρχές του λειτουργικού προγραμματισμού, καθώς οι εφαρμογές του είναι συνθέσεις λειτουργιών. Παρόλο που το JavaScript διαθέτει ορισμένες από αυτές τις λειτουργίες, όπως λειτουργίες πρώτης κατηγορίας, δεν είναι μια λειτουργική γλώσσα προγραμματισμού. Όταν θέλουμε να γράψουμε έναν ωραίο κωδικό δήλωσης, πρέπει να χρησιμοποιήσουμε εξωτερικές βιβλιοθήκες όπως το Lodash / fp ή το Ramda.

Λοιπόν, τι συμβαίνει με το σύστημα τύπου; Σε React, είχαμε PropTypes. Τους χρησιμοποιήσαμε για να μιμηθούμε τους τύπους στο JavaScript, καθώς δεν είναι μια στατική γλώσσα. Για να εκμεταλλευτείτε την προηγμένη στατική πληκτρολόγηση, πρέπει και πάλι να χρησιμοποιήσουμε εξωτερικές εξαρτήσεις, όπως Flow και TypeScript.

Ανταπόκριση και σύγκριση JavaScript

Όπως μπορείτε να δείτε, το JavaScript δεν είναι συμβατό με τις βασικές αρχές του React.

Υπάρχει άλλη γλώσσα προγραμματισμού που θα ήταν πιο συμβατή με το React από το JavaScript;

Ευτυχώς, έχουμε ReasonML.

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

Ανταπόκριση, JavaScript και σύγκριση αιτίων

Ο λόγος είναι συμβατός με τις βασικές αρχές του React.

Λόγος

Δεν είναι μια νέα γλώσσα. Είναι μια εναλλακτική συνταγή τύπου JavaScript και μια εργαλειομηχανή για το OCaml, μια λειτουργική γλώσσα προγραμματισμού που είναι εδώ και πάνω από 20 χρόνια. Ο λόγος δημιουργήθηκε από τους προγραμματιστές του Facebook που χρησιμοποίησαν ήδη το OCaml στα έργα τους (Flow, Infer).

Ο λόγος, με τη σύνταξη που μοιάζει με C, καθιστά το OCaml προσιτό για άτομα που προέρχονται από mainstream γλώσσες όπως JavaScript ή Java. Σας παρέχει καλύτερη τεκμηρίωση (σε σύγκριση με το OCaml) και μια αυξανόμενη κοινότητα γύρω του. Επιπλέον, καθιστά ευκολότερη την ενσωμάτωση με το υπάρχον κωδικό βάσης JavaScript.

Το OCaml χρησιμεύει ως γλώσσα υποστήριξης για το Reason. Ο λόγος έχει την ίδια σημασιολογία με την OCaml - μόνο η σύνταξη είναι διαφορετική. Αυτό σημαίνει ότι μπορείτε να γράψετε το OCaml χρησιμοποιώντας τη σύνταξη JavaScript τύπου Reason. Ως αποτέλεσμα, μπορείτε να επωφεληθείτε από τα εκπληκτικά χαρακτηριστικά του OCaml, όπως το ισχυρό του σύστημα τύπου και το μοτίβο αντιστοίχισης.

Ας ρίξουμε μια ματιά σε ένα παράδειγμα της σύνταξης του Reason.

ας fizzbuzz = (i) =>
  διακόπτης (i mod 3, i mod 5) {
  | (0, 0) => "FizzBuzz"
  | (0, _) => "Fizz"
  | (_, 0) => "Buzz"
  | _ => string_of_int (i)
  },
για (i σε 1 έως 100) {
  Js.log (fizzbuzz (i))
},

Αν και χρησιμοποιούμε το μοτίβο που ταιριάζει σε αυτό το παράδειγμα, είναι ακόμα αρκετά παρόμοιο με το JavaScript, σωστά;

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

BuckleScript

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

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

ας προσθέσουμε = (a, b) => a + b;
προσθέστε (6, 9);

Αυτός είναι έγκυρος κώδικας και στους δύο λόγους και στη JavaScript.

Το BuckleScript αποστέλλεται με τέσσερις βιβλιοθήκες: η βασική βιβλιοθήκη που ονομάζεται Belt (τυπική βιβλιοθήκη OCaml είναι ανεπαρκής) και συνδέσεις με τα JavaScript, Node.js και DOM API.

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

Ας καταρτίσουμε τον αλγόριθμό μας FizzBuzz που γράφεται στο Reason to JavaScript.

Η συλλογή κώδικα του Αιτιολογικού κώδικα σε JavaScript μέσω του BuckleScript

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

Όχι μόνο ο λόγος μεταγλωττίζεται σε JavaScript, αλλά και στη μητρική και τον bytecode επίσης. Έτσι, μπορείτε να γράψετε μια ενιαία εφαρμογή χρησιμοποιώντας τη σύνταξη Reason και να μπορείτε να την εκτελέσετε στο πρόγραμμα περιήγησης στα τηλέφωνα MacOS, Android και iOS. Υπάρχει ένα παιχνίδι που ονομάζεται Gravitron από τον Jared Forsyth το οποίο είναι γραμμένο σε Reason και μπορεί να τρέξει σε όλες τις πλατφόρμες που μόλις ανέφερα.

JavaScript interop

Το BuckleScript μας παρέχει επίσης διαλειτουργικότητα JavaScript. Όχι μόνο μπορείτε να επικολλήσετε τον κώδικα JavaScript που χρησιμοποιείτε στον κωδικό βάσης του Reason, αλλά ο κώδικας του Reason μπορεί επίσης να αλληλεπιδράσει με αυτόν τον JavaScript. Αυτό σημαίνει ότι μπορείτε εύκολα να ενσωματώσετε τον κώδικα Reason στην υπάρχουσα κωδικοσελίδα JavaScript. Επιπλέον, μπορείτε να χρησιμοποιήσετε όλα τα πακέτα JavaScript από το οικοσύστημα NPM στον κώδικα Reason. Για παράδειγμα, μπορείτε να συνδυάσετε το Flow, το TypeScript και το Reason μαζί σε ένα έργο.

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

Κάθε φορά που χρειάζεται να χρησιμοποιήσετε μια βιβλιοθήκη JavaScript στον κώδικα του Reason, ελέγξτε αν η βιβλιοθήκη έχει ήδη μεταφερθεί στο Reason με την περιήγηση στη βάση δεδομένων Reason Package Index (Redex). Είναι ένας ιστότοπος που συγκεντρώνει διάφορες βιβλιοθήκες και εργαλεία γραμμένα σε βιβλιοθήκες Reason και JavaScript με συνδέσεις Reason. Εάν βρήκατε τη βιβλιοθήκη σας εκεί, μπορείτε απλά να την εγκαταστήσετε ως εξάρτηση και να την χρησιμοποιήσετε στην εφαρμογή Reason.

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

Ευτυχώς, γράφω απλώς μια δημοσίευση σχετικά με τη συγγραφή του Reason bindings, οπότε μείνετε συντονισμένοι!

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

ReasonReact

Αυτό το άρθρο είναι για το γράψιμο του React in Reason, το οποίο μπορείτε να κάνετε χάρη στη βιβλιοθήκη ReasonReact.

Ίσως τώρα σκέφτεστε "ακόμα δεν ξέρω γιατί πρέπει να χρησιμοποιήσω το React in Reason."

Έχουμε ήδη αναφέρει τον κύριο λόγο για να το πράξει - ο λόγος είναι πιο συμβατός με το React από το JavaScript. Γιατί είναι πιο συμβατό; Επειδή το React αναπτύχθηκε για τον λόγο, ή ακριβέστερα για το OCaml.

Ο δρόμος προς τη λογική

Το πρώτο πρωτότυπο του React αναπτύχθηκε από το Facebook και γράφτηκε στο Standard Meta Language (StandardML), ένας ξάδελφος του OCaml. Στη συνέχεια, μεταφέρθηκε στο OCaml. Το React μεταγράφηκε επίσης στο JavaScript.

Αυτό συνέβη επειδή ολόκληρος ο ιστός χρησιμοποιούσε το JavaScript και δεν ήταν πιθανότατα έξυπνο να πούμε: "Τώρα θα χτίσουμε UI στο OCaml." Και λειτούργησε - Το React in JavaScript έχει υιοθετηθεί ευρέως.

Έτσι, συνηθίσαμε να αντιδράσουμε ως βιβλιοθήκη JavaScript. Αντιδρούν μαζί με άλλες βιβλιοθήκες και γλώσσες - Elm, Redux, Recompose, Ramda και PureScript - καθιστώντας τον λειτουργικό προγραμματισμό δημοφιλής στο JavaScript. Και με την άνοδο των Flow και TypeScript, η στατική πληκτρολόγηση έγινε δημοφιλής επίσης. Ως αποτέλεσμα, το μοντέλο λειτουργικού προγραμματισμού με στατικούς τύπους έγινε mainstream στον κόσμο του front-end.

Το 2016, το Bloomberg ανέπτυξε και ανοίγει το BuckleScript, τον μεταγλωττιστή που μετατρέπει το OCaml σε JavaScript. Αυτό τους επέτρεψε να γράψουν ασφαλές κώδικα στο front-end χρησιμοποιώντας το ισχυρό σύστημα OCaml. Παίρνουν τον βελτιστοποιημένο και απίστευτα γρήγορο μεταγλωττιστή OCaml και ανταλλάσσουν το back-end του δημιουργώντας εγγενή κώδικα για ένα JavaScript που δημιουργεί ένα.

Η δημοτικότητα του λειτουργικού προγραμματισμού μαζί με την κυκλοφορία του BuckleScript δημιούργησαν το ιδανικό κλίμα για το Facebook για να επιστρέψουμε στην αρχική ιδέα του React, που αρχικά γράφτηκε σε γλώσσα ML.

ReasonReact

Έλαβαν τη σημασιολογία της OCaml και τη σύνταξη της JavaScript, και δημιούργησαν το Reason. Δημιούργησαν επίσης το Reason wrapper γύρω από τη βιβλιοθήκη React - ReasonReact - με πρόσθετες λειτουργίες όπως η ενσωμάτωση των αρχών Redux στα stateful components. Με αυτόν τον τρόπο, επέστρεψαν στο React στις αρχικές τους ρίζες.

Η δύναμη του React in Reason

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

Αυτό πρόσθεσε ένα άλλο επίπεδο πολυπλοκότητας στην ανάπτυξη του JavaScript.

Η τυπική εφαρμογή React θα έχει τουλάχιστον αυτές τις εξαρτήσεις:

  • στατική πληκτρολόγηση - Flow / TypeScript
  • αμετάβλητο - αμετάβλητο
  • δρομολόγηση - ReactRouter
  • μορφοποίηση - Prettier
  • Λινάρισμα - ESLint
  • βοηθητική λειτουργία - Ramda / Lodash

Ας ανταλλάξουμε τώρα το JavaScript React for ReasonReact.

Χρειαζόμαστε ακόμα όλες αυτές τις εξαρτήσεις;

  • στατική πληκτρολόγηση - ενσωματωμένη
  • αμετάβλητο - ενσωματωμένο
  • δρομολόγηση - ενσωματωμένο
  • μορφοποίηση - ενσωματωμένο
  • linting - ενσωματωμένο
  • βοηθητικές λειτουργίες - ενσωματωμένο

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

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

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

Τύλιξε

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

Ωστόσο, πήγαν μια διαφορετική πορεία. Πήραν το OCaml ως μια ώριμη γλώσσα με εξαιρετική απόδοση και την τροποποίησαν έτσι ώστε να μοιάζει με το JavaScript.

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

Τι έπεται?

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

Ο καλύτερος τρόπος για να αρχίσετε να χρησιμοποιείτε το Reason στα έργα σας είναι να το κάνετε σταδιακά. Έχω ήδη αναφέρει ότι μπορείτε να πάρετε κώδικα Reason και να το χρησιμοποιήσετε στο JavaScript, και αντίστροφα. Μπορείτε να κάνετε το ίδιο πράγμα με το ReasonReact. Παίρνετε το στοιχείο ReasonReact και το χρησιμοποιείτε στην εφαρμογή React JavaScript και αντίστροφα.

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

Αν θέλετε να δημιουργήσετε μια εφαρμογή χρησιμοποιώντας το React in Reason και να μάθετε τα βασικά του Reason με έναν πρακτικό τρόπο, ελέγξτε το άλλο άρθρο στο οποίο θα δημιουργήσουμε μαζί ένα παιχνίδι Tic Tac Toe.

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